[Srijan Wednesday Webinars] Crash Course in New Product Development
[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS
-
Upload
srijan-technologies -
Category
Technology
-
view
1.180 -
download
1
description
Transcript of [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS
Developing Large Scale Applications in AngularJS
Yes, it’s possible!
Shyam SeshadriCEO, Fundoo Solutions (http://www.befundoo.com)
@omniscient1
AngularJS – It’s not just for toy apps
Who am I?
Entrepreneurhttp://www.befundoo.com
Xoogler
Author
Currently @
AngularJS & NodeJS• Architecture Consulting• Development Consulting• Hands-on Workshops
Product Development• Mobile & Web
Evangelism• Latest & Greatest Technologies
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
Agenda
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
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
When an app grows too big
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
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
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
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
The Easy stuff
•Load CSS in HEAD•Load JS at end of BODYOrder•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 bindingsDOM
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
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
The Bottlenecks
Initial Data Load
ng-repeat not optimal for
large data sets
DOM manipulation & Re-rendering
# of watchers
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
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
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
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 possibleDOM
Shyam SeshadriFundoo Solutions
@omniscient1
Thank You!