Key questions that should be resolved when developing a single page web application.

1. Single Page Web
Application
KEY QUESTIONS
1

2. 2
What are
the key questions
when developing an SPA?
What are
the key questions
when developing an SPA?

3. 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
Web
Page
SPA
Complexity
Low
High

4. .NET Web Evolution
3 GENERATION OF ASP.NET APPLICATIONS
4

5. .NET Web: Generation #1
ASP.NET Web Forms / 2002 – Now
5
Page
Web Form Code Behind
Life Cycle
ClientServer
No special
JS
structuring
GET / POST

6. .NET Web: Generation #2
ASP.NET MVC / 2009 – Now
6
Page
Controller
ClientServer
Primitive
JS
structuring
GET / POST

7. .NET Web: Generation #3
ASP.NET Web API / 2012 – Now
7
Page
REST API
ClientServer
Strong
JS
structuring
Mobile App
GET / POST / PUT / DELETE

8. The Key Questions
8

9. 1. Base JS “Bricks”
1.1. WHAT IS A MINIMAL STRUCTURAL UNIT?
1.2. HOW TO MANAGE DEPENDENCIES AMONG UNITS?
9

10. JS Module Pattern
10
Provides both private and public
encapsulation for classes
The Module Pattern (by Addy Osmani)

11. JS Module Example
11
▪ Closure is used for
private state
▪ “Public” object is
returned
▪ Created by IIFE

12. JS Module Dependencies
12

13. JS Module Extending
13

14. Pseudo Class
as a JS Module
14

15. Backbone collection
as a JS Module
15

16. 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)

17. JS Module Quality Criterion
17
How easily could a JS Module be covered
by UNIT TESTS?

18. 2. Frameworks
2.1. WHAT IS A STACK OF BASE FRAMEWORKS?
18

19. Criteria to Frameworks Stack
1. Extending of base JS functions
2. DOM processing
3. HTML templates
4. AJAX / REST handling
5. MV*
6. Routing
7. JS Modules management
19

20. Top JS MV* Frameworks
20
Knockout.js
Ember.js
Angular.js
Backbone.js

21. Sample of Frameworks Stack
21
Backbone.js
Underscore.js
jQuery Require.js

22. 3. Architecture
3.1. HOW TO STRUCTURE GUI?
3.2. HOW TO KEEP DATA?
3.3. HOW TO PUT THINGS TOGETHER?
22

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

24. 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

25. 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

26. Parent & Child Web Modules
26
Parent
Child
Communication between parent and child
Child'slife cycle management
1: Register(context, eventHandlers)
3: Invoke a child'smethod()
2: Unregister()
4: Raise an event()

27. Web Module: Quality Criterion
27
How much is a web module depended from
the other web modules?

28. Data Aggregate
28
Customer Order
Item
REST API
Web Module 1 Web Module 2

29. 29

30. Thank You!
30