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

1. Developing Large Scale
Applications in AngularJS
Yes, it’s possible!
Shyam Seshadri
CEO, Fundoo Solutions (http://www.befundoo.com)
@omniscient1

2. AngularJS – It’s not just for toy
apps

3. Who am I?
Entrepreneur
http://www.befundoo.com
Xoogler
Author

4. Currently @
AngularJS & NodeJS
• Architecture Consulting
• Development Consulting
• Hands-on Workshops
Product Development
• Mobile & Web
Evangelism
• Latest & Greatest Technologies

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. The Bottlenecks
Initial Data
Load
ng-repeat not
optimal for
large data sets
DOM
manipulation &
Re-rendering
# of watchers

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. 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. 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. 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. Thank You!
Shyam Seshadri
Fundoo Solutions
@omniscient1