Все, что нужно знать о React, проекте, запущенном в Facebook, который теперь помогает Twitter, Pinterest и другим поддерживать их приложения в хорошем состоянии и отлично работать

Перевод эксклюзивной статьи от BusinessInsider.

Если вы когда-нибудь ставили лайк статусу в Facebook, твиту с телефона или прикрепленному изображению на Pinterest, то вы пересекались с React.

Сегодня многие основные функции некоторых из самых популярных приложений сегодня незаметно подкреплены React, фреймворком, который изначально был создан инженерами Facebook и выпущен в 2013 году как открытый исходный код.

React - это инструмент для создания пользовательских интерфейсов (UI), то есть того, как выглядит приложение и как люди взаимодействуют с ним.

Он построен на JavaScript, самом популярном языке программирования в соответствии с мега-популярным сайтом хостинга кода GitHub, который следит за такими вещами. Пользователи могут повторно использовать уже созданные компоненты, например кнопки.

React начался в Facebook, и команда использовала его в течение двух лет, прежде чем выпустить его как открытый исходный код. Этот шаг открыл двери для того, чтобы позволить кому-либо использовать, изменять или загружать его бесплатно. За прошедшие годы React стал одним из самых популярных инструментов в сети и используется такими компаниями, как Airbnb, Twitter, Uber, Asana и Pinterest.

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

Также появилась другая версия React под названием React Native для разработки приложений для устройств iOS и Android. Это ответвление также быстро приобрело популярность: согласно GitHub, это второй по популярности проект с открытым исходным кодом, с более чем 10 000 последователей.

Карл Бергенхем, менеджер по продукту в компании-разработчике Progress, говорит, что использование React - это все равно что строить дом с Lego - если кто-то уже сделал такие сложные детали, как крыша, заранее. Вы можете создать большинство из них по своему вкусу, а затем просто нажмете на готовую деталь в конце, когда будете готовы. И если вы используете React для создания действительно хорошего компонента, вы можете купить его оптом и использовать повторно всякий раз, когда вам это нужно.

«Если вы создаете какой-то веб-сайт, вы хотите убедиться, что это то, с чем люди хотят работать», - сказал Бергенхем Business Insider. «Мы как бы видим, что людям не нужно изобретать велосипед».

Как началась React

В 2011 году Джордан Уолк, инженер-программист в Facebook, создал первую версию React - но только для использования Facebook. Он работал над базой кода для рекламного продукта Facebook, но в то время было сложно создавать и управлять рекламой.

«Этот пользовательский интерфейс был очень сложным, поэтому было много взаимосвязанных форм», - сказал Business Insider Дэн Абрамов, инженер-программист из команды React в Facebook. «Было довольно сложно заставить его работать правильно. Всегда были ошибки, которые было трудно исправить».

Чтобы это исправить, Уолку пришла в голову идея создать проект, который позволит разработчикам писать код с использованием декларативного синтаксиса. Это означает, что разработчики могут просто вводить то, что они хотят, чтобы приложение делало - например, создавать кнопку, выпадающий список или эффект анимации - вместо того, чтобы выполнять весь набор инструкций.

Проект взлетел изнутри, и вскоре Facebook начал использовать платформу React для некоторых из своих самых популярных функций, включая комментирование, лайки и публикацию в своей ленте новостей.

Но когда он был впервые выпущен в мир как открытый исходный код в 2013 году, он не сразу завоевал популярность.

«Многие отклонили его. Сначала он не стал популярным среди пользователей», - сказал Абрамов. «Многие люди на самом деле не видели его смысла. В конце концов мы попытались объяснить, почему React - хорошая идея».

Но в том октябре Пит Хант, бывший инженер Facebook, который сейчас работает в Twitter, выступил с докладом «Переосмысление передового опыта». Абрамов назвал это «поворотным моментом» для React.

«Он объяснил, почему React делает некоторые нетрадиционные решения, и мы могли бы подумать, что это хороший выбор», - сказал Абрамов. 

