Сравниваем AngularJS и EmberJS

Сравниваем AngularJS и EmberJS

В своей недавней статье мы сравнивали AngularJS с React и выделили отличия между двумя фреймворками. На этот раз рассмотрим EmberJS фреймворк, который отвечает за все “тяжелые” операции в веб-разработке. Ниже познакомимся с его историей, примерами использования, а так же сравним его с AngularJS в разрезе возможностей и функционала.

Поисхождение EmberJS

EmberJS - это фреймворк для языка JavaScript, который изначально назывался SproutCore. В декабре 2011 года его решили переименовать в EmberJS для того, чтобы разделить виджет библиотеку SproutCore 1.0 и сам фреймворк. Роль главного разработчика EmberJS сыграл Yehuda Katz, который так же известен своим участием в разработке jQuery, Rails и SproutCore.

Программирование по соглашениям

Главная цель в EmberJS - это стремление соблюдения идеи “программирования по соглашениям”. Вместо того, чтобы применять сложные настройки для каждого маршрута вашего приложения, Ember предлагает придерживаться определенных соглашений в именовании. Таким образом большая часть кода генерируется автоматически, а к настройкам обращается только в том случае, когда соглашение не соблюдается. Например, в приложении существует таблица “Sale”, данные которой заполняются из одноименного класса “Sale”. В таком случае вы автоматически получите соответствующий маршрут “/sale/”. Тем не менее, если вы решите не соблюдать это соглашение и, например, назовете таблицу “Sales”, а не “Sale”, то следует согласовать данные с таблицей при помощи настройки.

Шаблоны

Один из огромных плюсов использования шаблонов - сокращение объема необходимого кода. Не все JavaScript фреймворки предлагают полноценный механизм шаблонизации, например, Backbone. Оба наших фреймворка, AngularJS и EmberJS, поддерживают шаблонизацию на уровне ядра. AngularJS использует привязку данных при помощи атрибутов HTML элементов, получая при этом довольно краткие, не перегруженные кодом, шаблоны. В тоже время EmberJS использует шаблонизатор Handlebars, который в свою очередь построен на базе движка Mustache, а в нем очень активно применяется преобразование строк для обработки шаблона и заполнения его данными.

AngularJS использует все возможности DOM, что позволяет ему создавать хорошо структурированные шаблоны, уменьшая при этом количество кода, необходимого для создания окончательной страницы. EmberJS и Handlebars полностью игнорируют DOM и полагаются только на преобразование текста в шаблоне, генерируя HTML на лету. Хотя каждый способ имеет свои достоинства и недостатки, стоит сказать, что для достижения одного и того же результата при работе с AngularJS требуется меньше кода, чем в EmberJS.

Производительность

Чтобы отобразить нужные данные, оба фреймворка, AngularJS и EmberJS, основываются на изменениях в DOM. Поэтому они не превзойдут такие фреймворки как ReactJS, так как он изначально направлен на повышенную производительность. Хотя оба фреймворка показывают свои недостатки при работе с большими объемами данных, в них и заключается отличие. В такой ситуации AngularJS значительно превосходит EmberJS, особенно, при отрисовывании списков, которые редко изменяются (например, не требуется разрешать пользователю изменять данные при помощи полей ввода). Но когда интерактивность приложения ставится на первое место, EmberJS превосходит AngularJS.

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

Архитектура приложения

Оба фреймворка используют MVC архитектуру в своем ядре. Организация этой архитектуры немного отличается в AngularJS и EmberJS. AngularJS основывает обработку данных на использовании моделей и двусторонней привязки данных, ставя ударение на структуру документа с событийной архитектурой, управляемой при помощи контролеров. Он уделяет больше внимания на взаимодействие с браузером и на генерацию корректного HTML когда. EmberJS тоже использует двустороннюю привязку данных при помощи моделей и события в документе, он все-таки более внимательно подходит к поведению приложения. Оба фреймворка строят свои “предположения” о вашем приложении, EmberJS куда больше “настаивает” на своем представлении о структуре приложения и ожидает от вас соблюдения его мнения, а AngularJS дает разработчику больше свободы в аспектах реализации стека клиентской стороны.

Заключение

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

Комментарии

0
Войти
Комментариев нет.
Войдите чтобы оставлять комментарии.