Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTTP - passado, presente e o futuro

188900fc4ed166ff159a9b74aa38a9bd?s=47 fernahh
July 11, 2015

HTTP - passado, presente e o futuro

Talk sobre o principal protocolo da web, o HTTP. Um pouco sobre a sua história, como funciona e as novas features do HTTP/2.

Foi apresentada no dia 11 de Julho, no FISL16.

188900fc4ed166ff159a9b74aa38a9bd?s=128

fernahh

July 11, 2015
Tweet

Transcript

  1. HTTP passado, presente e futuro.

  2. Luiz Fernando Rodrigues (ou Fernahh) blog.fernahh.com.br github.com/fernahh twitter.com/fernahh speakerdeck.com/fernahh

  3. www.organicadigital.com

  4. HTT... o que?

  5. HTT... o que? HyperText Transfer Protocol Desenvolvido para distribuir conteúdo

    de hypertexto.
  6. Inicia uma conexão GET /foo.html PROCESSA Fecha a conexão.

  7. http://bit.ly/19uEIk0

  8. None
  9. uma request! só 2KB!

  10. 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.
  11. Inicia uma conexão GET /foo.html Fecha a conexão. HTTP/1.1 >

    Keep Alive GET /bar.css
  12. HTTP/1.1 > Multiplos hosts Com HTTP1.1 podemos abrir de 4

    a 8 conexões por origem (depende do browser).
  13. HTTP/1.1 > Multiplos hosts podemos criar até 100 conexões simultâneas...

  14. A web nasceu descentralizada O HTTP é Stateless

  15. HTTP WEB

  16. HTTP WEB mas essa linda história de amor mudou...

  17. um pouco de história...

  18. 1990 HTML

  19. 1990 HTML Elemento <img> 1993

  20. 1990 HTML Elemento <img> 1993 1994 CSS

  21. 1990 HTML Elemento <img> 1993 1994 CSS 1995 JavaScript

  22. 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!
  23. Mas e o HTTP? Não evoluiu nesses 5 anos?

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

  25. 1991 HTTP 1999 HTTP/1.1

  26. 1991 HTTP 1999 HTTP/1.1 SÓ 8 (O-I-T-O) ANOS DEPOIS GANHAMOS

    O MÉTODO POST!
  27. A versão 1.1 do protocolo HTTP é o que usamos

    até hoje.
  28. HTTP WEB em linhas curtas... Leiam, sério: http://tableless.com.br/o-grande-desencontro-http-com-o-html/

  29. 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
  30. 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
  31. chegamos a 2015 com evoluções incríveis! e a web também...

  32. None
  33. SPDY uma das mais importantes evoluções para o nosso protocolo...

  34. SPDY HTTP SPDY SSL TCP Apenas uma camada a mais!

  35. SPDY HTTP SPDY SSL TCP Fallback HTTPS, ou seja: SEGURANÇA!

  36. SPDY O tempo de carregamento de sua página pode cair

    mais de 40%, dependendo da situação.
  37. HTTP/2 e depois de 16 anos...

  38. Compressão automática

  39. Compressão automática > o que muda - GZIP é padrão

    obrigatório; - Headers são binários e comprimidos.
  40. 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>...
  41. 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
  42. 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
  43. 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
  44. Compressão automática > exemplo de header HTTP/2 ????????????????? ?????????? ????????????????

    ??????????? ?????????? ????????????? ????????????????????????????????????? ???????????????????????????????????????? ?????????????????????????????????????? Ah sim, temos HTTPS! X
  45. Free, automatizado e aberto!

  46. 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>...
  47. Multiplexing

  48. Multiplexing > o que muda - Requisições e respostas são

    paralelas; - Ou seja, mais de uma requisição por conexão.
  49. Multiplexing > exemplo Inicia uma conexão Fecha a conexão.

  50. Multiplexing é amor!

  51. 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
  52. Priorização de requisições

  53. Priorização de requisições > o que muda - Poderemos priorizar

    recursos; - Escolhemos o que o usuário verá por primeiro.
  54. 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!
  55. 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
  56. Server Push

  57. Server Push > o que muda - O servidor poderá

    enviar recursos para o cliente; - Adeus gambiarras.
  58. Server Push > o que muda 1º GET /index.html main.js

    main.css index.html
  59. 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
  60. “As boas práticas de hoje vão ser futuros problemas no

    HTTP/2” Rodrigo Willrich
  61. HTTP/2 > Padrões atuais == Gambiarras Sprite Concatenação de arquivos

    Servir assets de domínios diferentes
  62. HTTP/2 > Padrões atuais == Gambiarras Sprite Concatenação de arquivos

    Servir assets de domínios diferentes
  63. HTTP/2 > Padrões atuais == Gambiarras Sprite Concatenação de arquivos

    Servir assets de domínios diferentes
  64. HTTP/2 > Padrões atuais == Gambiarras Sprite Concatenação de arquivos

    Servir assets de domínios diferentes
  65. ...mas o mundo será bem melhor...

  66. eu acho.

  67. HTTP/2 > No front-end 11+ 43+ 39+ 30+ 9+

  68. 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
  69. 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/