Switching to Angular.jsSilk way

About me● Working as Front-end Lead Developer in GlobalLogic● Used to develop Mobile Web Applications and HTML5

Games.● Long time ago done Flex and ActionScript● Contacts:

○ Skype: pavlo.yuriychuck ○ @pavlo_yuriychuk○ Google+

Angular.js - PM point of view● First release @ Oct 20, 2010, 0.9.0● Contributors:

○ Miško Hevery - original author○ Igor Minar○ Vojta Jina○ Matias Niemelä - Year of Moo blog○ Pete Bacon Darwin

● Reputation of vendor Google Closure && GWT● Docs: O’Reilly book, Packt publishing, Scripty book● Support: Google groups && Github issues● Ecosystem

Angular.js according to worried devs

● Comments in official docs ;)● No more require.js ?● Learning curve with expanding amplitude● Where is my jQuery why jqLite ?● Global functions and callbacks in html ?

This presentation is not about worrying ;)

Hierarchy of front-end problems solved by frameworks and libraries1. Cross browser - jQuery, Underscore, Twitter bootstrap2. Applications

a. MV* - Backbone, Exos.JS, Knockout, Ember, Ext.JS, Chaplin, Marionette, Can.JS, Thorax

b. Realtime - Meteor, Derbyc. Functional - Bacon.JS

3. Modularity and packaging - Require.JS || LMD, Bower, Component.JS

4. Infrastructure - Angular.JS, Closure, DojoToolkit

Automation stack● Node version manager and Node.js● Grunt.js● Bower || Component● Docular || JSDoc● Karma.js drives Jasmine || Mocha + Chai + Sinon.js● LESS || SASS● Yeoman● Istanbul for code coverage

Implementation of domain aspects

● Switch from Inheritance to Dependency Injection

● Decoupling of Model and Collection from connection to the server side

● Directive as the only place to work with DOM● No dedicated router class

Continuation● Factories to store shared data● Services to handle business logic● Providers to store configurable shared data, i.e. i18n,

i10n, routes● Directives to modify DOM and for small components● Views for widgets● Controllers to connect view and services● Decorators to modify the behavior of existing services

Dos and Donts

● if ($scope.$$phase) $apply() / $digest() everywhere - No

● DOM manipulation in controller - No● $.Deferred and $.ajax instead of $http,

$resource, $q● Minsafe [`$http`, function ($http) {}] - Yes

Dos and Donts● Do not try to put custom method into $rootScope● If you have data that is shared between elements that

are using ng-repeat and filters - split it over separate arrays

● Whenever you see $scope.filterByXXX, $scope.mapXXXtoYYY, $scope.getXXXbyYY it is high time to use filters

● Do not put heavyweight operations into $watch and $scope event heandlers

Switching to Angular.js

When not to switch:1. Perhaps you need something simpler,

different paradigm, see the slide #62. Game development3. High-performance data visualization and

rendering (VNC console, real-time video)4. Lightweightness is critical

Readings

● Before you start● Learning course● Recipies with Angular by Frederik Dietz● Comparison to other frameworks● The future of Angular.js by Brian Ford

A little bit of Angular ;)// Insanity Warning: scope depth-first traversal

// yes, this code is a bit crazy, but it works and we have tests to prove it!