By Rohit Ghatol Director of Engineering Synerzip JavaScript jQuery Backbonejs Angularjs Twitter Bootstrap Yoeman Requirejs Aurajs Grunt Bower Compass SaSS Sencha Knockoutjs D3JS ID: 407759
Download Presentation The PPT/PDF document "Single Page Application Ecosystem" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Single Page Application Ecosystem
By Rohit GhatolDirector of Engineering - Synerzip
JavaScript
jQuery
Backbone.js
Angular.js
Twitter Bootstrap
Yoeman
Require.js
Aura.js
Grunt
Bower
Compass
SaSS
Sencha
Knockout.js
D3JS
Three.js
1Slide2
About Me
Director of Engineering @ Synerzip
Technology Evangelist!Technology Speaker
Leader of 2 Tech Meetups
– TechNext
/Pune – Google Developer Group
2
Rohit Ghatol
@
Sf Bay AreaSlide3
Read about SPA Ecosystem in detail @
http://rohitghatol.com/?p=421
3Slide4
Topics
What is SPA?
Why Learn about SPA Ecosystem ?
List Popular Frameworks
Large Scale SPA
Build Deploy Tools
4Slide5
What is SPA?
Browser Based
Rich UI
Bookmark able
Saves Context
Replacing Fat Client
Immersive
No Refresh
Offline
Helps Hybrid Apps
Twitter *
Google Hangout
Facebook
*
* Almost
GMAIL
Popular Examples
& Every New Site
5Slide6
Topics
What is SPA?
Why Learn about SPA Ecosystem ?
List Popular Frameworks
Large Scale SPA
Build Deploy Tools
6Slide7
Why Learn about SPA Ecosystem?
What do you know about SPA?
I know
jQuery
?
7Slide8
Why Learn about SPA Ecosystem?
Nooooooo
!!
Not Again!!
What Happened?
8Slide9
Topics
What is SPA?
Why Learn about SPA Ecosystem ?
List Popular Frameworks
Large Scale SPA
Build Deploy Tools
9Slide10
Classification
10Slide11
HTML 5
Large Scale Application Architecture
AMD
DOM Manipulation
Data Access
Templates
MVC | MVP |MVVM
3D/2D
Widgets
Stylesheet
Lang
Responsive UI
Routers/History
Presentation Layer
Foundation Layer
Build & Deployment
Build Tools
Dep.
Mgmt
Scafolding
Mobile
Pkg
11Slide12
HTML 5
Large Scale Application Architecture
AMD
DOM Manipulation
Data Access
Templates
MVC | MVP |MVVM
3D/2D
Widgets
Stylesheet
Lang
Responsive UI
Routers/History
Presentation Layer
Foundation Layer
Build & Deployment
Build Tools
Dep.
Mgmt
Scafolding
Mobile
Pkg
12Slide13
DOM Manipulation
13Slide14
DOM Manipulation
Frameworks
jQuery 1.xjQuery
2.x (IE 6,7,8)
Zepto
Snack$DOM
XUI
Common APIs
find…() e.g S(“#123)add(element)
append(element)remove(element)
bind(event,callback)
14Slide15
HTML 5
Large Scale Application Architecture
AMD
DOM Manipulation
Data Access
Templates
MVC | MVP |MVVM
3D/2D
Widgets
Stylesheet
Lang
Responsive UI
Routers/History
Presentation Layer
Foundation Layer
Build & Deployment
Build Tools
Dep.
Mgmt
Scafolding
Mobile
Pkg
15Slide16
Data Access
Cloud
/Server
Browser
AJAX/HTTP
Server Sent Events
Web Sockets
HTTP
Web Sockets
Server Sent Events
16Slide17
Data Access
FrameworksAJAX
jQueryXUI
ZeptoSencha/Ext,Backbone,Angular *
Web Sockets/SSEHTML5 APIs/Poly Fills
Common APIs
$.ajax(
url,method,callback)
Socket - send()/onReceive()
SEE - onMessage
()/onEvent()
etc
* Large Frameworks
17Slide18
HTML 5
Large Scale Application Architecture
AMD
DOM Manipulation
Data Access
Templates
MVC | MVP |MVVM
3D/2D
Widgets
Stylesheet
Lang
Responsive UI
Routers/History
Presentation Layer
Foundation Layer
Build & Deployment
Build Tools
Dep.
Mgmt
Scafolding
Mobile
Pkg
18Slide19
HTML 5
Large Scale Application Architecture
AMD
DOM Manipulation
Data Access
Templates
MVC | MVP |MVVM
3D/2D
Widgets
Stylesheet
Lang
Responsive UI
Routers/History
Presentation Layer
Foundation Layer
Build & Deployment
Build Tools
Dep.
Mgmt
Scafolding
Mobile
Pkg
19Slide20
Modules
Confidential20
Classes/Objects
Multiple Files
Dependency
Namespace Conflict
Asynchronous Loading
Concatenation of JS filesSlide21
AMD
Why we need Asynchronous Module Definition?Break down code into Reusable Module
Define Dependency between ModulesAvoid Namespace ConflictsPerformance Improvement using Caching
Deployment Optimization
21Slide22
AMD
22Slide23
Code without AMD
<
head>
<script src=“
model.js”></script><script
src=“store.js”></script>
<script src=“
view.js”></script><script
src=“controller.js
”></script><script src
=“app.js”></script>
</head>
.
23Slide24
Code AMD
<
head>
<script src=“
require.js” data-main=“app.js”></script>
</head>
.
24Slide25
Confidential
25r
equire([“Controller”)
d
efine([ “View”,
”Store”],….
Controller.js
d
efine([
“Model”],….
Store.js
d
efine([
”Store”],
….
View.js
d
efine([],
….
Model.js
App.js
Module Loading using
Require.js
Code AMDSlide26
Frameworks
Require.js
Common.jsSencha
*
UMD *Common APIs
Define
RequireExport
Universal Module Definition (UMD) – A Module which works when
We use Require.js
We use Common.js
or We Directly include script in HTML code
26
AMDSlide27
HTML 5
Large Scale Application Architecture
AMD
DOM Manipulation
Data Access
Templates
MVC | MVP |MVVM
3D/2D
Widgets
Stylesheet
Lang
Responsive UI
Routers/History
Presentation Layer
Foundation Layer
Build & Deployment
Build Tools
Dep.
Mgmt
Scafolding
Mobile
Pkg
27Slide28
UI Design Patterns
Confidential28
MVC
MV VM
MVPSlide29
MVC
MVVM
MVP
MV *
29Slide30
MV* Frameworks
FrameworksBackBone.js
Angular.js
Knockout.js
Ember.js
Etc (list goes on)
Common APIs
NA
30Slide31
MV * Frameworks
Confidential31
Opinionated
Unopinonated
Angular
Js
Ember
Js
Backbone
Js
Faster Development Cycles
Predefined Conventions
Very Basic
Highly FlexibleSlide32
Backbone JS
One of the first MV *Light Weight and un-opinionated
Works with numerous other frameworks Good Ecosystem
Marionette JS – Large Scale Backbone AppChaplin – Architecture Framework
Thorax – Opinionated BackboneExoskeleton – Light weight Backbone Replacement
32Slide33
Angular JS
Gaining Immense PopularityHighly Opinionated Framework
2 Way Data BindingBacked by Google – Good Community Support
Faster Development Cycle
33Slide34
Knockout JS
Immensely Popularity in C# worldUses MV VM Design
2 Way Data BindingFaster Development Cycles
Good for small-mid size Apps
34Slide35
Ember JS
Full Featured MVC framework
Opinionated FrameworkRelies a lot on Handlebar Templates
35Slide36
HTML 5
Large Scale Application Architecture
AMD
DOM Manipulation
Data Access
Templates
MVC | MVP |MVVM
3D/2D
Widgets
Style sheet Lang
Responsive UI
Routers/History
Presentation Layer
Foundation Layer
Build & Deployment
Build Tools
Dep.
Mgmt
Scafolding
Mobile
Pkg
36Slide37
Templates
37
Search
No Search Result Found
Result 1
Result 2
Result 10
Prev
1 2 3 4 5 6 7 8 9 10 Next
Category
CameraDigital
DSLRCompact
CamcorderXXXXXX
Conditional
Repeats
Conditional
RepeatsSlide38
Templates - Underscore
//Template<script id="tmpl-books" type="text/template">
<ul>
<% for (var i = 0; i < books.length; i++) { %> <% var book = books[i]; %>
<li> <em><%= book.title %></em> by <%= book.author %>
</li> <% } %>
</ul>
</script>
38Slide39
Templates - Underscore
//Result<ul>
<li><em>Myst: The Book of Atrus</em> by Rand Miller</li>
<li><em>The Hobbit</em> by J.R.R. Tolkien</li> <li><em>Stardust</em> by Neil Gaiman</li>
</ul>
39
Reference -
http://headspringlabs.com/blog/an-underscore-templates-primer/ Slide40
Templates
Frameworksunderscore
handlerbar
MoustacheAngular,
Sencha *etc
Common APIs
var text=
engine.template(tmpl,data);
40Slide41
HTML 5
Large Scale Application Architecture
AMD
DOM Manipulation
Data Access
Templates
MVC | MVP |MVVM
3D/2D
Widgets
Style sheet Lang
Responsive UI
Routers/History
Presentation Layer
Foundation Layer
Build & Deployment
Build Tools
Dep.
Mgmt
Scafolding
Mobile
Pkg
41Slide42
Routers/History -
Concept
42
http://
abc.com/#tab1
Tab1
Tab2
Tab3
Tab 1Slide43
Routers/History -
Concept
43
http://
abc.com/#tab2
Tab1
Tab2
Tab3
Tab 2
User can bookmark the
urlSlide44
Routers/History -
Concept
44
http://
abc.com/#tab2
Tab1
Tab2
Tab3
Tab 2
User click’s Browser’s back buttonSlide45
Routers/History -
Concept
45
http://
abc.com/#tab1
Tab1
Tab2
Tab3
Tab 1Slide46
Router/History
FrameworksAngular
,Backbone,Sencha
*Router JSSammy JS
PagerDave JS
Cross RoadsPath JS
Etc
Common APIs
route(path,callback)
navigate(path,options
)navigate(history_index
)
46Slide47
HTML 5
Large Scale Application Architecture
AMD
DOM Manipulation
Data Access
Templates
MVC | MVP |MVVM
3D/2D
Widgets
Style sheet Lang
Responsive UI
Routers/History
Presentation Layer
Foundation Layer
Build & Deployment
Build Tools
Dep.
Mgmt
Scafolding
Mobile
Pkg
47Slide48
Responsive UI
48
Desktop
MobileSlide49
Responsive UI
49
Desktop
MobileSlide50
12 Column Grid
Confidential50
1
2
3
4
5
6
7
8
9
10
11
12DesktopSlide51
12 Column Grid
Confidential51
1
2
3
4
5
6
7
8
9
10
11
12Mobile
Width has shrunkSlide52
Responsive UI
FrameworksTwitter
BootStrap
Zurb Foundation
Common APIs
NA
52Slide53
Comparison
Twitter BootStrap
BootStrap your App
MoreRich UI ElementsMobile First *
Uses Pixels12 Column Grid
Zurb Foundation
Use as a FoundationMinimalistic
Limited UI ElementsMobile First *Uses REM
12 Column GridConfidential
53Slide54
HTML 5
Large Scale Application Architecture
AMD
DOM Manipulation
Data Access
Templates
MVC | MVP |MVVM
3D/2D
Widgets
Style sheet
Lang
Responsive UI
Routers/History
Presentation Layer
Foundation Layer
Build & Deployment
Build Tools
Dep.
Mgmt
Scafolding
Mobile
Pkg
54Slide55
2D/3D
Canvas/SVG = 2D Visualization
WebGL = 3D Visualization
55Slide56
2D Visualizations
Quick and EasyHigh Charts
RaphaelFlot JS
Google VisualizationsAMCharts etc
Flexible and Powerful
D3JS
56Slide57
3D Visualizations
FrameworksThree.js
Babylon.jsGLGE
Scene.jsX3DOMetc
WebGL is very cryptic hence we need a higher level framework to work with for 3D Visualization
57Slide58
HTML 5
Large Scale Application Architecture
AMD
DOM Manipulation
Data Access
Templates
MVC | MVP |MVVM
3D/2D
Widgets
Style sheet Lang
Responsive UI
Routers/History
Presentation Layer
Foundation Layer
Build & Deployment
Build Tools
Dep.
Mgmt
Scafolding
Mobile
Pkg
58Slide59
Style Sheet Languages
Reasons for Style Sheet LanguagesNested CSS Declarations – Hierarchical Structure
Use of Variables e.g
ThemesMixins
– Reusable CSS Snippets
59Slide60
Style Sheet Languages
Sample.scss
$blue: #3bbfce;
$margin: 16px;.content-navigation {
border-color: $blue;
color:darken($blue, 9%);
}.border {
padding: $margin / 2; margin: $margin / 2;
border-color: $blue;}
Sample.css
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;}
.border {
padding: 8px;
margin: 8px; border-color: #3bbfce;
}
60Slide61
Style Sheet Languages
Sample.less
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition; -o-transition: @transition;
transition: @transition;}
.opacity(@opacity) { opacity: @opacity / 100;
filter: ~"alpha(opacity=@{opacity})";
}a {
.transition(all 0.4s); :hover {
.opacity(70); }
}
Sample.css
a {
-webkit
-transition: all 0.4s; -moz
-transition: all 0.4s; -o-transition: all 0.4s;
transition: all 0.4s;
}a:hover
{
opacity: 0.7; filter: alpha(opacity=70);
}
.
61Slide62
Style Sheet Languages
SASS Vs Less
Almost Similar capabilities Nesting CapabilitiesMixins
and Parametric Mixins
NamespacesColor FunctionsJavaScript Evaluations
Confidential
62Slide63
HTML 5
Large Scale Application Architecture
AMD
DOM Manipulation
Data Access
Templates
MVC | MVP |MVVM
3D/2D
Widgets
Style sheet Lang
Responsive UI
Routers/History
Presentation Layer
Foundation Layer
Build & Deployment
Build Tools
Dep.
Mgmt
Scafolding
Mobile
Pkg
63Slide64
What is a Large Scale Application?
Confidential64Slide65
In my view, large-scale JavaScript apps are non-trivial applications requiring
significant developer effort to maintain, where most heavy lifting of data manipulation and display falls to the browser.
By Addy
OsmaniPatterns For Large-Scale JavaScript Application Architecture
Confidential
65Slide66
If working on a significantly large JavaScript application, remember to dedicate sufficient time to
planning the underlying architecture that makes the most sense. It's often more complex than you may initially imagine
.By
Addy Osmani
Patterns For Large-Scale JavaScript Application Architecture
Confidential
66Slide67
Characteristics
Decoupled Components – Mini AppsMany Model/EntitiesMultiple Views
NestProper Cleanup
Multiple RoutersEvent BusAbstraction from Libs if Possible
Confidential
67Slide68
Large Scale Application
68Slide69
Large Scale Application
DOM
Ajax
MVC
jQuery
jQuery
Backbone
Message Bus
sandbox.dom.find
()
Sandbox.ajax.ajax
()
sandbox.mvc.View
sandbox.emit()
sandbox.on()
69Slide70
Large Scale Application Architecture
Frameworks
Aura JSMarionetteJs for
BackBoneetc
Common API
NA
Confidential70Slide71
HTML 5
Large Scale Application Architecture
AMD
DOM Manipulation
Data Access
Templates
MVC | MVP |MVVM
3D/2D
Widgets
Style sheet Lang
Responsive UI
Routers/History
Presentation Layer
Foundation Layer
Build & Deployment
Build Tools
Dep.
Mgmt
Scafolding
Mobile
Pkg
71Slide72
Yeoman
Yo
Scaffolding Framework
Aka Code Generator
Grunt
Automation Tool
Like Ant in Java
Bower
Dependency Mgmt ToolLike Maven in Java
72Slide73
Yo – Backbone Example
73Slide74
Yo – Backbone Example
74Slide75
Grunt – Build Tool
75Slide76
Bower– Build Tool
76Slide77
Brunch
Basically a HTML Web App Assembler
compiles your scripts, templates, styles lints them
wraps the scripts and templates in common.js / AMD modules.
concatenates scripts and stylesgenerates source maps for concatenated files
copies assets and static filesshrinks the output by minifying code and optimizing images
watches your files for changes
notifies you about errors via console and system notifications
77Slide78
Comparison
Yeoman
Generic Powerful but Tedious
Brunch
Web App AssemblerSingle Purpose and Easy
Confidential
78Slide79
HTML 5
Large Scale Application Architecture
AMD
DOM Manipulation
Data Access
Templates
MVC | MVP |MVVM
3D/2D
Widgets
Style sheet Lang
Responsive UI
Routers/History
Presentation Layer
Foundation Layer
Build & Deployment
Build Tools
Dep.
Mgmt
Scafolding
Mobile
Pkg
79Slide80
Mobile Packaging
SPA
iOS
Android
Windows 8
Mobile Platform
80Slide81
PhoneGap aka Cordova
Plugin Architecture
81Slide82
Trigger.io
Trigger.io Modules
82Slide83
Conclusion
SPA Ecosystem frameworks can be classified asLarge Vs
Small FrameworksOpinionated Vs
Un-Opinionated FrameworksConfidential
83Slide84
Large Vs
Small Frameworks
There are 2 kinds of ScenarioA Library just fulfills one Category in Eco System
A Library fulfills many Categories in Eco SystemSlide85
85
HTML 5
Large Scale Application Architecture
AMD
DOM Manipulation
Data Access
Templates
MVC | MVP |MVVM
3D/2D
Widgets
Stylesheet
Lang
Responsive UI
Routers/History
Presentation Layer
Foundation Layer
Build & Deployment
Build Tools
Dep.
Mgmt
Scafolding
Mobile
PkgSlide86
86
HTML 5
Large Scale Application Architecture
AMD
DOM Manipulation
Data Access
Templates
MVC | MVP |MVVM
3D/2D
Widgets
Stylesheet
Lang
Responsive UI
Routers/History
Presentation Layer
Foundation Layer
Build & Deployment
Build Tools
Dep.
Mgmt
Scafolding
Mobile
Pkg
BootStrap
Router.Js
D3JS
Knockout
Aura JS
jQuery
jQuery
Require
Js
PhoneGap
Grunt
Bower
Yo
SassSlide87
87
HTML 5
Large Scale Application Architecture
AMD
DOM Manipulation
Data Access
Templates
MVC | MVP |MVVM
3D/2D
Widgets
Stylesheet
Lang
Responsive UI
Routers/History
Presentation Layer
Foundation Layer
Build & Deployment
Build Tools
Dep.
Mgmt
Scafolding
Mobile
Pkg
Sencha
Sencha
Sencha
Sencha
Sencha
Sencha
Sencha
Sencha
SenchaSlide88
Opinionated Vs
Un-Opinionated
The Choice betweenOpinionated Route
E.g Angular
Un-Opinionated Route
E.g
BackBoneJsSlide89
Conclusion
The Choice of frameworks in SPA Ecosystem depends on your Product needs and Architectural Goals
Confidential
89Slide90
Contact Me
rohit.ghatol@synerzip.com
Twitter @rohitghatol
90Slide91
91
84
Questions?
www.synerzip.com
Hemant Elhence
hemant@synerzip.com
469.322.0349 Slide92
Synerzip in a Nutshell
Software product development partner for small/mid-sized technology companiesExclusive focus on small/mid-sized technology companies, typically venture-backed companies in growth phase
By definition, all Synerzip work is the IP of its respective clientsDeep experience in full SDLC – design, dev, QA/testing, deploymentDedicated team of high caliber
software professionals for each clientSeamlessly extends client’s local team, offering full transparency
Stable teams with very low turn-overNOT just “staff augmentation”, but provide full mgmt support
Actually reduces risk of development/deliveryExperienced team - uses appropriate level of engineering discipline
Practices Agile development – responsive, yet disciplinedReduces cost – dual-shore team, 50% cost advantage
Offers long term flexibility – allows (facilitates) taking offshore team captive – aka “BOT”
optionSlide93
Our ClientsSlide94
Call Us for a Free Consultation!
Hemant Elhence
hemant@synerzip.com469.322.0349
Thanks!