Pavlo Yuriychuk — Switching to Angular.js. Silk way
•
1 like•3,636 views
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"
Report
Share
More Related Content
Viewers also liked
Similar to Pavlo Yuriychuk — Switching to Angular.js. Silk way
Similar to Pavlo Yuriychuk — Switching to Angular.js. Silk way (20)
More from GlobalLogic Ukraine
More from GlobalLogic Ukraine (20)
Recently uploaded
Recently uploaded (20)
Pavlo Yuriychuk — Switching to Angular.js. Silk way
- 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!