Keep your sanity while developing AngularJS apps on an enterprise scale

Building larger applications is tricky in AngularJS because there are very few conventions. Angular leaves this up to you. In this talk we’ll share all the lessons we learned from building a huge AngularJS application.

We’ll go over the importance of creating those conventions and some of the conventions we made. We’ll also highlight how to correctly use angular’s concepts in order to keep your codebase clean and maintainable.

Lastly we’ll show the benefits of using UI-Router over ngRouter and the ways in which you can automate your workflow for improved maintainability.

Resources:
* http://www.kunstmaan.be
* http://www.playframework.com/
* http://vertx.io/
* https://github.com/sockjs
* http://gruntjs.com/
* http://sass-lang.com/
* http://savanne.be/articles/testing-with-angular-js/
* https://github.com/angular/angular-seed
* http://yeoman.io/
* https://github.com/yeoman/generator-angular
* http://briantford.com/blog/huuuuuge-angular-apps.html
* https://github.com/rwaldron/idiomatic.js/
* https://github.com/airbnb/javascript
* https://github.com/
* https://bitbucket.org
* https://www.gitlab.com/
* https://www.npmjs.org/package/grunt-file-blocks
* https://www.npmjs.org/package/grunt-usemin
* https://www.npmjs.org/package/grunt-contrib-connect
* https://github.com/angular-ui/ui-router
* http://ify.io/lazy-loading-in-angularjs/

On April 9th 2014 we've shared our experiences in AngularJS with the Belgian AngularJS meetup group. 72 people joined us to see what we had to say. In case you missed it, don't worry you'll find everything you need here: http://bit.ly/angularmeetup

Transcript

