Advanced AngularJS Tips and Tricks
Download as PPTX, PDF3 likes5,098 views
The document presents advanced Angular tips and tricks by Jeremy Likness, addressing key areas such as integration, best practices, debugging, and performance optimization based on extensive experience in enterprise AngularJS projects. It emphasizes the importance of structured code, early testing, and effective communication through services, while also providing practical advice on integrating third-party components and enhancing application performance. Resources for further learning are also included, such as courses and a GitHub repository for examples.
Advanced AngularJS Tips and Tricks
- 1. Your Cloud. Your Business. Advanced Angular Tips and Tricks Jeremy Likness Principal Architect @JeremyLikness
- 3. TODAY’S AGENDA 1. Background Where did these tips and tricks come from? 2. Integration Tips for integrating existing JavaScript code 3. Best Practices Lessons learned in the trenches 4. Debugging Debugging Angular apps 5. Performance Writing Angular apps that scale and perform well
- 4. BACKGROUND
- 5. BACKGROUND • Several Enterprise AngularJS Projects • Largest Project: • 80,000+ lines of TypeScript code (generated JavaScript even bigger) • 100s of controllers, services, filters, and directives • Global team of 25+ developers • 2 years of development before go-live • Exceeded client expectations for performance in most areas • How much content have you read began with “I was tinkering with…” or “I was exploring…”?
- 6. Lessons Learned • It’s important you pick a code structure. There is no “best one” but it is important to have one. We did: /controllers ../common ../products ../customers /directives ../common ../products • Decouple from $scope as fast as you can! • Don’t rely on $scope hierarchy/inheritance • Use services for communication • Use controller as syntax • Maxim of Least Angular • Test Early, and Test Often! • For large teams, consider TypeScript
- 8. INTEGRATION
- 9. INTEGRATION • Register and reuse third-party components with Angular’s dependency injection system • Wrap third-party components to trigger digest • Extend third-party components to be “Angular aware” • Wrap third-party controls with Angular directives • Create reusable libraries with Angular modules • Consume third-party modules with Angular
- 11. BEST PRACTICES
- 12. BEST PRACTICES • $scope (addressed earlier) • Use values (or constants) where it makes sense • Wrap APIs in services and understand interceptors • Use $log and $exceptionHandler • Apply behaviors by decorating existing services with $provide • Define code using Angular’s extend • Lazy-load components with the injector when they aren’t commonly used • Use route’s “resolve” to guarantee asynchronous context
- 14. DEBUGGING
- 15. DEBUGGING • All major browsers provide F12 “debug tools” • In Chrome, you can inspect/select an element and reference it as $0 • angular.element(x) wraps a DOM element as a node with Angular functions e.g. angular.element($0) • scope() • isolateScope() • controller() • injector() • Expand objects then navigate to source and set breakpoints/watches • Batarang
- 16. DEMO: Debugging
- 17. PERFORMANCE
- 18. PERFORMANCE • Batarang • Zone to instrument • Bindonce or new :: prefix • Double-list approach • ng-if vs. ng-show • Measure twice, cut once!
- 20. Questions? Source for this deck https://github.com/JeremyLikness/AngularTipsAndTricks Running example for this deck http://jeremylikness.github.io/AngularTipsAndTricks/ Mastering AngularJS Course: fundamentals, scope, digest, filters, dependency injection, services, web services, routes, directives, testing, debugging and performance https://www.wintellectnow.com/course/detail/mastering-angularjs Jeremy Likness, Principal Architect @JeremyLikness