В этом году ReactEurope проходила в Париже 23 и 24 мая и затрагивала множество тем, связанных с фронтенд-разработкой с помощью React.
Итак, вот подборка конференций, о которых, по нашему мнению, стоит поговорить.
Основной доклад
Автор: Джаред Палмер
Джаред Палмер - ведущий инженер в The Palmer Group и создатель Formik (конструктор форм React), Razzle (создать универсальное JS-приложение без конфигурации) и react-fns (веб-API, включенные в компоненты React).
Он начал давать нам план развития React 2019; Приостановка получения данных и новый серверный рендерер. Затем мы углубились в эту первую тему.
Загрузка материалов по-прежнему затруднена
Многие наши приложения созданы для загрузки данных. А благодаря React это стало проще! Мы хотим, чтобы наши приложения были быстрыми, хорошими и красивыми. Но эти две последние вещи противоречат друг другу. React предоставляет некоторые API-интерфейсы (отложенная загрузка и т. Д.), Чтобы помочь нам сделать более плавный UX. Это хорошо для медленных подключений, потому что вы хотите показать своим пользователям, что ваше приложение работает. Однако это делает ваш UX плохим для быстрых подключений. Ваши пользователи будут видеть слишком много бесполезных состояний загрузки, таких как вспышки.
Это то, что React Suspense стремится исправить.
Зачем нужна реакция Приостановка?
Приостановка получения данных означает способность React «приостанавливать» отрисовку, пока компоненты ожидают данных. Джаред написал небольшой пользовательский хук, который возвращает обещание, если в кеше нет соответствующих данных.
Эти хуки будут вызывать Promise, если запрошенные данные не были кэшированы.
Когда вы бросаете обещание, компонент Suspense ведет себя как componentDidCatch и выполняет эту асинхронную операцию (в нашем случае запрос).
После некоторых изменений это выглядит так:
Как видите, приложение ожидает выборки необходимых данных для отображения страницы.
Вы можете получить доступ к слайдам и демонстрационному приложению в учетной записи Джареда Палмера на GitHub.
Быстро и уверенно
Автор: Пол Армстронг
Пол Армстронг, технический руководитель Twitter, вместе со своей командой они перестроили Twitter с нуля в PWA на React.js. Вот некоторые из извлеченных ими уроков, некоторые инструменты и стратегии для быстрого и уверенного перехода от разработки к производству.
Локальный сбой
Вы когда-нибудь отправляли что-то на GitHub, а затем CircleCI потребовалось 15 минут, чтобы сказать вам, что ваш тест не прошел? Это может быть просто ошибка линтинга, и мы должны были получить уведомление через несколько минут.
Чтобы повысить вашу продуктивность, лучше быстрее отказываться от локальной среды разработки. Перехватчик Git может помочь настроить некоторые необходимые проверки перед фиксацией:
- Только тестируйте связанные файлы
- Только файлы, связанные с lint
- Применить автоматическое форматирование
- Тип проверки
Используя Husky и lint-staged, мы можем настроить вышеуказанные проверки с помощью нескольких строк конфигурации. Многие проекты, такие как Create-react-app, используют такие инструменты. Пол поделился некоторыми примерами файлов конфигурации, чтобы как можно скорее получить предупреждение о сбое.
Автоматизировать установку узлового модуля
Иногда мы забывали, что требуемые зависимости npm меняются, когда мы меняем ветку кода. Что ж, git hook также может взять на себя установку узловых модулей, и это экономит время!
Husky предоставляет переменную $ HUSKY_GIT_PARAMS, поэтому мы можем проверить это и решить, устанавливаем мы node_modules снова или нет. Таким образом, больше не требуется ручная установка.
Используйте Build Tracker, чтобы отслеживать размер сборки.
Как разработчик, каждый раз, когда мы добавляем новую зависимость, мы хотели бы знать, как она влияет на размер сборки. Build Tracker, разработанный Полом Армстронгом, призван автоматизировать отслеживание размера пакетов. С помощью панели инструментов, отображающей размеры пакетов каждой сборки с течением времени, мы можем отслеживать рост размера и определять те, которые потенциально влияют на скорость загрузки приложения.
Как сказал Пол, это действительно помогает Twitter выявлять некоторые действительно серьезные проблемы до того, как они будут запущены в производство.
Сохранение Интернета, 16 мс за раз
Автор: Джошуа Комо
Джошуа Комо, инженер-программист в Khan Academy, рассказал о различных способах создания плавной анимации в браузере.
Он объяснил этапы, которые браузер выполняет для визуализации одного кадра из множества необходимых для выполнения анимации.
Эти этапы следующие:
Самые дорогие этапы - это верстка и покраска. Этап макета отвечает за вычисление размера и положения каждого элемента в документе, в то время как краска заботится о применении цветов, визуализации изображений, теней и т. Д.
Очевидно, есть способ пропустить эти этапы, избегая использования некоторых свойств CSS в ключевом кадре или переходе.
Например, чтобы пропустить этап макета, мы можем использовать преобразования CSS и прозрачность вместо использования ширины, высоты, полей, отступов, абсолютного позиционирования и т. д.
Имея это в виду, мы можем оптимизировать нашу анимацию, чтобы достичь святого Грааля, известного как частота кадров 60 FPS.
Для более сложной анимации (которая, например, включает в себя множество частиц) Джошуа дал нам довольно нетрадиционный совет, вдохновленный индустрией 2D-видеоигр: анимационный спрайт.
Цель здесь заключается в создании изображения, содержащего каждый кадр анимации, отображении его в оболочке, имеющей те же размеры, что и у одного кадра анимации, и пошаговом перемещении изображения с помощью преобразования CSS для воспроизведения анимации.
Вот пример кода:
Спрайт:
Компонент:
И стилизованные компоненты:
И это даст нам следующий результат:
В заключение мы можем перефразировать Иисуса Навина, сказав: «Не бойтесь нарушать правила». Это означает, что делать необычные вещи не обязательно, если они действительно улучшают производительность и удобство использования.
P.S .: Если вам нравится работать над некоторыми из этих тем или вы просто заинтересованы в решении проблем европейской городской мобильности на постоянно растущей платформе, у нас есть разные возможности! Проверьте это: https://www.kapten.com/uk/careers/engineering/ .
