Single Page Applications – Know The Ecosystem system

www.synerzip.comwww.synerzip.com
Single Page Application
Ecosystem
By Rohit Ghatol
Director of Engineering - Synerzip
JavaScript
jQuery
Backbone
.js
Angular.j
s
Twitter
Bootstrap
Yoeman
Require.js
Aura.js
GruntBower
Compass
SaSS
Sencha
Knockout.js
D3JS
Three.js
1

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 Area

Read about SPA Ecosystem in detail @
http://rohitghatol.com/?p=421
3

Topics
What is SPA?
Why Learn about SPA Ecosystem ?
List Popular Frameworks
Large Scale SPA
Build Deploy Tools
4

What is SPA?
Browser
Based
Rich UI
Bookmarkable
Saves Context
ReplacingFat
Client
Immersive
No Refresh
Offline
Helps Hybrid
Apps
Twitter*
Google Hangout
Facebook *
* Almost 
GMAIL
Popular
Examples
& Every New
Site
5

Topics
What is SPA?
Large Scale SPA
Build Deploy Tools
6

Why Learn about SPA
Ecosystem?
What do you
know about
SPA?
I know jQuery?
7

Why Learn about SPA
Ecosystem?
Nooooooo!!
Not Again!!
What
Happened?
8

Topics
What is SPA?
Large Scale SPA
Build Deploy Tools
9

Classification
10

HTML5
LargeScaleApplication
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
11

HTML5
Architecture
AMD
Templates
Widgets
Stylesheet
Lang
Presentation Layer
Foundation Layer
Build & Deployment
Mobile Pkg
12

DOM Manipulation
Body
Div
Span Span
Table
TR
TD TD
TR
TD TD
TR
TD TD
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)
14

HTML5
Architecture
AMD
Templates
Widgets
Stylesheet
Lang
Presentation Layer
Foundation Layer
Build & Deployment
Mobile Pkg
15

Data Access
Cloud
/ServerBrowser
AJAX/HTTP
Server Sent
Events
Web Sockets
HTTP
Web Sockets
Server Sent Events
16

Data Access
Frameworks
• AJAX
– jQuery
– XUI
– Zepto
– Sencha/Ext,Backbone,Ang
ular *
• Web Sockets/SSE
– HTML5 APIs/Poly Fills
Common APIs
• $.ajax(url,method,callback)
• Socket -
send()/onReceive()
• SEE -
onMessage()/onEvent()
• etc
* Large Frameworks
17

HTML5
Architecture
AMD
Templates
Widgets Stylesheet
Lang
Presentation Layer
Foundation Layer
Build & Deployment
Mobile Pkg
18

HTML5
Architecture
AMD
Templates
Widgets
Stylesheet
Lang
Presentation Layer
Foundation Layer
Build & Deployment
Mobile Pkg
19

Modules
Confidential 20
Classes/Obje
cts
Multiple
Files
Dependen
cy
Namespace
Conflict
Asynchronous Loading
Concatenation of JS files

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
21

AMD
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>
.
23

Code AMD
<head>
<script src=“require.js” data-main=“app.js”></script>
</head>
.
24

