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.

[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS

3,017 views

Published on

AngularJS is currently at the forefront of MVC (Model View Controller) frameworks for the web, and it makes it very simple to develop prototypes and web applications in it. But how do we ensure that the large scale applications we develop remain high performance, bug free and fast?

In this webinar, our speaker shared his learnings from developing various large scale AngularJS applications. He also shared how to create a maintainable project structure, and cover common performance bottlenecks and best practices to follow.

Watch complete webinar recording: http://youtu.be/b92Y77TExiA

Published in: Technology
  • Be the first to comment

  • Be the first to like this

[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS

  1. 1. Developing Large Scale Applications in AngularJS Yes, it’s possible! Shyam Seshadri CEO, Fundoo Solutions (http://www.befundoo.com) @omniscient1
  2. 2. AngularJS – It’s not just for toy apps
  3. 3. Who am I? Entrepreneur http://www.befundoo.com Xoogler Author
  4. 4. Currently @ AngularJS & NodeJS • Architecture Consulting • Development Consulting • Hands-on Workshops Product Development • Mobile & Web Evangelism • Latest & Greatest Technologies
  5. 5. Agenda  AngularJS – Why it’s amazing  The difference between a small and large app  Structuring your AngularJS Project  Common Bottlenecks in Web Applications  Speeding up your web application
  6. 6. AngularJS – 5 great things • Less code, more work - Data Binding • HTML for templating – Directives • Separating your concerns – MVC • Ease of testing – Karma, Jasmine, Protractor • Brilliant community – Anywhere, Everywhere
  7. 7. When an app grows too big Small App (~1000’s LOC) • Tiny, Fast • Easy to develop • Testing is trivial • Simple project structure works Large App (~10K-50K LOC) • Large • Can quickly become unmaintainable • Can be prone to bugs • Project Structure hard to scale if base is not good • Testing requires thought
  8. 8. Structuring a Large AngularJS Project High Level Thoughts • Modular approach • Independent, reusable modules • All necessary files together • Conceptually • Components – Reusable, not specific to a view • Sections – Controllers, HTML, directly for a view • Tests right beside the code
  9. 9. A Sample Large App Structure ChallengeApp • components • auth • auth.service.js • auth.service_spec.js • ui • fileupload • fileupload.directive.js • fileupload.directive.tpl.html • fileupload.directive.css • fileupload.directive_spec.js
  10. 10. A Sample Large App Structure ChallengeApp • sections • home • home.html • home.controller.js • home.controller_spec.js • home.css • list • list.html • list.controller.js • list.controller_spec.js • list.css • app.js • main.css • index.html
  11. 11. How to write slow web applications Load lots of scripts and css (in head!) Slow subsequent loads Heavy DOM Rendering / Manipulation Bad CSS Angular – Too many watchers / scopes
  12. 12. The Easy stuff • Load CSS in HEAD • Load JS at end of BODY Order • Concat/Minify/Gzip files and then load • Not too many parallel requests • Lazy load if too many / too large files Network • Reduce content in UI • Reduce watchers / expensive bindings DOM
  13. 13. A Quick Case Study - EPG • Program Grid (x by y) • 500 channels • 14 days, half hour slots EPG • Smooth scrolling • Minimal Loading indicators / stops • Different states for each program • IE8 Support Requirement
  14. 14. First Attempt at EPG • ng-repeat within ng-repeat • ng-class & ng-bind for all program data • Load data upfront • Time to render : ~6 seconds!!! • http://plnkr.co/edit/BLFb1O?p=preview • With polling to refresh the data • http://plnkr.co/edit/SebQIW?p=preview
  15. 15. The Bottlenecks Initial Data Load ng-repeat not optimal for large data sets DOM manipulation & Re-rendering # of watchers
  16. 16. Analyzing the ng-repeat effect • What if we completely dropped ng-repeat? • Use jQuery and manual HTML manipulation • Would things speed up? • http://plnkr.co/edit/mVpuPu?p=preview
  17. 17. Simple Optimizations in AngularJS Use track by syntax with ng-repeat bindOnce if data is not going to change ng-if over ng-show/ ng-hide Reduce watchers / bind expressions
  18. 18. Optimizing the Grid – What we did • Data was fetch & display • Did not change after initial load • Moved to custom directive without ng-bind & ng-repeat • Lazy Loading • Placeholders for content out of view • Load as and when needed • Cache Priming • Preload views beside current as & when time permits
  19. 19. Things to keep in mind • CSS / JS Minification • Lazy Loading, if needed • Proper structure & build process upfront Build / Deploy • Avoid too many parallel requests • Gzip / Caching strategies • Cache Priming Network • Reduce DOM elements in UI • Reduce watchers / expensive bindings • Data-binding – Use bind-once when possible DOM
  20. 20. Thank You! Shyam Seshadri Fundoo Solutions @omniscient1

×