AngularJS best practices
•Download as PPTX, PDF•
1 like•716 views
This document discusses best practices for building modern AngularJS 1.x applications, including thinking of the app as a tree of components, keeping business logic and data in services, avoiding $scope and $watch, managing state consistently, using TypeScript for types, considering Observables with RxJS 5, and using the newest AngularJS release in production with optimizations like concatenation, minification, and gzipping. The document encourages treating directives like components, using one-way bindings, avoiding $apply and other AngularJS patterns that negatively impact performance, and cleaning up event listeners and references.
Report
Share
AngularJS best practices
- 1. Supercharging AngularJS lessons learnt, experiences, best practices… for building modern AngularJS 1.x apps @IMPACTdigitaldk
- 3. Filip
- 7. Why best practices • for better apps • less errors • better performance • better team-work • more fun • to get closer to ng2
- 8. Change your vocabulary • Components (element-selector + template) • Directives (attribute-selector + never template)
- 9. think of your app as a tree of components
- 10. A tree of components my-app app-navigationcontact-list contact-item toggle-favorite contact-item toggle-favorite contact-item toggle-favorite
- 13. Data down and events up
- 15. Business logic and data live in services when you are calling $http from a component - you are doing it wrong
- 16. go for consistency in data-calls so probably async, if any of it is…
- 17. Treat directives like components don’t use link(), don’t use replace
- 18. $scope
- 19. What is it with scope inheritance/isolation and performance
- 20. don’t use scope/$scope go for ctrlAs-syntax (default on components) if you really need an event-system, scope can be ok
- 21. when things are slow…you are probably doing it wrong
- 22. don’t ever $watch $doCheck() does it better, but you should probably refactor
- 23. $apply is the root of all evil ng-* event-listeners, $http, $q.resolve, $q.reject, $timeout,
- 24. default to ::bindings upgrade only as needed or maybe just put the data in the template-string directly
- 27. 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
- 28. {{avoidThese}} use ng-bind so the expression is cached
- 29. and don’t use ng-include subcomponents are almost twice as fast
- 30. Remember to do clean-up remove event/message listeners and pointers in $onDestroy
- 32. Watch out for filters in your template they are run more often than you think
- 34. ng-repeat use trackBy and ::binding
- 35. Consider typescript for ES6 and for the types
- 37. what about modules angular modules, es6-modules, AMD etc…
- 38. Manage your state consistently consider redux, observables or roll your own system
- 39. files, methods, variables, etc. Avoid ng and $ in your own names Commit to a naming-scheme
- 40. DI on separate lines so you’ll have pretty diffs
- 42. 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
- 43. so what do you think… questions, thoughts, comments?
- 44. Thank you I’ll tweet a link to the slides in a minute @IMPACTdigitaldk @filipbech