У меня была потрясающая возможность посетить конференцию React.js в Сан-Франциско 22/23 февраля благодаря щедрой стипендии от Facebook! Два полных дня бесед от создателей, участников и пользователей React.js, а также 600+ энтузиастов React со всего мира, чтобы все это понять. Это был отличный шанс встретиться с другими разработчиками React и поделиться идеями в одном месте. где вполне допустимо брать ноутбук за завтраком или в бар и бесстыдно говорить о коде.
Насколько я слышал, билеты в этом году было невероятно сложно достать, и если у вас не было времени посмотреть прямую трансляцию, вот мое резюме React.js Conf: The Good Parts и множество ссылок на интересные ресурсы, которые я слышал из разговоров и разговоров с другими людьми.
Keynote Ника Шрока действительно задал тон конференции, подчеркнув, как React превратился из библиотеки JavaScript в собственную экосистему, которая может существенно продвинуть веб-разработку, а React Native полностью меняет способ создания мобильных приложений с межстековые инженеры заменяют роли и команды, зависящие от платформы. Он также указал на некоторые довольно впечатляющие цифры - например, тот факт, что менеджер рекламы Facebook и приложения для iOS и Android групп используют 85–90% кода React Native и были созданы одной командой! Многие функции в приложении Facebook также уже есть в React Native, одна из которых - дневное видео друга Facebook, которое вы, возможно, видели пару недель назад!
Выступление Бена Альперта на тему Создание отличных приложений на React затронуло несколько идей о том, что еще нужно улучшить в React и React Native, включая анимацию, жесты, рендеринг быстрых списков и инструменты для улучшения взаимодействия с разработчиками в React и React Native - например, что если бы вы могли избавиться от необходимости настраивать webpack / babel для быстрого создания прототипа нового проекта всего с одним файлом, например создать app.js и просто вызвать response run platform = ios?
Объявление о Draft.js, библиотеке для редактирования расширенного текста для React от Facebook, всех очень взволновало! Выделение вводимого текста полужирным шрифтом, вырезание, копирование, вставка, добавление пользовательских преобразований, таких как упоминания / отметки, которые можно добавить для статусов на Facebook - Draft.js значительно упрощает все это для ваших приложений React. Доклад Исаака Салье-Хелленданга объяснил, как библиотека использует хорошие части функции браузера contentEditable (собственный курсор и поведение выбора, собственные события ввода и ключевые события, все функции форматированного текста, автоматическое автоматическое увеличение элементов, доступность и что это работает во всех браузерах) и применяет принципы React, чтобы превратить его в управляемый компонент - например, поле ввода текста с обработчиком события onChange и значением ввода, сохраненным в состоянии. Я определенно рекомендую посмотреть полный доклад, если вас интересуют детали реализации.
Обработка данных в приложениях React была постоянной темой в течение двух дней, и в ходе нескольких обсуждений было выделено множество различных вариантов. Выступление Лин Кларк проиллюстрировано ее причудливыми кодами-карикатурами, сделанными для забавного и предельно ясного введения в Flux, Redux и Relay.
Короче говоря, Flux отсутствует, Relay слишком сложен для начала, а Redux выигрывает.
А если серьезно, Redux частично снижает сложность потока за счет использования функциональной композиции вместо регистрации обратного вызова, имеет единственное хранилище с неизменяемым состоянием, является супер декларативным, отлично подходит для тестирования и делает возможными горячую перезагрузку и отладку во времени. Relay, с другой стороны, требует сервера GraphQL, который сам по себе является зверем и требует гораздо большей настройки, но имеет дополнительные преимущества, заключающиеся в возможности обрабатывать кеширование, оптимизацию запросов и сетевые ошибки, а также удобочитаемость, которая обеспечивается совместным размещением запросы и просмотры. Relay также позволяет отложенные запросы (например, получение заголовка и текста статьи и комментариев позже) и уменьшение размера запросов - relay извлекает данные и помещает их в локальный кеш, чтобы некоторые данные запроса можно было просто извлечь из кеша . Доклад Джареда Форсайта представил Re-frame и Om / next, обе библиотеки ClojureScript. Re-frame похож на Redux, но использует подписки для определения того, как получать данные из состояния, которые можно запоминать, чтобы подписки повторно использовались между компонентами, а для тех из вас, кто знаком с Redux, нет необходимости делать mapStateToProps (state) {} в контейнер. Om / next - это библиотека, подобная Relay, но без необходимости в сервере GraphQL.
Неоднократно упоминались также оптимизация и повышение производительности. Доклад Адитьи Пунджани об оптимизации мобильного веб-сайта FlipKart для соединений 2G в Индии представил две действительно интересных идеи: архитектуру App Shell вместо традиционного рендеринга на стороне сервера (разбиение приложения на состояние загрузки с заполнителями для данных и состояния загрузки, с состоянием загрузки, отображаемым в первой отрисовке страницы) и сервис-воркерами, очень крутым API-интерфейсом браузера, который можно использовать для перехвата всех сетевых запросов, поэтому вы можете выбирать, извлекать данные из кеша (для автономного использования) или из сеть.
Бхуван Хаттар предложил несколько методов для ускорения времени запуска. Ветви в коде - например, когда A / B-тестирование может привести к медленному запуску, так как необходимо загрузить все модули для каждой ветки, что приведет к большим ненужным накладным расходам. Это сложно оптимизировать, поскольку выбранная ветвь может зависеть от данных времени выполнения. Одним из предложенных им решений было встроенное требование для ленивого выполнения, то есть требовать вещи только тогда, когда они необходимы, а не требовать всех модулей в верхней части файла. Бхуван также предложил использовать вспомогательную функцию matchRoute, которая выполняет сопоставление с образцом на основе имени маршрута и только условно загружает и выполняет код для каждого маршрута. Пример кода ниже взят из этой замечательной статьи Яна Пойера о маршрутизации (в частности, с помощью Relay и response-router).
Еще одно решение, используемое Facebook, - использовать оболочку вместо «require» - использовать оболочку, чтобы требовать зависимости, которые не нужны при первоначальном рендеринге - они загружаются по мере необходимости, а пока отображается индикатор загрузки.
В Выступлении Тадеу Загалло на тему Оптимизация React Native он показал, как профилировать приложения с помощью симулятора в Xcode - вызвать меню разработчика внутри симулятора (Cmd-Z) и нажать начать профилирование, а затем просмотреть в Chrome. Это вызывает удобное меню в Chrome, чтобы вы могли видеть, какие функции выполняются дольше всего. Он также упомянул две вещи, которые следует помнить: всегда добавляйте ключи компонентов для списков - алгоритм сравнения DOM React использует ключи для проверки того, какие элементы нуждаются в повторном рендеринге, поэтому добавьте ключи, чтобы убедиться, что все элементы списка не будут повторно отображаться, и старайтесь всегда использовать метод жизненного цикла shouldComponentUpdate для предотвращения повторной отрисовки, если это не необходимо.
Одна из самых захватывающих вещей для меня было услышать о новом API навигации в React-Native от Эрика Висенти. После нескольких месяцев борьбы с компонентом Navigator новая декларативная версия звучит как гораздо лучшее решение, в значительной степени заимствованное из Redux для удаления состояния из компонента и использования действий для перехода между представлениями. Новые изменения также должны поддерживать глубокие ссылки с URIS, функцию, которая очень желательна в мобильных приложениях. Я до сих пор не ознакомился с новой версией должным образом, но теперь она доступна как NavigationExperimental в последней версии React Native.
Выступление Лиланда Ричардсона о тестировании React Native тоже было очень захватывающим! Он не только создал библиотеку Enzyme, чтобы помочь с обходом дерева DOM при поверхностном рендеринге React, но и создал полную имитацию всего React Native API! У Enzyme есть методы shallow, mount и render, а также методы для поиска узлов определенного типа в дереве. И он также создал несколько удобных примеров использования обеих библиотек (ссылки в конце)!
Беседа Jamison Dance действительно заставила меня попробовать язык вязов! Я слышал только об Elm, поэтому он был для меня совершенно новым, но вкратце Elm - это функциональный язык программирования, который транслируется на JavaScript и запускается в браузере. Он имеет систему статических типов (так что нет ошибок времени выполнения!) И нет null !. У Elm есть только функции без сохранения состояния и только неизменяемые данные. Джемисон показал, как приложения Elm имеют древовидную архитектуру, аналогичную приложениям React, с родительскими компонентами, передающими данные дочерним компонентам, которые затем реагируют на взаимодействие с пользователем, отправляя данные обратно своим родителям, которые затем обновляют состояние приложения верхнего уровня и вызывают повторное выполнение приложения. оказывать. Обновление состояния в React может быть выполнено несколькими способами, включая различные библиотеки, которые обсуждались ранее, такие как Redux или Flux, но в Elm есть встроенная система для обновления состояния с помощью Observables. Компромисс заключается между ограничениями и рекомендациями - если вы доверяете разработчикам языка, которые приняли правильные решения за вас, это избавляет от необходимости пробовать выбирать между различными библиотеками для вашего приложения, и вы можете сосредоточиться на проблемах, специфичных для домена вашего приложения. Джеймисон предположил, что изучение Elm может помочь вам стать лучшим разработчиком React, и я думаю, что собираюсь попробовать!
Были также несколько интересных советов / идей из молниеносных разговоров:
* Способ сделать код React Native более пригодным для повторного использования между iOS и Android - создать оболочку для компонентов, использующих Platform.OS для проверки операционной системы < br /> * Поддержка Nuclide IDE для react-native, чтобы сделать опыт разработчика таким же, как в Интернете. Теперь есть react-native-debugger, react-native-Inspector и возможность добавлять точки останова!
* React Native для Интернета! Способ создания действительно независимого от платформы кода, универсальный рендеринг и встроенная веб-доступность!
А затем были некоторые из более дурацких разговоров о виртуальной реальности, эффектах Open-GL и создании версии Jeopardy на базе Arduino-raspberry-pi-React !!
В целом конференция была потрясающим событием, и мой список «новых вещей, которым нужно научиться» теперь совершенно разросся!
Ссылки
Библиотеки / API
Для React:
* Draft.js - Редактирование форматированного текста с помощью React
* Создание шаблонов электронной почты с использованием React - Oy-Vey
* Статический сайт Gatsbyjs генератор с использованием React + Markdown
* Откройте GL для React!
* gl-react
* gl-react-dom
* gl-react-Inspector
* GL Sandbox
* Falcor - библиотека для извлечения данных от Netflix
* Cycle.js - архитектура потока данных, основанная на наблюдаемых
* Enzyme - JavaScript Testing утилита для React, которая имитирует API jQuery для обхода DOM
* Руководство по использованию Enzyme с Webpack
Для React Native
* NavigationExperimental - новый декларативный API-интерфейс Navigator
* Плагины Cordova для React Native
* Open GL для React Native - gl-react -native
* React Native Web
* Полная версия React Native
* Руководство по тестированию React Native с Enzyme
* Примеры тестов React Native с ферментом
Случайно…
* Сервис-воркеры для поддержки работы в автономном режиме, push-уведомлений и многого другого
* Push-уведомлений с помощью Google Cloud Messaging
* Chrome api для распознавание речи
* Плагин Webpack для установки модулей из операторов импорта (спасибо Эрику Клеммонсу!)
* API Archive of Jeopardy Questions !!
* Track.js - Отслеживайте и сообщайте об ошибках JS в веб-приложениях
* Raygun.io - Отчеты о сбоях
Инструменты разработчика
* Плагин React Native для Visual Studio Code
* Deco IDE для React Native
* Nuclide с React Native, включая отладчик react-native-debugger, возможность добавлять точки останова и реагировать на собственный инспектор, поддержку потока
* HockeyApp - распространяйте бета-версии приложений без использования магазина приложений
