company_banner

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

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



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

Svelte



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

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

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


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

Ember



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

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

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

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


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

Preact



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

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

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


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

Riot



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

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

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


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

Aurelia



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

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

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


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

Mithril



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

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

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

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


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

Итоги


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

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

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

RUVDS.com
RUVDS – хостинг VDS/VPS серверов

Комментарии 30

    +13
    как популярное может быть малоизвестным?
      +3
      Очень поддерживаю вопрос.

      Я еще понял бы, если б написали «хорошие, но малоизвестные», и провели бы серьезный теханализ. А сейчас заголовок читается как «чёрные, но белые».
        +1

        Широко известные в узких кругах?

          0
          Вообще-то это перевод, и так в оригинале. Если же говорить о терминологии, то популярность необязательно находится в прямой зависимости от известности, ибо первое определяет степень востребованности (или обожания), а второе — осведомлённость, причём популярность чаще всего можно «измерить» только среди тех кто осведомлён (хотя бывают и исключения).
            0
            Я думаю, что понятие «популярный», указанное без пояснений, следует понимать неограниченно, т.е. популярный среди всех представителей категории. Каким ещё может быть умолчание для понятия популярный?
            0

            Не знаю, но вот как известное (минимум, на Хабре) может быть непопулярным знаю — mol

              0
              Популярен среди тех, кому известен, а известен мало кому. (Научился у одного небезызвестного политика =)
              0
              использую RiotJS 3-ей версии. авторы на 3-ю версию забили, которая действительно столько весила и была и остается действительно крутой. Но 4-ая версия, вот сейчас скачал 540кбайт. min — версия. Или я что-то не понимаю, или это далеко за гранью даже всех остальных сегодняшних монстров.
              За Mithril спасибо, на первый взгляд очень интересный вариант. Aurelia тоже посмотреть надо. Спасибо большое за статью!
                +1
                mithril мне всегда нравился за компактность и минималистичность. коллегам, увы, нет, им все реакты подавай с редуксами :(
                0
                Пользуетесь ли вы какими-нибудь фреймворками или библиотеками, которые не входят в «большую тройку»?

                Ничего не написали про обвязки для webcomponents — от Stencil.js (между прочем, довольно известного в узких кругах) до LitElement. Упомянутый Riot.js (да и Svelte в этой части) — это попытка навелосипедить свои собственные вебкомпоненты, хотя уже стандарт есть.
                Ничего не написали про библиотеки шаблонизации — это обычно очень простые инструменты для тех, кому не надо масштабировать свой UI, а надо сделать что-то небольшое прямщас.
                  +1

                  Кто-нибудь знает, почему у Мифрилла Крупповская эмблема?


                  image

                    +1
                    У нас используется аурелия, про обширную экосистему это вы конечно загнули.
                      0
                      Было бы удобнее со ссылками в посте.
                        0
                        ну Вы и лентяй, уважаемый)
                        –1

                        Preact полная замена React'у без потери качества.

                          0

                          Не совсем без потери. Некоторые react-библиотеки оказываются несовместимы: https://github.com/preactjs/preact/issues?q=is%3Aopen+is%3Aissue+label%3Acompat

                            0
                            Это далеко не так. Вы не сможете просто выкинуть React в любом проекте и заменить его на Preact. Все таки 30кб эвент системы и других хаков для конкретных браузеров в реакте написано не зря. Если вы разрабатываете только под какой-нибудь хром одной из последних версий, то тогда вполне возможно все пройдет хорошо. Но если задействованы ие11 или мобильный сафари, то 99% у вас будут проблемы не только с переходом между библиотеками, но даже в рамках самого Preact вам придется написать несколько уравнивающих для каждого браузера костылей.
                            +1

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

                              0
                              Все фреймворки из тройки дают основу для которой если нужны таблицы с фильтрацией и формы, то нужно дополнительно еще что-то ставить. Например, для Vue это Vuetify, BootstrapVue и еще несколько.
                              Если совсем не хочется с этой историей заморачиваться, а взять JS-фреймворк где полный фарш из коробки, то предлагаю посмотреть на ExtJS.
                                0

                                Хочется потратить минииум времени. Если vue+vuetify быстрее и проще пишется, чем все остальное, это и есть гптимальный выбор. Для меня проблема в полном отсутствии опыта фронтенд разработки. Пробовал начать изучать ангулар, реакт. Но овни все со своими особенностями, которые нужно очень долго изучать. Vue пробовал — попроще, но все таки тоже желательно потратить много часов, чтобы начать уверенно писать работающие штуки

                                0
                                Вы ищите python версию GWT?
                                  0
                                  Для визуализаций d3, там все что надо. Для DOM элементов React (самый популярный значит самый простой, не так ли), и в нем MobX (не самый популярный, но самый простой и хороший). Сейчас React выглядит как простые функции, принимают параметры, возвращают html, посередине переменные и логика, трудно представить что-то проще.
                                  0
                                    +1
                                    Спасибо за Svelte
                                    Aurelia & Ember древнее большой тройки
                                    Я бы упомнянул Prototype
                                      0
                                      ampersandjs.com 6 лет, в продакшине. После ampersand-state, смотрю на все эти редаксы как на…
                                        0
                                        What is Ampersand.js?
                                        Imagine a version of Backbone.js where each piece (model, view, collection, etc) is its own GitHub repository and npm module with good, unified documentation

                                        Спасибо, но это уже пройденный этап, лучше не надо.

                                        0
                                        хех. хорошие, но не раскрученыне

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