Глеб Бахмутов рассказал про визуальное тестирование с помощью Cypress — "Visual testing for React components using open source tools".

В качестве примера в статье была взята игра судоку, написанная на React. Для тестирования компонентов использовалась библиотека cypress-react-unit-test. Для визуального тестирования (сравнения скриншотов компонентов) — cypress-image-snapshot.

В статье есть примеры использования Cypress для мока модулей и таймеров. Есть очень подробный пример настройки визуального тестирования. Из-за особенностей рендеринга скриншоты одного и того же компонента будут разными в зависимости от версии браузера и операционной системы. Чтобы обойти эту проблему можно настроить процент, на который разрешено отличаться сравниваемым изображениям. Это хороший подход, но потенциально он может пропускать дефекты. Для надёжной генерации скриншотов в статье разбирается способ с использованием docker. В нём для генерации скриншотов используется точно такой же контейнер, какой работает в CI-системе.

Советую заглянуть в статью, если планируете добавить в свой React-проект визуальное тестирование.

#react #testing

https://glebbahmutov.com/blog/open-source-visual-testing-of-components/

Неделю назад Владимир Гриненко представил Yandex UI — новую библиотеку React-компонентов, которая используется в проектах Яндекса.

Основными требованиями при создании библиотеки были: функциональность, доступность, скорость рендеринга, возможность переопределения компонентов и расширения поведения снаружи, поддержка TypeScript и темизации. Yandex UI под капотом использует bem-react. Поддержка БЭМ-подхода позволяет гибко управлять тем, какой именно код попадает в бандл приложения. Есть поддержка Dependency Injection, с помощью которой можно подменять функциональность компонентов, например, при проведении A/B-тестов или добавлении специфичной логики. Библиотека включает 24 компонента, в будущем планируется её расширение.

Мне лично очень понравилась поддержка DI, но хотелось бы видеть полноценное API на хуках для работы с модификаторами.

#react #yandex #talk

https://www.youtube.com/watch?v=trwdc0JCelA
https://github.com/bem/yandex-ui

Неделя релизов продолжается. Вчера компания Adobe представила свою библиотеку React-компонентов — "Introducing React Spectrum".

В React Spectrum каждый компонент поделён на две части, которые живут в отдельных библиотеках. В библиотеке React Aria находятся хуки для работы с a11y, i18n и поведением компонентов. В библиотеке React Stately — хуки для работы со стейтом компонентов. Такое разделение удобно для переиспользования кода между разными платформами. Эти библиотеки комбинируются под зонтиком библиотеки React Spectrum, которая имплементирует дизайн-систему от Adobe. Компонентов в библиотеке довольно много. Есть Calendar, Table, Tree и другие стандартные компоненты.

Интересное решение. Если нужен компонент с немного другим поведением, можно не форкать библиотеку, а просто переопределить необходимый хук.

#react #ui #release

https://react-spectrum.adobe.com/blog/introducing-react-spectrum.html

В техническом блоге Facebook была опубликована статья про подходы улучшения доступности, которые были использованы на новом сайте социальной сети, — "Making Facebook.com accessible to as many people as possible".

Основные пункты статьи. Чтобы не допускать распространённых ошибок доступности, используют eslint-плагин eslint-plugin-jsx-a11y. Для работы с фокусом используют специальные компоненты, которые также упрощают добавление навигации с клавиатуры. Для улучшения читабельности текста на этапе сборки конвертируют размер шрифта в rem. Иерархия заголовков в документе поддерживается автоматически с помощью специального API. Улучшили работу горячих клавиш с помощью API на базе React контекста. Для валидации разметки используют самописный инструмент, который подсвечивает красным оверлеем все элементы с проблемами a11y.

Хорошая статья. Рекомендую почитать всем, кто интересуется темой доступности.

#a11y #react #facebook

https://engineering.fb.com/web/facebook-com-accessibility/

Джереми Вагнер проанализировал производительность React и Preact и альтернативный подход использования библиотек с серверным рендерингом в разных окружениях — "radEventListener: a Tale of Client-side Framework Performance".

В статье исследуется время инициализации JS-кода, время гидрации и время открытия меню на тестовом сайте. В исследование был добавлен подход с серверным рендерингом и управлением обработкой событий с помощью addEventListener. Эксперименты проводились на разных устройствах: ноутбук 2013-го года, iPhone SE, iPhone SE (2020), Nokia 2.

