HTTP passado, presente e futuro. -...

HTTPpassado, presente e futuro.

Luiz FernandoRodrigues (ou Fernahh)blog.fernahh.com.br

github.com/fernahh

twitter.com/fernahh

speakerdeck.com/fernahh

www.organicadigital.com

HTT... o que?

HTT... o que?HyperText Transfer ProtocolDesenvolvido para distribuir conteúdo de hypertexto.

Iniciauma conexão

GET /foo.html

PROCESSAFecha a

conexão.

http://bit.ly/19uEIk0

uma request! só 2KB!

HTTP/1.1

GET: requisita um objeto ao servidor.

POST: escreve um objeto no servidor.

PUT: escreve um objeto no servidor respeitando a idempotência.

DELETE: remove um objeto no servidor.

Iniciauma conexão

GET /foo.html

Fecha aconexão.

HTTP/1.1 > Keep Alive

GET /bar.css

HTTP/1.1 > Multiplos hosts

Com HTTP1.1 podemos abrir de 4 a 8 conexões por origem (depende do browser).

HTTP/1.1 > Multiplos hosts

podemos criar até 100 conexões simultâneas...

A web nasceu descentralizada

O HTTP é Stateless

HTTP WEB

HTTP WEBmas essa linda história de amor mudou...

um pouco de história...

1990

HTML

1990

HTML Elemento <img>

1993

1990

HTML Elemento <img>

1993 1994

CSS

1990

HTML Elemento <img>

1993 1994

CSS

1995

JavaScript

1990

HTML Elemento <img>

1993 1994

CSS

1995

JavaScript

no caso mais simples, já temos 4 requisições e4 processamentos do servidor.ou seja,

a web começou a evoluir!

Mas e o HTTP? Não evoluiu nesses 5 anos?

Mas e o HTTP? Não evoluiu nesses 5 anos?

Não.

1991

HTTP

1999

HTTP/1.1

1991

HTTP

1999

HTTP/1.1

SÓ 8 (O-I-T-O) ANOS DEPOIS GANHAMOS O MÉTODO POST!

A versão 1.1 do protocolo HTTP é o que

usamos até hoje.

HTTP WEB

em linhas curtas...

Leiam, sério: http://tableless.com.br/o-grande-desencontro-http-com-o-html/

Mas o homem sempre evolui em situações difíceis...

Concatenamos assets(imagens, css e js)

Compactamos assets (gzip, minificação, etc)

Usamos múltiplos hostnames

Mas o homem sempre evolui em situações difíceis...




Otimização de requisições

Diminuição de tráfego

Paralelização de requisições

chegamos a 2015 com evoluções incríveis!

e a web também...

SPDY

uma das mais importantes evoluções para o nosso protocolo...

SPDY

HTTPSPDYSSLTCP

Apenas um

a

camada a mais!

SPDY

HTTPSPDYSSLTCP

Fallback HTTPS, ou seja:SEGURANÇA!

SPDY

O tempo de carregamento de sua página pode cair mais de 40%, dependendo da situação.

HTTP/2

e depois de 16 anos...

Compressão automática

Compressão automática > o que muda

- GZIP é padrão obrigatório;

- Headers são binários e comprimidos.

Compressão automática > exemplo de header HTTP/1.1

HTTP/1.1 200 OKContent-Type: text/html; charset=utf-8Transfer-Encoding: chunkedConnection: keep-aliveStatus: 200 OK

X-UA-Compatible: IE=Edge,chrome=1ETag: "4618f5c69dfa0ee8cb492830482c0bbe"Cache-Control: max-age=0, private, must-revalidate

Set-Cookie: _organicadigital_session=BAh7B0kiD3Nlc3Npb25f….Date: Sat, 21 Mar 2015 19:23:51 GMTServer: nginx/1.6.0 + Phusion Passenger 4.0.42

<!DOCTYPE html>...

Compressão automática > exemplo de header HTTP/2

0010101010101010101

01010101010101010100010101010101010101101010101010

?T?%.?JI?;1?R,1?T?.?[mŚ???,1? Q?_?*f0?{{?un?T?%.?JI?;1?R,1?T?.?[mŚ???,1? Q?_?*f0?{{?un,1?T?.?[mŚ?T?%??????????0


0010101010101010101

01010101010101010100010101010101010101101010101010


Binário

GZIP


?T?%.?JI?;1?R,1?T

JI?;1?R,1?T?,%JI?;1?R,1?T1?R,1?T???m,;T?un,1?TU?R,1??R,1?m1R


HPACK

GZIP


?????????????????

????????????????????????????????????????????????????????????

???????????????????????????????????????????????????????????????????????????????????????????????????????????????????

Ah sim,temos HTTPS!

X

Free, automatizado e aberto!

0010101010101010101

01010101010101010100010101010101010101101010101010


HTTP/1.1 200 OKContent-Type: text/html; charset=utf-8Transfer-Encoding: chunkedConnection: keep-aliveStatus: 200 OK

X-UA-Compatible: IE=Edge,chrome=1ETag: "4618f5c69dfa0ee8cb492830482c0bbe"Cache-Control: max-age=0, private, must-revalidate

Set-Cookie: _organicadigital_session=BAh7B0kiD3Nlc3Npb25f….

Date: Sat, 21 Mar 2015 19:23:51 GMTServer: nginx/1.6.0 + Phusion Passenger 4.0.42

<!DOCTYPE html>...

Multiplexing

Multiplexing > o que muda

- Requisições e respostas são paralelas;

- Ou seja, mais de uma requisição por conexão.

Multiplexing > exemplo

Iniciauma conexão

Fecha aconexão.

Multiplexing é amor!

Priorização de requisições

Priorização de requisições > o que muda

- Poderemos priorizar recursos;

- Escolhemos o que o usuário verá por primeiro.

Priorização de requisições > o que muda

1ºGET /index.html

3ºGET /main.js

2ºGET /main.css

A priorida

de do

CSS é maior!

Server Push

Server Push > o que muda

- O servidor poderá enviar recursos para o cliente;

- Adeus gambiarras.

Server Push > o que muda

1ºGET /index.html

main.js

main.css

index.html

“As boas práticas de hoje vão ser futuros problemas no HTTP/2”

Rodrigo Willrich

HTTP/2 > Padrões atuais == Gambiarras

Sprite

Concatenação de arquivos

Servir assets de domínios diferentes

...mas o mundo será bem melhor...

eu acho.

HTTP/2 > No front-end

11+ 43+ 39+ 30+ 9+

HTTP/2 > No back-end

Módulos para Apache

Módulos para ngnix

Jetty e Netty (Java)

Servidores http/2 para NodeJS, Ruby, ...

Implementações: https://github.com/http2/http2-spec/wiki/Implementations

Obrigado!

Luiz Fernando Rodrigueshttp://blog.fernahh.com.br

Referências:

- http://blog.caelum.com.br/as-fantasticas-novidades-do-http-2-0-e-do-

spdy/

- http://pt.slideshare.net/caelumdev/http2-spdy-e-otimizaes-web-front-in-

macei-2014-srgio-lopes7

- https://mattwilcox.net/web-development/http2-for-front-end-web-

developers

- https://http2.github.io/

http://blog.caelum.com.br/as-fantasticas-novidades-do-http-2-0-e-do-spdy/



http://pt.slideshare.net/caelumdev/http2-spdy-e-otimizaes-web-front-in-macei-2014-srgio-lopes7



https://mattwilcox.net/web-development/http2-for-front-end-web-developers



https://http2.github.io/

https://http2.github.io/

HTTP passado, presente e futuro. -...

Documents

Transcript of HTTP passado, presente e futuro. -...