2. DAAN PORON VINCENT DE SNERCK @daanporon @spobo
3. 60 Communication Agency @ Leuven Kunstmaan 60 employees (21 developers) Campaign, corporate websites and web applications
4. 12 1,5 € Financial sector The mission! Team: 12 people Project duration 1,5 years
5. Our toolbelt SOCKJS Frontend Backend
6. ‘$scope’ of the frontend APP 13105 CONTR. 61 DIRECTIVES 91 SERVICES 96 MARKUP 5253 TEST 24812 OTHER
7. Keep your sanity while developing AngularJS apps on an enterprise scale
8. The power of AngularJS! • Two-way data binding • Directives • Dependency Injection • Powerful services • Testability
9. But... with great power comes great responsibility.
10. The dark side of AngularJS • No opinionated conventions • Limited routing
11. CONVENTION A way in which someting is usually done. source: Google
12. Conventions to the rescue! • Code becomes easier to read • Simpler to test • Easier to implement changes or features • Team collaboration • Lower total cost of ownership
14. Existing conventions
15. angular-seed partials/ |- home.html |- login.html js/ |- controllers.js |- directives.js |- filters.js |- services.js |- app.js https://github.com/angular/angular-seed One file per type for all things
16. yeoman’s generator-angular js/ |- controllers/ |- homeController.js |- loginController.js |- directives/ |- kmAuthentication.js |- filters/ |- services/ |- usersService.js partials/ |- home.html |- login.html https://github.com/yeoman/generator-angular Improvement: each thing = one file, grouped by type
17. Here’s how we did it!
18. js/ |- app.js |- api/ |- home/ |- login/ |- login.js |- config/ |- states.json |- config.json |- controllers/ |- loginCtrl.js |- directives/ |- kmAuthentication.js |- filters/ |- services/ |- usersService.js |- translations/ |- en.json |- views/ |- login.html
19. js/ |- api/ |- home/ |- login/ • Group code by feature
20. • Group in features by type js/ |- login/ |- config/ |- controllers/ |- directives/ |- filters/ |- services/ |- translations/ |- views/
21. • Each file = one thing • Name it like you $provide it - Unless it’s related
22. • Use suffixes or prefixes to identify the type - Controllers: LoginCtrl.js - Specs: LoginCtrlSpec.js - Factory services: usersFactory.js - Directives: kmTabBar.js - …
23. • Common/Shared folder
24. Angular’s module system angular.module('app.presenters', []).constant('presenters', ['Daan', 'Vincent']); angular.module('app', ['app.presenters']).controller('AppCtrl', function($scope, presenters) { $scope.presenters = presenters; });
25. Will this work? angular.module('app.presenters', []) .constant('presenters', ['Daan', 'Vincent']); angular.module('app.resources', []) .service('presentersFetcher', function(presenters) { presenters.push('Ibe'); return function() { return presenters; }; }); angular.module('app', ['app.presenters', 'app.resources']) .controller('AppCtrl', function($scope, presentersFetcher) { $scope.presenters = presentersFetcher(); }); http://plnkr.co/edit/2pw2XqJHax9oPyG2BbM9?p=preview
26. Benefits • Get an overview of your dependencies • Reusability between projects • Faster tests • Lazy loading?
27. Bootstrapping your app angular.module('app.common', []); angular.module('app.login', ['app.common']); angular.module('app', ['app.login']); angular.module('app.login') .config(['fooProvider', function(fooProvider) { // config phase }]).run([function() { // run phase }); http://plnkr.co/edit/VTVBieWqd9gq0oXJFIqS?p=preview /app.js /<module_name>/<module_name>.js
28. Keeping Your Codebase Clean 1. Services 2. Directives 3. Controllers 4. Coding styles
29. Services • Should be responsible for only one thing • Should have a clean stable API • Should be reusable
30. Example 1 A angular.module('app.api') .factory('socket', [function() { return { 'send': function(method, action, data, callback) { // return uuid }, 'unregisterCallback': function(uuid) { // unregister callback }, 'setDefaultParam': function(key, value) { // set default param }, 'deleteDefaultParam': function(key) { // delete default param } }; }]);
31. Example 1 B angular.module('app.api') .factory('pull', ['socket', function(socket) { return { 'get': function(action, data) { /* get */ }, 'post': function(action, body, data) { /* post */ }, 'put': function(action, body, data) { /* put */ }, 'delete': function(action, data) { /* delete */ } }; }]); angular.module('app.api') .factory('push', ['socket', function(socket) { return { 'subscribe': function(action, data) { // return subscribtion object with unsubscribe function } }; }]);
32. Example 2 AngularJS built-in $resource service
33. Directives • Should not try to do too much • Should be reusable via configurable attributes
34. Parent: I can manage. Child: Manage me! Closely related parent / child directives. Use parent controller to store state. http://plnkr.co/edit/T47y04WxoDK098UAdc3B?p=preview PROBLEM SOLUTION
35. Directive A: This changed. Directive B: I know what to do! Directives that sort of rely on each other. Introduce shared state and $watch! Mediator Pattern http://plnkr.co/edit/gT1Olo0FwUQgXVLlH4TR?p=preview PROBLEM SOLUTION
36. What about events? • No source of truth -> bad on init • When using ‘hooks’ - e.preventDefault() - e.stopPropagation()
37. Controllers • Should be lean / small / simple - Controller are ‘just’ glue between models and views • Should never touch the DOM
38. JavaScript coding style • Community driven standards - idiomatic.js, airbnb, ... • You should enforce these - via jshint, code reviews, ...
39. Managing big apps 1. Code reviews 2. Configuration 3. Workflow automation 4. Routing
40. 1. Code reviews • Why? - Improved code quality - Help improve each other - Fewer defects in code - Improved communication about code content • How? - Github/Bitbuckets/Gitlab Pull Requests system
41. 2. Configuration • Easier to test • Environment specific configuration - dev, staging, production, … • Module based
42. 3. Workflow automation • Grunt ===Powerful! • Prevents doing repetitive work • Simple tasks to do complex things
43. Generating our config file > APP_ENV=prod grunt config
44. <body ng-app="app"> <div ng-view></div> <!-- build:js js/app.js --> <!-- fileblocks:js app --> <!-- endfileblock --> <!-- endbuild --> </body> config['fileblocks'] = { options: { removeFiles: true, cwd: paths['app'] }, app: { src: paths['tmp'] + 'index.html', blocks: { app: { src: [ 'js/app.js', 'js/*/*/**/*.js', 'js/**/*.js' ] } } } } Injecting our js files in our index.html (grunt-file-blocks)
45. <body ng-app="app"> <div ng-view></div> <!-- build:js js/app.js --> <!-- fileblocks:js app --> <script src="js/app.js"></script> <script src="js/common/controllers/fooCtrl.js"></script> <script src="js/common/directives/kmTabBar.js"></script> <script src="js/login/controllers/loginCtrl.js"></script> <script src="js/login/services/login.js"></script> <script src="js/common/common.js"></script> <script src="js/login/login.js"></script> <!-- endfileblock --> <!-- endbuild --> </body> Injecting our js files in our index.html (grunt-file-blocks)
46. Configuring our unit tests (grunt-usemin)
47. Serving our translations on a dev environment (grunt-contrib-connect)
48. Proxying our web service for IE support (grunt-contrib-connect)
49. 4. Routing
50. UI Router ngROUTER VS
51. ngRouter UI Router • $route / $routeProvider • Application mapped to urls • Flat structure • One view per route • $state / $stateProvider • Application mapped to states! • Nested states • Many views per state
52. ngRouter overview index.html /inbox ng-view / inboxCtrl + inbox.html 1. email 1 2. email 2 3. email 3 4. email 4 Where your routes are rendered ng-if / ng-show / ng-switch to modify your template to show email details
53. ngRouter, with nice urls /inbox index.html 1. email 1 2. email 2 3. email 3 4. email 4 ng-view InboxCtrl / inbox.html
54. ngRouter, with nice urls /inbox/<emailId> index.html 1. email 1 2. email 2 3. email 3 4. email 4 ng-view InboxDetailsCtrl / inbox_details.html always show email details
55. Pain of ngRouter • duplicate logic • content flashes - reload all emails & lose context • link to hardcoded urls
56. UI Router overview index.html 1. email 1 2. email 2 3. email 3 4. email 4 ui-view / inbox InboxCtrl / inbox.html ui-view / inbox.detail (emailId) EmailDetailsCtrl / email_details.html
57. Benefits of UI Router • States - less brittle to maintain • Faster - less work to do • No content flashes - appy feel • Nested states - maps better to domain • Named views - go crazy <a ui-sref="inbox.details({'idenfifier': email.id})">{{ email.name }}</a>
58. Routing = Configuration { "inbox": { "path": "/inbox", "controller": "InboxCtrl.js", "templateUrl": "inbox.html" }, "inbox.details": { "path": "/:emailId", "controller": "EmailDetailsCtrl.js", "templateUrl": "email_details.html" } } file: /inbox/config/routes.json
59. Resolvers { "inbox": { "path": "/inbox", "controller": "InboxCtrl.js", "resolve": { "emails": "emailsResolver", "markAsSpamText": { "value": ["Foo!"] }, }, "templateUrl": "inbox.html" } } factory('emailsResolver', ['$http', function ($http) { return function ($stateParams) { return $http.get('/inbox', { userId: $stateParams.userId } ); }; }]);
60. Permissions { "inbox": { "path": "/inbox", "controller": "InboxCtrl.js", "permission": "allowed_inbox", "templateUrl": "inbox.html" } }
61. Mixins angular.module('app').factory('sortMixin', [function() { return function($scope) { $scope.sort = function(values, field) { /* sort logic */ }; }]); sortMixin.js { "inbox": { "controller": "MyCtrl", "mixins": ["sort"] } } routes.json
62. Our own seed • Configuration • Routing by configuration • Mixins • Slimmed down version of our Gruntfile Github.COM/KUNSTMAAN/angular-SUPER-SEED
63. Q&A
64. http://bit.ly/angularmeetup