This document discusses single page applications (SPAs) and their advantages over traditional web pages that reload on every user interaction. It covers SPA architecture, including the front-end using client-side routing, views/templates, and bindings to connect the UI to models/data, as well as the back-end for data access and storage. The document promotes using a MVVM pattern to separate UI logic from data and implementing SPAs using technologies like routing, bindings, and modules for code organization.

1. SINGLE PAGE
APPLICATIONS
Andriy Deren’, Dreams IT, CEO
Ternopil JS #2

2. AGENDA
▪ What is SPA?
▪ SPA architecture design
▪ SPA Back-end
▪ SPA Client-side
▪ MVVM & SPA implementation
▪ SPA Advanced techniques

3. MODERN WEB CHALLENGES
▪ More in-page interactivity
▪ Rich client graphics
▪ Data growth
▪ Page size growth
▪ New client devices
▪ Reloads vs Native feeling

4. CLASSIC WEB PAGES
/GET /home/index
Browser Web-server Server-side
magic
A lot of HTML, CSS, JS on each click
Main.css
super_script.js

5. CLASSIC WEB PAGES
/GET /home/index
Browser Web-server Server-side
magic
A lot of HTML, CSS, JS on each click
Main.css
super_script.js
Reloads & redirects

6. SINGLE PAGE APPLICATION
/GET /home/indexBrowser
Web-server Server-side
magic
Load tiny html template
Main.css
super_script.js
Load required data

7. SINGLE PAGE APPLICATION
Browser
Client-side
magic
Fill template with data
Bind actions behavior
Client-side routing
All actions and redirects
are handled on client-side
With no page reload
and huge HTML packages

8. SPA ARCHITECTURE DESIGN
Routing Action Behaviors
Data Provider &
Data context
State (Storage)
Security
(authorization &
authentication)
Data AccessBack-end
Middle-ware
Views &
Templates
Bindings Custom scriptsFront-end
CLIENTSIDE

9. SPA BACK-END
State (Storage)
Security
(authorization &
authentication)
Data Access
▪ Data storage
▪ User-specific data
▪ Security actions
▪ Provide access to resources (via HTTP REST API)

10. SPA BACK-END
State (Storage)
Security
(authorization &
authentication)
Data Access
▪ Minimal delay
▪ Maximal efficiency
▪ High scale
▪ Versioning
▪ Conventions
GET /api/v1/product/32
Good resource route
GET /product.php?v=1&id=32&action=getProduct
Bad resource route

11. SPA BACK-END
State (Storage)
Security
(authorization &
authentication)
Data Access

12. SPA MIDDLE WARE
▪ Data context: Models, Data Provider & App State
▪ Routing: client-side navigation
▪ User actions reaction
Routing Action Behaviors
Data Provider &
Data context

13. SPA FRONT-END
▪ State bindings: connect app state and UI elements
▪ Load & select right views
▪ Run custom scripts (jQuery, animation, transitions, etc.)
Views &
Templates
Bindings Custom scripts

14. View
MVVM PATTERN
View View Model Model
View Behavior (UI Logic)
Notifications
Bindings
Commands
Data transfer
UI Presentation Layer Data Layer and BL

15. View
SPA COMPONENTS
View
Views and
templates
(HTML fragments)
View models
Router + routing
configuration
(navigation)
Custom scripts
Data providers &
data transfer
SPA Shell
SPA

16. UNDER THE HOOD
example.com/#products
example.com/#products/details/12
Routing
Uses History API
(back button works!)
<h3 class="app-title" data-bind="text:$data.title">
…
Bindings
Data bindings
(by code, markup, etc.)
<a data-bind="click:$root.showDetails">…
Behavior bindings
(by code, markup, etc.)

17. IMPLEMENTATION TECHNOLOGIES

18. SPA ADVANCED TECHNIQUES
▪ Architecture design with implementation in mind
▪ Simplify client-side code (TypeScript, Coffee)
▪ Dependencies injection & modules (RequireJS)
▪ Testing
▪ Attention to efficiency and performance
▪ Search engines optimization

19. THANK YOU!
Any questions?