workshop 7: single page applications
TRANSCRIPT
Single Page Applications
Marc Torrent
¿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?
¿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
¿Cuáles son las bases para construir una SPA?
Bloques SPA
REST INTERFACE
BBDD
OPERACIONES
SERVER
FAÇADE
CLIENT
VIEWS
CONTROLLERS
MODELS
ROUTING
AJAX
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
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
Hablemos de AJAX
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.
PatronesMVC - MVP - MVVM
Model - View- Controller
Model View
Controller
Render
UI Actions
What to Do
Update
Model - View - Presenter
Model ViewPresenter
Update setData()
UI Events
Render
View
Update
View
Data Service Layer
Model - View - ViewModel
ModelView
ViewModel
ViewModel
State
UI Actions
What to Do
Update
Render
Retrieve Data
Model Subset2-Way Data
Binding
SPA Routing: Características y aproximación con PageJS
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
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'
Las SPA no tienen nada en contra???
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
Navegador sin JS activado
NO HAY MÁS LLAMADAS ….
Diseñadores no preparados
BIENVENIDOS A LOS WORKSHOPS!!!
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
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
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
THANKS FOR YOUR ATTENTION!Give your questions on the comments section