Advanced Tips & Tricks for using Angular JS

17,858 views

Published on

Session from GIDS 2014, showing tips and tricks for using AngularJS for creating production-ready JavaScript applications

Published in: Technology, Design

Advanced Tips & Tricks for using Angular JS

  1. 1. AdvancedTipsand Tricks using AngularJS SimonGuest,DistinguishedEngineer. Neudesic,LLC
  2. 2. The lastdecade ofserver-side HTML...
  3. 3. What'swrongwiththis model?
  4. 4. What's wrongwiththis model? » Most UI actions require round trip » Poor mobile experience » Devices are getting more powerful » Servers need to scale » Any offline scenario is near impossible
  5. 5. The nextdecade ofclient-sideJavaScript
  6. 6. How doesthis help? » UI actions handled locally » Vasly improved mobile experience » Taking advantage of the power of the device » Server can handle more clients » Offline becomes more manageable
  7. 7. Too manychoices...
  8. 8. Audience Poll
  9. 9. Who knowswhatAngularJS is?
  10. 10. Who has builtAngularJS sample apps?
  11. 11. Who is usingAngularJS for an ongoing project?
  12. 12. Angular's ups and downs...
  13. 13. Goalofthis session Share10tipsandtricksthatwe've learnedfromrealworldAngularJS projects
  14. 14. Goalofthis session Compiledifferenttipsandtricksfrom aroundtheWeb
  15. 15. Goalofthis session Shareasmuchcodeaspossible
  16. 16. 10. Structure Howshould I structure my AngularJS project?
  17. 17. 10. Structure » Roll your own » Angular Seed (https://github.com/angular/angular- seed) » Yeoman Angular Generator (http://yeoman.io)
  18. 18. 10. Structure » Roll your own » Angular Seed (https://github.com/angular/angular- seed) » Yeoman Angular Generator (http://yeoman.io)
  19. 19. 10. Structure » Come back to pivoting on functionality when the project gets large
  20. 20. 10. Structure > app -> controllers --> todoController.js -> services --> todoService.js -> directives --> todoItemDirective.js
  21. 21. 10. Structure > app -> todo --> controller.js --> service.js --> itemDirective.js
  22. 22. 9. Minification Should I minifymy AngularJS project?
  23. 23. 9. Minification » Due to the "DI" way that Angular works, minification is hard
  24. 24. 9. Minification » Due to the "DI" way that Angular works, minification is hard » Do you really need to minify?
  25. 25. 9. Minification » Due to the "DI" way that Angular works, minification is hard » Do you really need to minify? -- AngularJS includes are already compiled JS -- Yeoman template includes as much minification as you need -- Disable property renaming, and manually change constructors
  26. 26. 8. Directives Whatarethey?
  27. 27. 8. Directives » They make AngularJS unique » They make your markup more declarative » They support templates nicely » They promote re-use » They prevent lots of JavaScript!
  28. 28. 7. Page Loading Howdo I createagood user experience?
  29. 29. 7. Page Loading » Flash of {{your.stuff}} when you load the page
  30. 30. 7. Page Loading » Flash of {{your.stuff}} when you load the page » Use ng-cloak directive in order to hide declarations until they are initialized » Use ng-bind instead of {{}} in your index.html
  31. 31. 6. InternetExplorer DoesAngularJSworkwith IE?
  32. 32. 6. InternetExplorer » Support for IE8 is being removed from Angular 1.3 onwards » If you are going to keep supporting IE8 with Angular 1.2... -- Never use <custom-directive> -- Use <div custom-directive> instead » Ensure that IE is part of test plan (if you are using Selenium)
  33. 33. 5. Development Environment Whattools should I be using?
  34. 34. 5. DevelopmentEnvironment » Angular Support in IDEs -- WebStorm 8 -- Sublime -- Use data-ng-* in non-supported environments » Install Angular via Bower
  35. 35. 5. DevelopmentEnvironment » Logging -- Avoid using console.log in your controllers » Use $log instead -- $log can be extended to provide additional logging capabilities
  36. 36. 5. DevelopmentEnvironment » Batarang -- Chrome extension of AngularJS debugging
  37. 37. 5. DevelopmentEnvironment » Batarang -- Chrome extension to enable AngularJS debugging » AngularJS tab in Chrome dev tools -- Enables scope inspection -- Performance to identify trouble spots -- Service dependency graph
  38. 38. 5. DevelopmentEnvironment » Javascript Debugging -- Use 'debugger' in any controller to add breakpoint -- Very useful combined with Batarang
  39. 39. 4.Angular- Supported Frameworks Howdo I dealwith non- AngularJS stuff?
  40. 40. 4. Non-Angular Stuff » Bootstrap -- UI Bootstrap -- Components written by the AngularJS team » Examples -- AngularJS version of Alert -- $modal for invoking modals -- Date/time pickers » http://angular-ui.github.io/bootstrap/
  41. 41. 4. Non-Angular Stuff » jQuery -- Use angular.element instead of $() selector -- Search for a jQuery-equivalent instead » Examples -- html(), text(), val() » Ask whether you can use directives instead
  42. 42. 4. Non-Angular Stuff » Other JavaScript methods -- angular.fromJson, angular.toJson, angular.copy, angular.extend -- $timeout, $log, $window, $q, $document -- Third party libraries for date formatting » Why? -- Angular methods better observe the scope lifecycle -- More predictable results
  43. 43. 3. Separation of Concerns Howdo I makethe right choices?
  44. 44. 3. Separation ofConcerns » Three golden rules -- Controllers should never refer to any DOM elements -- Controllers should call services vs. holding too much business logic -- "How do I pass things between controllers?" --- ...probably means that you are doing things wrong
  45. 45. 3. Separation ofConcerns » Controller inheritence -- Is possible to use angular.extend to provide some kind of inheritence on controllers
  46. 46. 2. Scope Whatdo I needto know about$scope?
  47. 47. 2. Scope » Scope is not your model -- Even though many of the samples show it this way -- Scope should be the glue between your controller and your model (accessed through services) -- Remember, services are singletons
  48. 48. 2. Scope » Scope inheritence -- Avoid $rootScope, try to use services instead -- Create subscopes when invoking subcontroller from controller --- Can be a little confusing, especially with frameworks (e.g. Bootstrap modal) -- Batarang can be your friend
  49. 49. 1. Performance Howdo I prevent performance bottlenecks?
  50. 50. 1. Performance » You are not in control of when Angular invokes functions based on changes to $scope » A single change in scope (e.g keypress) can call multiple functions
  51. 51. 1. Performance » Most changes to $scope are processed in fractions of a second -- Faster than the human eye can detect on a page -- However, once you start reaching 1500+ function calls on a scope change, thing's deteriorate -- Deteriorate really quickly
  52. 52. 1. Performance » Using ng-repeat or ng-switch can compound this
  53. 53. 1. Performance <tr ng-repeat="item in items"> <td>{{item.name}}</td> <td>{{item.description}}</td> <td>{{getPrice(item.id)}}</td> </tr> » How many times will getPrice function be called?
  54. 54. 1. Performance » Overcoming this bottleneck -- Never call $scope functions from within ng- repeat or ng-switch statements -- Use watch collection to calculate everyting when the controller is first invoked
  55. 55. 1. Performance $scope.$watchCollection('items', function (newItems) { for (var i = 0; i < newItems.length; i++) { newItems[i].price = getPrice(newItems.id); } $scope.items = newItems; });
  56. 56. 1. Performance <tr ng-repeat="item in items"> <td>{{item.name}}</td> <td>{{item.description}}</td> <td>{{item.price}}</td> </tr>
  57. 57. TheTenAgain
  58. 58. TheTenAgain -- 10. Structure -- 9. Minification -- 8. Directives -- 7. Page Loading -- 6. Internet Explorer -- 5. Development Environment -- 4. Non-Angular Stuff -- 3. Separation of Concerns -- 2. Scope -- 1. Performance
  59. 59. Thankyou!
  60. 60. Q&A » Simon Guest, Distinguished Engineer, Neudesic LLC » simonguest.com (@simonguest) » http://github.com/simonguest/gids » http://slideshare.net/simonguest
  61. 61. -- http://www.amazon.com/ File-New-Presentation- Developers-Professionals/dp/ 0615910459

×