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