www.synerzip.comwww.synerzip.comConfidential 25
require([
“Controller”)
define([
“View”,
”Store”],
….
Controller.js
define([
“Model”],
….
Store.js
define([
”Store”],
….
View.js
define([],
….
Model.js
App.js
Module Loading using
Require.js Code AMD

Frameworks
• Require.js
• Common.js
• Sencha*
• UMD *
Common APIs
• Define
• Require
• Export
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
26
AMD

HTML5
Architecture
AMD
Templates
Widgets Stylesheet
Lang
Presentation Layer
Foundation Layer
Build & Deployment
Mobile Pkg
27

UI Design Patterns
Confidential 28
MV
C
MV VM MVP

MVC
MVVM
MVP
MV *
29

MV* Frameworks
Frameworks
• BackBone.js
• Angular.js
• Knockout.js
• Ember.js
• Etc (list goes on)
Common APIs
• NA
30

MV * Frameworks
Confidential 31
• Faster Development Cycles
• Predefined Conventions
• Very Basic
• Highly Flexible

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
32

Angular JS
• Gaining Immense Popularity
• Highly Opinionated Framework
• 2 Way Data Binding
• Backed by Google – Good Community
Support
• Faster Development Cycle
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
34

HTML5
Architecture
AMD
Templates
Widgets
Style sheet
Lang
Presentation Layer
Foundation Layer
Build & Deployment
Mobile Pkg
36

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
• Camera
• Digital
• DSLR
• Compact
• Camcorder
• XXX
• XXX
Conditional
Repeats
Conditiona
l
Repeats

Templates
Frameworks
• underscore
• handlerbar
• Moustache
• Angular, Sencha *
• etc
Common APIs
• var text=
engine.template(tmpl,dat
a);
40

HTML5
Architecture
AMD
Templates
Widgets
Style sheet
Lang
Presentation Layer
Foundation Layer
Build & Deployment
Mobile Pkg
41

Routers/History - Concept
42
http://abc.com/#tab1
Tab1 Tab2 Tab3
Tab 1

43
Tab1 Tab2 Tab3
Tab 2
User can bookmark the url

44
Tab1 Tab2 Tab3
Tab 2
User click’s Browser’s back button

45
Tab1 Tab2 Tab3
Tab 1

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)
46

HTML5
Architecture
AMD
Templates
Widgets
Style sheet
Lang
Presentation Layer
Foundation Layer
Build & Deployment
Mobile Pkg
47

Responsive UI
48
Desktop Mobile

Responsive UI
49
Desktop Mobile

12 Column Grid
Confidential 50
1 2 3 4 5 6 7 8 9 10 11 12
Desktop

12 Column Grid
Confidential 51
1 2 3 4 5 6 7 8 9 10 11 12
Mobile
Width
has
shrunk

Responsive UI
Frameworks
• Twitter BootStrap
• Zurb Foundation
Common APIs
• NA
52

Comparison
Twitter BootStrap
• BootStrap your App
• More
• Rich UI Elements
• Mobile First *
• Uses Pixels
• 12 Column Grid
Zurb Foundation
• Use as a Foundation
• Minimalistic
• Limited UI Elements
• Mobile First *
• Uses REM
• 12 Column Grid
Confidential 53

HTML5
Architecture
AMD
Templates
Widgets
Style sheet
Lang
Presentation Layer
Foundation Layer
Build & Deployment
Mobile Pkg
54

2D/3D
Canvas/SVG = 2D
Visualization
WebGL = 3D
Visualization
55

2D Visualizations
Quick and Easy
• High Charts
• Raphael
• Flot JS
• Google Visualizations
• AMCharts etc
Flexible and Powerful
• D3JS
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
57

HTML5
Architecture
AMD
Templates
Widgets
Style sheet
Lang
Presentation Layer
Foundation Layer
Build & Deployment
Mobile Pkg
58

Style Sheet Languages
Reasons for Style Sheet Languages
• Nested CSS Declarations – Hierarchical
Structure
• Use of Variables e.g Themes
• Mixins – Reusable CSS Snippets
59

Style Sheet Languages
SASS Vs Less
• Almost Similar capabilities
– Nesting Capabilities
– Mixins and Parametric Mixins
– Namespaces
– Color Functions
– JavaScript Evaluations
Confidential 62

HTML5
Architecture
AMD
Templates
Widgets
Style sheet
Lang
Presentation Layer
Foundation Layer
Build & Deployment
Mobile Pkg
63

What is a Large Scale
Application?
Confidential 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 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 66

Characteristics
• Decoupled Components – Mini Apps
– Many Model/Entities
– Multiple Views
• Nest
• Proper Cleanup
• Multiple Routers
• Event Bus
• Abstraction from Libs if Possible
Confidential 67

Large Scale Application
68

DOM Ajax MVC
jQuery jQuery Backbone
MessageBus
sandbox.dom.find(
)
Sandbox.ajax.ajax
()
sandbox.mvc.Vie
w
sandbox.emit()
sandbox.on()
69

Architecture
Frameworks
• Aura JS
• MarionetteJs for
BackBone
• etc
Common API
• NA
Confidential 70

HTML5
Architecture
AMD
Templates
Widgets
Style sheet
Lang
Presentation Layer
Foundation Layer
Build & Deployment
Mobile Pkg
71

Yeoman
Yo
Scaffolding
Framework
Aka Code Generator
Grunt
Automation Tool
Like Ant in Java
Bower
Dependency Mgmt
Tool
Like Maven in Java
72

Brunch
Basically a HTML Web App Assembler
1. compiles your scripts, templates, styles lints them
2. wraps the scripts and templates in common.js / AMD modules.
3. concatenates scripts and styles
4. generates source maps for concatenated files
5. copies assets and static files
6. shrinks the output by minifying code and optimizing images
7. watches your files for changes
8. notifies you about errors via console and system notifications
77

Comparison
Yeoman
• Generic
• Powerful but Tedious
Brunch
• Web App Assembler
• Single Purpose and Easy
Confidential 78

HTML5
Architecture
AMD
Templates
Widgets
Style sheet
Lang
Presentation Layer
Foundation Layer
Build & Deployment
Mobile Pkg
79

Mobile Packaging
SPA
iOS Android Windows 8
Mobile Platform
80

PhoneGap aka Cordova
Plugin Architecture
81

Trigger.io
Trigger.io Modules
82

Conclusion
SPA Ecosystem frameworks can be
classified as
• Large Vs Small Frameworks
• Opinionated Vs Un-Opinionated
Frameworks
Confidential 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.comwww.synerzip.com 85
HTML5
Architecture
AMD
Templates
Widgets
Stylesheet
Lang
Presentation Layer
Foundation Layer
Build & Deployment
Mobile Pkg

HTML5
Architecture
AMD
Templates
Widgets
Stylesheet
Lang
Presentation Layer
Foundation Layer
Build & Deployment
Mobile Pkg
BootStrap Router.Js
D3JS
Knockout
Aura JS
jQuery jQuery
Require Js
PhoneGap
Grunt Bower
Yo
Sass

HTML5
Architecture
AMD
Templates
Widgets
Stylesheet
Lang
Presentation Layer
Foundation Layer
Build & Deployment
Mobile Pkg
Sencha
Sencha
Sencha
Sencha Sencha
Sencha
Sencha
Sencha
Sencha

Opinionated Vs Un-Opinionated
The Choice between
• Opinionated Route
– E.g Angular
• Un-Opinionated Route
– E.g BackBoneJs

Conclusion
The Choice of frameworks in SPA
Ecosystem depends on your
• Product needs and
• Architectural Goals
Confidential 89

Contact Me
• rohit.ghatol@synerzip.com
• Twitter @rohitghatol
90

•9184
Questions?
www.synerzip.com
Hemant Elhence
hemant@synerzip.com
469.322.0349

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

Our Clients

Call Us for a Free Consultation!
Hemant Elhence
hemant@synerzip.com
469.322.0349
Thanks!

Single Page Applications – Know The Ecosystem system

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Single Page Applications – Know The Ecosystem system

Semelhante a Single Page Applications – Know The Ecosystem system (20)

Mais de Synerzip

Mais de Synerzip (20)

Último

Último (20)

Single Page Applications – Know The Ecosystem system

Notas do Editor