single page applications - ternopiljs #2
TRANSCRIPT
![Page 1: Single page applications - TernopilJS #2](https://reader036.vdocuments.net/reader036/viewer/2022081520/5878f63b1a28ab49608b56f7/html5/thumbnails/1.jpg)
SINGLE PAGE APPLICATIONSAndriy Deren’, Dreams IT, CEOTernopil JS #2
![Page 2: Single page applications - TernopilJS #2](https://reader036.vdocuments.net/reader036/viewer/2022081520/5878f63b1a28ab49608b56f7/html5/thumbnails/2.jpg)
AGENDA▪ What is SPA?
▪ SPA architecture design
▪ SPA Back-end
▪ SPA Client-side
▪ MVVM & SPA implementation
▪ SPA Advanced techniques
![Page 3: Single page applications - TernopilJS #2](https://reader036.vdocuments.net/reader036/viewer/2022081520/5878f63b1a28ab49608b56f7/html5/thumbnails/3.jpg)
MODERN WEB CHALLENGES▪ More in-page interactivity
▪ Rich client graphics
▪ Data growth
▪ Page size growth
▪ New client devices
▪ Reloads vs Native feeling
![Page 4: Single page applications - TernopilJS #2](https://reader036.vdocuments.net/reader036/viewer/2022081520/5878f63b1a28ab49608b56f7/html5/thumbnails/4.jpg)
CLASSIC WEB PAGES
/GET /home/index
Browser Web-server Server-sidemagic
A lot of HTML, CSS, JS on each click
Main.csssuper_script.js
![Page 5: Single page applications - TernopilJS #2](https://reader036.vdocuments.net/reader036/viewer/2022081520/5878f63b1a28ab49608b56f7/html5/thumbnails/5.jpg)
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
![Page 6: Single page applications - TernopilJS #2](https://reader036.vdocuments.net/reader036/viewer/2022081520/5878f63b1a28ab49608b56f7/html5/thumbnails/6.jpg)
SINGLE PAGE APPLICATION
/GET /home/indexBrowserWeb-server Server-side
magic
Load tiny html template
Main.csssuper_script.js
Load required data
![Page 7: Single page applications - TernopilJS #2](https://reader036.vdocuments.net/reader036/viewer/2022081520/5878f63b1a28ab49608b56f7/html5/thumbnails/7.jpg)
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
![Page 8: Single page applications - TernopilJS #2](https://reader036.vdocuments.net/reader036/viewer/2022081520/5878f63b1a28ab49608b56f7/html5/thumbnails/8.jpg)
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
![Page 9: Single page applications - TernopilJS #2](https://reader036.vdocuments.net/reader036/viewer/2022081520/5878f63b1a28ab49608b56f7/html5/thumbnails/9.jpg)
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)
![Page 10: Single page applications - TernopilJS #2](https://reader036.vdocuments.net/reader036/viewer/2022081520/5878f63b1a28ab49608b56f7/html5/thumbnails/10.jpg)
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
![Page 11: Single page applications - TernopilJS #2](https://reader036.vdocuments.net/reader036/viewer/2022081520/5878f63b1a28ab49608b56f7/html5/thumbnails/11.jpg)
SPA BACK-END
State (Storage)Security
(authorization & authentication)
Data Access
![Page 12: Single page applications - TernopilJS #2](https://reader036.vdocuments.net/reader036/viewer/2022081520/5878f63b1a28ab49608b56f7/html5/thumbnails/12.jpg)
SPA MIDDLE WARE
▪ Data context: Models, Data Provider & App State
▪ Routing: client-side navigation
▪ User actions reaction
Routing Action Behaviors Data Provider & Data context
![Page 13: Single page applications - TernopilJS #2](https://reader036.vdocuments.net/reader036/viewer/2022081520/5878f63b1a28ab49608b56f7/html5/thumbnails/13.jpg)
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
![Page 14: Single page applications - TernopilJS #2](https://reader036.vdocuments.net/reader036/viewer/2022081520/5878f63b1a28ab49608b56f7/html5/thumbnails/14.jpg)
View
MVVM PATTERN
View View Model Model
View Behavior (UI Logic)
Notifications
Bindings
Commands
Data transfer
UI Presentation Layer Data Layer and BL
![Page 15: Single page applications - TernopilJS #2](https://reader036.vdocuments.net/reader036/viewer/2022081520/5878f63b1a28ab49608b56f7/html5/thumbnails/15.jpg)
View
SPA COMPONENTS
View
Views and templates
(HTML fragments)View models
Router + routing configuration (navigation)
Custom scripts
Data providers & data transfer
SPA ShellSPA
![Page 16: Single page applications - TernopilJS #2](https://reader036.vdocuments.net/reader036/viewer/2022081520/5878f63b1a28ab49608b56f7/html5/thumbnails/16.jpg)
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.)
![Page 17: Single page applications - TernopilJS #2](https://reader036.vdocuments.net/reader036/viewer/2022081520/5878f63b1a28ab49608b56f7/html5/thumbnails/17.jpg)
IMPLEMENTATION TECHNOLOGIES
![Page 18: Single page applications - TernopilJS #2](https://reader036.vdocuments.net/reader036/viewer/2022081520/5878f63b1a28ab49608b56f7/html5/thumbnails/18.jpg)
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
![Page 19: Single page applications - TernopilJS #2](https://reader036.vdocuments.net/reader036/viewer/2022081520/5878f63b1a28ab49608b56f7/html5/thumbnails/19.jpg)
THANK YOU!Any questions?