Download - Single page applications - TernopilJS #2
SINGLE PAGE APPLICATIONSAndriy Deren’, Dreams IT, CEOTernopil JS #2
AGENDA▪ What is SPA?
▪ SPA architecture design
▪ SPA Back-end
▪ SPA Client-side
▪ MVVM & SPA implementation
▪ SPA Advanced techniques
MODERN WEB CHALLENGES▪ More in-page interactivity
▪ Rich client graphics
▪ Data growth
▪ Page size growth
▪ New client devices
▪ Reloads vs Native feeling
CLASSIC WEB PAGES
/GET /home/index
Browser Web-server Server-sidemagic
A lot of HTML, CSS, JS on each click
Main.csssuper_script.js
CLASSIC WEB PAGES
/GET /home/index
Browser Web-server Server-sidemagic
A lot of HTML, CSS, JS on each click
Main.csssuper_script.js
Reloads & redirects
SINGLE PAGE APPLICATION
/GET /home/indexBrowserWeb-server Server-side
magic
Load tiny html template
Main.csssuper_script.js
Load required data
SINGLE PAGE APPLICATIONBrowser
Client-sidemagic
Fill template with data
Bind actions behavior
Client-side routing
All actions and redirectsare handled on client-side
With no page reload and huge HTML packages
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
CLIE
NT
SIDE
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)
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
SPA BACK-END
State (Storage)Security
(authorization & authentication)
Data Access
SPA MIDDLE WARE
▪ Data context: Models, Data Provider & App State
▪ Routing: client-side navigation
▪ User actions reaction
Routing Action Behaviors Data Provider & Data context
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
View
MVVM PATTERN
View View Model Model
View Behavior (UI Logic)
Notifications
Bindings
Commands
Data transfer
UI Presentation Layer Data Layer and BL
View
SPA COMPONENTS
View
Views and templates
(HTML fragments)View models
Router + routing configuration (navigation)
Custom scripts
Data providers & data transfer
SPA ShellSPA
UNDER THE HOOD
example.com/#productsexample.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.)
IMPLEMENTATION TECHNOLOGIES
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
THANK YOU!Any questions?