Angular.js
Светлая и тёмная сторона
http://bit.ly/13ojf97
$ whoami
Mark Zubovsky
UI/UX, frontender, backender
— Недавнее —
Co-founder @ bombermine.com
Product, UI, Frontend (HTML5 stack, Angular.js),
Backend (Node.js, MySQL, Redis)
Frontender @ makeprogress.ru
Frontend (HTML5 stack, Angular.js)
Светлая сторона
Светлая сторона
-
MVC / MVW
-
2-way data-binding
-
Dirty-check loop ($digest cycle)
-
Dependency Injection
(built-in: $http, $resource, $q, $route etc.) -
Modules, Factories, Directives
-
Расширенный HTML
-
Enterprise-level тестирование
-
Популярность
-
Коммьюнити, поддержка Google
2-way data-binding
<input ng-model="data.name">
<p>Hello {{data.name}}!</p>
app.controller('MyCtrl', function($scope) {
$scope.data = {name: 'Mark'};
});
Dirty-check loop
$rootScope.$apply()
-> $childScope
-> $childScope
-> $childScope
Dependency Injection
(built-in: $http, $resource, $q, $route etc.)
Свои сервисы: factory, service, provider
Расширенный HTML
<page>
<tabs>
<tab title="View">
<calendar></calendar>
<select2 opts="config.select2.countries"></select2>
// ...
</tab>
<tab title="Settings">
// ...
</tab>
</tabs>
</page>
Популярность
GitHub Top ★ ( JS )
| Angular | ~13K |
| Backbone | ~16K |
| Ember | ~8K |
| Knockout | ~4K |
Коммьюнити, поддержка Google
Тёмная сторона
Тёмная сторона
Very opinionated
Мало туториалов, мало примеров в оф. документации
Dirty-check loop ($apply / $digest)
Тормоза при кол-ве $watchers > 2000
Factory vs Service vs Provider
Неочевидности
Dirty-check loop
Бюджет по времени, в идеале до 16.7мс
Блокирующая операция
Луп проходит по всем скоупам и вотчерам
$scope.$apply === $rootScope.$apply
$scope.$digest — пройтись только по текущему скоупу и дочерним. Лучше не использовать.
$watchers > 2000
Решение:
Перепроектировать UI
(разделение информации на несколько блоков)
Использовать bindonce
Свет в конце туннеля — ES6 Object.observe
Ускорение 20x—40x (пруф)
(уже в Chrome stable v29)
Неочевидности
Есть элемент в DOM с контроллером, значит он работает.
(ng-show/hide не удаляют контроллер)
Использовать объект как модель
(data = {}, но не data = '' // примитивы)
При обёртке внешних плагинов через директивы, не забывать удалять вручную доп. элементы, эвенты и т.п.
app.directive('MyCalendar', function() {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
// ...
elem.attachMyJQueryCalendar();
scope.$on('$destroy', function() {
elem.detachMyJQueryCalendar();
});
}
}
});
Полезные ссылки
Спасибо за внимание
И да пребудет с вами Сила
demark @ habrahabr
mark@tematico.ru
Angular.js Светлая и тёмная сторона http://bit.ly/13ojf97
Angular.js: Light and Dark sides
By demark
Angular.js: Light and Dark sides
- 1,275
