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