Топ-5 JS-фреймворков для фронтенд-разработки в 2020 году. Часть 2

Публикуем вторую часть перевода материала, посвящённого пятёрке лучших JavaScript-инструментов для разработки клиентских частей веб-проектов. В первой части ^[1] речь шла о библиотеке React и о фреймворке Angular. Здесь мы обсудим Vue, Ember и Backbone.

^[2]

3. Vue

Идеи, лежащие в основе Vue, позаимствованы из Angular и React, но Vue, во многих отношениях, лучше этих двух инструментов фронтенд-разработки. В этом году Vue загрузили более 40 миллионов раз. Недавно вышел отчёт ^[3] Snyk JavaScript Frameworks Security. Он, в основном, нацелен на исследование безопасности React и Angular, но в нём нашлось место и изучению других проектов. О Vue из этого отчёта можно узнать то, что известно лишь о 4 его непосредственных уязвимостях ^[4], которые были устранены.

Если вы незнакомы с Vue, то вот — несколько ключевых фактов об этом фреймворке.

При работе с Vue логика компонента, его макет и стили хранятся в одном файле. Так же, за исключением стилей, материалы проектов хранятся и в React. Взаимодействие компонентов в Vue обеспечивается с помощью объектов, хранящих свойства и состояние компонентов. Этот подход тоже, ещё до того, как он появился в Vue, был использован в React.

Vue, что роднит его с Angular, позволяет смешивать HTML-разметку и JavaScript-код. Для того чтобы интегрировать данные компонента в шаблон, нужно использовать директивы Vue. Такие, как v-bind или v-if.

Одна из причин, по которой Vue стоит рассматривать как достойную альтернативу React, заключается в том, как здесь организовано управление состоянием приложения. В React-проектах, при использовании связки React+Redux, по мере роста размеров приложения усложняются и процедуры, необходимые для управления его состоянием. Это может свестись к тому, что программисту, вместо работы над самим приложением, приходится тратить немало времени на настройку механизмов Redux. В Vue для управления состоянием используется библиотека Vuex. Она похожа на Flux и создана специально для Vue. Работать с ней гораздо удобнее, чем с Redux.

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

▍Элементы экосистемы Vue

Дадим краткую характеристику экосистемы, в которую попадает тот, кто выбирает Vue:

• Для управления состоянием Vue-приложений используется библиотека Vuex, в основу которой положены концепции, родственные Flux.
• Существуют инструменты разработчика для Chrome и Firefox, облегчающие создание Vue-проектов.
• В экосистеме Vue имеется загрузчик vue-loader для webpack, позволяющий использовать компоненты Vue в формате однофайловых компонентов.
• Для работы с серверными API можно воспользоваться HTTP-клиентом vue-resource и библиотекой Axios.
• Vue поддерживает фреймворк Nuxt.js, в возможности которого входит поддержка приложений, которые рендерятся на сервере. Nuxt.js можно считать конкурентом Angular Universal.
• Для разработки мобильных приложений, основанных на Vue, можно воспользоваться библиотекой Weex.

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

4. Ember

В этом году вышел Ember 3.13 ^[5]. В этой версии фреймворка появилось много нового. Ember похож на Backbone и Angular. Это, кроме того, один из старейших JavaScript-фреймворков. Но, несмотря на это, он, в плане возможностей, не отстаёт от своих более молодых конкурентов. Например, он поддерживает технологию отслеживаемых изменений свойств, которая упрощает наблюдение за изменениями состояния приложения и облегчает визуализацию этих изменений.

Ember обладает довольно-таки замысловатой архитектурой, которая позволяет быстро создавать огромные клиентские приложения. В нём реализованы типичные MVC-идеи. Ember-приложения строятся из адаптеров, компонентов, контроллеров, вспомогательных объектов, моделей, маршрутов, сервисов, шаблонов, утилит, дополнений.

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

▍Элементы экосистемы Ember

В распоряжении того, кто занимается фронтенд-разработкой с использованием Ember, оказываются следующие основные возможности:

• Ember CLI — инструмент командной строки для быстрого прототипирования приложений и для управления зависимостями.
• Стандартный сервер разработчика Ember.
• Ember Data — библиотека для работы с данными.
• Handlebars — движок шаблонов, использующийся в Ember-приложениях.
• QUnit — фреймворк для тестирования Ember-проектов.
• Ember Inspector — инструменты разработчика для Chrome и Firefox.
• Ember Observer — каталог дополнений для Ember CLI.

Пожалуй, Ember можно назвать недооценённым фреймворком, но несмотря на это он отлично подходит для создания сложных веб-проектов.

5. Backbone.js

Backbone — это JavaScript-фреймворк, основанный на архитектуре, подобной MVC. Скажем, то, что в MVC называется «контроллером» (Controller) в Backbone называется «представлением» (View). Представления Backbone могут использовать различные системы шаблонизации. Например — Mustache, Handlebars, jQuery-tmpl. В Backbone-проектах можно использовать и сторонние библиотеки. Надо отметить, что единственной жёсткой зависимостью Backbone является библиотека Underscore.js.

Backbone — это лёгкий в использовании фреймворк, который позволяет быстро разрабатывать одностраничные приложения. Среди вспомогательных средств, используемых совместно с Backbone.js, можно отметить такие, как Chaplin, Marionette, Thorax.

Если вам нужно разработать приложение, с которым будут работать пользователи, принадлежащие к различным группам, то для разделения моделей можно воспользоваться коллекциями (массивами) Backbone. В моделях, коллекциях, маршрутах и представлениях Backbone можно пользоваться событиями.

▍Элементы экосистемы Backbone

Среди особенностей экосистемы Backbone можно отметить следующие:

• Библиотека Backbone включает в себя события, модели, коллекции, представления и маршрутизатор.
• Библиотека Underscore.js, от которой зависит Backbone, содержит набор вспомогательных функций, которые помогают писать кросс-браузерный JS-код.
• При разработке Backbone-приложений можно использовать различные системы шаблонизации.
• Средство командной строки Backbone CLI упрощает разработку приложений.
• Библиотеки Marionette, Thorax и Chaplin помогают создавать приложения, отличающиеся особыми архитектурными решениями.

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

Итоги

В этом материале был дан краткий обзор веб-фреймворков, которые были признаны лучшими по результатам опроса, проведённого среди разработчиков из ValueCoders ^[6]. Надеемся, этот обзор поможет сделать правильный выбор тем, кто занят выбором фреймворка для своего очередного веб-проекта.

Уважаемые читатели! На чём вы пишете фронтенд веб-проектов?

^[7]

Автор: ru_vds

Источник ^[8]