AngularJS, Backbone.js или Ember.js - какой выбрать для вашего проекта?

1. Вступление
2. AngularJS
3. ПЛЮСЫ:
4. видение
5. МИНУСЫ:
6. Директивы
7. ember.js
8. ПЛЮСЫ:
9. видение
10. Компонентная модель
11. МИНУСЫ:
12. Backbone.js
13. ПЛЮСЫ:
14. Контроль производительности
15. МИНУСЫ:
16. Архитектура
17. Утечка памяти
18. Заключение
19. Что выбирают другие
20. Другие должности в этой серии с Крейгом Маккичи:

Эта серия сравнения JavaScript основана на сеансе Codementor Office Hours с Крейг Маккичи автор Руководство по JavaScript Framework. Давайте поговорим о плюсах и минусах AngularJS, Backbone.js и Ember.js, чтобы помочь вам лучше решить, какую инфраструктуру JavaScript MV * выбрать для вашего проекта.

Вступление

Несмотря на то, что я в основном пришел из .NET и пробирался в некоторых Rails и PHP по ходу дела, в течение последнего года или около того я полностью освоился с изучением фреймворков JavaScript. Я консультировался с бизнесом в течение нескольких лет, поэтому я думаю, что могу понять перспективы большинства людей, независимо от того, приходят ли они с точки зрения СМИ или с точки зрения предприятия. Я постараюсь дать вам непредвзятый анализ здесь, хотя, какие рамки вы выбираете, зависит от ваших потребностей. Если бы я пришел сюда и просто сказал «это лучше, чем этот», я думаю, это было бы нечестно. Итак, вот несколько плюсов и минусов каждой основы.

AngularJS

ПЛЮСЫ:

тестирование

Если вы работаете в корпоративном магазине, особенно с опытом работы с Java или Ruby on Rails, вам действительно понравится то, что Angular предлагает в плане тестирования. В то время как другие веб-фреймворки могут поддерживать тестирование, Angular выходит за рамки этого и имеет встроенное внедрение зависимостей, что является большим плюсом для Angular, если вы действительно заботитесь о тестировании.

видение

AngularJS всегда настаивал на поддержке браузера. Кроме того, он думал о поддержке мобильных устройств раньше других платформ, наряду с ECMAScript 6 и веб-компонентами. Таким образом, команда AngularJS очень дальновидна и обладает дальновидностью.

МИНУСЫ:

Встроенный маршрутизатор

Большинство людей фактически не используют маршрутизатор в AngularJS. Конечно, есть альтернатива с открытым исходным кодом, AngularUI Router и там было на самом деле Часы Codementor Office Дином Софером , который является частью команды AngularUI, кто кратко говорит об этом. AngularUI Router в основном устраняет эту слабость, но, если честно, сравнивая фреймворк с фреймворком прямо, Ember был первым там с действительно сильным роутером, в то время как родной роутер Angular не так уж и хорош.

Например, если у вас есть список элементов и сведения об этих элементах, в приложении Ruby on Rails вы могли бы представить / list-route, а затем / details-itemID для подробностей. Однако на самом деле люди захотят видеть список и подробности на одной странице, им может понадобиться список в левой части меню. Когда они нажимают на элемент, они ожидают, что смогут детализировать его детали. Хотя этот вид сложного взаимодействия возможен с базовым маршрутизатором Angular, вы бы на самом деле прятались и показывали вещи, которые не очень родные. У вас нет возможности поместить код в отдельное изолированное место для подробного просмотра и поместить представление списка в отдельное изолированное место.

Напротив, если у вас есть надежный маршрутизатор, как в Ember или AngularUI, у вас будет вложенное представление, где подробный маршрут будет находиться под маршрутом списка и может быть составлен или разделен во вложенной иерархии, которая является супер мощный. Кроме того, маршрутизатор Ember и AngularUI также позволяет вам иметь именованные представления, что полезно, если вы собираетесь разделить страницу на верхний и нижний колонтитулы, боковую панель, левую навигацию и т. Д. По сути, именованные представления также позволят вам иметь изолированный набор кода, контроллер (в случае Angular) и область действия для каждой из этих частей, чтобы вы могли составлять их. На родном Angular роутере такой функции нет. Команда Angular в настоящее время переписывает маршрутизатор для своей новой платформы, и подробности об этом не были опубликованы. Тем не менее, с AngularUI Router, это не должно быть проблемой при выборе используемой платформы.

Директивы

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

ember.js

ПЛЮСЫ:

Маршрутизатор

Как упоминалось ранее, встроенный маршрутизатор Ember очень сильный. Это полный конечный автомат, как и AngularUI Router для Angular.

видение

Ember отлично справился со своим видением, таким как предварительный просмотр object.observe (), следование по пути Angular, раннее обдумывание веб-компонентов и т. Д.

Компонентная модель

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

МИНУСЫ:

тестирование

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

Backbone.js

ПЛЮСЫ:

облегченный

