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>

Коммьюнити, поддержка 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();
      });
    }
  }
});