React Conf 2019:

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

(часть 2)

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

Софи Альперт ранее управляла командой React на Facebook, но в январе покинула ее, чтобы поработать в интересном ей стартапе. Слушателям она предложила слегка «заглянуть под капот» React и очаровала тем, что кодила «в прямом эфире», то есть в ходе доклада. В процессе она продемонстрировала как создать свой собственный рендерер с помощью React. Стоит отметить, что выступление Софи – одно из самых «технически насыщенных» на этой конференции и будет весьма интересно тем, кто интересуется именно тем, как React работает.  Вы всегда хотели создать свой собственный ReactDOM менее, чем за 30 минут? Софи удалось сделать именно это. За полчаса она создала файл ReactDOMMini.js, в котором она управляла собственным DOM и допускала различные творческие изменения. 

Ранее доклад был представлен на React Rally и он, определенно, заслуживает внимания, даже если вы не интересуетесь переводами. Бесконечно харизматичная Нат Элисон - фрилансер, которой после одного из ее выступлений, связанных с переводом документации, предложил работу Дэн Абрамов с просьбой помочь команде React координировать переводы responsejs.org на 48 языков мира. Она рассказала, почему эта работа важна, как она делается и почему именно так.  Вот, что говорит Нат об актуальности своего доклада: «Более 80% людей по всему миру не знает английского языка. Если мы ограничимся английской версией для React, одной из самых популярных платформ для JavaScript, мы ограничим тех, кто формирует наше сообщество». Она подчеркнула, что до 2018 года включительно вся официальная информация о React в сети существовала только на английском языке – и это печально.  Предоставление официально переведенной документации облегчит для не говорящих по-английски разработчиков на React понимание и использование его в своих проектах. Это также позволит людям перестать обращаться к «неофициальным» переводам. Конечно, за ними стоит огромная проделанная работа, но, во-первых, их не так-то просто найти, а во-вторых, они могут быть неправильными или устаревшими. 

Нат рассказала, что первоначально команда переводчиков думала об интеграции платформы Crowdin, которая позволила бы разработчикам создавать и отправлять свои переводы, но идея оказалась провальной: качество переводов страдало, все работало очень медленно, а интерфейс никому не понравился.  Затем они решили поступить как разработчики Vue.js, которые поддерживают отдельные репозитории на GitHub для каждого языка, разветвленные из исходного репозитория. Волонтеры со всего мира могут добавлять туда свои переводы, что позволило одновременно охватить (на данный момент) 48 языков. С юмором Нат поведала о том, как в процессе ее заблокировали на GitHub. Подобно Vue, команда React также создала бота, который периодически отслеживает изменения в репозитории на английском языке и отправляет пулл-реквесты при каждом изменении. Нат очень эмоционально рассказывает о том, как тяжело ей далось создание бота (она front-end-разработчик и это не ее профиль), как она выполняла его функции вручную, особенно смешно звучит: «И я понимаю, что бот – это я».  Если вы цените работу переводчиков React и хотите внести свой вклад в перевод документации на свой язык, посетите веб-сайт https://isreacttranslatedyet.com/, где очень наглядно продемонстрированы все 48 задействованных языков и прогресс перевода на них. 

Спикер Джо Савона также работает в основной команде Relay на Facebook и, по сути, его доклад – это вторая часть истории о том, как они создавали новый сайт этой социальной сети. Однако в этом случае больше всего внимания уделяется Suspence, о котором мы (и спикеры!) уже говорили в начале статьи (и конференции!).  Это также очень «технический» доклад и большая его часть посвящена работе с данными при загрузке страницы. Много внимания уделяется тому, как выполняются все запросы и в каком порядке. Джо представляет три сценария, описывает их плюсы и минусы, поддерживает каждый из них аргументами. Это позволяет нам оценить все преимущества и будущее Suspense.  И хотя это правда, проект еще сыроват и не стабилен, разработчики не даром хотели показать большую его часть уже сегодня – им также необходимо увидеть реакцию сообщества и получить фидбек. Судя по отчетам с конференции, Suspence уже заслужил положительные отзывы. 

Самый «гуманитарный» доклад на конференции – и один из самых интересных! Дженн Крейтон, front-end-архитектор в The Wing, которая пришла в программирование из творческой профессии и ранее была автором текстов, рассказала, как можно воспринимать React с точки зрения художественной литературы и креативного письма. И как это может упростить работу программистов.  В глобальном смысле это блестящий пример того, как можно применять «нетрадиционные» знания в разработке. Дженн не только рассказала о том, как использовать креативный подход при написании компонентов в React, но и детально сравнила работу автора текста с работой программиста. 

Используя те же принципы, что и в творческом письме, спикер смогла улучшить свои навыки разработки. Например, один из ключевых принципов написания креативных и художественных текстов звучит как «Покажи, не рассказывай». В данном случае автору рекомендуется описывать как выглядит сцена или ситуация, а не просто декларативно сообщать о том, что происходит. В литературе это помогает заинтересовать читателей, а в React – создать у себя в голове правильный подход к коду – декларативный, а не императивный. Это важно, поскольку React, по мнению Дженн, сам по себе декларативен, что позволяет разработчикам описывать, каким должно быть конечное состояние вместо перечисления всех шагов для достижения этого состояния. 

Этот доклад открывал второй день конференции и, по факту, мы просто не могли обойти его своим вниманием. Кроме того, он оказался самым насыщенным овациями – это тоже кое о чем да говорит. Брайан Вон (также член React core team) рассказал о том, какие инструменты для разработчиков создает команда на протяжении последних нескольких месяцев. Все же, не только Concurrent mode и Suspense достойны нашего внимания (хотя без разговора о них, конечно, не обошлось). 

Говоря об обновлениях, касающихся ускорения процесса написания и изменения компонентов, Брайан подробнее остановился на проекте «Fast Refresh». Он заострил внимание на отличиях его от «hot reloading», таких как возможность поддержки функциональных компонентов, исправление ошибок, обязательная перезагрузка после внесения изменений и многое другое. На данный момент это доступно только для React Native, но они работают над тем, чтобы скоро была доступна веб-версия.  Во второй части доклада Брайан говорит о том, почему команда вообще берется переписывать ReactDevTools и показывает множество новых функций, которые они добавили. Вместо того чтобы читать об этом, умоляем и рекомендуем, посмотрите видео.  Спикер рассказывает и показывает, как находить компоненты и проверять (обследовать) их непосредственно в консоли, изменять тип реквизита и добавлять новые реквизиты в инструментах разработчика. Важно: hooks теперь поддерживаются на том же уровне, что и props и state. Фраза «Full Hooks support!» вызвала бурные аплодисменты в зале. О чем речь? Значения теперь можно редактировать, а вложенные массивы и объекты можно расширять! И последнее, но не менее важное: Брайан упоминает, насколько полезны кодовые модули (codemods) React для более легкого обновления кода и автоматизации части изменений. Познакомиться с ними уже можно на Github (github.com/reactjs/react-codemod), команда же тестирует этот инструмент на Facebook.