Мне кажется, что я начинаю свои проекты только из-за редмишек (read me). Ну знаете, как в начале придумать проблему, а потом её героически победить. Это как TDD, но только здесь не тесты, а редми вперед, прямо как функциональщики программируют, задом наперед.

Короче говоря, README — это своеобразный план, примерно как бэкендеры и фронтендеры согласовывают интерфейс до начала разработки. Здесь то же самое, но только договор с самим собой. План нужен для уверенности, что всё продумано и схвачено. Не могу не процитировать Лапенко:

А мой план таков: в рамках этой статьи я хочу поделиться с вами своим личным опытом освоения этого подхода.

Пет-проекты отличаются от обычных тем, что их делают с любовью. Пет-проекты — это не про количество, а скорее про качество. Именно поэтому я решил представить вам сразу три своих проекта. Согласен, не бьется с логикой, но это просто попытка продать три продукта по цене одной.

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

Stylin

Это, наверное, самый быстрый и элегантный способ создания стилизованных компонентов React. С помощью этой библиотеки можно импортировать компоненты непосредственно из файлов CSS:

На входе получаем компонент, который полностью стилизован и типизирован, а его внешний вид (стили CSS) управляется через свойства компонента.

И тут самое место задать вопрос: «Карл, как?! Как эта магия работает?».

Одно дело — это написать в редми, другое дело — это реализовать. Благо, у меня есть фантазия и большой опыт разработки. Мне удалось найти решение в виде CSSDoc, это как JSDoc, но только для CSS. Так вот такие аннотации необходимо добавить перед стилями компонента:  

А чтобы всё это заработало, мне пришлось написать специальные загрузчики для Webpack:

Загрузчики преобразуют аннотации в компоненты React и генерируют типы TypeScript. В зависимости от значения свойства компонента, соответствующий CSS класс будет присвоен значению className. Ниже приведенный код — это упрощенный результат конвертации для общего понимания.

Все эти преобразования и извлечение CSS стилей происходят во время сборки проекта. Это означает, что стили не создаются динамически во время выполнения приложения, как это делается в библиотеках css-in-js. Отсюда и скорость: отрисовка компонентов происходит быстро.

В целом, как всё это работает, можно посмотреть в этой демке. Более подробную информацию об этой библиотеке можно получить в README или в этой статье. Однако статья написана в пафосной форме, я был молод и не совсем понимал, что писал, в общем я предупредил.

Holycow

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

Итак, представляю вашему вниманию библиотеку holy state для управления состоянием React-приложения с использованием хуков. Эту библиотеку можно рассматривать как утилитку по созданию хуков, которые могут хранить состояние вне компонентов React. Самая интересная часть заключается в том, что она работает без использования провайдеров контекста, observables, селекторов или HOC-коннекторов.

Основные особенности

— Библиотека не имеет внешних зависимостей. Размер Gzip: ~1.6kb.
— Хуки могут быть использованы за пределами компонентов React.
— Жадная отрисовка. Компоненты перерисовываются только при обновлении значений.
— Вычисляемые значения с кэшированием и вложенностью хуков.
— Асинхронные экшены.
— Подписка на изменения состояния.
— Поддержка событийно-ориентированной архитектуры.
— Гармония с функциональным программированием.
— Полная типизация TypeScript.

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

А для более сложных задач по обновлению состояния, доступны экшены — место для размещения бизнес-логики, такой как валидация, сетевые операции и прочего:

Вычисляемые значения с поддержкой кэширования:

Поддержка событийно-ориентированной архитектуры позволяет разделять код и загружать его с помощью ленивой загрузки. Такой Redux way подход, но в более простой форме.

Следующая библиотека предназначена для очень специфичных кейсов. Если вам не нравится JSX или по каким-то причинам вы не хотите использовать его в своих проектах, то следующая библиотека создана специально для вас.

React on lambda

Всё очень просто, вместо JSX используем функции. Чтобы что?

А просто, для фана:

Конечно, не стоит серьезно относиться к использованию символа λ (лямбды). Он был использован для привлечения внимания и создания шума вокруг. Вместо него можно использовать любой другой допустимый символ. Основное отличие этой библиотеки от подобных заключается в том, что все функции каррированы и удобно программировать в point free стиле.  

Если эта библиотека вас заинтересовала, то можно глянуть демку или сходить на репозиторий.

Тех, кого я еще не сбил с толку своими проектами, относительно RDD. Ну, о том, как я начинаю пет-проекты через README, то боюсь вас огорчить. Я, как и любой программист, не люблю писать редмишки и делаю это на последнем этапе (за редким исключением).

Берегите себя и прошу вас: не ешьте на ночь сырых помидоров!