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!