[Перевод] Малоизвестные, но популярные JS-фреймворки для фронтенда

Не так давно мы, создавая динамические веб-приложения, использовали для работы с DOM чистый JavaScript или jQuery. С тех пор появилось много замечательных JavaScript-фреймворков и библиотек. Они помогают разрабатывать проекты, которые, по привлекательности и удобству, превосходят то, что было раньше.

zeay7xo5fljv8kua-1ounuum5ym.png

Автор статьи, перевод которой мы сегодня публикуем, хочет рассказать о нескольких мощных, но малоизвестных клиентских фреймворках и библиотеках, основанных на JavaScript. Конечно, «большая тройка», в лице Angular, React и Vue, никуда не делась, но в мире веб-разработки есть и другие инструменты, достойные внимания. Такие, например, как Svelte, Preact и Riot. Вопрос выбора подходящего средства зависит от многих факторов. Среди них — знания разработчика, особенности проекта, ситуация на рынке. Поэтому давайте рассмотрим малоизвестные фреймворки, расширив тем самым свободу выбора тех, кто ищет подходящий инструмент для своего очередного проекта.

Svelte


efd4faab3003dc7c3a27854ea513dfae.png


Фреймворк Svelte — это новый представитель инструментов для фронтенд-разработки, популярность которого в последнее время постоянно растёт. О нём говорят как о примере совершенно нового подхода к созданию пользовательских интерфейсов. В сравнении с Vue или React, которые, делая своё дело, сильно полагаются на возможности браузеров, Svelte работает иначе. Он, на этапе сборки проекта, задействует шаг компиляции, что способствует улучшению производительности основанных на нём проектов.

Svelte нацелен не только на производительность готовых проектов, но и на удобство разработчика. Это достигается за счёт уменьшения потребности в написании больших объёмов шаблонного кода.

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


  • Впечатляющая производительность
  • Маленькие сборки
  • Доступность
  • Стандартная система инкапсуляции стилей
  • Декларативные переходы
  • Отсутствие технологии виртуальной DOM
  • Необходимость в меньших объёмах шаблонного кода
  • Истинная реактивность


Ember


d337257307618ba18310a01070e1074c.png


Ember.js — Это ещё один отличный клиентский фреймворк, который ускоряет разработку веб-приложений, снимая с разработчика нагрузку по выполнению повторяющихся стандартных действий. Он позволяет программистам работать с современными возможностями JavaScript.

Этот фреймворк имеет замечательный инструмент командной строки, ускоряющий выполнение задач по сборке проектов, по их тестированию, поддерживающий удобную среду разработки с такими возможностями, как автоматическая перезагрузка страниц. В Ember, кроме того, имеется отличный маршрутизатор, идеи которого вдохновили разработчиков других подобных систем, например — маршрутизатора React. Фреймворк весьма производителен благодаря тому, что в нём применяются технологии, ускоряющие рендеринг страниц.

Аддоны Ember дают в распоряжение разработчика множество плагинов, позволяющих расширять возможности приложений. Система Ember Concurrency, например, может быть использована при написании надёжного асинхронного кода. А Simple Auth — это аддон, реализующий множество способов аутентификации. Средство Ember CLI Deploy позволяет реализовывать поддерживаемую логику развёртывания, которую можно использовать многократно.

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


  • Стандартный конвейер сборки проектов
  • Лучшая, среди схожих инструментов, система маршрутизации
  • Продвинутые средства для работы с данными
  • Полномасштабная система тестирования
  • Шестинедельный цикл релизов


Preact


d3876bac5cedce55959b6969089901b2.png


Библиотека Preact, как можно судить из её названия, весьма похожа на React. Правда, библиотека Preact гораздо меньше, её размер составляет всего 3 Кб. Но эта библиотека даёт разработчику такой же современный API, как у React. Preact предоставляет программисту самую компактную реализацию абстракции виртуальной DOM, стабильные возможности платформы, средства обработки событий. Эту библиотеку, без шага транспиляции, можно напрямую использовать в браузере.

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

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


  • Поддержка классов ES6, хуков и функциональных компонентов
  • Поддержка JSX, виртуальной DOM, инструментов разработчика
  • Стандартная поддержка серверного рендеринга
  • Поддержка современных браузеров (IE11+)


Riot


2259bf64b10a2130db244d75e8db39c8.png


Riot — это простая и изящная библиотека для разработки пользовательских интерфейсов, основанная на компонентах. Она позволяет применять пользовательские элементы во всех современных браузерах без необходимости использования полифиллов. Эти компоненты помогают объединять HTML и JavaScript, формируя сущности, подходящие для многократного использования. Синтаксис Riot отличается чистотой и рассчитан на лёгкость восприятия программных конструкций разработчиком.

Размер Riot составляет всего 6 Кб, то есть, речь идёт о весьма компактной библиотеке. Эта библиотека поддерживает меньше методов API, чем её более масштабные товарищи. Это говорит о том, что для продуктивного использования Riot программисту нужно потратить на обучение не особенно много времени.

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


  • Высокая производительность и предсказуемость
  • Близость к веб-стандартам
  • Хорошие взаимоотношения с инструментами разработки
  • Приятный синтаксис
  • Высокая скорость изучения
  • Скромный размер
  • Мощная модульная экосистема


Aurelia


bf5c0e18ad3902687b41e769ea086f56.png


Aurelia — это современный клиентский JavaScript-фреймворк для разработки веб-приложений, мобильных и настольных проектов. Приложения с использованием Aurelia создают, собирая простые компоненты, созданные на базе чистого JavaScript или TypeScript и соответствующего HTML-кода.

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

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


  • Лёгкость в изучении
  • Высокая производительность
  • Реактивная система привязок
  • Простое тестирование
  • Обширная экосистема
  • Отличная расширяемость
  • Поддержка маршрутизации, композиции, прогрессивного расширения возможностей приложения


Mithril


c5d6749dcbf720990df21b6a523da348.png


Mithril.js — это современный клиентский JS-фреймворк, предназначенный для разработки одностраничных веб-приложений. Он отличается малыми размерами (9.79 Кб), поддерживает маршрутизацию и XHR.

Им пользуются такие компании как Nike и Vimeo. Среди поддерживаемых им технологий — JSX, ES6+, анимация, тестирование.

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

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


  • Очень высокая производительность
  • Поддержка виртуальной DOM
  • Поддержка методов жизненного цикла компонентов


Итоги


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

В итоге хочу сказать, что если вы выберете для своего проекта один из фреймворков, входящих в «большую тройку», то вы, совершенно точно, не ошибётесь. Angular отлично подходит для разработки крупномасштабных проектов. Angular-фронтенды часто используют совместно с Java-бэкендами. React и Vue — тоже хорошие варианты. Хочу дать совет: не становитесь фанатами какого-либо фреймворка или какой-то библиотеки. Выбирая инструмент, просто попытайтесь подойти к процессу выбора непредвзято и найти то, что соответствует нуждам вашего проекта.

Уважаемые читатели! Пользуетесь ли вы какими-нибудь фреймворками или библиотеками, которые не входят в «большую тройку»?

1ba550d25e8846ce8805de564da6aa63.png

© Habrahabr.ru