Le document présente le protocole HTTP/2, développant ses origines, ses avantages par rapport à HTTP/1.1 et ses implications pour les développeurs web. HTTP/2, basé sur le protocole SPDY de Google, introduit des fonctionnalités telles que le multiplexage, la compression des en-têtes et le server push pour améliorer les performances et la sécurité. Enfin, il aborde la compatibilité avec les API et les langages de programmation comme Java et PHP.

1. nAcademy Le 31 mars 2015 Neuros ­
HTTP/2
Les impacts dans le Web
Christophe Villeneuve

2. nAcademy Le 31 mars 2015 Neuros ­
Aujourd'hui...
● L'origine du commencement
● Le protocole web : Http/2
● Les conséquences

3. nAcademy Le 31 mars 2015 Neuros ­
Les dates
1999 HTTP/1.1
2015 HTTP/2.0
1996 HTTP/1.0
1991 HTTP/0.9

4. nAcademy Le 31 mars 2015 Neuros ­
HTTP/1.0

5. nAcademy Le 31 mars 2015 Neuros ­
La fin du HTTP/1.1
● 15 ans existance
● Le Poids des pages a augmenté
● Nouvelles façon de consommer le Web
● Emissions de multi­requêtes en parallèles
● Le Web et les API métiers
Webservices
● Pb : Trop de connexions
(c) Oracle and Orits affiliates

6. nAcademy Le 31 mars 2015 Neuros ­
HTTP/2, qu'est ce ?
● Développé par IETF (HTTP Working Group)
● Basé sur SPDY
– Protocole développé par Google (2009)
– Résoudre les limites de HTTP/1.1
– Gain important sur Firefox, nginx
● Contributeurs :
– Firefox, Chrome,
– Twitter, CURL,
– Akamai...

7. nAcademy Le 31 mars 2015 Neuros ­
HTTP/2 Illustré

8. nAcademy Le 31 mars 2015 Neuros ­
Intérêt HTTP/2

9. nAcademy Le 31 mars 2015 Neuros ­
HTTP/2 : Multiplexage (1/3)
● Multiplexage des requêtes au serveur
● Plusieurs informations/demandes
– dans la même connexion TCP
● Exécution de requêtes en simultanés
par le navigateur
– Ex : CSS, images, JS…
● Avant Ordre et blocage
● Connexion en parallèle

10. nAcademy Le 31 mars 2015 Neuros ­
HTTP/2 : Multiplexage (2/3)

11. nAcademy Le 31 mars 2015 Neuros ­
HTTP/2 : Multiplexage (3/3)
● HTTP/1.1
● HTTP/2

12. nAcademy Le 31 mars 2015 Neuros ­
HTTP/2 : Stream dependencies (1/2)
● Permet aux serveurs de 'pousser' les réponses de
manière proactive dans les caches des clients
● Possible d'indiquer au serveur les ressources les
plus importantes

13. nAcademy Le 31 mars 2015 Neuros ­
HTTP/2 : Stream dependencies (2/2)

14. nAcademy Le 31 mars 2015 Neuros ­
HTTP/2 : Headers
● Compression des requêtes et des réponses
● Binaire (avant c'était du textuelle)
● Compresser les actifs
Referer, Cookie's…
● Réduire la charge

15. nAcademy Le 31 mars 2015 Neuros ­
HTTP/2 : Server push (1/2)
● Plusieurs connexions (parallélisme)
● Le plus pour les Systèmes d'informations
● Serveur peut envoyer des ressources vers
l'internaute avant de les demandés
– Images, CSS, Javascript
● Utilisation du cache
● Equilibrer les performances et l'utilité

16. nAcademy Le 31 mars 2015 Neuros ­
HTTP/2 : Server push (1/2)

17. nAcademy Le 31 mars 2015 Neuros ­
Et… La réalité

18. nAcademy Le 31 mars 2015 Neuros ­
On évite...
● Quelques fonctionnalités HTTP/1.1
– Domaine fragmentation
– L'image spriting
– Ressources en doublure
– Concaténation

19. nAcademy Le 31 mars 2015 Neuros ­
WebPerf ?
● Optimisation de la couche TCP
– Plusieurs connexions en TCP
– Durée de connexion plus longue
et unique
– Plus de perte de paquets

20. nAcademy Le 31 mars 2015 Neuros ­
Sécurité ?
● Chiffrement
● Sécurité de la navigation
● Intérêt pour le TLS
● Chiffrement des échanges
– Serveurs navigateurs↔

21. nAcademy Le 31 mars 2015 Neuros ­
Let's GO...
● Compatibilité
– Akamai
– Les Navigateurs
● Chrome 40, Firefox 36, IE 11
– Curl
– Langage

22. nAcademy Le 31 mars 2015 Neuros ­
Les impacts pour nous

23. nAcademy Le 31 mars 2015 Neuros ­
Développement
● Compatibilité avec API HTTP
● Très peu de changements
● Meilleurs résultats au niveau de la ressource
Client serveur↔

24. nAcademy Le 31 mars 2015 Neuros ­
Java
● JEP 110 http://openjdk.java.net/jeps/110
● Easy to use API
● Covers only the most common use cases
● Supports both HTTP/1.1 and 2
● Builds on Java API classes going back to
Java 1.2!

25. nAcademy Le 31 mars 2015 Neuros ­
PHP
● CURL
Request
$this­>proxy­>request
Reponse
$this­>proxy­>response
Debug
$this­>proxy­>debug_str

26. nAcademy Le 31 mars 2015 Neuros ­
Image HTML
<img
src="data:image/png;base64,iVBORw0KGgoAA
AANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/
w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Point
rouge" />
http://en.wikipedia.org/wiki/Data_URI_scheme

27. nAcademy Le 31 mars 2015 Neuros ­
CSS avec plusieurs images
#prev {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') ­47px 0;
}
#next {
left: 129px;
width: 43px;
background: url('img_navsprites.gif') ­91px 0;
}
http://www.w3schools.com/css/css_image_sprite
s.asp

28. nAcademy Le 31 mars 2015 Neuros ­
HTTP URI
GET / HTTP/1.1
Host: server.example.com
Connection: Upgrade, HTTP2­Settings
Upgrade: h2c
HTTP2­Settings: <base64url encoding of HTTP/2
SETTINGS payload>

29. nAcademy Le 31 mars 2015 Neuros ­
Serveur
Support HTTP/2

30. nAcademy Le 31 mars 2015 Neuros ­

31. nAcademy Le 31 mars 2015 Neuros ­
Demo Akamai
● Affiche une image (environ 750 ko)
demo concept inspired by Golang's Gophertiles

32. nAcademy Le 31 mars 2015 Neuros ­
Débug DevTools Firefox
https://developer.mozilla.org/en­US/docs/Mozilla/Projects/NSS/Key_Log_Format

33. nAcademy Le 31 mars 2015 Neuros ­
Merci
● Plus loin
– https://http2.github.io/
– http://daniel.haxx.se/http2/
–
● Sources
– Ed Burns
– Mark Nottingham
Questions
@hellosct1
@neuro_paris