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

HTTP2

Recursos

• Wikipedia | HTTP/2
• Introducción a HTTP/2
• ¿Qué es HTTP/2 y que ventajas tiene sobre HTTP 1.1?
• HTTP/2: así va a mejorar la velocidad de tu navegación sin que tú tengas que hacer nada
• HTTP/2 nuevo protocolo y cómo afecta al SEO
• HTTP2, el nuevo Fast & Furious del protocolo

Fetch, una alternativa a XMLHttpRequest

• Compatibilidad nula con IE11
• Se hace uso de promesas y se puede escalar con Async/Await
• Puede gestionar llamadas sin soporte a CORS
• Las peticiones no pueden ser paradas

GET básico

function ajaxHandler (url, cb){
  fetch(url)
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      cb(data)  
    })
    .catch(function(error) {
      console.log(error)
    });  
}

ajaxHandler("http://airemad.com/api/v1/station", function(data){
    console.log("Data:", data)
})

Multimedia

var myImage = document.querySelector('.my-image');
fetch('flowers.jpg').then(function(response) {
  return response.blob();
}).then(function(blob) {
  var objectURL = URL.createObjectURL(blob);
  myImage.src = objectURL;
});

La mágia es Request

var request = new Request('http://fictizia.com/subir', {
	method: 'POST', 
	mode: 'no-cors', 
	redirect: 'follow',
	headers: new Headers({
		'Content-Type': 'text/plain',
		'X-My-Custom-Header': 'CustomValue'
	})
});

fetch(request).then(function() { //Gestión de la respuesta });

Subir los datos de un formulario

fetch('https://davidwalsh.name/submit', {
	method: 'post',
	body: new FormData(document.getElementById('comment-form'))
});

Documentacion

• Response()
• Response.redirected
• Response.clone()
• Response.status
• Response.statusText
• Response.type
• Response.headers
• Body.bodyUsed
• Body.body
• Body.text()
• Body.json()
• Body.formData()
• Body.blob()
• Body.arrayBuffer()
• Response.ok
• Response.error()

Recursos

• Fetch API by DWB
• Introduction to fetch() By Matt Gaunt
• This API is so Fetching! by Mozilla Hacks
• That's so fetch! by Jake Archibald
• Can I use? Fetch
• Basics: Using AJAX with Fetch API
• Fetch: Polyfill

Ejercicios

1 - Refactorizaremos el ejercicio anterior para ofrecer al cliente un dashboard con la listas disponibles en Books API. Especificaciones:

• Debes incluir una animación mientras esperamos la carga del contenido.
• Al cargar la web deben de aparecer todas las listas con los siguientes datos:
  • Nombre completo de la lista
  • La fecha del libro más antiguo en la lista
  • La fecha del libro ultimo incorporado
  • La frecuencia de actualización
  • Un link para poder cargar la lista.
• Al pinchar en el link de una lista especifica el DOM debe cambiar e incluir los siguientes datos:
• Un bontón para volver atras y recargar la disposición anterior
• Los libros deben estar organizados según el orden de la lista oficial
• Debes incluir la carátula del libro
• Debes incluir la cantidad de semanas que lleva en la lista
• Debes incluir la descripción
• Debes incluir el titulo y la posición que ocupa en la lista ( #1 titulo.... #2 titulo....)
• Debes incluir el link para poder comprar el libro en amazon (debe abrirse en otra pestaña)

Concepto:

• Dashboard:

• Dentro de una lista:

Solución