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

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



3. Vue


Идеи, лежащие в основе Vue, позаимствованы из Angular и React, но Vue, во многих отношениях, лучше этих двух инструментов фронтенд-разработки. В этом году Vue загрузили более 40 миллионов раз. Недавно вышел отчёт Snyk JavaScript Frameworks Security. Он, в основном, нацелен на исследование безопасности React и Angular, но в нём нашлось место и изучению других проектов. О Vue из этого отчёта можно узнать то, что известно лишь о 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. В этой версии фреймворка появилось много нового. 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. Надеемся, этот обзор поможет сделать правильный выбор тем, кто занят выбором фреймворка для своего очередного веб-проекта.

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


Источник: https://habr.com/ru/company/ruvds/blog/476288/


Интересные статьи

Интересные статьи

Это четвертая и финальная часть из серии моих публикаций, посвященных вопросу ввоза обедненного гексафторида урана (ОГФУ) из Европы в Россию. Первая посвящена технологиям обогащения у...
Привет, Хабровчане! В конце августа в OTUS запускается 2 мощных курса по обратной разработке кода (реверс-инжиниринг). В связи с этим приглашаем вас на День Открытых дверей, где Арту...
Свежая подборка со ссылками на новости и материалы. В выпуске: 5 новых RFC из PHP Internals, а также предложение по развитию языка и пара прототипов новых фич в виде пул-реквестов, порция полез...
Сравнивать CRM системы – дело неблагодарное. Очень уж сильно они отличаются в целях создания, реализации, в деталях.
В предыдущей статье были рассмотрены варианты, на что можно заменить существующие системы в рамках выполнения приказа об импортозамещении. Далее в статьях речь пойдет о выборе конкретных продукто...