Сравнение Angular, Backbone, CanJS и Ember

(Дата публикации оригинала — 12.04.2013)
Выбор JavaScript MVC фреймворка — тяжёлая работа. Нужно учесть много факторов, и число вариантов выбора может быть огромно. Достаточно взглянуть на проект ToDoMVC (о нем по-русски).

Я использовал 4 фреймворка: Angular, Backbone, CanJS и Ember. Поэтому решил сделать сравнение, чтобы помочь вам решить, какой из них использовать. Я выделю несколько факторов, которые вы можете использовать при выборе. Каждый фактор будет иметь оценку от 1 до 5 (больше — лучше). Я старался быть беспристрастным, но, конечно, оценки основаны на личном опыте.

Функции

Есть действительно важные особенности фреймворков, обеспечивающие построение основы приложений. Делает ли он связывание представлений? Двунаправленное связывание? Фильтры? Имеет вычисляемые свойства? Грязные атрибуты? Валидацию форм? (И т.д.) Это может быть очень длинный список. Ниже приводится сравнение того, что я считаю действительно важными функциями в рамках MVC:

Функции	Angular	Backbone	CanJS	Ember
Наблюдаемые (observables)	y	y	y	y
Маршрутизация (Routing)	y	y	y	y
Представление связываний (View bindings)	y	-	y	y
Двунаправленное связывание (Two way bindings)	y	-	-	y
Вложенные представления (Partial Views)	y	-	y	y
Отобранный список просмотра (Filtered list Views)	y	-	y	y

Observables: объекты, изменения которых отслеживаются.

Routing: Изменения якоря URL при изменении отслеживаемых объектов.

View bindings: Использование автоматически изменяемых представлений, когда наблюдаемый объект изменяется.

Two way bindings: Наличие автоматически изменяемых представлений, например, в полях ввода.

Partial views: Представления (визуализация шаблонов), включающие другие представления.

Filtered list views: Показ представлений по некоторым условиям.

Итак, мои оценки реализации суммы функций:

Оценки	Angular	Backbone	CanJS	Ember
Функции	5	2	4	5

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

Гибкость

Существуют сотни удивительных плагинов и библиотек, делающих специализированные функции. Как правило, они делают это лучше, чем инструментами в наборе стандартной поставки. Важно иметь возможность интегрировать их с выбранным MVC-фреймворком.

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

CanJS почти такой же гибкий, как Backbone, так как позволяет легко интегрировать другие библиотеки с минимальными усилиями. Можно даже использовать другой движок рендеринга, если хотите. Я использовал Rivets в CanJS без всяких проблем. Хотя, я рекомендую использовать штатные средства фреймворка.

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

Оценки	Angular	Backbone	CanJS	Ember
Гибкость	3	5	4	3

Порог входа и документация

Angular вначале быстро создаёт вау-эффект. Он легко позволяет делать сложные вещи типа двунаправленной синхронизации. Но после того как вы узнали основы, дальше порог обучения становится выше: открывается сложная структура с большим количеством особенностей. Чтение документации затруднено из-за специфического жаргона и малого количества примеров.

Backbone — довольно прост в освоении. Но вскоре обнаруживаете, что не хватает понимания того, как лучше структурировать код. Нужно будет просмотреть или прочитать несколько учебников, чтобы познакомиться с лучшими практиками. Вы обнаружите, что, вероятно, надо узнать ещё и библиотеку надстройку типа Marionette или Thorax. Так что я не считаю, что Backbone легче изучать, чем CanJS.

CanJS — наиболее лёгкая из данной группы по обучаемости. Просто из canjs.us/ вы будете знать почти всё, что нужно для продуктивности. Существуют, конечно, другие средства обучения, но у меня была редкая необходимость обращения за помощью.

Ember тоже имеет высокий порог обучения, как и Angular. Я считаю, что обучение легче, но оно требует большого вклада в начале, чтобы научиться делать элементарные вещи. Ember-у не хватает раннего вау-эффекта.

Оценки	Angular	Backbone	CanJS	Ember
Порог входа и документация	2	4	5	3

Продуктивность разработки

После достаточного изучения фреймворка начинает иметь серьёзно значение продуктивность работы с ним — его внутренние соглашения, магия, доступная скорость действий.

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

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

CanJS — не блещет и не разочаровывает. Но из-за небольшого порога вхождения вы можете получать результаты очень рано.

Ember, действительно, в этом плане великолепен. Потому что он — список соглашений, которые многое делают автоматически. Нужно лишь изучить и применять соглашения, и Ember будет работать правильно.

Оценки	Angular	Backbone	CanJS	Ember
Продуктивность разработки	4	2	4	5

Сообщество

Легко ли найти помощь, документацию и экспертов?

Backbone. Сообщество огромно. Очень активно на StackOverflow и IRC. Десятки учебников и пособий.

Angular, Ember. Довольно большие сообщества, так же деятельно на StackOverflow и IRC, но объёмом поменьше.

CanJS. Сообщество мало по сравнению с другими, но, к счастью, достаточно активно и полезно. Я не нашел оснований считать меньший размера сообщества CanJS минусом.

Оценки	Angular	Backbone	CanJS	Ember
Сообщество	4	5	3	4

