Альтернатива React: максимум пользы без отягощения приложения

0
903
views

Перевод статьи «Alternative frameworks that utilize the developer-friendly patterns of React without breaking the bank».

React для разработчика это эквивалент тоста с авокадо. Отличная еда, только вот дорогая (в том числе за счет ненужных ингредиентов). React переписывает большое количество нативного функционала браузеров при помощи таких вещей как виртуальный DOM и синтетические события. Эта практика плохо сказывается на SEO, прогрессивном улучшении и начальном времени загрузки. Но ведь есть и альтернативные варианты — более легковесные и при этом позволяющие создать хороший пользовательский опыт.

Vanilla JS

Кто сказал, что нужно обязательно использовать фронтенд-фреймворк? Во многих проектах наиболее эффективным способом обработки DOM-манипуляций будет использование старого доброго JavaScript в чистом виде. Относительно недавние обновления, такие как Selectors API, сделали ванильный JS куда более дружественным к пользователю. К тому же, вам не придется беспокоиться о случайном включении кода для ненужного функционала.

Preact

Preact это React-подобный фреймворк с практически идентичным синтаксисом, но содержащий меньше ненужного. Если вы уже знакомы с React, вы сможете оценить преимущество десятикратного уменьшения веса. Такое уменьшение достигается благодаря более простому diff-алгоритму и использованию нативного для браузера addEventlistener для прослушивания событий (вместо реализации собственной системы событий, как в React).

Svelte

Svelte это компилятор, позволяющий разработчикам писать компоненты в формате, похожем на обычный HTML и JavaScript с небольшой примесью JSX-паттернов. Разработчики Svelte полностью отказались от использования виртуального DOM. Они объясняют это тем, что накладные расходы от его использования слишком высоки и сводят на нет всю экономию.

Svelte в процессе сборки компилирует компоненты в автономные модули JavaScript.

Согласно документации Svelte, «реализация TodoMVC от Svelte весит 3,6 КБ в сжатом виде. Для сравнения, React с ReactDOM без кода приложения весит около 45 КБ в сжатом виде. Браузеру, чтобы только оценить React, требуется в 10 раз больше времени, чем для запуска Svelte и его работы с интерактивным TodoMVC».

Заключение

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