React Conf 2019:

ТОП-5 докладов

(часть 1)

Сегодня поговорим о React Conf 2019 – это двухдневная конференция, которую организует и проводит команда разработчиков ReactJS, соответственно, выступают действующие или бывшие члены команды. Мероприятие (уже пятое по счету) проходило 24-25 октября на озере Лас-Вегас в штате Невада и собрало более 600 участников со всего мира. Facebook спонсировал конференцию, и они устроили отличное шоу. Видео всех выступлений недавно появилось в Сети, и мы с удовольствием с ними познакомились – теперь хотим поделиться с вами теми материалами, которые показалось нам наиболее интересными.

На конференции можно было увидеть самые свежие варианты обновленного дизайна Facebook, узнать о том, как приложения на React Native помогают голодающим по всему миру и как кодить, если ты писатель. Кроме того, в каждой конференции React Conf есть своя фишка, то, что у всех на устах, и в этом году это однозначно Concurrent mode и Suspense. Мы поговорим о них в нашем материале. Конференция началась с keynote – «вступительного слова» от Тома Оккино и Юзи Чжэн, ведущих инженеров React, которые много говорили о новых проектах и о том, как развивается сообщество вокруг этой технологии. Затем выступил Фрэнк Ян, также член команды, который объяснил, как они создают «новый Facebook» с помощью React и Relay. Одной из ярчайших деталей его выступления было знакомство с библиотекой CSS-in-JS, которая скоро будет доступна в open-source. Софи Альперт, бывший менеджер команды, рассказала о создании кастомного рендерера с помощью React. Чтобы продемонстрировать это, она реализовала небольшую версию ReactDOM всего за 30 минут. Если хотите посмотреть все доклады, зайдите на https://conf.reactjs.org/ А у нас для вас будет ТОП-5 лучших материалов, краткий обзор «вступления» и бонус.

Конференция началась с выступления Тома Оккино и Юзи Чжэн из основной команды React. Том Оккино, технический директор группы React, вышел на сцену, чтобы рассказать о целях команды и всего сообщества. Он заявил, что долгосрочная цель React состоит в том, чтобы облегчить разработчикам создание отличного пользовательского опыта (great user experience). И сделать его доступным для максимального количества людей по всему миру. Он подчеркнул, что крутой DX (developer experience, опыт разработки) важен только тогда, когда он ведет к крутому UX (user experience, пользовательскому опыту). Самое важное в DX по мнению Оккино – это низкий порог вхождения, высокая производительность и возможность масштабирования.

Он обратил внимание на то, что процессоры в наших устройствах не ускоряются, как раньше: мы и так сделали их настолько быстрыми, насколько нам позволяют законы физики. И все, что мы можем в данной ситуации – это использовать больше процессоров одновременно. Поэтому мы должны находить способы для параллелизации и приоритизации там, где это возможно. Concurrent mode (или «параллельный режим») в React помогает согласовать массивную экосистему из нескольких ЦП. Это набор функций, которые делают приложение более отзывчивым, визуализируя деревья компонентов и не блокируя основной поток. Это дает React возможность прерывать большие блоки низкоприоритетных задач, чтобы сфокусироваться на работе с более высоким приоритетом, такой как реакция на ввод пользователя. Это позволит React работать с несколькими обновлениями состояния одновременно и удалять раздражающие и слишком частые обновления DOM. В конце октября команда React также сделала Concurrent mode доступным для пробного использования: yarn add react@experimental nmp install react@experimental reactjs.org/concurrent Разработчиков призывают неистово тестировать Concurrent mode и давать максимально возможный фидбек.

Говоря о Suspense, Оккино подчеркнул, что мы должны прекратить тратить огромные ресурсы на загрузку страниц, от чего в конечном итоге страдает и DX, и UX. Чтобы этого избежать, React предлагает свою систему для организации асинхронной загрузки кода, данных и ресурсов. Том описывает это так: «Suspense просто позволяет компоненту подождать чего-то, прежде чем рендериться. Это помогает консолидировать вложенные зависимости и вложенные счетчики, а также все, что стоит за одним простым процессом загрузки». В конце своего выступления Оккино также коснулся того, как команда планирует развивать сообщество React, делать его более инклюзивным и разнообразным. Он добавил: «До недавнего времени мы занимали довольно пассивную позицию в процессе создания и формирования сообщества React. Мы несем ответственность за это, и я чувствую, что мы разочаровали многих из вас. Теперь будем стремиться к лучшему!».

