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.

AngularJS best practices

416 views

Published on

Slides from a talk at ngAarhus on how you can still build great stuff with AngularJS.

Published in: Technology
  • Be the first to comment

AngularJS best practices

  1. 1. Supercharging AngularJS lessons learnt, experiences, best practices… for building modern AngularJS 1.x apps @IMPACTdigitaldk
  2. 2. AngularJS and Angular
  3. 3. Filip
  4. 4. #weAreHiring #Denmark
  5. 5. https://developers.google.com/experts/people/filip-bruun-bech-larsen
  6. 6. lets talk about AngularJS
  7. 7. Why best practices • for better apps • less errors • better performance • better team-work • more fun • to get closer to ng2
  8. 8. Change your vocabulary • Components (element-selector + template) • Directives (attribute-selector + never template)
  9. 9. think of your app as a tree of components
  10. 10. A tree of components my-app app-navigationcontact-list contact-item toggle-favorite contact-item toggle-favorite contact-item toggle-favorite
  11. 11. Think in Smart/Dumb stateful stateless
  12. 12. Data down and events up
  13. 13. Business logic and data live in services when you are calling $http from a component - you are doing it wrong
  14. 14. go for consistency in data-calls so probably async, if any of it is…
  15. 15. Treat directives like components don’t use link(), don’t use replace
  16. 16. $scope
  17. 17. What is it with scope inheritance/isolation and performance
  18. 18. don’t use scope/$scope go for ctrlAs-syntax (default on components) if you really need an event-system, scope can be ok
  19. 19. when things are slow…you are probably doing it wrong
  20. 20. don’t ever $watch $doCheck() does it better, but you should probably refactor
  21. 21. $apply is the root of all evil ng-* event-listeners, $http, $q.resolve, $q.reject, $timeout,
  22. 22. default to ::bindings upgrade only as needed or maybe just put the data in the template-string directly
  23. 23. One-time is not one-way
  24. 24. one-way bindings are a special input-binding its almost like two way bindings (=), except for when you change the reference from inside the component. http://codepen.io/filipbech/pen/pNLPdN
  25. 25. {{avoidThese}} use ng-bind so the expression is cached
  26. 26. and don’t use ng-include subcomponents are almost twice as fast
  27. 27. Remember to do clean-up remove event/message listeners and pointers in $onDestroy
  28. 28. http://codepen.io/filipbech/pen/gLegyx?editors=0010
  29. 29. Watch out for filters in your template they are run more often than you think
  30. 30. http://codepen.io/filipbech/pen/qqomQQ?editors=0010
  31. 31. ng-repeat use trackBy and ::binding
  32. 32. Consider typescript for ES6 and for the types
  33. 33. Consider Observables with RxJS 5
  34. 34. what about modules angular modules, es6-modules, AMD etc…
  35. 35. Manage your state consistently consider redux, observables or roll your own system
  36. 36. files, methods, variables, etc. Avoid ng and $ in your own names Commit to a naming-scheme
  37. 37. DI on separate lines so you’ll have pretty diffs
  38. 38. Use the newest angularJS-release
  39. 39. AngularJS in production obviously concat, minify, gzip, etc… but also: use provided .min bundle, disable debug info, disable comment/class directive https://docs.angularjs.org/guide/production
  40. 40. so what do you think… questions, thoughts, comments?
  41. 41. Thank you I’ll tweet a link to the slides in a minute @IMPACTdigitaldk @filipbech

×