Найти в Дзене

Почему Facebook создал React - и скрывал это 2 года

2011 год. Инженеры Facebook сидят перед монитором и пытаются добавить простую кнопку в рекламный модуль. Код ломается. Страница виснет. Пользователи жалуются. Проблема не в одной кнопке - проблема в том, что весь Facebook Ads превратился в клубок из тысяч DOM-манипуляций, которые никто уже не контролирует. Именно тогда Джордан Уолк, обычный разработчик из команды, решил написать что-то своё. Так появился React - библиотека, которая перевернула фронтенд-разработку. Но Facebook молчал о ней два года. Уолк назвал свой прототип FaxJS. Идея была безумной для 2011 года: вместо того чтобы напрямую менять HTML на странице, создать виртуальную копию DOM в JavaScript и работать с ней. Звучит как лишний слой сложности, правда? Но это решало главную боль Facebook: когда десятки компонентов меняют одну и ту же страницу, невозможно предсказать, что сломается. Виртуальный DOM работал как черновик. Ты вносишь изменения, React сравнивает черновик с оригиналом и применяет только то, что реально изменил
Оглавление

2011 год. Инженеры Facebook сидят перед монитором и пытаются добавить простую кнопку в рекламный модуль. Код ломается. Страница виснет. Пользователи жалуются. Проблема не в одной кнопке - проблема в том, что весь Facebook Ads превратился в клубок из тысяч DOM-манипуляций, которые никто уже не контролирует.

Почему Facebook создал React - и скрывал это 2 года
Почему Facebook создал React - и скрывал это 2 года

Именно тогда Джордан Уолк, обычный разработчик из команды, решил написать что-то своё. Так появился React - библиотека, которая перевернула фронтенд-разработку. Но Facebook молчал о ней два года.

FaxJS: эксперимент, который никто не должен был увидеть

Уолк назвал свой прототип FaxJS. Идея была безумной для 2011 года: вместо того чтобы напрямую менять HTML на странице, создать виртуальную копию DOM в JavaScript и работать с ней. Звучит как лишний слой сложности, правда? Но это решало главную боль Facebook: когда десятки компонентов меняют одну и ту же страницу, невозможно предсказать, что сломается.

Виртуальный DOM работал как черновик. Ты вносишь изменения, React сравнивает черновик с оригиналом и применяет только то, что реально изменилось. Никаких лишних перерисовок, никакой путаницы. Звучит логично сейчас, но в 2011-м это казалось извращением.

Facebook протестировал FaxJS внутри компании. Сработало. Ads перестал виснуть, код стал читаемым. Но решили не светить технологию - слишком сырая, слишком странная. Пусть поживёт внутри, обкатается на реальных проектах.

2013 год: шок на JSConf

Прошло два года. React дорос до стабильной версии. Facebook выкатил его в открытый доступ на конференции JSConf US в мае 2013 года. Сообщество разработчиков отреагировало... негативно.

"Виртуальный DOM? Вы серьёзно? Это же лишняя абстракция!"

"Зачем нам ещё одна библиотека, когда есть Angular и Backbone?"

"Смешивать HTML и JavaScript в одном файле - это нарушение всех принципов!"

JSX - синтаксис React, где HTML пишется прямо внутри JavaScript - вызвал особенно много критики. Десять лет учили разделять логику и разметку, а тут Facebook приходит и ломает всё.

Первые месяцы после релиза React игнорировали. Разработчики продолжали писать на Angular, Ember, Backbone. Никто не хотел переучиваться ради сомнительной идеи от социальной сети.

Как React победил Angular

Переломный момент наступил в 2014-2015 годах. Angular 2 анонсировали полный редизайн, который ломал обратную совместимость. Тысячи проектов на Angular 1 нужно было переписывать с нуля. Сообщество взбунтовалось.

Как React победил Angular
Как React победил Angular

React в это время спокойно развивался. Без резких поворотов, без революций. Обновления выходили плавно, старый код продолжал работать. Плюс появился React Native - возможность писать мобильные приложения на том же React. Это решало реальную боль: одна команда, один язык, код переиспользуется между веб-версией и приложением.

Крупные компании начали переходить. Netflix, Airbnb, Instagram (который тоже принадлежал Facebook), Uber - все выбрали React. Не потому что модно, а потому что работает.

К 2016 году React обогнал Angular по популярности. GitHub показывал сотни тысяч звёзд, npm скачивания росли экспоненциально. То, что три года назад называли безумием, стало стандартом индустрии.

Почему Facebook молчал два года

Зачем держать технологию внутри компании, если она решает реальные проблемы? Несколько причин.

Первая - риски. Открыть сырой код - получить шквал критики и багрепортов. Facebook хотел быть уверен, что библиотека работает на масштабе миллиардов пользователей.

Вторая - конкуренты. В 2011-2013 годах Google активно продвигал Angular. Если бы Facebook преждевременно раскрыл карты, Google мог бы скопировать идеи и выпустить аналог быстрее.

Третья - внутренняя культура. Facebook всегда тестировал всё на себе. Новый алгоритм ленты? Сначала на сотрудников, потом на небольшую группу пользователей, потом на всех. С React было так же: обкатали внутри, убедились в надёжности, потом отдали миру.

Что React изменил

До React фронтенд-разработка была хаосом. Каждый проект писался по-своему, переиспользовать код было сложно, масштабировать - ещё сложнее. React привнёс порядок: компонентный подход, предсказуемость, экосистему инструментов.

Сейчас React - основа для миллионов сайтов и приложений. Facebook достиг цели: решил свою внутреннюю проблему и попутно изменил всю индустрию.

А началось всё с того, что одному разработчику надоело чинить баги в рекламном модуле.