HTTP - passado, presente e o futuro

HTTP passado, presente e futuro.

Luiz Fernando Rodrigues (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 Protocol Desenvolvido para distribuir conteúdo
de hypertexto.

Inicia uma conexão GET /foo.html PROCESSA Fecha 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.

Inicia uma conexão GET /foo.html Fecha a conexã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 WEB mas 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 e 4 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... Concatenamos assets
(imagens, css e js) Compactamos assets (gzip, minificação, etc) Usamos múltiplos hostnames 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 HTTP SPDY SSL TCP Apenas uma camada a mais!

SPDY HTTP SPDY SSL TCP 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 OK
Content-Type: text/html; charset=utf-8 Transfer-Encoding: chunked Connection: keep-alive Status: 200 OK X-UA-Compatible: IE=Edge,chrome=1 ETag: "4618f5c69dfa0ee8cb492830482c0bbe" Cache-Control: max-age=0, private, must-revalidate Set-Cookie: _organicadigital_session=BAh7B0kiD3Nlc3Npb25f…. Date: Sat, 21 Mar 2015 19:23:51 GMT Server: nginx/1.6.0 + Phusion Passenger 4.0.42 <!DOCTYPE html>...

Compressão automática > exemplo de header HTTP/2 0010101010101010101 01010101 010101010100
0101010101 01010101101 010101010 ?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

Compressão automática > exemplo de header HTTP/2 0010101010101010101 01010101 010101010100
0101010101 01010101101 010101010 ?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 Binário GZIP

Compressão automática > exemplo de header HTTP/2 ?T?%.?JI?;1?R,1?T JI?;1?R,1?T ?,%JI?;1?R,1?T
1?R,1?T???m, ;T?un,1?TU ?R,1??R,1?m1R ?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 HPACK GZIP

Compressão automática > exemplo de header HTTP/2 ????????????????? ?????????? ????????????????
??????????? ?????????? ????????????? ????????????????????????????????????? ???????????????????????????????????????? ?????????????????????????????????????? Ah sim, temos HTTPS! X

Free, automatizado e aberto!

0010101010101010101 01010101 010101010100 0101010101 01010101101 010101010 ?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 HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Transfer-Encoding: chunked Connection: keep-alive Status: 200 OK X-UA-Compatible: IE=Edge,chrome=1 ETag: "4618f5c69dfa0ee8cb492830482c0bbe" Cache-Control: max-age=0, private, must-revalidate Set-Cookie: _organicadigital_session=BAh7B0kiD3Nlc3Npb25f…. Date: Sat, 21 Mar 2015 19:23:51 GMT Server: 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 Inicia uma conexão Fecha a conexão.

Multiplexing é amor!

Concatenamos assets (imagens, css e js) Compactamos assets (gzip, minificação,
etc) Usamos múltiplos hostnames Otimização de requisições Diminuição de tráfego Paralelização de requisições

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 prioridade 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 Rodrigues http://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 - passado, presente e o futuro

HTTP - passado, presente e o futuro

More Decks by fernahh

Other Decks in Technology

Featured

Transcript