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();
      });
    }
  }
});



Полезные ссылки


http://egghead.io/
http://www.yearofmoo.com/
http://angular-tips.com/
http://angular-ui.github.io/
http://www.bennadel.com/
http://echojs.com/
http://reddit.com/r/javascript/

http://ngmodules.org/



Спасибо за внимание


И да пребудет с вами Сила


demark @ habrahabr
mark@tematico.ru