Single page applications - TernopilJS #2
Download as PPTX, PDF0 likes701 views
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.
Single page applications - TernopilJS #2
- 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.)
- 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