Building Single Page Applications – Know the Ecosystem
Download
Report
Transcript Building Single Page Applications – Know the Ecosystem
Single Page Application
Ecosystem
Twitter
Bootstrap
Backbone Require.js
Compass
.js
Yoeman
BowerGrunt
D3JS
Three.js
JavaScript
SaSS
Angular.j
s
Aura.js
jQuery
Knockout.js
Sencha
By Rohit Ghatol
Director of Engineering - Synerzip
www.synerzip.com
1
About Me
Rohit Ghatol
@ Sf Bay Area
Director of Engineering @ Synerzip
Technology Evangelist!
Technology Speaker
Leader of 2 Tech Meetups –
TechNext/Pune – Google Developer Group
www.synerzip.com
2
Read about SPA Ecosystem in detail @
http://rohitghatol.com/?p=421
www.synerzip.com
3
Topics
What is SPA?
Why Learn about SPA Ecosystem ?
List Popular Frameworks
Large Scale SPA
Build Deploy Tools
www.synerzip.com
4
What is SPA?
Rich UI
Browser
Based
Helps Hybrid
Apps
Offline
No Refresh
Popular
Examples
Facebook *
Google Hangout
Twitter *
Bookmark able
Replacing Fat
Client
Saves Context
GMAIL
& Every New
Site
Immersive
* Almost
www.synerzip.com
5
Topics
What is SPA?
Why Learn about SPA Ecosystem ?
List Popular Frameworks
Large Scale SPA
Build Deploy Tools
www.synerzip.com
6
Why Learn about SPA
Ecosystem?
What do you
know about
SPA?
I know jQuery?
www.synerzip.com
7
Why Learn about SPA
Ecosystem?
What
Happened?
Nooooooo!!
Not Again!!
www.synerzip.com
8
Topics
What is SPA?
Why Learn about SPA Ecosystem ?
List Popular Frameworks
Large Scale SPA
Build Deploy Tools
www.synerzip.com
9
Classification
www.synerzip.com
10
Routers/History
MVC | MVP |MVVM
Templates
3D/2D
Stylesheet
Lang
Widgets
Presentation Layer
DOM Manipulation
HTML 5
Large Scale Application
Architecture
Responsive UI
Data Access
AMD
Foundation Layer
Mobile Pkg
Build Tools
Dep. Mgmt
Scafolding
Build & Deployment
www.synerzip.com
11
Routers/History
MVC | MVP |MVVM
Templates
3D/2D
Stylesheet
Lang
Widgets
Presentation Layer
DOM Manipulation
HTML 5
Large Scale Application
Architecture
Responsive UI
Data Access
AMD
Foundation Layer
Mobile Pkg
Build Tools
Dep. Mgmt
Scafolding
Build & Deployment
www.synerzip.com
12
DOM Manipulation
TR
Body
TD
Div
Span
TD
Table
Span
TR
TD
TR
TD
TD
TD
www.synerzip.com
13
DOM Manipulation
Frameworks
• jQuery 1.x
• jQuery 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)
www.synerzip.com
14
Routers/History
MVC | MVP |MVVM
Templates
3D/2D
Stylesheet
Lang
Widgets
Presentation Layer
DOM Manipulation
HTML 5
Large Scale Application
Architecture
Responsive UI
Data Access
AMD
Foundation Layer
Mobile Pkg
Build Tools
Dep. Mgmt
Scafolding
Build & Deployment
www.synerzip.com
15
Data Access
HTTP
Web Sockets
Browser
Cloud
/Server
Server Sent Events
AJAX/HTTP
Server Sent
Events
www.synerzip.com
Web Sockets
16
Data Access
Frameworks
• AJAX
–
–
–
–
jQuery
XUI
Zepto
Sencha/Ext,Backbone,Ang
ular *
• Web Sockets/SSE
Common APIs
• $.ajax(url,method,callback)
• Socket send()/onReceive()
• SEE onMessage()/onEvent()
• etc
– HTML5 APIs/Poly Fills
* Large Frameworks
www.synerzip.com
17
Routers/History
MVC | MVP |MVVM
Templates
3D/2D
Stylesheet
Lang
Widgets
Presentation Layer
DOM Manipulation
HTML 5
Large Scale Application
Architecture
Responsive UI
Data Access
AMD
Foundation Layer
Mobile Pkg
Build Tools
Dep. Mgmt
Scafolding
Build & Deployment
www.synerzip.com
18
Routers/History
MVC | MVP |MVVM
Templates
3D/2D
Stylesheet
Lang
Widgets
Presentation Layer
DOM Manipulation
HTML 5
Large Scale Application
Architecture
Responsive UI
Data Access
AMD
Foundation Layer
Mobile Pkg
Build Tools
Dep. Mgmt
Scafolding
Build & Deployment
www.synerzip.com
19
Modules
Multiple
Files
cy
Namespace
Conflict
Classes/Obje
cts Dependen
Asynchronous Loading
Concatenation of JS files
Confidential
www.synerzip.com
20
AMD
Why we need Asynchronous Module
Definition?
• Break down code into Reusable Module
• Define Dependency between Modules
• Avoid Namespace Conflicts
• Performance Improvement using Caching
• Deployment Optimization
www.synerzip.com
21
AMD
www.synerzip.com
22
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>
.
www.synerzip.com
23
Code AMD
<head>
<script src=“require.js” data-main=“app.js”></script>
</head>
.
www.synerzip.com
24
Module Loading using
Require.js
Code AMD
View.js
define([
”Store”],
….
App.js
require([
“Controller”)
Controller.js
Model.js
define([
“View”,
”Store”],
….
define([],
….
define([
“Model”],
….
Store.js
Confidential
www.synerzip.com
25
AMD
Frameworks
• Require.js
• Common.js
• Sencha*
Common APIs
• Define
• Require
• Export
• UMD *
Universal Module Definition (UMD) – A Module which works when
1. We use Require.js
2. We use Common.js
3. or We Directly include script in HTML code
www.synerzip.com
26
Routers/History
MVC | MVP |MVVM
Templates
3D/2D
Stylesheet
Lang
Widgets
Presentation Layer
DOM Manipulation
HTML 5
Large Scale Application
Architecture
Responsive UI
Data Access
AMD
Foundation Layer
Mobile Pkg
Build Tools
Dep. Mgmt
Scafolding
Build & Deployment
www.synerzip.com
27
UI Design Patterns
MV
C
Confidential
MV VM
www.synerzip.com
MVP
28
MVC
MV *
MVVM
MVP
www.synerzip.com
29
MV* Frameworks
Frameworks
• BackBone.js
• Angular.js
• Knockout.js
• Ember.js
• Etc (list goes on)
Common APIs
• NA
www.synerzip.com
30
MV * Frameworks
• Faster Development Cycles
• Predefined Conventions
Confidential
www.synerzip.com
• Very Basic
• Highly Flexible
31
Backbone JS
•
•
•
•
One of the first MV *
Light Weight and un-opinionated
Works with numerous other frameworks
Good Ecosystem
– Marionette JS – Large Scale Backbone App
– Chaplin – Architecture Framework
– Thorax – Opinionated Backbone
– Exoskeleton – Light weight Backbone
Replacement
www.synerzip.com
32
Angular JS
•
•
•
•
Gaining Immense Popularity
Highly Opinionated Framework
2 Way Data Binding
Backed by Google – Good Community
Support
• Faster Development Cycle
www.synerzip.com
33
Knockout JS
•
•
•
•
•
Immensely Popularity in C# world
Uses MV VM Design
2 Way Data Binding
Faster Development Cycles
Good for small-mid size Apps
www.synerzip.com
34
Routers/History
MVC | MVP |MVVM
Templates
3D/2D
Style sheet
Lang
Widgets
Presentation Layer
DOM Manipulation
HTML 5
Large Scale Application
Architecture
Responsive UI
Data Access
AMD
Foundation Layer
Mobile Pkg
Build Tools
Dep. Mgmt
Scafolding
Build & Deployment
www.synerzip.com
36
Templates
Repeats
Search
Category
• Camera
• Digital
• DSLR
• Compact
• Camcorder
• XXX
• XXX
No Search Result Found
Result 1
Conditional
Repeats
Result 2
Result 10
Prev 1 2 3 4 5 6 7 8 9 10 Next
www.synerzip.com
Conditiona
l
37
Templates
Frameworks
• underscore
• handlerbar
• Moustache
• Angular, Sencha *
• etc
Common APIs
• var text=
engine.template(tmpl,dat
a);
www.synerzip.com
40
Routers/History
MVC | MVP |MVVM
Templates
3D/2D
Style sheet
Lang
Widgets
Presentation Layer
DOM Manipulation
HTML 5
Large Scale Application
Architecture
Responsive UI
Data Access
AMD
Foundation Layer
Mobile Pkg
Build Tools
Dep. Mgmt
Scafolding
Build & Deployment
www.synerzip.com
41
Routers/History - Concept
http://abc.com/#tab1
Tab1
Tab2
Tab3
Tab 1
www.synerzip.com
42
Routers/History - Concept
User can bookmark the url
http://abc.com/#tab2
Tab1
Tab2
Tab3
Tab 2
www.synerzip.com
43
Routers/History - Concept
User click’s Browser’s back button
http://abc.com/#tab2
Tab1
Tab2
Tab3
Tab 2
www.synerzip.com
44
Routers/History - Concept
http://abc.com/#tab1
Tab1
Tab2
Tab3
Tab 1
www.synerzip.com
45
Router/History
Frameworks
• Angular,Backbone,Sench
a*
• Router JS
• Sammy JS
• Pager
• Dave JS
• Cross Roads
• Path JS
• Etc
Common APIs
• route(path,callback)
• navigate(path,options)
• navigate(history_index)
www.synerzip.com
46
Routers/History
MVC | MVP |MVVM
Templates
3D/2D
Style sheet
Lang
Widgets
Presentation Layer
DOM Manipulation
HTML 5
Large Scale Application
Architecture
Responsive UI
Data Access
AMD
Foundation Layer
Mobile Pkg
Build Tools
Dep. Mgmt
Scafolding
Build & Deployment
www.synerzip.com
47
Responsive UI
Desktop
Mobile
www.synerzip.com
48
Responsive UI
Desktop
Mobile
www.synerzip.com
49
12 Column Grid
Desktop
1
Confidential
2
3
4
5
6
www.synerzip.com
7
8
9
10
11
12
50
12 Column Grid
Mobile
1
2
3
4
5
6
7
8
9
10
11
12
Width
has
shrunk
Confidential
www.synerzip.com
51
Responsive UI
Frameworks
• Twitter BootStrap
• Zurb Foundation
Common APIs
• NA
www.synerzip.com
52
Comparison
Twitter BootStrap
• BootStrap your App
• More
• Rich UI Elements
• Mobile First *
• Uses Pixels
• 12 Column Grid
Confidential
Zurb Foundation
• Use as a Foundation
• Minimalistic
• Limited UI Elements
• Mobile First *
• Uses REM
• 12 Column Grid
www.synerzip.com
53
Routers/History
MVC | MVP |MVVM
Templates
3D/2D
Style sheet
Widgets
Lang
Presentation Layer
DOM Manipulation
HTML 5
Large Scale Application
Architecture
Responsive UI
Data Access
AMD
Foundation Layer
Mobile Pkg
Build Tools
Dep. Mgmt
Scafolding
Build & Deployment
www.synerzip.com
54
2D/3D
WebGL = 3D
Visualization
Canvas/SVG = 2D
Visualization
www.synerzip.com
55
2D Visualizations
Quick and Easy
• High Charts
• Raphael
• Flot JS
• Google Visualizations
• AMCharts etc
Flexible and Powerful
• D3JS
www.synerzip.com
56
3D Visualizations
Frameworks
• Three.js
• Babylon.js
• GLGE
• Scene.js
• X3DOM
• etc
WebGL is very cryptic
hence we need a higher
level framework to work with
for 3D Visualization
www.synerzip.com
57
Routers/History
MVC | MVP |MVVM
Templates
3D/2D
Style sheet
Lang
Widgets
Presentation Layer
DOM Manipulation
HTML 5
Large Scale Application
Architecture
Responsive UI
Data Access
AMD
Foundation Layer
Mobile Pkg
Build Tools
Dep. Mgmt
Scafolding
Build & Deployment
www.synerzip.com
58
Style Sheet Languages
Reasons for Style Sheet Languages
• Nested CSS Declarations – Hierarchical
Structure
• Use of Variables e.g Themes
• Mixins – Reusable CSS Snippets
www.synerzip.com
59
Style Sheet Languages
SASS Vs Less
• Almost Similar capabilities
– Nesting Capabilities
– Mixins and Parametric Mixins
– Namespaces
– Color Functions
– JavaScript Evaluations
Confidential
www.synerzip.com
62
Routers/History
MVC | MVP |MVVM
Templates
3D/2D
Style sheet
Lang
Widgets
Presentation Layer
DOM Manipulation
HTML 5
Large Scale Application
Architecture
Responsive UI
Data Access
AMD
Foundation Layer
Mobile Pkg
Build Tools
Dep. Mgmt
Scafolding
Build & Deployment
www.synerzip.com
63
What is a Large Scale
Application?
Confidential
www.synerzip.com
64
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 Osmani
Patterns For Large-Scale JavaScript Application Architecture
Confidential
www.synerzip.com
65
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
www.synerzip.com
66
Characteristics
• Decoupled Components – Mini Apps
– Many Model/Entities
– Multiple Views
• Nest
• Proper Cleanup
• Multiple Routers
• Event Bus
• Abstraction from Libs if Possible
Confidential
www.synerzip.com
67
Large Scale Application
www.synerzip.com
68
Large Scale Application
Message Bus
sandbox.emit()
sandbox.on()
DOM
Ajax
MVC
jQuery
jQuery
Backbone
www.synerzip.com
sandbox.dom.find(
)
Sandbox.ajax.ajax
()
sandbox.mvc.Vie
w
69
Large Scale Application
Architecture
Frameworks
• Aura JS
• MarionetteJs for
BackBone
• etc
Confidential
Common API
• NA
www.synerzip.com
70
Routers/History
MVC | MVP |MVVM
Templates
3D/2D
Style sheet
Lang
Widgets
Presentation Layer
DOM Manipulation
HTML 5
Large Scale Application
Architecture
Responsive UI
Data Access
AMD
Foundation Layer
Mobile Pkg
Build Tools
Dep. Mgmt
Scafolding
Build & Deployment
www.synerzip.com
71
Yeoman
Yo
Grunt
Bower
Scaffolding
Framework
Aka Code Generator
Automation Tool
Like Ant in Java
Dependency Mgmt
Tool
Like Maven in Java
www.synerzip.com
72
Brunch
Basically a HTML Web App Assembler
1.
2.
3.
4.
5.
6.
7.
8.
compiles your scripts, templates, styles lints them
wraps the scripts and templates in common.js / AMD modules.
concatenates scripts and styles
generates source maps for concatenated files
copies assets and static files
shrinks the output by minifying code and optimizing images
watches your files for changes
notifies you about errors via console and system notifications
www.synerzip.com
77
Comparison
Yeoman
• Generic
• Powerful but Tedious
Confidential
Brunch
• Web App Assembler
• Single Purpose and Easy
www.synerzip.com
78
Routers/History
MVC | MVP |MVVM
Templates
3D/2D
Style sheet
Lang
Widgets
Presentation Layer
DOM Manipulation
HTML 5
Large Scale Application
Architecture
Responsive UI
Data Access
AMD
Foundation Layer
Mobile Pkg
Build Tools
Dep. Mgmt
Scafolding
Build & Deployment
www.synerzip.com
79
Mobile Packaging
SPA
Mobile Platform
iOS
Android
www.synerzip.com
Windows 8
80
PhoneGap aka Cordova
Plugin Architecture
www.synerzip.com
81
Trigger.io
Trigger.io Modules
www.synerzip.com
82
Conclusion
SPA Ecosystem frameworks can be
classified as
• Large Vs Small Frameworks
• Opinionated Vs Un-Opinionated
Frameworks
Confidential
www.synerzip.com
83
Large Vs Small Frameworks
• There are 2 kinds of Scenario
– A Library just fulfills one Category in Eco
System
– A Library fulfills many Categories in Eco
System
www.synerzip.com
Routers/History
MVC | MVP |MVVM
Templates
3D/2D
Stylesheet
Lang
Widgets
Presentation Layer
DOM Manipulation
HTML 5
Large Scale Application
Architecture
Responsive UI
Data Access
AMD
Foundation Layer
Mobile Pkg
Build Tools
Dep. Mgmt
Scafolding
Build & Deployment
www.synerzip.com
85
MVC | MVP |MVVM Knockout
Templates
D3JS
3D/2D
Stylesheet
Lang
Sass
Presentation Layer
Widgets
jQuery
DOM Manipulation
jQuery
Data Access
HTML 5
Large Scale Application
Architecture
Router.Js
Routers/History
BootStrap
Responsive UI
AMD
Foundation Layer
Aura JS
Require Js
PhoneGap
Grunt
Bower
Build Tools
Dep. Mgmt
Build & Deployment
www.synerzip.com
Mobile Pkg
Scafolding
Yo
86
Responsive UI
MVC | MVP |MVVM Sencha
Templates
Sencha
Sencha
3D/2D
Stylesheet
Lang
Widgets
Presentation Layer
Sencha
DOM Manipulation
Sencha
Data Access
HTML 5
Large Scale Application
Architecture
Sencha
Routers/History
AMD
Foundation Layer
Sencha
Sencha
Mobile Pkg
Sencha
Build Tools
Dep. Mgmt
Scafolding
Build & Deployment
www.synerzip.com
87
Opinionated Vs Un-Opinionated
The Choice between
• Opinionated Route
– E.g Angular
• Un-Opinionated Route
– E.g BackBoneJs
www.synerzip.com
Conclusion
The Choice of frameworks in SPA
Ecosystem depends on your
• Product needs and
• Architectural Goals
Confidential
www.synerzip.com
89
Contact Me
• [email protected]
• Twitter @rohitghatol
www.synerzip.com
90
Questions?
www.synerzip.com
Hemant Elhence
[email protected]
469.322.0349
www.synerzip.com
•91
84
Synerzip in a Nutshell
1. Software product development partner for small/mid-sized
technology companies
•
•
•
Exclusive 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 clients
Deep experience in full SDLC – design, dev, QA/testing, deployment
2. Dedicated team of high caliber software professionals for
each client
•
•
•
Seamlessly extends client’s local team, offering full transparency
Stable teams with very low turn-over
NOT just “staff augmentation”, but provide full mgmt support
3. Actually reduces risk of development/delivery
•
•
Experienced team - uses appropriate level of engineering discipline
Practices Agile development – responsive, yet disciplined
4. Reduces cost – dual-shore team, 50% cost advantage
5. Offers long term flexibility – allows (facilitates) taking
offshore team captive – aka “BOT” option
www.synerzip.com
Our Clients
www.synerzip.com
Thanks!
Call Us for a Free Consultation!
Hemant Elhence
[email protected]
469.322.0349
www.synerzip.com