workshop 7: single page applications
TRANSCRIPT
![Page 1: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/1.jpg)
Single Page Applications
Marc Torrent
![Page 2: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/2.jpg)
¿Por qué necesitamos las SPA si ya teníamos nuestro sitio web bien
diseñado con una navegación clara e indexable por los buscadores?
![Page 3: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/3.jpg)
¿Por qué?
- Desacoplar la lógica de servidor y todas las operaciones de Back-end de las que son puramente informacionales o de presentación (Front-end)
- Permite centrarnos en la usabilidad de la aplicación y así mejorar la experiencia de usuario
- Nos permite aplicar mejores patrones de diseño tanto en Front-end como en Back-end
- Son más rápidas por el hecho que la información transmitida en ambos canales es menor y además expone varias técnicas de optimización.
- Son más fáciles de mantener y testear
![Page 4: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/4.jpg)
¿Cuáles son las bases para construir una SPA?
![Page 5: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/5.jpg)
Bloques SPA
REST INTERFACE
BBDD
OPERACIONES
SERVER
FAÇADE
CLIENT
VIEWS
CONTROLLERS
MODELS
ROUTING
AJAX
![Page 6: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/6.jpg)
Bloques SPA - Server Façade
- Servidor que provea los recursos estáticos:- Vistas
- Templates- Página Inicial
- Estilos- Lógica (JS)
- Repositorio de Datos - Modelos- Operaciones REST
- Modelos- Controladores - Acciones
- Gestión Sesión - Autentificación
![Page 7: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/7.jpg)
Bloques SPA - Cliente
- Sistema de navegación - ROUTER- Gestión del History
- Hashtags- Navegación HTML5 - Bookmarking
- Gestión Templates- Obtención del Server Façade- Gestión de los controladores asociados
- Patrón de diseño:- MVC / MVP- MVVM
- Gestión Utilidades:- Traducciones- Acceso LocalStorage- Cookies
- Data Layer- Network Layer
![Page 8: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/8.jpg)
Hablemos de AJAX
![Page 9: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/9.jpg)
AJAX Tips
- Utilizar JSON como formato de los datos de transporte- Content-Type: application/json
- Accept: application/json- Headers extra para autentificación
- Cuidado con HTTPS desde HTTP- No va a ser posible por considerarse un CrossDomain
request. Utilizamos iFrame auxiliar cargado por HTTPS y la aplicación se comunica con este iFrame por postMessage. Es el iFrame el que realizará las comunicaciones AJAX.
- Cuidado con CORS: Cross Origin Resource Sharing- Respuestas comprimidas en GZIP.
![Page 10: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/10.jpg)
PatronesMVC - MVP - MVVM
![Page 11: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/11.jpg)
Model - View- Controller
Model View
Controller
Render
UI Actions
What to Do
Update
![Page 12: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/12.jpg)
Model - View - Presenter
Model ViewPresenter
Update setData()
UI Events
Render
View
Update
View
Data Service Layer
![Page 13: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/13.jpg)
Model - View - ViewModel
ModelView
ViewModel
ViewModel
State
UI Actions
What to Do
Update
Render
Retrieve Data
Model Subset2-Way Data
Binding
![Page 14: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/14.jpg)
SPA Routing: Características y aproximación con PageJS
![Page 15: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/15.jpg)
SPA - Routing
- Deben gestionar el binomio URL - Vista- Diccionario URL - Vista - Controlador
- Uso de api HTML5 de History o Downgrade a Hashbangs- Concepto de Estado de una URL-Vista- Navegación atrás: onPopState- Navegación hace delante: pushState
- Navegación sintética:- Renderización de Vistas- Activación de lógica de cliente para cada vista- Gestión de estilos- Gestión propia de la aplicación
![Page 16: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/16.jpg)
PageJS
- page({options}) →Configura el sistema de navegación- page(url, callback) → Añade entrada al diccionario url-
acción- page(url) → Navegación hacia la url- page.start() → Inicia el sistema de navegación- page.stop() → Detiene el sistema de navegación. No
pierde las entradas url-acción del diccionario
- Las rutas deben definirse en un único punto y deben de ser únicas
- La url puede contener expresiones regulares, conteniendo parámetros que se pueden pasar a la callback. Ejemplo: route: 'premium/pedido/:orderId'
![Page 17: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/17.jpg)
Las SPA no tienen nada en contra???
![Page 18: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/18.jpg)
No es oro todo lo que reluce...- Alta complejidad técnica:
- Sistema de routing adaptado a las necesidades de la aplicación
- Uso de analytics más complejo por la navegación sintética
- Los diseñadores no están preparados técnicamente y deben trabajar sobre maquetas que después son integradas por los desarrolladores
- No amigable para los robots y spiders de los buscadores- JS sin memory leaks porque sino…- Falta de sincronismo con el servidor en navegación
tradicional- Primera carga en blanco + Loading…- El navegador debe tener JS activado
![Page 19: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/19.jpg)
![Page 20: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/20.jpg)
Navegador sin JS activado
NO HAY MÁS LLAMADAS ….
![Page 21: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/21.jpg)
Diseñadores no preparados
BIENVENIDOS A LOS WORKSHOPS!!!
![Page 22: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/22.jpg)
Arquitectura que funciona (I)- El Servidor Façade debe proporcionarnos las páginas
como si fuera navegación tradicional:- customRender: Método que tiene en cuenta si
estamos navegando por AJAX o es un refresco.- Incluye la VISTA + DataLayer
- El cliente se “engancha” a la vista + datos cuando refrescamos - Evita la página en blanco + Loading...
- El cliente se divide en controladores de página o grandes secciones de una página y todos los elementos con interacción se controlan como widgets los cuales son orquestrados por el controlador principal
- El router solicita páginas al servidor y parsea en busca de controladores de página para activarlos pasándole el DataLayer
![Page 23: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/23.jpg)
Arquitectura que funciona (II)
PAGE REFRESHSERVER FAÇADE
Obtain
Data
Render
Template
with Data
Flush
Both
Presentation
Layer HTML
Data Layer
JSON
CUSTOM RENDER - NON XHR REQUEST
CLIENT
CONTROLLERS MANAGER
PARSE
VIEW
SYNC
DATA
START
CONTROLLERS
ROUTING ENGINE
START ENGINE
![Page 24: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/24.jpg)
Arquitectura que funciona (III)
CLIENT SIDE
NAVIGATION
SERVER FAÇADE
Obtain
Data
Obtain
Compiled
Template
Flush
Both
Presentation
Layer JS
Data Layer
JSON
CUSTOM RENDER - XHR REQUEST
CLIENT
CONTROLLERS MANAGER
PARSE
VIEW
SYNC
DATA
START
CONTROLLERS
ROUTING ENGINE
REQUEST PAGE
RENDER VIEW
CONTR. MANAGER
![Page 25: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/25.jpg)
THANKS FOR YOUR ATTENTION!Give your questions on the comments section
![Page 26: Workshop 7: Single Page Applications](https://reader033.vdocuments.net/reader033/viewer/2022042907/587a168d1a28abb4238b5461/html5/thumbnails/26.jpg)