История фреймворка React: как Фейсбук приобрел Инстаграм и почему это привело к открытию исходного кода React.js
Сегодня React — одна из самых популярных в мире библиотек JavaScript для пользовательского интерфейса: более 70 тыс. «звезд» на Гитхабе, не менее 1100 авторов и миллионы скачиваний каждый месяц — кроме того, этот фреймворк используется более чем в 4 тыс. компаний. Но когда Фейсбук впервые показал React миру, это мало кого обрадовало.
Мы решили погрузиться в историю рождения одной из самых популярных технологий в мире разработки ПО — React, и пригласили Пита Ханта (Pete Hunt), стоявшего у истоков этой библиотеки (сейчас он генеральный директор компании Smyte), чтобы он наконец-то рассказал о том, для чего создавали React, почему эта технология стала популярной в Фейсбуке после приобретения Инстаграма, и как она в итоге вышла в люди.
Основные моменты
От приложения Facebook Camera к приобретению Инстаграма
Марк (Цукерберг) собрал всех и говорит: «Мобильные устройства «выстрелят», поэтому срочно бросаем всё и переводим ресурсы на мобильные разработки». Мне казалось, это какая-то сумасшедшая идея: мы не могли поддерживать работу самого большого фотосайта в сети, имея горстку людей в команде. Совершенно бессмысленно переводить людей на разработку приложений для iOS и Android, которые составляют совсем небольшую долю нашего трафика. Но оказалось, что Марк был на 100% прав — поэтому я и не генеральный директор Фейсбука…
Мы разработали приложение Facebook Camera, и даже гордились тем, что получилось… Но пришел Инстаграм — и наш проект канул в Лету…
Ребятам из Инстаграма дали гараж на территории Фейсбука, где можно было сидеть и спокойно пилить свою идею. Они пользовались надежными системами безопасности Фейсбука, но кроме того продолжали использовать AWS, а еще — разрабатывали собственную стратегию продукта, насколько я могу судить… И я был первым сотрудником из Фейсбука, которого перевели в Инстаграм…
Переведено в Alconost
Инстаграму нужен веб-сайт
У них уже были страницы с фото, а веб — только вроде как в планах, поэтому сначала команда сосредоточились на мобильных устройствах: Инстаграм — это всегда в первую очередь смартфоны, планшеты и т. п. Кроме того, у них много публичного контента, поэтому, думаю, важной частью работы была и оптимизация для поисковиков…
…Нельзя было посмотреть все загруженные кем-то фото. Мы хотели это исправить, но была проблема: на серверах приложений работал Django, на серверах баз данных — Postgres, которая может поддерживать только определенное число подключений… дальше нагружать было некуда, а обслуживание множества динамических веб-страниц — это ощутимая нагрузка, особенно когда они видны из Интернета. Мы решили, что нужно перенести рендеринг на сторону клиента.
Я пошел к фронтенд-разработчикам Фейсбука (команда UIE) и спросил: «Ребята, нам нужен JavaScript-фреймворк. Какой вы посоветуете?» Они отвечают: «Ну… у нас сейчас в работе три-четыре экспериментальных проекта: BoltJS, JSHTML и вот такая штука — React». …Я посмотрел эти библиотеки, поговорил с теми, кто над ними работал, и решил попробовать React.
React набирает популярность в Фейсбуке
Ко мне пришли разработчики из отдела рекламы — а это одни из самых сильных фронтендеров в Фейсбуке — и спросили: «Ну как тебе React в работе?» А я отвечаю: «Да я теперь фанат этой штуки, ни о чем другом и слышать не хочу»…
Оказалось, что Джордан Вальке (Jordan Walke) — тот, кому пришло в голову сделать React, — из команды отдела рекламы. Работая над каким-то продуктом, он подумал: «Что-то здесь менять — сплошная головная боль: пропустишь где-то точку с запятой — и компания может потерять дневной доход». Джордан работал над своей идеей по ночам, на выходных, задерживался после работы — но в конце концов смог убедить остальную команду дать ему погрузиться в этот проект целиком. Он корпел над фреймворком целыми днями, и в итоге разработал компонент опережающего ввода и развернул его, кажется, в небольшом блоке «Ленты новостей», но это было не отдельное приложение — первым полноценным приложением стал Инстаграм…
Так вот, в отделе рекламы решили: «Оно работало в «Ленте новостей», работало в Инстаграме — попробуем его у себя». То же сказали и в команде мобильного поиска: «Оно работало в «Ленте новостей», работало в Инстаграме и, говорят, ребята из отдела рекламы собираются внедрить у себя — так попробуем и мы», — ну и так далее.
Открытие исходного кода фреймворка React
Все причастные в Фейсбуке тогда очень волновались, ведь мы для этого писали документацию, готовили всё.
Позже в том году была конференция JSConf EU. Я написал выступление, в котором говорилось как-то так: «Я не собираюсь убеждать вас, что React — лучше. Я просто расскажу, чем эта библиотека отличается, и покажу три-четыре подхода, которые раньше никто не пробовал использовать». В этот раз слушатели оказались намного благосклоннее (в сравнении с первым выступлением о фреймворке React).
Обсуждая React, часто упускают из виду вопрос стабильности. Когда я уходил из Фейсбука, компонентов React насчитывались уже десятки тысяч — а это сотни тысяч строк кода. Если сделать во фреймворке какое-то изменение, которое сломает совместимость, то нельзя ведь просто сказать всем остальным переписать компоненты — все эти сотни тысяч строк… Приходилось этим заниматься команде React. Поэтому нужна была какая-то автоматизация с помощью каких-то сценариев, и эти сценарии нужно было публиковать в сообществе: подход Angular 2 здесь применить не получалось, потому что вносили кардинальные изменения и переписывали компоненты одни и те же люди.
Общие размышления и мысли о будущем библиотеки React
Мне хотелось бы, чтобы команда React могла давать сторонним библиотекам значки-сертификаты, которые как бы говорили остальным: «Мы благословляем эту библиотеку и считаем, что она реализует правильный подход».…
Недавно начал проходить тесты Fiber — похоже, это и правда классный проект. В нем много по-настоящему интересных идей, что радует. Объявление о разработке React VR — тоже интересное событие. Только подумайте, на сколько всяких платформ можно ориентироваться, используя React Native или просто React: iOS, Android, Интернет, а теперь еще и виртуальная реальность…Получается в итоге огромный сегмент, и это здорово, ведь можно минимально научить разработчиков использовать JavaScript, дать основы React — и тогда, имея документацию по API всех этих платформ, они смогут сразу приступить к делу и начать плодотворно работать. Это здорово, и мне очень приятно видеть, как всё обернулось.
Pete Hunt, CEO @ Smyte. OG React.js. Ex-Facebook and Instagram
Йонас: Всем привет. Пит, расскажете нам немного о себе?
Пит: Конечно. Меня зовут Пит Хант. Когда-то давно я работал в Фейсбуке — в команде фреймворка React. В последние года два — два с половиной я являюсь генеральным директором и сооснователем компании под названием Smyte.
В Фейсбуке делают так: на первые шесть недель вас включают в программу учебного курса (bootcamp) — не знаю, так ли теперь, но тогда это были первые шесть недель работы. Вам дают самые разные задания, и вы над ними работаете: фронтенд, бэкенд, инфраструктура, мобильное ПО и так далее по используемым технологиям.
Й: Что насчет работы с фото? Приходилось ли сталкиваться с какими-то сложностями при масштабной работе с видео и фото?
П: Конечно. Я присоединился к работе с видео, и занимался чем-то вроде поддержки и обслуживания.
В то время одновременно происходило много всего: появилась «Хроника», и в ней было много поисковых функций и тому подобного. Еще важно, что в то время происходил выход на мобильные платформы, поэтому буквально через пару месяцев после моего прихода в компанию Марк (Цукерберг) собрал всех
«Мобильные устройства «выстрелят», поэтому срочно бросаем всё и переводим ресурсы на мобильные разработки».
— Марк Цукерберг
Многих перевели с веб-разработки в команду мобильных платформ, и это меня разозлило, поскольку я не понимал, зачем это нужно. Смартфона у меня не было, поэтому вся эта «мобильность» меня не прельщала. Это был, кажется, 2011 год, а первый смартфон у меня появился, только когда я получил диплом.
Мне казалось, это какая-то сумасшедшая идея: мы не могли поддерживать работу самого большого фотосайта в сети, имея горстку людей в команде. Совершенно бессмысленно переводить людей на разработку приложений для iOS и Android, которые составляют совсем небольшую долю нашего трафика. Но оказалось, что Марк был на 100% прав — поэтому я и не генеральный директор Фейсбука.
Й: Да, это была хорошая идея.
П: Без сомнений. Кого-то забрали в команды мобильных разработок, и среди всего этого у менее занятых людей в Фейсбуке появилась возможность купить кое-какие продукты и элементы инфраструктуры. Так что когда приобрели Инстаграм, нам сказали так: «Нужен опытный человек из команды, работавшей с фото, который отправится в Инстаграм, разработает им нужные веб-компоненты, интегрирует их и поможет ребятам влиться в команду Фейсбука. В общем, нужно правильно их принять». И я оказался в числе первых сотрудников Фейсбука, которых перевели в Инстаграм.
Й: Но вы все еще не были уверены, что будущее за мобильными платформами?
П: Я, вообще говоря, до сих пор пытаюсь понять, как это получилось. В общем, в один прекрасный день (или вечер) нам на почту пришло электронное письмо — вроде такого: «Ребята, завтра придите на работу пораньше: у нас будет важное объявление». Мы пришли — и вот что нам сообщили: «Дело в том, что где-то через час будет объявлено о том, что мы купили Инстаграм — их команда придет сегодня днем познакомиться». «Ничего себе!» — подумал я.
Й: Ну да, интересно получалось. Итак, днем к вам в офис пришло 14 человек.
П: Да, думаю, там было что-то около 14 человек. Где-то есть фото, на котором можно посчитать точно.
Й: Вам нравилась Facebook Camera?
П: Ну, я так не сказал бы. Я уже проникся духом компании и желал ей успеха, хотел, чтобы мы выиграли, а это совсем не было похоже на успех… но оказалось, я ошибался.
Ребятам из Инстаграма дали гараж на территории Фейсбука, где можно было сидеть и спокойно пилить свою идею. Они пользовались надежными системами безопасности Фейсбука, но кроме того продолжали использовать AWS, а еще — разрабатывали собственную стратегию продукта, насколько я могу судить. Интересно, что выглядело это все очень обособленно. Я не говорил ни с Марком, ни с руководством, ни с кем-то еще, но казалось, что им просто дали возможность делать то, чего они хотели.
Й: Так как случилось так, что вас перевели в Инстаграм?
П: Им нужен был веб-сайт.
Й: А его у них тогда не было?
П: У них уже были страницы с фото, а веб — только вроде как в планах, поэтому сначала команда сосредоточились на мобильных устройствах: Инстаграм — это всегда в первую очередь смартфоны, планшеты и т. п. Кроме того, у них много публичного контента, поэтому, думаю, важной частью работы была и оптимизация для поисковиков… Я, по сути, был первым штатным разработчиком, которого отправили в команду Инстаграма из Фейсбука.
Й: Когда вы туда пришли, у них еще не было фронтенд-фреймворка?
П: Была задача разработать что-то, что, как нам казалось, будет полноценным набором веб-приложений. Мы собирались начать со страниц фото и профиля, а затем сделать страницы хэш-тегов, карту (например, для геопоиска) и тому подобное — все это для веб-сайта Инстаграма.
Й: А до этого были страницы для отдельных фото?
П: Да, была страница для фото, затем появился сайт instagram.com, который служил скорее рекламным щитом для приложения. Это все, что у них было.
Й: Да, помню, можно было только просматривать фото.
П: Ага, и нельзя было посмотреть все загруженные кем-то фото. Мы хотели это исправить, но была проблема: на серверах приложений работал Django, на серверах баз данных — Postgres а эта БД может поддерживать только определенное число подключений. У нас было ограничение по возможностям, причем мы уже и так выжимали все что можно — дальше нагружать было некуда, а создание и обслуживание множества динамических веб-страниц — это ощутимая нагрузка, особенно когда они видны из Интернета. Мы решили, что нужно перенести рендеринг на сторону клиента.
В Фейсбуке старались не использовать JavaScript: клиенту нужно больше загружать, увеличивается нагрузка на процессор, а это ведь еще один язык, который придется изучить. Поэтому у нас было совсем немного JavaScript-кода, но этот код использовался повсюду. Я как бы знал JavaScript, но не очень. Поэтому я пошел к фронтенд-разработчикам Фейсбука (команда UIE — разработки пользовательского интерфейса) и спросил: «Ребята, нам нужен JavaScript-фреймворк. Какой вы посоветуете?»
Они отвечают: «Ну… у нас сейчас в работе три-четыре экспериментальных проекта: BoltJS, JSHTML и вот такая штука — React». Для каждого из этих решений были пилотные проекты, возможно, что-то еще… я помню, что, кажется, Фейсбук нанял разработчиков из WebOS, а эти ребята хороши в своем деле. Еще у нас был мобильный фреймворк Javelin, поэтому разных вариантов было много. Я посмотрел эти библиотеки, поговорил с теми, кто над ними работал, и решил попробовать React.
«Между точками «давайте попробуем React» и «давайте запустим что-нибудь в работу» было много крови, пота и слёз».
Й: Что заставило вас принять такое решение? Что насчет других вариантов? Просто понравилось название или?..
П: У всех перечисленных решений был свой «hello world», но если раньше вам приходилось заниматься рендерингом в клиентских приложениях, то увидев React, вы могли бы подумать, что это слишком хорошо, чтобы быть правдой. Но мы запустили этот фреймворк, и он отлично работал.
Й: На странице профиля?
П: На странице профиля в Инстаграме.
Й: Значит, вас впечатлила скорость работы. Поняв, какая классная штука этот React, вы сразу начали разрабатывать на нем страницу профиля.
П: Да, но между точками «давайте попробуем React» и «давайте запустим что-нибудь в работу» было много крови, пота и слёз.
Кое-что в Фейсбуке умели делать очень хорошо и даже лучше кого бы то ни было, но было и то, для чего просто использовали облачные сервисы.
Вот хороший пример: весь JavaScript-код Фейсбука, включая React, собирался разработанным внутри компании упаковщиком — очень продвинутым инструментом, в котором использовалось то ли машинное обучение, то ли какая-то статистика: эта штука просматривала журналы скачивания отдельных модулей и схему зависимостей и проводила оптимизацию — указывала, какие модули следует объединить, и что нужно загружать заранее.
Упаковщик, кстати, был написан кандидатом наук, и работал просто потрясающе: лучше, чем Webpack, лучше, чем все, что можно найти в открытых исходных кодах и по сей день, но, к сожалению, он был сильно завязан на инфраструктуре Фейсбука.
В конце концов я пошел к руководству и взял команду то ли из трех, то ли из четырех разработчиков, которые мне помогали: мы хотели дописать и собрать весь этот набор бизнес-продуктов. К этому моменту мы уже попробовали React — он нас очаровал, и мы собирались делать на нем всё.
Й: А в какой момент вы поняли, что React — классная штука и ее нужно использовать? Может, были какие-то предчувствия? Ну, например: «Пожалуй, если взяться за React, получится круто». Как оно было?
П: Работала вся команда. Я тоже подчистил много чего в API, поправил кое-что в производительности и запаковал все для Инстаграма — а потом мы использовали многое из этого, когда открывали исходные коды.
Й: Итак, если посмотреть, как это всё развивалось, выходит, у вас была идея, которую вы попробовали — и она доказала свою жизнеспособность. Кстати, сколько пользователей было в Инстаграме на тот момент?
П: Уже не помню, но вроде не меньше десятка миллионов.
Й: Итак, вы знали, что в некоторой степени эта штука хорошо масштабируется. Вы сразу же начали писать все остальное, используя React?
П: Мне казалось, что этот фреймворк — просто сверхкрутая штука, с по-настоящему новаторским подходом; хотелось быть частью этого. Поэтому я начал в свободное время вносить свою лепту в код — в кодовую базу на стороне Фейсбука. По мере выпуска новых продуктов я исправлял ошибки, подчищал API, писал документацию и так далее.
Й: В Инстаграме.
П: Да — но эти исправления возвращались в ядро React.
Й: Исходный код был открыт с первого же дня?
П: Не совсем. Фейсбук полностью открыл исходный код библиотеки React команде Инстаграма.
Единым источником модулей была кодовая база Фейсбука, так что когда нам нужно было воспользоваться какой-то функцией, мы просто выбирали нужный код и экспортировали его в Инстаграм. И всегда это выливалось в проблему: у меня был «хакерский» скрипт, который переводил всё в RequireJS и мог поломать, например, что-нибудь — приходилось исправлять. Так что в то время о стабильности можно было только мечтать.
Й: Вы вносили изменения, и в основном это происходило постепенно. Затем нужно было написать «Ленту новостей», и вы, очевидно, собирались использовать React. А что было после «Ленты новостей», помните?
П: Затем в Фейсбуке разработчикам из отдела рекламы тоже понадобилось делать рендеринг на стороне клиента: они переписывали какой-то важный рекламный продукт и поэтому искали нужный инструмент — так же, как я за пару месяцев до этого. Сначала у них был BoltJS, но потом они перешли на React.
Создавая приложения с помощью BoltJS и других подобных решений, вы используете похожие подходы и компоненты. Обычно после первоначального рендеринга приходится вручную обновлять модель DOM — если у вас не React. Когда я увидел, что делает React, это вынесло мне , я не понимал, как это вообще возможно.
Теперь у нас есть довольно четкое понимание того, как работает React: представьте себе виртуальную модель DOM, в которую вы вносите разностные изменения, что происходит довольно быстро. А в то время обновление модели DOM было ощутимой проблемой. Помню, мы тогда выкатывали продукты на IE7 и 8, и когда я увидел, насколько быстрым может быть рендеринг, стало понятно, что это именно то, что нужно.
Й: Хм, это всё очень интересно. Похоже, там все было очень гармонично продумано. Прошу прощения, вы говорили, что команда отдела рекламы поглядывала на BoltJS, а затем они перешли на React.
П: Да, ко мне пришли ребята из команды рекламы — а это одни из самых сильных фронтенд-разработчиков в Фейсбуке — и спросили: «Ну как тебе React в работе?» А я отвечаю: «Да я теперь фанат этой штуки, ни о чем другом и слышать не хочу»
Тогда они провели пару тестов производительности, команда UIE также провела несколько внутренних тестов, и всем такая модель программирования очень понравилась: выходило, что это решение будет работать достаточно быстро, чтобы решать нужные задачи.
Й: Ну да, интересно получалось. А что нужно было разработчикам из отдела рекламы — для чего они хотели использовать React? У них были какие-то проблемы? С чем они работали до этого?
П: Вам когда-нибудь приходилось размещать рекламу на Фейсбуке?
Й: Да, было дело.
П: Это довольно сложно. Там же разные демографические группы, они по-разному тратят деньги, поэтому нужно понять, где человек находится. Если делать рекламу в Израиле, она должна отображаться справа налево или слева направо? Еще нужен предварительный просмотр рекламного блока, который будет в точности соответствовать фактическому, поэтому нужен способ его рендеринга в том же коде, причем и возможность редактирования нужно обеспечить, а еще есть пограничные случаи между созданием и редактированием рекламы. И работать всё должно быстро. А если кнопка «Сохранить» вдруг не сохранит изменения, то можно случайно потратить деньги на то, что покупать не собирался. Так что это очень напряженная работа.
Оказалось, что Джордан Вальке (Jordan Walke) — тот, кому пришло в голову сделать React, — из команды отдела рекламы. Работая над каким-то продуктом, он подумал: «Что-то здесь менять — сплошная головная боль: пропустишь где-то точку с запятой — и компания может потерять дневной доход».
Джордан работал над своей идеей по ночам, на выходных, задерживался после работы, и в конце концов смог убедить в своей правоте остальную команду (понятия не имею, каким образом). Он корпел над фреймворком целыми днями, и в итоге разработал компонент опережающего ввода и развернул его, кажется, в небольшом блоке «Ленты новостей», но это было не отдельное приложение — первым полноценным приложением стал Инстаграм.
Й: Так получается, что React уже как-то использовался для рекламы — или все-таки нет?
П: Он не использовался для рекламы — его немножко применили в «Ленте новостей». Это было что-то вроде эксперимента: у 1% пользователей в «Ленте новостей» окно комментариев рендерилось на стороне клиента.
Й: Интересно… Оно работало довольно хорошо, но реклама — это серьезное дело, потому что за ее счет кормится вся компания. Полагаю, сначала этот подход проверяли где-то на 1% пользователей, затем смотрели на тесты производительности — так реклама понемногу переводилась на React.
П: Именно. И после этого в Фейсбуке де-факто утвердился новый стандарт написания JavaScript-приложений.
Если работоспособность инструмента удалось доказать на рекламе, то вы, считай, доказали это на всех «тяжелых» пользовательских интерфейсах. И тут возникает второй вопрос: будет ли эта штука работать на мобильных устройствах? Мы провели тесты и выяснили, что там, где на мобильных устройствах работает JavaScript, там будет хорошо работать и React.
Но для Фейсбука был еще один серьезный вопрос: насколько можно нагрузить рендерингом клиента?
Й: Фейсбук стал основным пользователем библиотеки React еще до того, как Инстаграм завязал всё на нее?
П: Первым был Инстаграм. Там React был повсюду, но «контактная зона» продукта в этом случае была меньше рекламы в Фейсбуке: нам не нужно было много внимания уделять интернационализации, локализации и подобному. Да, мы переводили строки, но знать о разных валютах, например, было без надобности. Не нужен был и предварительный просмотр одних компонентов внутри других — и так далее. На тот момент мой JavaScript-код уже не нужно было проверять — я вполне уже справлялся с этим сам.
Й: А когда и как пришло решение открыть исходные коды фреймворка React?
П: Я это очень хорошо помню… Я восхищался работой этого фреймворка — и не я один: в Фейсбуке у него завелось много поклонников. Например, Майкл Лоуман (Michael Lowman) — дизайнер Инстаграма: это он придумал первоначальный веб-сайт и логотип, который используется и сегодня. Были и другие ребята из Инстаграма, но они оставались немного в тени.
Мы все были настолько в восторге от этой штуки, что когда мне сделали заманчивое предложение — должность главного технического директора в одном стартапе (уйти из Фейсбука и пойти к ним, причем у них уже выручка в миллионы долларов была), я ответил: «Хорошо, но я хочу помочь ребятам открыть исходные коды фреймворка React, так что месяцев через шесть…» И я так сказал не потому, что я такой классный, а потому, что эта идея меня совершенно захватила.
А ведь это предложение было бы серьезным продвижением в моей карьере. Но куда там: «Нет, извините, я намертво прибит к ракете под названием React».
Й: React — это будущее.
П: Да, энтузиазма у нас было хоть отбавляй. В том числе и потому, что React создавали одни из лучших разработчиков, которых я знаю, кроме того, параллельно было множество конкурирующих решений, и мы точно знали, что делать что-то на шаблонах — неверно. А еще мы знали, что решение с разностными изменениями в виртуальной модели DOM работало в большинстве случаев, которые нам удалось проверить. А когда оно не работало, находились обходные пути, и можно было написать 90% приложения, используя React, а в оставшихся 10% обойтись без этой библиотеки.
Й: Как появилась идея открыть исходные коды? Вы решили, что вам определенно нужно выпустить эту штуку в свет, чтобы все могли ею пользоваться, или это просто стандартный подход: если есть компонент, хорошо работающий в разных продуктах, вы начинаете думать о том, чтобы открыть исходные коды?
П: Нам всем этого хотелось. С открытым исходным кодом у Фейсбука как-то не складывалось: портфолио компании походило скорее на кучу выброшенных за стены компании и забытых проектов. Есть такая известная многим библиотека для iOS — Three20, и за нее все iOS-разработчики ненавидят Фейсбук: их проекты зависели от этой библиотеки, а потом компания просто перестала ее поддерживать — и это, естественно, многих разозлило. Так что в этой области Фейсбук был не очень хорош, но мне кажется, они в какой-то момент решили исправиться, и примерно тогда же наняли Джеймса Пирса (James Pearce). И так удачно совпало, что в это время среди разработчиков как раз было много желающих открыть исходный код библиотеки React.
Наконец мы все подготовили и решили объявить об этом на конференции JSConf 2013 — не уверен, помните ли вы, но спонсором конференции был Фейсбук, и за это компания получила возможность сделать вступительный доклад или что-то в таком роде. Была какая-то договоренность насчет выступления. На сцену поднялся Том Оччино (Tom Occhino) — очень обаятельный парень, а вскоре за ним вышел Джордан — самый умным разработчик, которого я когда-либо встречал. И они сказали что-то в таком духе: «Короче, мы придумали новый способ создания веб-приложений; вы всё делаете неправильно — смотрите, как это делаем мы», — по крайней мере, так это восприняли. А выглядело это так, будто кто-то предложил засунуть XML в JavaScript и сказал, что всё будет в порядке. Поэтому реакция была примерно такая: «XML? Да я ненавижу XML, и вообще, нужно ведь разделять разметку и JavaScript-код, и стили… А вы говорите засунуть всё это в один файл — это уж слишком».
И когда в конце выступления было объявлено о том, что эта штука называется React, мы нажали «OK» и выложили свой код на Гитхаб. Все причастные в Фейсбуке тогда очень волновались, ведь мы для этого писали документацию, готовили всё.
Й: Публика определенно не впечатлилась.
П: Скорее впечатлилась так, что проект сразу возненавидели — и, кажется, это была последняя конференция, на которой Джордан выступал. Мы-то думали, что React всем понравится, и не понимали, что у остальных будет совершенно другое мнение. Я был полон энтузиазма, мне казалось что за этой библиотекой будущее … Мы ведь успели к тому времени открыть исходный код Инстаграму — и успешно перенесли его в чужую кодовую базу. Поэтому мы знали, что этой штукой можно пользоваться.
Й: Я не знал, что вы, оказывается, были одними из первых, кто использовал Webpack.
П: Именно так. Я нашел Webpack и, пожалуй, это я запишу себе в заслуги. У нас тогда назрела потребность в разделении кода. Работая над всеми этими продуктами, мы хотели, чтобы при просмотре страницы с фото не загружался код страницы профиля: это вопрос и производительности, и оптимизации для поисковых систем.
Й: На тот момент, когда вы открывали исходные коды библиотеки React, вы использовали Webpack?
П: Возможно, мы как раз заканчивали переход. Впрочем, я не очень помню, что за чем происходило, но вроде как Webpack у нас появился вскоре после того, как Фейсбук открыл исходные коды React.
Й: А что, по-вашему, было основным стимулом популяризации библиотеки? И как это выглядело для вас «изнутри»?
П: Давайте я расскажу, как эта библиотека набирала сторонников. На конференции JSConf 2013 все ее ненавидели.
Никто React не использовал, и это было очень неприятно, конечно. У нас был специальный IRC-канал, и туда зашли двое — может, вы их знаете: Чанг Лу (Chang Lu) и Бен Альперт (Ben Alpert), теперь они работают в Фейсбуке. Так вот, они внезапно появляются на канале и заявляют: «Ребята, нам очень понравилось ваше видео на JSConf», — а мы такие: «Да ладно!»
Й: «Вы единственные, кому понравилось — берем вас на работу!»
П: Ну нет — им на это понадобился не один год. Мы все сидели на канале: я там постоянно был, Кристофер Чеду (Christopher Chedeau) тоже. И когда кто-то заходил, мы получали уведомления — чтобы поздороваться, выслушать вопросы и быстро-быстро на них ответить. Ну и вот благодаря такой отзывчивости первые же несколько человек, которые пришли, получили нужную информацию и начали работать. На конференции JSConf EU я выступил примерно с таким посылом: «Я не собираюсь убеждать вас, что React — лучше. Я просто расскажу, чем эта библиотека отличается, и покажу три-четыре подхода, которые раньше никто не пробовал использовать». Мы говорили с Дэвидом Ноленом (David Nolen) — человеком, который разработал ClojureScript. Он ждал чего-то похожего на React, и через пару месяцев после моего выступления опубликовал в своем блоге статью, ставшую довольно известной: Будущее MVC-фреймворков в мире JavaScript (The Future of JavaScript MVC Frameworks). В ней он очень хвалил React, что серьезно прибавило фреймворку популярности. Кроме того, мы еще вели вики-страницу компаний, использующих React: если у кого-то был хотя бы один — даже небольшой — проект, применяющий React, мы сразу заносили туда название этой компании.
Й: Понятно. Похоже, эта страница — такой предшественник StackShare. Когда это было, в каком году?
П: Это был 2013-й — возможно, начало 2014 года.
Й: Да, и мы примерно так же думали: «Вот этих ребят точно нужно записать в StackShare», — получилось что-то вроде списка всех клиентов. И это очень полезно, ведь когда изучаешь новую технологию, то думаешь: «Ладно, эту штуку использует Фейсбук, но кто еще кроме них?»
П: Да, это был такой список, в котором можно было посмотреть, кто еще кроме самих авторов пользуется библиотекой — ведь мы не могли наверняка сказать, работает ли наше решение вне задач, которые решает Фейсбук. Так что да: это очевидно хорошая идея, которую реализовывали на вики множество раз, пока не появился StackShare — за что и спасибо.
Й: Похоже, что вики-страница была частью стратегии, помогала популяризации. У меня есть пара вопросов от сообщества, и некоторые из них касаются подхода к разработке фреймворка. Вот, например: «Как функциональное программирование повлияло на философию React — состояния и свойства, определяющие вывод?»
П: Работа фреймворка React очень похожа на то, как работает сам Интернет: вы получаете какие-то данные, рендерите веб-страницу и отправляете ее дальше — примерно так работает React, и в этом большая заслуга Джордана. Так что да, функциональное программирование очень сильно повлияло на React — хотя бы потому, что самая первая версия библиотеки была написана на функциональном языке — OCaml.
Й: Есть ли у вас какое-то представление о том, как сам фреймворк повлиял на подход к разработке?
П: Чтобы говорить о каком-либо сравнении, недостаточно просто открыть профилировщик и посмотреть там TTI (время вывода первого интерактивного элемента). Необходимо также учитывать, насколько хорошо работает команда, легко ли повторно использовать код, не усложняется ли проверка кода, удобно ли координировать действия, достаточно ли стабилен результат. Если изменится ядро фреймворка, придется ли остальным переписывать приложения — или же команда фреймворка отрефакторит их сама?
Й: Итак, одна из главных составляющих оценки — это упрощает ли инструмент совместную работу.
П: Верно. Обсуждая React, часто упускают из виду вопрос стабильности. Когда я уходил из Фейсбука, компонентов React насчитывались уже десятки тысяч — а это сотни тысяч строк кода. Если сделать во фреймворке какое-то изменение, которое сломает совместимость, то нельзя ведь просто сказать всем остальным переписать компоненты — все эти сотни тысяч строк.
Й: Интересно. Это должна была делать команда фреймворка?
П: Да, приходилось этим заниматься команде React. Поэтому нужна была какая-то автоматизация с помощью каких-то сценариев, и эти сценарии нужно было публиковать в сообществе: подход Angular 2 здесь применить не получалось, потому что вносили кардинальные изменения и переписывали компоненты одни и те же люди.
Й: Мы не говорили про рендеринг на стороне сервера. Расскажете об этом? Или это было после вашего ухода?
П: Рендеринг на стороне сервера был одной из сильных сторон библиотеки. Когда я только начал применять React, меню восхищало то, что если пойти к Джордану и спросить, может ли React делать то-то и то-то, он скорее всего ответит, что может, причем так, как будто это и есть одна из основных функций: будь то рендеринг на стороне клиента, сервера и даже непосредственная работа на любой мобильной платформе. Мне казалось, что это просто невероятная предусмотрительность.
Однако когда я начал работать с фреймворком, оказалось, что рендеринг на стороне сервера — скорее теоретическая возможность, чем реальное применение. Для этого функционала мне пришлось разработать API. Чтобы делать оптимизацию для поисковиков, сервер должен был отображать страницы с фото — тогда Google сможет просканировать их. Поэтому мне пришлось изучить NodeJS и написать первый API для рендеринга на сервере. На деле, работая в Фейсбуке, я не был уверен, насколько с этим сложно. Но я знаю, что во многих компаниях без этого никак.
В принципе, библиотека React это может, но фактически она что делает: создает большую строку с разметкой, а затем как бы засовывает ее на страницу. И нельзя было просто получить эту строку с разметкой. Таким образом, моей первой задачей было получить строку с разметкой. Я написал для этого API и отрендерил кое-что через Node.js. Затем мы вместе посмотрели на результат и удивились: оказалось, что в этой штуке использовались оконные объекты или что-то вроде «document.что-то-там». Поэтому нам пришлось выбросить все лишнее — и какие-то ветвления, и какие-то абстракции: когда в проекте много авторов, они о таком не задумываются, поэтому часть кода нам пришлось откатить.
Й: Если бы можно было изменить в библиотеке React что-то одно, что бы вы изменили сегодня и почему?
П: Отличный вопрос. Есть кое-что, что мне всегда хотелось сделать, но руки всё не доходили. Я фактически никогда не работал над этим фреймворком полный рабочий день: постоянно был занят работой над продуктом или руководил командой, которая работала над продуктом, и только часть времен мог выделять на React. Когда это всё закрутилось, почти мгновенно начали говорить про «усталость от JavaScript». Мы ведь намеренно оставили открытыми множество вопросов: маршрутизацию и сбор данных, управление состояниями и стили, вопросы интернационализации и реализацию специальных возможностей — вот это вот всё — просто потому что у нас не было определенного мнения на этот счет.
Мне хотелось бы, чтобы команда React могла давать сторонним библиотекам значки-сертификаты, которые как бы говорили остальным: «Мы благословляем эту библиотеку и считаем, что она реализует правильный подход». В этом деле хотелось бы побольше строгости, даже с учетом обратной стороны такого права: мы могли оттолкнуть кого-то или задушить новые идеи на корню — я это понимаю, ведь в сообществе React в итоге появилось много новаторских решений. Не могу утверждать, что реализуй мы такой принцип, в итоге получилось бы лучше, но мне все равно кажется, что это хорошая идея.
Й: Давайте заглянем немного наперед. Какое будущее, по-вашему, уготовано фреймворку React? Может, есть что-то, что вас радует? Или наоборот — расстраивает? Здесь можно упомянуть и React Native, но мне хотелось бы услышать, какую вы видите перспективу, что вас в ней радует, а что — не очень.
П: Недавно Fiber начал проходить тесты — похоже, это и правда классный проект. В нем много по-настоящему интересных идей, что радует. Объявление о разработке React VR — тоже интересное событие. Только подумайте, на сколько всяких платформ можно ориентироваться, используя React Native или просто React: iOS, Android, Интернет, а теперь еще и виртуальная реальность. Кто-то взял React и написал модуль рендеринга для Microsoft Word — довольно необычная идея, не каждому придет в голову.
Получается в итоге огромный сегмент, и это здорово, ведь можно минимально научить разработчиков использовать JavaScript, дать основы React — и тогда, имея документацию по API всех этих платформ, они смогут сразу приступить к делу и начать плодотворно работать. Это здорово, и мне очень приятно видеть, как всё обернулось. Я с нетерпением жду следующего выпуска «родных» инструментов для пользовательских интерфейсов Windows и Mac: уверен, они будут выглядеть, как React. Жду не дождусь того дня, когда единственным способом построить пользовательский интерфейс будет парадигма React.
Кое-что мне хотелось бы изменить и в сообществе фронтенд-разработчиков в общем. Сегодня экономией времени и ресурсов пытаются оправдать все подряд, о чем бы ни шла речь. Когда появился фреймворк React, он был сверхбыстрым — потому что при его разработке на производительность тестировалось всё до мелочей, и всё оптимизировалось. В сообществе же курсируют некоторые идеи, которые звучат вроде как правильно и потому всеми постоянно повторяются. Например, «преждевременная оптимизация»: если упомянуть ее с осуждением, все подумают, что ты мыслишь стратегически, а на самом деле, если не оптимизировать, в приложении появятся задержки, и вряд ли кто-то рядом сможет подсказать, когда с конкретной оптимизацией и правда лучше повременить, да и общего правила на этот случай нет. А еще мне нравится подписываться на пользователей в Твиттере, которые со мной не согласны или работают в совершенно другой области разработки. Я считаю, что всегда нужно прислушиваться к другим, и если кто-то высказывает свое несогласие с вами пусть даже в неприятных выражениях, в его словах может быть зерно истины.
Й: Интересный подход. И еще один очень важный вопрос: вы сами в компании Smyte используете React?
П: Да, без него команда Smyte — как без рук.
Smyte — это «доверие и безопасность как сервис»: вы подключаете в Smyte свое приложение или поток аналитики — через наш API, а мы анализируем полученные данные на предмет «плохого» поведения — это может быть спам, травля, мошенничество со стороны покупателя. К примеру, если вам приходилось покупать или снимать квартиру через какого-либо рода доски объявлений, вы знаете, что бывают предложения, которые слишком хороши, чтобы быть правдой. Вот такое мы пытаемся обнаружить на торговых площадках, а кроме того, например, выявляем поддельные кредитные карты.
Мы работаем со множеством торговых площадок: пытаемся находить на них фиктивные предложения — часто это именно те самые «слишком уж хорошие». Это очень интересная задача на самом деле: классификация текста, классификация поведения пользователя, классификация изображений — и все это завернуто в один продукт.
Мне доставляет удовольствие в первую очередь разрабатывать новую инфраструктуру. У нас, конечно, есть пользовательские интерфейсы, работающие на фреймворке React, но мне кажется, что самые интересные задачи кроются в инфраструктуре и ее масштабировании до возможности обслуживания всех этих сотен, тысяч и миллионов действий в месяц небольшой командой из четырех человек — да, это классно.
Й: Среди клиентов компании Smyte есть, наверно, довольно известные сайты?
П: Безусловно. Мы работаем с кучей торговых площадок и подобных сайтов: GoFundMe, Indiegogo и YouCaring, например. Есть и социальные приложения — те же Quora, musical.ly и TaskRabbit. Если рассматривать одноранговые и двухсторонние приложения, то они обычно строятся на том, что пользователи доверяют приложению, что в нем будет безопасно проводить транзакции и взаимодействовать с людьми. Чтобы это работало, нужен постоянный всесторонний автоматический анализ, и нужны люди, которые понимают проблемные области приложения — этим мы и занимаемся.
Й: Да, это круто. Мне еще пришло в голову, что если кто-то настолько горячий поклонник фреймворка, то естественно будет предположить, что он захочет построить на нем что-то свое. Что вдохновило вас основать Smyte и как это произошло? Вы из Фейсбука перешли сразу в Smyte?
П: Примерно так. Как только я распрощался с Фейсбуком, я сразу же купил себе новый компьютер и начал писать код, из которого и вырос сервис Smyte. Но сама идея… Если вернуться к тому, о чем мы говорили чуть раньше, и вспомнить, что Фейсбук лет на пять опережает остальных, то можно увидеть, что их подход к доверию и безопасности был бы очень полезен другим компаниям.
Я видел это изнутри, и могу сказать, что это действительно важные вопросы. Поэтому я подумал: «Не обязательно ведь продавать собственную компанию Фейсбуку, чтобы решить эту задачу». Так и появился Smyte: мы хотели помочь компаниям, которые не могут себе позволить нанять, как Фейсбук, армию разработчиков и купить миллион серверов для решения такой задачи.
Й: Прекрасная получилась беседа! Спасибо, что нашли время.
П: Спасибо, что пригласили.
Alconost is hiring
Перевод статьи выполнен в Alconost.
Нам в Alconost в минский офис для работы над проектом Nitro (профессиональная служба живого онлайн-перевода) нужен крутой Frontend-разработчик (React.js). Присылайте рассказ о себе и примеры того, что делали раньше на dev@alconost.com
Автор: alconost