Юзи Чжэн, технический менеджер команды React and Relay в Facebook, рассказала о том, над какими проектами трудится основная команда разработчиков. Первым делом, она подвела итог работе с hooks, которые были одной из самых ожидаемых фич React, анонсированных на конференции в прошлом году. Вкратце – опыт оказался весьма позитивным. Долгосрочный проект, на котором сейчас сосредоточена команда — это предоставление разработчикам способа легко создавать специальные возможности в React. В настоящее время разработчики могут создавать доступные веб-сайты, используя стандартные методы HTML, но у него есть некоторые ограничения. Чтобы помочь в обеспечении доступности непосредственно в React, команда работает над двумя областями: управление фокусом и поддержкой различных устройств ввода – не только мышки, но и тачскрина (и других поверхностей), и, конечно, всевозможных VR-девайсов. Команда также работает над улучшением начального времени рендеринга. Юзи подчеркнула, что у людей с «медленными» компьютерами может быть очень неприятный пользовательский опыт, если весь сайт рендерится на стороне клиента – это может происходить более, чем в три раза дольше. Рендеринг на стороне сервера помогает несколько уменьшить загрузку ЦП на клиенте, но имеет некоторые ограничения. Чтобы с ними справиться, команда планирует добавить встроенную поддержку рендеринга на стороне сервера. Еще одна интересная фишка, о которой рассказала Юзи – Selective hydration. Речь опять же об ускорении загрузки страниц. Когда юзер еще только стремится навести курсор или сфокусироваться на элементе с помощью клавиатуры, то еще до того, как он совершил клик, приоритизация компонентов позволяет уже начать их загрузку. То есть, React приостанавливает любую работу, которую он выполняет, чтобы расставить приоритеты для компонентов, которые будут «вот прямо сейчас» взаимодействовать с пользователем.

Невозможно объять необъятное (хотя очень хочется), поэтому мы выбрали ТОП-5 самых интересных и полезных докладов и с удовольствием о них вам расскажем.

Фрэнк Ян, технический директор в группе React в Facebook, рассказал о том, как команда перестроила и переработала сайт Facebook, а также о ключевых уроках, которые они усвоили на этом пути. Спикер напомнил, что оригинальный Facebook был построен на PHP и даже продемонстрировал, как он выглядел (спойлер: ужасно!). Вскоре он стал включать CSS, затем Vanilla JS, Flux и, наконец, React и Relay. Новый Facebook сегодня представляет собой одностраничное приложение (SPA), в котором React реорганизует HTML и JavaScript в компоненты, а Relay позволяет декларативно описать запросы к GraphQL серверу. Для работы с CSS они представили очередную CSS-in-JS библиотеку. Она призвана облегчить чтение, понимание и обновление стилей. Ее синтаксис основан на React Native и других платформах. Вы также можете использоваться средства проверки типов и линтеры для стилей, поскольку они теперь определяются внутри javascript файлов. Фрэнк также упомянул, что использование новой библиотеки существенно повлияло на их CSS-пакет: с 413 Кб до 74 Кб – неплохо, правда?

Эшли Уоткинс вслед за Фрэнком рассказала о том, как React, GraphQL и Relay помогают Facebook собирать данные и управлять ими. Она подчеркнула, что производительность – это главная ценность большинства сайтов, потому что пользователям нужно, чтобы все работало быстро. Она продемонстрировала, как ускоряли код и работу с данными с помощью Relay.  У Эшли было много потрясающих видео, показывающих, как данные загружаются на страницу для пользователя, и как Facebook меняет эту загрузку, используя GraphQL и Relay. Еще одна важная концепция, о которой говорит Уоткинс – это их желание сделать так, чтобы страница лучше выглядела в то время, пока на нее загружается информация, а сама загрузка была более плавной и эффективной.