[Srijan Wednesday Webinars] Strategies to Convert Your Website Visitors to Leads
[Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS
-
Upload
srijan-technologies -
Category
Technology
-
view
1.178 -
download
1
description
Transcript of [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS
![Page 1: [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://reader035.fdocuments.us/reader035/viewer/2022062707/5585b33dd8b42af75f8b45fe/html5/thumbnails/1.jpg)
Developing Large Scale Applications in AngularJS
Yes, it’s possible!
Shyam SeshadriCEO, Fundoo Solutions (http://www.befundoo.com)
@omniscient1
![Page 2: [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://reader035.fdocuments.us/reader035/viewer/2022062707/5585b33dd8b42af75f8b45fe/html5/thumbnails/2.jpg)
AngularJS – It’s not just for toy apps
![Page 3: [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://reader035.fdocuments.us/reader035/viewer/2022062707/5585b33dd8b42af75f8b45fe/html5/thumbnails/3.jpg)
Who am I?
Entrepreneurhttp://www.befundoo.com
Xoogler
Author
![Page 4: [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://reader035.fdocuments.us/reader035/viewer/2022062707/5585b33dd8b42af75f8b45fe/html5/thumbnails/4.jpg)
Currently @
AngularJS & NodeJS• Architecture Consulting• Development Consulting• Hands-on Workshops
Product Development• Mobile & Web
Evangelism• Latest & Greatest Technologies
![Page 5: [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://reader035.fdocuments.us/reader035/viewer/2022062707/5585b33dd8b42af75f8b45fe/html5/thumbnails/5.jpg)
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
![Page 6: [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://reader035.fdocuments.us/reader035/viewer/2022062707/5585b33dd8b42af75f8b45fe/html5/thumbnails/6.jpg)
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
![Page 7: [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://reader035.fdocuments.us/reader035/viewer/2022062707/5585b33dd8b42af75f8b45fe/html5/thumbnails/7.jpg)
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
![Page 8: [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://reader035.fdocuments.us/reader035/viewer/2022062707/5585b33dd8b42af75f8b45fe/html5/thumbnails/8.jpg)
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
![Page 9: [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://reader035.fdocuments.us/reader035/viewer/2022062707/5585b33dd8b42af75f8b45fe/html5/thumbnails/9.jpg)
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
![Page 10: [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://reader035.fdocuments.us/reader035/viewer/2022062707/5585b33dd8b42af75f8b45fe/html5/thumbnails/10.jpg)
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
![Page 11: [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://reader035.fdocuments.us/reader035/viewer/2022062707/5585b33dd8b42af75f8b45fe/html5/thumbnails/11.jpg)
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
![Page 12: [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://reader035.fdocuments.us/reader035/viewer/2022062707/5585b33dd8b42af75f8b45fe/html5/thumbnails/12.jpg)
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
![Page 13: [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://reader035.fdocuments.us/reader035/viewer/2022062707/5585b33dd8b42af75f8b45fe/html5/thumbnails/13.jpg)
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
![Page 14: [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://reader035.fdocuments.us/reader035/viewer/2022062707/5585b33dd8b42af75f8b45fe/html5/thumbnails/14.jpg)
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
![Page 15: [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://reader035.fdocuments.us/reader035/viewer/2022062707/5585b33dd8b42af75f8b45fe/html5/thumbnails/15.jpg)
The Bottlenecks
Initial Data Load
ng-repeat not optimal for
large data sets
DOM manipulation & Re-rendering
# of watchers
![Page 16: [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://reader035.fdocuments.us/reader035/viewer/2022062707/5585b33dd8b42af75f8b45fe/html5/thumbnails/16.jpg)
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
![Page 17: [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://reader035.fdocuments.us/reader035/viewer/2022062707/5585b33dd8b42af75f8b45fe/html5/thumbnails/17.jpg)
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
![Page 18: [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://reader035.fdocuments.us/reader035/viewer/2022062707/5585b33dd8b42af75f8b45fe/html5/thumbnails/18.jpg)
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
![Page 19: [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://reader035.fdocuments.us/reader035/viewer/2022062707/5585b33dd8b42af75f8b45fe/html5/thumbnails/19.jpg)
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
![Page 20: [Srijan Wednesday Webinars] Developing Large Scale Applications in AngularJS](https://reader035.fdocuments.us/reader035/viewer/2022062707/5585b33dd8b42af75f8b45fe/html5/thumbnails/20.jpg)
Shyam SeshadriFundoo Solutions
@omniscient1
Thank You!