1. What is Angular.JS according to PM and Developer 2. Automation tools stack for Angular.JS development 3. Implementation of a domain using Angular.JS 4. Switching from other frameworks and libraries to Angular 5. Doing it wrong / Doing it right This presentetion is complemented by Ukrainian-languaged presentation by Pavlo — "Павло Юрійчук — Перехід на Angular.js. Howto"

1. Switching to Angular.js
Silk way

2. 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+

3. 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

4. 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 ?

5. This presentation is not about
worrying ;)

6. Hierarchy of front-end problems solved by
frameworks and libraries
1. Cross browser - jQuery, Underscore, Twitter bootstrap
2. Applications
a. MV* - Backbone, Exos.JS, Knockout, Ember, Ext.JS,
Chaplin, Marionette, Can.JS, Thorax
b. Realtime - Meteor, Derby
c. Functional - Bacon.JS
3. Modularity and packaging - Require.JS || LMD, Bower,
Component.JS
4. Infrastructure - Angular.JS, Closure, DojoToolkit

7. 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

9. 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

11. 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

12. 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

13. 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

14. Switching to Angular.js
When not to switch:
1. Perhaps you need something simpler,
different paradigm, see the slide #6
2. Game development
3. High-performance data visualization and
rendering (VNC console, real-time video)
4. Lightweightness is critical

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

16. 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!