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

Автор оригинала: Shifa Martin
  • Перевод
Публикуем вторую часть перевода материала, посвящённого пятёрке лучших 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. Надеемся, этот обзор поможет сделать правильный выбор тем, кто занят выбором фреймворка для своего очередного веб-проекта.

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


  • +26
  • 20,5k
  • 7
RUVDS.com
1 456,61
RUVDS – хостинг VDS/VPS серверов
Поделиться публикацией

Похожие публикации

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

    0
    Хоть и перевод но:

    Ember похож на Backbone и Angular.

    Чем? Если с Backbone можно сравнивать идею Ember.Object, то с Angular? Наличие cli? К слову, ember-cli удобнее. К примеру, тот же Angular до сих пор не умеет нормально генерировать и регистрировать routes

    В нём реализованы типичные MVC-идеи

    Не совсем так. Изначально он действительно был MVC, сейчас он компонент-ориентированный, если можно так сказать с однонаправленным потоком данных

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

    Те же контроллеры обьявлены как deprecated еще с версии 2

    Handlebars — движок шаблонов, использующийся в Ember-приложениях.

    HTMLBars. Да это в какой-то степени допиленный Handlebars, но все же

      0
      Мне кажется, что вью скоро перегонит реакт по России.
      А вот интересно, почему по миру (кроме России) Вью популярнее, а у нас наоборот)?
        +1
        Ну в россии ещё php популярен — и большинство пишут бэкенд на нём :)
          0
          А вот интересно, почему по миру (кроме России) Вью популярнее, а у нас наоборот)?
          По миру если смотреть на публичный npm реакт ставят в пять раз чаще чем vue
          0

          Пик популярности backbone был в 2013.
          Очень странно писать о нём в 2019.

            0

            Что характерно, всего несколько лет назад, как раз в пик хайпа по реакту, я на связке backbone/marionette делал всё то же самое, только быстрее и чище. Даже сейчас он совсем не так плох, если начинать на нём проект, но определённое устаревание даёт о себе знать

            0
            vue-resource не очень поддерживатся (последний раз 11 месяцев назад). Axios более предпочтителен имхо. Об этом также говорит Эван Ю.

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

            Самое читаемое