Неделю назад Владимир Гриненко представил 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/