Pourquoi la rapidité et la quantité de données à transférer sont des critères de plus en plus importants ? Quels solutions existent aujourd'hui ? Demain ? Notre solution avec Server Sent Event et JSONPatch

1. Comment réduire la quantité de
données envoyées avec PUSH &
JSON Patch
12 Juin 2015

2. A propos de nous
Lorie Pisicchio
Scrum Master
Allan Denis
Product Owner
@StreamdataIO

3. Agenda
I - La problématique
II - Solutions d’aujourd’hui
III - Un pas vers le futur
IV - Demo Live Coding
V - Q&A

4. Explosion des usages

5. Des applications de plus en plus
« temps réel »
• Bourse / Paris en ligne
• Réseaux sociaux
• Moteurs de recherche
• News
• Biens / Services disponibles
(Sharing economy & promotions)

6. Round Trip Delay (ms)
ADSL, 1ère donnée utile en 60ms (HTTPS)
4G / LTE, 1ère donnée utile en 300 ms (450 ms in 3G)
300
150
110
100
30
25
10
0 50 100 150 200 250 300 350
EDGE/2G
3G
4G
Trans-continental optic fiber
Trans-country optic fiber
ADSL
In-town private network

7. HTTP/1

9. Ressenti des utilisateurs
Reaction time
of an app
Impact /
Feeling
0,1 Secondes0,5 2 3 5 101 4
« Slow »
40 à 60% drops
on desktop web
« Very slow »
30 à 40% drops
on mobile web
Loss of attention
Nervousness
Tiredness
« Regular »« Instant »
Perfect (eq.
Human
Realtionship)
No waiting

10. Une marche difficile à franchir
• Usages des services web explosent.
• Pile de protocoles pas designée pour les
usages d’aujourd’hui.
• Un monde qui devient de + en + temps réel.
• Limitation des réseaux mobiles (latence).

11. Une marche difficile à franchir

12. Les solutions? d’aujourd’hui

13. Les solutions? d’aujourd’hui
 Optimisations: CSS inlining, Minification JS
 Parallélisation des rêquetes par les navigateurs
 Données dynamiques: Polling / Long Polling
 Compression (gzip)

14. Les solutions? d’aujourd’hui

15. Un pas vers le futur
• HTTP/2
• Server-Sent Events (PUSH)
• JSON Patch (Mise à jour incrémentale des
données)

16. Un pas vers le futur
• HTTP/2
• Server-Sent Events (PUSH)
• JSON Patch (Mise à jour incrémentale des
données)

17. HTTP/2
• Protocole Binaire
• Multiplexing: Réutilisation de la même
connection TCP pour plusieurs requêtes HTTP
• Compression des Headers
• Cache Pushing: Permet de pousser
proactivement des données au client afin de
limiter les roundtrips réseau.

18. Server-Sent Events
Browser Support (source http://www.w3schools.com/html/html5_serversentevents.asp)

19. Les solutions pour les données dynamiques
Browser
support
Web infra
compatibility
Easiness to
dev
Load
(network /
Device)
Bidirectional App latency
Polling/Lon
g Polling
Websocket
SSE

20. SSE vs Websocket
Les avantages of SSE vs Websocket:
• Couche de transport basée sur HTTP.
• Possibilité d’utiliser un “polyfill” pour étendre la compatibilité.
• Mécanisme de re-connection avec reprise (event-id)
• Implémentation beaucoup plus simple
Les avantages des Websockets vs SSE:
• Communication bi-directionelle.
• Supporté plus largement par les navigateurs

21. SSE vs Websocket (Perf.)
Source http://matthiasnehlsen.com/blog/2013/05/01/server-sent-events-vs-websockets/
Use case: Préchargement de 500 Tweets sur une page web
(nginx configuré en tant que proxy)
Safari Chrome Firefox
Websockets 16s 8s 8s
SSE 7s 5s 6s
diff x2,2 x1,6 x1,3
https://github.com/matthiasn/BirdWatch

22. Standard for Incremental Updates:
JSON Patch
source http://jsonpatch.com/
{
"baz": "qux",
"foo": "bar"
}
The patch
The result
[
{ "op": "replace", "path": "/baz", "value": "boo" },
{ "op": "add", "path": "/hello", "value": ["world"] },
{ "op": "remove", "path": "/foo"}
]
{
"baz": "boo",
"hello": ["world"]
}

23. JSON Patch
C#

24. Demo Live Coding
by

25. API JCDecaux OpenData
https://github.com/streamdataio/bike-demo

26. Dynamic
cache
Push Incrementa
l updates