clase30.md

Máster en Programación FullStack con JavaScript y Node.js

JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing

Clase 30

HTML5 Router

• A JavaScript router in 20 lines by joakimbeng
• JavaScript template engine in just 20 lines by Krasimir
• A modern JavaScript router in 100 lines by Krasimir
• Achieving routing using pure Javascript by muralikrishnat
• Navigo, A simple vanilla JavaScript router with a fallback for older browsers

Rutas usando Hashes

Leyendo el hash

// domain.com/ruta#hashes...
console.log(window.location.hash);      // hashes...

function hashActual () {
    return window.location.href.split('#')[1] || '';
}

console.log("hash:", hashActual());     // hash: hashes...

Cambiando el hash

function hashActual () {
    return window.location.href.split('#')[1] || '';
}

function navigate (path) {
  var current = window.location.href;
  window.location.href = current.replace(/#(.*)$/, '') + '#' + path;
}

navigate("party-hard")
console.log("hash:", hashActual());     // party-hard

Eventos en el Hash

function hashActual () {
    return window.location.href.split('#')[1] || '';
}

window.addEventListener("hashchange", function(){
    console.log("Hash actual:", hashActual() )
}, false);

HTML5 ofrece history.pushState() y history.replaceState()

• pushState genera una entrada nueva en el historial, pero replaceState la cambia

// Estamos en https://www.fictizia.com/profesorado
var infoDeEstado = { foo: "bar" };
history.pushState(infoDeEstado, "título de la web", "profesorado/ulises-gascon");
// Cambia la URL sin recargar la pagina a https://www.fictizia.com/profesorado/ulises-gascon

• Tambien contamos con eventos y datos que podemos pasarnos
• Solo se disparan cuando el usuario va hacia atras o delante...

window.addEventListener('popstate', function(event) {
    console.log('popstate fired!');
    console.log('info de estado: ' + JSON.stringify(event.state));
});

• Ejemplo con gatitos

Tenemos que preparar el backend

• Con el sistema de rutas HTML5 no debemos enviar peticiones al backend
• Deberiamos cuadrar las rutas para funcionar con un fallback a nuestra SPA

                                  ----- server ------
              http://site.com --> |                 | 
                                  |   /index.html   |
                   index.html <-- |                 |
                                  -------------------

                                  ----- server ------
http://site.com/products/list --> |                 | 
                                  |   /index.html   |
           404 page not found <-- |                 |
                                  -------------------

• ¿Cómo configurar tu servidor?

Routers destacados

• visionmedia/page.js
• krasimir/navigo
• swipely/aviator

¡Viva la ingenieria inversa!

• A really simple Javascript router
• template engine + routes

Templates

Librerías principales

• mustache
• Handlebars
• dOt
• Dust
• EJS
• Pug
• Template7
• Lodash

Recursos

• ES6 Template Literals, the Handlebars killer?
• Learn Handlebars in 10 Minutes or Less
• JavaScript Micro-Templating de John Resig

Ejercicios

1 - [Reto Navideño] Implementa un sistema de rutas con llamadas Ajax y plantillas partiendo de la API de AireMAD.

• Al menos creas tres rutas /, /estacion, /estacion/:id
• La ruta /estacion y /estacion/:id deben resolverse haciendo una llamada Ajax http://airemad.com/api/v1/station/:id y pintar sus resultados haciendo uso de plantillas
• La url debe de poder compartise, permitiendo acceder a ese estado de la aplicación.
• Debes generar un contexto común en la app (nav, footer, etc...). Solo parte del contenido es diámico
• Debes gestionar los errores 404 y similares...
• Igual es interesante preocuparnos de los posibles ataques XSS: Npm | dompurify, Npm | XSS
• Puedes usar una librería si te ayuda, como navigo

//Tu solución