Workshop Single Page Applications. Elementos comunes: Models, Views, Controllers, Components. Routing MVC. MVVM. Custom Router. PageJS. Presentado por Ing.: Marc Torrent

1. Single Page Applications
Marc Torrent

2. ¿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?

3. ¿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

4. ¿Cuáles son las bases para construir
una SPA?

5. Bloques SPA
REST INTERFACE
BBDD
OPERACIONES
SERVER
FAÇADE
CLIENT
VIEWS
CONTROLLERS
MODELS
ROUTING
AJAX

6. 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

7. 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

8. Hablemos de AJAX

9. 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.

10. Patrones
MVC - MVP - MVVM

11. Model - View- Controller
Model View
Controller
Render
UI Actions
What to Do
Update

12. Model - View - Presenter
Model ViewPresenter
Update setData()
UI Events
Render
View
Update
View
Data Service Layer

13. Model - View - ViewModel
Model
View
ViewModel
ViewModel
State
UI Actions
What to Do
Update
Render
Retrieve Data
Model Subset
2-Way Data
Binding

14. SPA Routing: Características y
aproximación con PageJS

15. 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

16. 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'

17. Las SPA no tienen nada en contra???

18. 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

20. Navegador sin JS activado
NO HAY MÁS LLAMADAS ….

21. Diseñadores no preparados
BIENVENIDOS A LOS WORKSHOPS!!!

22. 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

23. Arquitectura que funciona (II)
PAGE REFRESH
SERVER 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

24. 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

25. THANKS FOR YOUR ATTENTION!
Give your questions on the comments section