Trötta standarder

Man måste förstå historien för att uppfatta vad som händer i nuet

Sjukt trötta grejer

• IP: Sen Jura-period
• TCP: Neandertalare som skakar hand
• HTTP/1.1: Djingkis Khan tycker det är lite passé
• XMLHttpRequest: ????

Inte jättetrötta ändå

• IP: 1974
• TCP: 1974
• HTTP/1.1: 1989
• XMLHttpRequest: 1999 (Standard 2006)

"Jag använder ett bibliotek"

Bibliotek är bara förlängningar av aktuella standarder

Inget hokus pokus

jQuerys GET/POST metoder är bara en wrapper runt XMLHttpRequest

Det funkar

Vad man än tycker så funkar det.

Standarder tar lång tid att implementera

Nya standarder innehåller många buggar och kompabilitetsproblem

Utifall det dåliga händer

Kunden kanske sitter där med IE 8, kodat i XHTML, Vanilla JS och hämtar sin data med XML via XMLHttpRequest.

Då drar man.

Men man vet ändå hur allting uppkommit och hur de har varit viktiga byggstenar i framtagandet av de aktuella webbstandarderna.

Alla gamla standarder har varit de nya fräscha en gång i tiden

Protokollens påverkan

HTTP/1.1 är inte optimerad för dagens användning av webben

Varje förfrågan måste vänta på nästa

Det uppmanas att man ska göra så få förfrågningar som möjligt

<link rel="stylesheet" href="main.css">

Sprite sheets

Istället för att skicka många små bilder skickar man en stor bild som innehåller alla små bilder

Sedan "klipper" man arket med bilder

HTTP2

Förfrågningar måste inte vänta på varandra

Minifierade HEADERS

Vi ska i framtiden inte behöva bry oss om hur många förfrågningar vi skickar

Polyfill

Poly: många, fill: att fylla

Utifall vi vill använda en standard som inte stöds

Feature Detection: Känna igen vilka saker som stöds och vilka som inte stöds

Modernizer.com

Polyfill

JavaScript bibliotek som hanterar en specifik feature som en webbläsare saknar.

Förser webbläsaren med en alternativ lösning

FETCH

Fetch

Möjlig ersättare för XMLHttpRequest

Alternativ finnns till XMLHttpRequest men samtliga är bibliotek

Fetch är native

Promises

Fetch bygger på ES6 Promises

Eftersom GET körs asynkront vill man ha ett sätt att fastställa att att all data kommer in.

“a proxy for a value that will eventually become available.”

Promises

Promises används i många bibliotek men man har sällan fall där man behöver göra ett eget promise.

Fallet Fetch

request.onreadystatechange =
          function(){
          if(request.readyState === 4 && request.status === 200){
          //Do stuff
        }
      }

var ajaxRequest = new XMLHttpRequest();
        ajaxRequest.onreadystatechange = function(){
        if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
        console.log(ajaxRequest.responseText);
      }
    };
    ajaxRequest.open('GET', 'http://fend16.azurewebsites.net/albums', true);
    ajaxRequest.send();

      fetch('https://fend16.azurewebsites.net')

Viktiga punkter

Fetch returnerar inte färdig JSON som XMLHttpRequest

Fetch returnerar ett Promise som är ett objekt som innehåller vår JSON men med mer metadata

Vi måste hantera svaret

fetch('https://fend16.azurewebsites.net')
        .then(function(response){
        //DO stuff
      });