Инфраструктура (экосистема)

Что такое инфраструктура (или экосистема) плагинов или библиотек?
Здесь снова Backbone даёт всем фору- для неё есть куча плагинов. Экосистема Angular начинает быть интересной с её вещами типа Angular UI. Думаю, что экосистема Ember развивается меньше, хотя должна бы быть лучше, из-за её популярности. у CanJS — инфраструктура развита меньше остальных.

Оценки	Angular	Backbone	CanJS	Ember
Инфраструктура	4	5	2	4

Размер

Он может быть важным фактором для мобильных разработок.

	Angular	Backbone	CanJS	Ember
Размер	80K	18K	33K	141K

Backbone — самый маленький, и об этом часто упоминают. Но это ещё не всё.

	Angular	Backbone	CanJS	Ember
Зависимости	Единственная библиотека, не требующая зависимостей	Требует как минимум Underscore и Zepto. Небольшой шаблонизатор есть в Underscore, но вы захотите более качественный, типа Mustache. Вместе — 61K	Требует как минимум Zepto — 57K	требует jQuery и Handlebars. Имеем 269K

Оценки	Angular	Backbone	CanJS	Ember
Размер	4	5	5	2

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

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

Я видел и сделал сам много тестов производительности с этими библиотеками (один пример). Но я не совсем уверен в достоверности этих тестов. Это довольно сложно — убедиться, что тест проверяет правильные вещи и в правильном направлении.

Из того, что я видел в тестах и читал, CanJS, похоже, имеет преимущество, особенно в привязке View к данным. С другой стороны, считаю, что Angular менее производителен на том основании, что он делает «грязную проверку» объектов. Это не может быть так же быстро, как у других. Смотреть тест.

Оценки	Angular	Backbone	CanJS	Ember
Производительность	3	4	5	4

Зрелость

Зрелый ли это фреймворк, показал ли он себя в производстве, много ли сайтов используют его?

Backbone имеет массу сайтов со своим использованием. Его кодовая база — уже 2 года без серьёзных изменений, это отличная вещь в плане зрелости.

Ember — не слишком новая, но в процессе доработок серьёзно менялась, а последняя стабильность измеряется парой месяцев. В этот раз я не считаю фреймворк зрелым.

Angular кажется более стабильным и проверенным, чем Ember. Но не настолько, как Backbone.

CanJS — может показаться, что решение непроверенное, потому что нет массы сайтов с ней. Но она существует гораздо дольше. Она — «вытяжка» из библиотеки JavaScriptMVC, существующей с 2008 года и имеет большой опыт встроенного использования.

Оценки	Angular	Backbone	CanJS	Ember
Зрелость	4	5	4	3

Защищённость от утечек памяти

Это — важный фактор для длительно открытых одностраничных приложений. Вы же не хотите, чтобы это стало проблемой. К сожалению это легко случается, особенно, при самостоятельном создании обработчиков событий DOM.

Angular, CanJS и Ember будут обходить проблемы эффективно, как будто Вы пользуетесь только передовым опытом. Backbone требует от вас делать эту работу своевременного удаления обработчиков.

Оценки	Angular	Backbone	CanJS	Ember
Защищённость от утечек памяти	5	3	5	5

Персональные вкусы

Вероятно, это — самый значительный фактор в выборе фреймворка.

Если нравится...	декларативный HTML	движок на шаблонах	строго придерживаться традиционного паттерна SmallTalk MVC	жёсткий фреймворк
то выбирают...	Angular	Backbone	CanJS	Ember

Плюс, популярны на данный момент — Ember, Angular.
Нет способа оценить вкусы.

Итоговый подсчёт

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

От переводчика: у автора вычисляемая таблица (наподобие Excel/Calc) встроена прямо в текст, в которой читатель 1 кликом может отключить или изменить вес каждой строчки. У нас — мы можем посмотреть на таблицу с равными факторами здесь, а изменить — на странице JsFiddle по ссылке.

Оценки	Angular	Backbone	CanJS	Ember
Функции	5	2	4	5
Гибкость	3	5	4	3
Порог входа и документация	2	4	5	3
Продуктивность разработки	4	2	4	5
Сообщество	4	5	3	4
Ecosystem	4	5	2	4
Размер	4	5	5	2
Производительность	3	4	5	4
Зрелость	4	5	4	3
Защита от утечек памяти	5	3	5	5
Сумма	38	40	41	38

Если вы желаете выбрать весовые коэффициенты по собственным оценкам и предпочтениям, перейдите на авторскую вычисляемую таблицу на JsFiddle: jsfiddle.net/sporto/5JVxh/light/. Там можно будет как изменить значимость каждой строчки, так и оценку автора по каждому из факторов.

Таким образом, я предполагаю, что всё зависит от личного вкуса или от значимости каждого фактора для вас.

Замечание о Backbone

Я не могу закончить пост без такого замечания. Бекбон была великолепной библиотекой 2 года назад, но сейчас есть вещи лучше. Я уверен, что много людей выбирают Бекбон исключительно из её популярности, а это — порочный круг.

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

Автор: Sebastian Porto, github.com/sporto/.

Автор: spmbt

Источник