Devoxx Maroc 2015 HTTP 1, HTTP 2 and folks

10 373 vues

Publié le

Retour sur HTTP, les principes du Cache, HTTP 2

Publié dans : Internet
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
10 373
Sur SlideShare
0
Issues des intégrations
0
Intégrations
79
Actions
Partages
0
Téléchargements
7
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Devoxx Maroc 2015 HTTP 1, HTTP 2 and folks

  1. 1. HTTP et Architectures Orientées Web Nicolas Martignole CTO CaptainDash @nmartignole Devoxx Maroc 2015 Quentin Adam CEO CleverCloud @waxze Une histoire d’HTTP, des effets spéciaux, des bonnes pratiques d’un design d’API REST, et en terminant par HTTP/2
  2. 2. Exclusivité mondiale de cette présentation… Devoxx Maroc 2015
  3. 3. Exclusivité mondiale de cette présentation… … jamais présentée dans aucunes conférences … jamais répétée Devoxx Maroc 2015
  4. 4. Who am I ? Quentin ADAM from the Clever Cloud @waxzce on twitter – github- soundcloud – instagram ….
  5. 5. My day to day work : 
 Clever Cloud, make your app run all the time
  6. 6. Keep your apps online. made with node.js, scala, java, ruby, php, python, go…
  7. 7. And learn a lot of things about your code, apps, and good/bad design…
  8. 8. Nic
  9. 9. Who am I ? Nicolas Martignole, CTO Captain Dash Devoxx France - @nmartignole
  10. 10. D E V O X X F R A N C E C O N F É R E N C E P O U R D É V E L O P P E U R S 2 0 A U 2 2 A V R I L 2 0 1 6
  11. 11. Ce que vous allez découvrir, apprendre, revoir, comprendre
  12. 12. HTTP
  13. 13. HyperText
 Transfert
 Protocol
  14. 14. HTTP1 est un protocole texte
  15. 15. Une spécification extensible
  16. 16. Simple • Connexion TCP Requête Réponse
  17. 17. Une requête simple GET / HTTP/1.1 Host: cfp.devoxx.fr
  18. 18. Une requête peut comporter 2 parties POST /cfp/profile HTTP/1.1 Host: cfp.devoxx.fr Connection: keep-alive Content-Length: 568 Cache-Control: max-age=0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Origin: http://cfp.devoxx.fr User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36 Content-Type: application/x-www-form-urlencoded Referer: http://cfp.devoxx.fr/cfp/profile Accept-Encoding: gzip,deflate,sdch Accept-Language: fr,fr-FR;q=0.8,en;q=0.6,en-US;q=0.4 Cookie: ... email=nicolas%40touilleur-express.fr&avatarUrl=http%3A%2F%2Fwww.gravatar.com%2Favatar %2F09b788738dcb5d36dbd782db5ad66304&company=Le+Touilleur+Express&bio=Nicolas+est+un+d %C3%A9veloppeur+ind%C3%A9pendant%2C+vivant+%C3%A0+Paris.+%0D%0A%0D%0AIl+est+co-fondateur+et +organisateur+de+la+conf%C3%A9rence+Devoxx+France.%0D%0AIl+blog+depuis+plusieurs+ann%C3%A9es+sur +le+blog+%22Le+Touilleur+Express%22+http%3A%2F%2Fwww.touilleur-express.fr%2C+qui+compte+plus+de +800+articles.%0D%0A%0D%0A&twitter=%40nmartignole&blog=http%3A%2F%2Fwww.touilleur- express.fr&name=Nicolas+Martignole
  19. 19. Des Verbes
  20. 20. Des verbes • GET • HEAD • POST • PUT • DELETE • OPTIONS • TRACE • CONNECT RFC 2616
  21. 21. Safe-Method • GET • HEAD RFC 2616 • POST • OPTIONS • PUT • DELETE • TRACE • CONNECT No server-side effect Just retrieve a resource
  22. 22. Idempotent • GET • HEAD • PUT • DELETE RFC 2616 • POST • OPTIONS • TRACE • CONNECT GET /images/cat.png HTTP/1.1 Host: www.cats.org DELETE /jobs/job/234 HTTP/1.1 Host: www.monsters.com
  23. 23. Verbes • GET • POST • HEAD • OPTIONS • DELETE • PUT • TRACE • CONNECT
  24. 24. Exemple POST POST /cfp/profile/saveProfile HTTP/1.1 Authorization: Basic xxxx Host: cfp.devoxx.fr Content-Length: 25 Content-Type: application/x-www-form-urlencoded email=nicolas%40devoxx.fr
  25. 25. Exemple PUT PUT /cfp/profile/nicolas HTTP/1.1 Authorization: Basic xxxx Host: cfp.devoxx.fr Content-Length: 55 Accept: application/json { "id":212340, "email": "nicolas@devoxx.fr" } POST : URI est la ressource qui accepte les données PUT : entité qui doit être modifié
  26. 26. POST POST /cfp/profile/nicolas
  27. 27. Response HTTP/1.1 201 Created Date: Mon, 09 Dec 2013 11:22:00 GMT Content-Length: 1200 Location: http://cfp.devoxx.fr/profiles/profile/nicolas
  28. 28. Status code • 2xx : OK • 3xx : Not here • 4xx : Client screwed up • 5xx : Server screwed up
  29. 29. Status code 201 Created 202 Accepted 206 Partial Content 301 Moved permanently 303 See Other 304 Not Modified 400 Bad Request 401 Unauthorized 404 Not Found 406 Not Acceptable 409 Conflict 412 Precondition Failed 417 Expectation Failed
  30. 30. Request Headers Accept Accept-Charset Accept-Encoding Accept-Language Authorization Expect From Host If-Match If-Modified-Since If-None-Match If-Range If-Unmodified-Since Max-Forwards Proxy-Authorization Range Referer TE User-Agent
  31. 31. Request Headers Accept Accept-Charset Accept-Encoding Accept-Language Authorization Expect From Host If-Match If-Modified-Since If-None-Match If-Range If-Unmodified-Since Max-Forwards Proxy-Authorization Range Referer TE User-Agent
  32. 32. Techniques simples de gestion du Cache
  33. 33. Expires Pragma Cache-Control
  34. 34. Expires Pragma Cache-Control
  35. 35. Expires Pragma Cache-Control HTTP 1.0 HTTP 1.1
  36. 36. Expires GET /profile/nicolas HTTP/1.0 Host: cfp.devoxx.fr HTTP/1.0 200 Ok Expires: Mon, 29 Feb 2014 10:00:00 GMT Content-Length: 1200 Content-Type: application/json {"profile":22334}
  37. 37. Cache-Control HTTP/1.1 200 Ok Cache-Control: max-age=120 Content-Length: 1200 Content-Type: application/json {"profile":22334}
  38. 38. Cache-Control HTTP/1.1 200 Ok Cache-Control: public, max-age=120, s-maxage=120 Content-Length: 1200 Content-Type: application/json {"profile":22334} Can be cached by a Proxy Cache-Control = "Cache-Control" ":" 1#cache-directive cache-directive = cache-request-directive | cache-response-directive cache-request-directive = "no-cache" ; Section 14.9.1 | "no-store" ; Section 14.9.2 | "max-age" "=" delta-seconds ; Section 14.9.3, 14.9.4 | "max-stale" [ "=" delta-seconds ] ; Section 14.9.3 | "min-fresh" "=" delta-seconds ; Section 14.9.3 | "no-transform" ; Section 14.9.5 | "only-if-cached" ; Section 14.9.4 | cache-extension ; Section 14.9.6 cache-response-directive = "public" ; Section 14.9.1 | "private" [ "=" <"> 1#field-name <"> ] ; Section 14.9.1 | "no-cache" [ "=" <"> 1#field-name <"> ]; Section 14.9.1 | "no-store" ; Section 14.9.2 | "no-transform" ; Section 14.9.5 | "must-revalidate" ; Section 14.9.4 | "proxy-revalidate" ; Section 14.9.4 | "max-age" "=" delta-seconds ; Section 14.9.3 | "s-maxage" "=" delta-seconds ; Section 14.9.3 | cache-extension ; Section 14.9.6
  39. 39. La mise en cache • Consultez http://www.mnot.net/cache_docs/
  40. 40. ETag
  41. 41. Exemple simple ETag HTTP/1.1 200 Ok Age: 0 Content-Encoding: gzip Content-Type: text/html; charset=utf-8 Date: Wed, 08 Jan 2014 12:25:10 GMT ETag: 1s76wo-1503 Connection: keep-alive <! DOCTYPE html> <html>….. </html> GET /from-paris/quality HTTP/1.1 Host: cfp.devoxx.fr
  42. 42. Exemple simple ETag : je reviens te voir GET /from-paris/quality HTTP/1.1 Host: cfp.devoxx.fr If-None-Match: 1s76wo-1503
  43. 43. Exemple simple : la page n’a pas changé HTTP/1.1 304 Not Modified Accept-Ranges: bytes Age: 0 Content-length: 0 Date: Wed, 08 Jan 2014 12:29:17 GMT Connection: keep-alive GET /from-paris/quality HTTP/1.1 Host: cfp.devoxx.fr If-None-Match: 1s76wo-1503
  44. 44. Exemple avec Devoxx France • Afficher une page programme de conférence • Liste des conférences • Pour chaque conférence, le nom et la bio du présentateur
  45. 45. ETag • Charge la liste des conférences, et pour chaque conférence, les détails des présentateurs. Requête Liste des Conférences 1. charge les conférences 2. charge les speakers 3. retourne la réponse 53 KB - 140ms GET /conferences HTTP/1.1 Host: cfp.devoxx.fr
  46. 46. ETag • La page liste des conférences est coûteuse à calculer 2kB - 30ms 49KB- 110ms Liste des Conférences 1. charge les conférences 2. charge les speakers 3. retourne la réponse «La liste des conférences détermine la liste des speakers»
  47. 47. ETag • Opérations et transferts inutiles Requête Réponse 51 KB - 140ms Liste des Conférences 1. charge les conférences 2. charge les speakers 3. retourne la réponse
  48. 48. ETag : comment optimiser et améliorer les performances
  49. 49. ETag • Si pas de ETag (première visite) Requête Liste des Conférences 1. charge la liste des conférences 2. charge les speakers 3. retourne la réponse avec ETag calculé sur la liste des conférences Réponse HTTP/1.1 200 Ok ... ETag: safik20-demo123 ...
  50. 50. ETag • 2ème visite, présente l’entête If-None-Match Requête Liste des Conférences 1. charge les conférences 2. calcule ETag 3. si ETag est identique à celui présenté dans If- None-Match alors retourne 304 Not Modified Réponse HTTP/1.1 304 Not Modified ETag: safik20-demo123 Content-Length: 0 GET /conferences HTTP/1.1 Host: cfp.devoxx.fr If-None-Match: safik20-demo123 2 KB - 15ms Ne charge pas la liste des speakers !
  51. 51. ETag (et si la liste des conférences est modifié ?) • 2ème visite, présente l’entête If-None-Match Requête Liste des Conférences 1. charge les conférences 2. calcule ETag 3. si ETag est différent à celui présenté dans If- None-Match alors 3.a) charge speakers 3.b) retourne résultat avec nouvel ETag Réponse HTTP/1.1 200 Ok ETag: ttg234-hgd789 Cache-Control: no-cache Content-Length: 1429 Content-Type: text/html GET /conferences HTTP/1.1 Host: cfp.devoxx.fr If-None-Match: safik20-demo123 53 KB - 140ms
  52. 52. ETag • Résumé Liste des Conférences 1. charge les conférences 2. calcule ETag sur la liste des conférences 3. compare ce ETag avec If-None-Match si présent 4.a - si identique, retourne 304 Not Modified 4.b - si différent, charge les speakers, puis retourne 200 Ok + ETag 4.c - si pas de If-None-Match dans la requête alors retourne 200 Ok + ETag
  53. 53. Bénéfices • Eviter des appels coûteux ou lents • Economie de ressources • Améliore les temps de réponse • Simple
  54. 54. ETag - Avancé • Permet d’effacer un élément précis Requête Liste des Conférences Réponse HTTP/1.1 428 Precondition Required Date: Wed, 14 Sep 2013 14:01:00 DELETE /conf/proposal/02 HTTP/1.1 Host: cfp.devoxx.fr
  55. 55. ETag - Avancé • Permet d’effacer un élément précis Requête Liste des Conférences Réponse HTTP/1.1 204 No Content Date: Wed, 14 Sep 2013 14:01:00 DELETE /conf/proposal/02 HTTP/1.1 Host: cfp.devoxx.fr If-Match: 120sg-demo123
  56. 56. ETag - Avancé • Permet d’effacer un élément précis Requête Liste des Conférences Réponse HTTP/1.1 404 Not Found Date: Wed, 14 Sep 2013 14:01:00 DELETE /conf/proposal/02 HTTP/1.1 Host: cfp.devoxx.fr If-Match: 120sg-demo123
  57. 57. Content negociation ImportantpourconstruireunebonneAPIWeb
  58. 58. Ressource versus Representation /cfp/speaker/nicolas text/html application/json gzipped FR or EN
  59. 59. Requête GET /cfp/speaker/nicolas HTTP/1.1 Host: cfp.devoxx.fr Authorization: Basic xxxx
  60. 60. Réponse HTTP/1.1 200 OK Date: Sun, 17 Nov 2013 18:00:23 Content-Type: application/json { "id": 2345, "name": "Nicolas Martignole", "photo": "http://s3.amazonaws.com/b/t22/hh.png" }
  61. 61. Réponse - 2 HTTP/1.1 200 OK Date: Sun, 17 Nov 2013 18:00:23 Content-Type: text/xml <speaker id="2345"> <name>Nicolas Martignole</name> <photo src="http://s3.amazonaws.com/b/t22/hh.png"/> </speaker>
  62. 62. Requête GET /cfp/speaker/nicolas HTTP/1.1 Host: cfp.devoxx.fr
  63. 63. Requête GET /cfp/speaker/nicolas.json HTTP/1.1 Host: cfp.devoxx.fr GET /cfp/speaker/nicolas.xml HTTP/1.1 Host: cfp.devoxx.fr ?
  64. 64. Requête Ressource vs Representation
  65. 65. Requête - solution 1 GET /cfp/speaker/nicolas?format=json HTTP/1.1 Host: cfp.devoxx.fr GET /cfp/speaker/nicolas?format=xml HTTP/1.1 Host: cfp.devoxx.fr
  66. 66. Requête - solution 2 GET /cfp/speaker/nicolas HTTP/1.1 Host: cfp.devoxx.fr Accept: application/json GET /cfp/speaker/nicolas HTTP/1.1 Host: cfp.devoxx.fr Accept: application/xml
  67. 67. Requête - encore plus mieux meilleur bien GET /cfp/speaker/nicolas HTTP/1.1 Host: cfp.devoxx.fr Accept: application/json, application/xml
  68. 68. Requête - quality GET /cfp/speaker/nicolas HTTP/1.1 Host: cfp.devoxx.fr Accept: application/json, application/xml;q=0.5
  69. 69. Accept header GET /HTTP/1.1 Host: cfp.devoxx.fr Accept: text/html,application/xhtml+xml,application/ xml;q=0.9,*/*;q=0.8
  70. 70. Accept (cont.) GET /HTTP/1.1 Host: cfp.devoxx.fr Accept: text/html,application/xhtml+xml,application/ xml;q=0.9,*/*;q=0.8 Accept-Encoding: gzip Accept-Language: fr,fr-FR;q=0.8,en;q=0.6,en-US;q=0.4 "Je

×