Если у вас есть устаревшее приложение или приложение с «коричневым полем», вы хотите очистить грязный код jQuery и не определились с тем, какую инфраструктуру использовать, это может быть хорошей идеей для внедрения Backbone. Это очень мало, больше библиотеки чем фреймворк, и вы можете использовать его для рефакторинга старого кода, очистки и получения большей модульности вокруг того, что вы делаете.

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

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

МИНУСЫ:

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

Поскольку Backbone больше похож на библиотеку, а это значит, что она не пытается навязать вам свое мнение, это также означает, что она не так вам помогает и не пишет для вас столько кода.

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

Архитектура

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

Утечка памяти

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

Заключение

Что касается Angular и Ember, то это будет разумный выбор. Backbone может показаться менее предпочтительным, хотя на самом деле это связано с поколениями того, что происходило при создании богатых JavaScript-приложений.

Сначала был простой старый JavaScript, в котором никто не хотел писать его, когда это было из-за всех кросс-браузерных проблем. Затем появился jQuery, и, поскольку он может быть назван библиотекой манипуляций с DOM, он устраняет проблемы кросс-браузерности. Он также имел AJAX API, который позволял многое, так что это был своего рода второй шаг в эволюции создания приложений JavaScript.

Третье поколение будет Backbone и Knockout. Эти двое возникли потому, что в тот момент люди осознавали, что не могут повторно использовать код и страницы, когда пишут приложения jQuery, и им казалось, что они пишут эти вложенные коды. Конечно, они могли написать хороший код jQuery, но это не всегда приводило их к успеху. Обещания улучшают ситуацию, но вы все равно можете быстро сломать кнопку возврата, сделав несколько вызовов AJAX с вашим кодом jQuery. По мере того, как вы создаете больше своего приложения на JavaScript, вы в конечном итоге оказались на грани jQuery. Backbone помог сделать код чище, и было много микро-фреймворков, конкурирующих с ним, но Backbone победил. Кроме того, людям действительно понравилась двухсторонняя привязка данных в Knockout.

Наконец, пришла следующая эволюция фреймворков - Angular и Ember. Они собрали все идеи о том, что людям понравилось, и составили более инклюзивную структуру, а не библиотеку.

Поэтому, если вы думаете о поколениях эволюции JavaScript, лично я предпочел бы использовать инструменты нового поколения. Однако, как упоминалось ранее, есть исключения из этого, и наиболее распространенным является производительность. В Angular и Ember для вас происходит много магии, и благодаря этой магии, особенно в области привязки данных, вы можете столкнуться с некоторыми проблемами с производительностью, особенно на мобильных устройствах.

Команда Angular в некотором роде признала эту проблему, и в новейшей версии (1.3), которая только что вышла недавно, одной из основных особенностей была улучшенная производительность.

С другой стороны, если вы посмотрите на то, что делает команда Ember помимо инструментов разработки, вы заметите их проект HTMLbars. Это как бы революционизирует их подход к привязке данных, а также их подход к DOM и их шаблонизатор. В результате Ember стал намного быстрее.

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

Что выбирают другие

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

Если вы находитесь в магазине Rails и у вас много разработчиков Rails, вы можете подумать об Ember, потому что соглашения очень похожи. Это потому, что один из основных участников Ember был в основной команде jQuery и в Rails, а сейчас он является создателем Ember вместе с Томом Дейлом и другими людьми. Итак, в основном Ember очень дружелюбен к разработчикам Rails с точки зрения встроенных инструментов и опыта разработчиков.

Кроме того, если вам действительно интересны URL-адреса и SEO, и вы все еще хотите использовать одну из этих многофункциональных платформ, встроенный маршрутизатор Ember сделает ее более дружественной к SEO. Однако JavaScript Framework, SPA и SEO, как правило, не совместимы, и вы можете Об этом подробнее здесь ,

Другие должности в этой серии с Крейгом Маккичи:

Кодментатор Крейг Маккичи был разработчиком программного обеспечения в течение почти 20 лет, в основном в стеке Microsoft. В какой-то момент он был сертифицированным тренером Microsoft, хотя в последние годы он стал гораздо больше интересоваться интерфейсной разработкой (HTML, CSS и JavaScript), удобством использования и пользовательским опытом после работы в качестве консультанта в нескольких различных цифровых интерактивных агентства по проектам.

Если вы заинтересованы в книге Крейга Руководство по JavaScript Framework но предпочел бы поговорить с ним один на один, чтобы принять ваше решение, Крейг предлагает его книгу и видео (стоимостью $ 99) бесплатно, если вы запланировать часовую сессию с ним на Codementor. Если вы запланируете 2 часа, он добавит пакет следующего уровня (стоимостью $ 249, который включает в себя ng-book). Вы получите пакет команды (стоимостью $ 999) бесплатно, если вы запланируете с ним 4-часовую сессию.

Нужна помощь Крейга? Закажите сеанс 1 на 1!

Посмотреть профиль Craig
или же присоединяйтесь к нам в качестве наставника-эксперта !

Похожие

Комментарии