Upload
volodymyr-voytyshyn
View
244
Download
0
Embed Size (px)
DESCRIPTION
Key questions that should be resolved when developing a single page web application.
Citation preview
Single Page Web Application
KEY QUESTIONS
1
2
What arethe key questions
when developing an SPA?
What arethe key questions
when developing an SPA?
What’s an SPA?
1. A page is not completely reloaded
2. HTML is generated by client side JS
3. Client side state is stored with JS objects
3
WebPage
SPA
Complexity
Low
High
.NET Web Evolution3 GENERATION OF ASP.NET APPLICATIONS
4
.NET Web: Generation #1ASP.NET Web Forms / 2002 – Now
5
Page
Web Form Code Behind
Life Cycle
Clien
tS
erv
er
No special JS
structuring
GET / POST
.NET Web: Generation #2ASP.NET MVC / 2009 – Now
6
Page
Controller
Clien
tS
erv
er
PrimitiveJS
structuring
GET / POST
.NET Web: Generation #3ASP.NET Web API / 2012 – Now
7
Page
REST API
Clien
tS
erv
er
StrongJS
structuring
Mobile App
GET / POST / PUT / DELETE
The Key Questions
8
1. Base JS “Bricks”1.1. WHAT IS A MINIMAL STRUCTURAL UNIT?
1.2. HOW TO MANAGE DEPENDENCIES AMONG UNITS?
9
JS Module Pattern
10
Provides both private and publicencapsulation for classes
The Module Pattern (by Addy Osmani)
JS Module Example
11
▪ Closure is used for private state
▪ “Public” object is returned
▪ Created by IIFE
JS Module Dependencies
12
JS Module Extending
13
Pseudo Classas a JS Module
14
Backbone collectionas a JS Module
15
JS Module Standards: AMD
16
define(id?, dependencies?, factory)
AMD Specification (on Git Hub)Writing Modular JavaScript With AMD, CommonJS & ES Harmony (by Addy Osmani)
JS Module Quality Criterion
17
How easily could a JS Module be coveredby UNIT TESTS?
2. Frameworks2.1. WHAT IS A STACK OF BASE FRAMEWORKS?
18
Criteria to Frameworks Stack1. Extending of base JS functions
2. DOM processing
3. HTML templates
4. AJAX / REST handling
5. MV*
6. Routing
7. JS Modules management
19
Top JS MV* Frameworks
20
Knockout.js
Ember.js
Angular.js
Backbone.js
Sample of Frameworks Stack
21
Backbone.js
Underscore.js
jQuery Require.js
3. Architecture3.1. HOW TO STRUCTURE GUI?
3.2. HOW TO KEEP DATA?
3.3. HOW TO PUT THINGS TOGETHER?
22
Web Module
1. Works independently from other web modules
2. Works within the “sandbox”
3. Has limited knowledge regarding the whole application
4. Is managed by a web module manager
23
Scalable JavaScript Application Architecture (by Nicholas Zakas)
Web Module = HTML + CSS + JS
Web Modules: Base Idea
24
Web Module 1 Web Module 2
Web Modules Manager
Manages a web module life cycle
Manages collaboration among modules
Web Module Context Everything a web
module knows about the application
Manage user’s interaction
Don’t know about each other
Web Module↓
an independent part of GUI
Web Modules:Hierarchical Implementation
25
Root Web Module
Web Module 1
Web Module 1-1 Web Module 1-2
Application
Web Module 2
Web Module 2-1 Web Module 2-2
Parent & Child Web Modules
26
Parent
Child
Communication between parent and child
Child's life cycle management
1: Register(context, eventHandlers)
3: Invoke a child's method()
2: Unregister()
4: Raise an event()
Web Module: Quality Criterion
27
How much is a web module depended fromthe other web modules?
Data Aggregate
28
Customer Order
Item
REST API
Web Module 1 Web Module 2
29
Thank You!
30