Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Pavlo Yuriychuk — Switching to Angular.js. Silk way

3,575 views

Published on

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"

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Pavlo Yuriychuk — Switching to Angular.js. Silk way

  1. 1. Switching to Angular.js Silk way
  2. 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. 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. 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. 5. This presentation is not about worrying ;)
  6. 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. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. Readings ● ● ● ● ● Before you start Learning course Recipies with Angular by Frederik Dietz Comparison to other frameworks The future of Angular.js by Brian Ford
  14. 14. 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!

×