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!