Из интересного. Инициализация JS-кода на ноутбуке с i5 (Ivy Bridge) было медленнее чем на iPhone SE первого поколения. Также тесты на iPhone SE показывают преимущество над бюджетным Nokia 2, который вышел на два года позже. Во всех тестах на гидрацию преимущество у Preact. Подход с серверным рендерингом и управлением обработкой событий с помощью addEventListener ожидаемо выиграл во всех тестах.

Джереми предлагает использовать серверный рендеринг и нативные браузерные API, если страница не требует сложного управления клиентским состоянием.

#performance #react

https://css-tricks.com/radeventlistener-a-tale-of-client-side-framework-performance/

Себастиен Лорбер из Facebook написал статью про то, какие преимущества даёт пропозал Records & Tuples для React-приложений — "Records & Tuples for React".

Предложение Records & Tuples добавляет новые иммутабельные структуры данных в JS. Записи и кортежи особенно полезны для React, так как много проблем с производительностью и поведением библиотеки связано с устойчивостью ссылок на объекты (object identities). Некорректное использование литералов объектов в пропсах может привести не только к проблемам с производительностью, но и в некоторых случаях к бесконечным загрузкам данных.

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

Очень полезная статья. Рекомендую почитать всем, кто использует React и кто интересуется темой производительности.

#react #proposal #performance

https://sebastienlorber.com/records-and-tuples-for-react

Натан Себастиан собрал подборку советов для создания расширяемых React-приложений — "6 Tips and Best Practices for a Scalable React Project".

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

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

#react

https://blog.bitsrc.io/best-practices-and-tips-for-a-scalable-react-application-db708ae49227

Примерно месяц назад вышел первый релиз кандидат React 17, в котором нет новых значимых фич. Но в новой версии появится поддержка нового типа преобразования JSX (JSX transform), благодаря которому больше не нужно постоянно импортировать React. Луна Руан в блоге React написала про это статью — "Introducing the New JSX Transform".

Babel и TypeScript преобразуют JSX в вызовы функций React.createElement, поэтому нужно импортировать React в текущий скоуп. Это неинтутивно. Также использование React.createElement влечёт за собой дополнительные накладные расходы. Для решения этих проблем был разработан новый тип преобразований JSX.

React 17 RC включает в себя две новые функции jsx и jsxs, которые должны использоваться только транспиляторами. Транспиляторы импортируют их в код компонентов автоматически при преобразовании JSX.

Поддержка нового преобразования уже есть в Babel 7.9 и TypeScript v4.1 beta. Для его включения в babel 7.9 нужно указать опцию {"runtime": "automatic"}. В babel 8 он будет включаться по умолчанию.

Новый JSX transform будет бэкпортирован в React 16.x, React 15.x и React 0.14.x.

#react #jsframeworks

https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

Марк Эриксон рассказал о том, в каких случаях Redux не самое лучшее решение — "When (and when not) to reach for Redux".

Redux появился в 2015 году и был очень популярен несколько лет, но сейчас это не самый лучший инструмент. Вопрос кэширования данных взяли на себя библиотеки swr, React Query, Apollo. Проблемы с явной передачей пропсов от корня к дочерним компонентам (props drilling) решается в React из коробки, начиная с версии 16.3, благодаря стабилизировавшемуся Context API. Также Марк говорит о том, что Redux неоптимален для работы со стейтом, но не приводит альтернатив, поэтому позволю себе наглость добавить их от себя: Mobx, Reatom, Effector.

Несмотря на свой статус основного мейнтейнера Redux Марк довольно трезво оценивает текущую ситуацию с Redux и говорит о том, что серебряной пули нет, инструменты нужно выбирать в зависимости от ситуации. В некоторых случаях подходящим решением может быть Redux.

#react #statemanagement

https://changelog.com/posts/when-and-when-not-to-reach-for-redux

Доминик Тобиас написал статью о подходах к улучшению производительности CSS-in-JS — "How to increase CSS-in-JS performance by 175x".

Заголовок у статьи, конечно, кликбейтный, но написано там всё по делу. В прошлом году на perfplanet было опубликовано исследование с печальными результатами — популярные CSS-in-JS библиотеки, которые в рантайме внедряют на страницу стили (Styled Components, Emotion), могут очень негативно влиять на производительность сложных страниц.

Для улучшения производительности Доминик предлагает использовать CSS-in-JS библиотеки, которые могут извлекать стили из JS на этапе компиляции, также предлагает использовать CSS-переменные для темизации и рекомендует (по возможности) отказаться от динамики в стилях.

Полезная статья. Рекомендую почитать всем, кто использует Styled Components, Emotion и другие подобные библиотеки.

#react #cssinjs #performance

https://dominictobias.medium.com/how-to-increase-css-in-js-performance-by-175x-f30ddeac6bce