Это был момент, когда инженерное сообщество в целом осознало, что React является заметной частью того, что привело Facebook к его успеху.

Благодаря большому сообществу людей, которые используют и улучшают React, он смог внедрять инновации и распространяться намного быстрее.

В определенный момент он достиг критической массы - сам Абрамов начал использовать React еще до того, как работал в Facebook. Абрамов говорит, что сообщество начало писать расширения и модификации для проекта React с открытым исходным кодом, которые помогли ему распространиться, привлекая к этому еще больше разработчиков.

Воздействия React

Одним из самых значительных результатов React является популяризация декларативного программирования, что значительно упрощает разработку приложений для разработчиков. Сегодня последняя версия Apple SwiftUI использует эту концепцию, как и Flutter от Google.

«Вместо того чтобы сказать компьютеру, что я хочу, чтобы вы сделали это, а затем я хочу, чтобы вы сделали это, вы просто говорите компьютеру, эй, я хочу, чтобы экран выглядел так, и он вычисляет все команды и инструкции, необходимые для его генерации». «Вот такой сценарий», - сказал Business Insider Крис Ллойд, инженер по пользовательскому интерфейсу в Pinterest.

Команда Facebook все еще работает над созданием новых функций React. В 2017 году команда Facebook выпустила React 16, последнюю версию.

Эта версия повысила совместимость React с другими внешними инструментами и программами и повысила производительность, а также обеспечила разработчикам более ранних версий React возможность легко обновить свои приложения до этой текущей версии.

Самая последняя версия React включает новую функцию под названием Hooks, которая еще больше упрощает повторное использование функциональности между компонентами, созданными на заказ. Прямо сейчас Абрамов говорит, что разработчики Facebook работают над улучшением текущей версии React - React 16 - которая будет включать в себя Suspense, функцию, упрощающую загрузку данных и кода, и параллельный режим, который помогает приложению чувствовать себя гладко и отзывчиво.

Почему люди так любят React

Гильермо Раух, генеральный директор и соучредитель ZEIT, говорит, что впервые начал работать с React, когда работал в WordPress.

Он говорит, что причина, по которой React так быстро вырос, заключается в простоте работы. Когда он услышал, что Facebook использует React для своей новостной ленты, он заглянул в общедоступный код сайта и удивился. Вскоре он начал видеть это повсюду.

«Я купился на удивительный интерфейс, который они создали», - сказал Раух. «Новостная лента суперинтерактивна. Эта подпись React стала появляться повсюду для меня. Это стало цепной реакцией.

«В конце концов он основал собственную компанию, которая разработала NextJS - один из самых популярных способов использования React в реальной жизни, предоставляя инструменты для разработки приложений, использующих комбинацию JavaScript и React.

Питс Питер, инженер-программист производителя инструментов повышения производительности Asana, даже регулярно проводит встречи о React. Питер учит других инженеров, как использовать React с TypeScript, третьим по темпам роста языком программирования в соответствии с GitHub и похожим на JavaScript.

«Я думаю, что React предложил шаблон программирования, который никто другой не предлагал в то время», - сказал Питер Business Insider.

Кроме того, Pinterest использует React в течение последних трех с половиной лет для своего веб-сайта и сайтов покупки рекламы. Раньше у него была собственная доморощенная система, но она была слишком сложной, и у нее возникали проблемы, когда инженеры работали над одними и теми же функциями одновременно. React помог решить эти проблемы, говорит Ллойд, инженер Pinterest.

«Это позволяет разработчикам делать правильные вещи в том смысле, что легко написать последовательный быстрый пользовательский интерфейс», - сказал Ллойд.

Ллойд говорит, что React делает рендеринг и прокрутку больших изображений - важный аспект Pinterest - намного быстрее. В целом, говорит Ллойд, решение сделать ставку на React было удачным для Pinterest.

«Редко мы видим технологию, которая существует столько же времени, сколько React, и мы рады продолжать поддерживать и использовать ее в течение следующих пяти лет», - сказал Ллойд. «Это действительно испытание временем, что невероятно редко».