Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Публикуем вторую часть перевода материала, посвящённого пятёрке лучших JavaScript-инструментов для разработки клиентских частей веб-проектов. В первой части речь шла о библиотеке React и о фреймворке Angular. Здесь мы обсудим Vue, Ember и Backbone.
Идеи, лежащие в основе 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. Такие, как
Одна из причин, по которой Vue стоит рассматривать как достойную альтернативу React, заключается в том, как здесь организовано управление состоянием приложения. В React-проектах, при использовании связки React+Redux, по мере роста размеров приложения усложняются и процедуры, необходимые для управления его состоянием. Это может свестись к тому, что программисту, вместо работы над самим приложением, приходится тратить немало времени на настройку механизмов Redux. В Vue для управления состоянием используется библиотека Vuex. Она похожа на Flux и создана специально для Vue. Работать с ней гораздо удобнее, чем с Redux.
Если вы пытаетесь сделать выбор между Vue и Angular, то причины, по которым можно предпочесть Vue, можно свести к тому, что Angular, в сравнении с Vue, выглядит переусложнённым крупномасштабным проектом, в природе которого заложено стремление ограничивать разработчика. Vue же гораздо проще чем Angular и не так сильно ограничивает программистов.
Ещё одно преимущество Vue перед Angular и React заключается в том, что для работы с этим фреймворком не придётся учить новый язык.
Дадим краткую характеристику экосистемы, в которую попадает тот, кто выбирает Vue:
Vue — это замечательный фреймворк, превосходящий другие в плане удобства работы с ним. Возможно, я и сама в недалёком будущем перейду на Vue. Этот фреймворк не такой сложный, как React и Angular, и при этом хорошо подходит для разработки приложений самого разного масштаба.
В этом году вышел Ember 3.13. В этой версии фреймворка появилось много нового. Ember похож на Backbone и Angular. Это, кроме того, один из старейших JavaScript-фреймворков. Но, несмотря на это, он, в плане возможностей, не отстаёт от своих более молодых конкурентов. Например, он поддерживает технологию отслеживаемых изменений свойств, которая упрощает наблюдение за изменениями состояния приложения и облегчает визуализацию этих изменений.
Ember обладает довольно-таки замысловатой архитектурой, которая позволяет быстро создавать огромные клиентские приложения. В нём реализованы типичные MVC-идеи. Ember-приложения строятся из адаптеров, компонентов, контроллеров, вспомогательных объектов, моделей, маршрутов, сервисов, шаблонов, утилит, дополнений.
Одна из наиболее интересных возможностей Ember — инструменты командной строки (Ember CLI). Эти инструменты помогают фронтенд-разработчикам продуктивно трудиться. С помощью Ember CLI можно создавать не только шаблоны проектов, но и заготовки контроллеров, компонентов и других сущностей, из которых строятся приложения.
В распоряжении того, кто занимается фронтенд-разработкой с использованием Ember, оказываются следующие основные возможности:
Пожалуй, Ember можно назвать недооценённым фреймворком, но несмотря на это он отлично подходит для создания сложных веб-проектов.
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 — это именно то, что вам нужно.
В этом материале был дан краткий обзор веб-фреймворков, которые были признаны лучшими по результатам опроса, проведённого среди разработчиков из ValueCoders. Надеемся, этот обзор поможет сделать правильный выбор тем, кто занят выбором фреймворка для своего очередного веб-проекта.
Уважаемые читатели! На чём вы пишете фронтенд веб-проектов?
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. Надеемся, этот обзор поможет сделать правильный выбор тем, кто занят выбором фреймворка для своего очередного веб-проекта.
Уважаемые читатели! На чём вы пишете фронтенд веб-проектов?
