@StreamdataIO#streamingapi

Latence applicative et streaming API

@StreamdataIO#streamingAPI

Latence applicative et streaming API

Streamdata.io

Nicolas Babel / Allan Denis

Stand 23

Mémoire sensorielle

Durée : 0,5 max pour visuel

2 sec pour audio

Mémoire court-terme

Durée : 30 secondes max

Mémoire long-terme

@StreamdataIO#streamingAPI

6

Délai de réaction

d’une application

Impact /

sensation

sur

l’utilisateur

0,1 Secondes0,5 2 3 5 101 4

« Instantané »

Parfait

(eq. Relation

humaine)

Sans

attente

« Lent »

40 à 60%

d’abandon sur

le web desktop

« Très Lent »

30 à 40%

d’abandon sur

le web mobile

Perte d’attention

Enervement

Fatigue

Temps

« normal »

@StreamdataIO#streamingAPI

- 100 ms = - 1% Revenue & - 5% pages vues

Source : http://blog.radware.com/applicationdelivery/applicationaccelerationoptimization/2013/06/web-performance-poverty-line/

Source : http://www.ebaytechblog.com/2013/03/29/measuring-real-user-experience-with-site-speed-gauge/#.VFIHLvTF9CN

Source : http://www.webperformancetoday.com/2011/11/08/velocity-faster-mobile-sites-business-kpis-case-studies/

@StreamdataIO#streamingAPI

Latence réseau (RTD) par technologie

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

En ADSL, la première donnée utile arrive en 60 ms (HTTPs)

En 4G, la première donnée utile arrive en 300 ms (450ms en 3G)

ms

Hors RRC

(Radio

Resource

Controleur)

La perception

Le temps de communication est une fonction

La latence

Le débit

La quantité de donnée Le protocole

Le nombre de requêtes

Les données dynamiques de vos interfaces

• Cotes

(Bourse & Paris en ligne)

• Statuts / info réseaux sociaux

• Propositions de recherche

• Informations / News

• Stock de ressources limitées

(Sharing economy & promo)

• Prix

• Dashboard

(Cash, vente, …)

• Input lors de travail collaboratif

(texte, dessins, …)

• Info Jeu en ligne

(Classements & données de jeu)

• …

@StreamdataIO#streamingAPI

Exemples

• Netflix

• Google

• Twitter

@StreamdataIO#streamingAPI

Netflix

@StreamdataIO#streamingAPI

Netflix (Falcor + JSONG)

JSON Patch

Note : Taille tableau

dépend du device !

JSON Path + cache local +

polling optimized query

http://www.infoq.com/presentations/netflix-reactive-rest (Jafar Husain)

@StreamdataIO#streamingAPI

Google

@StreamdataIO#streamingAPI

Twitter

@StreamdataIO#streamingAPI

N’envoyer que la donnée utile : JSON Patch

http://jsonpatch.com/

Format pour décrire les modifications sur un document

JSON

{

"baz": "qux",

"foo": "bar"

}

[

{ "op": "replace", "path": "/baz",

"value": "boo" },

{ "op": "add", "path": "/hello",

"value": ["world"] },

{ "op": "remove", "path": "/foo"}

]

The original document

The patch

{

"baz": "boo",

"hello": ["world"]

}

The result

@StreamdataIO#streamingAPI

Comparaison des solutions pour données dynamiques

CompatibilitéNavigateur

Compabilitéinfra web

Facilité à dev. RessourcesDevice / Réseau

Downstream Latence applicative

Polling/Long Polling

Websocket

SSE

Websocket : seul protocole réellement bidirectionnel

@YourTwitterHandle@YourTwitterHandle@StreamdataIO#streamingAPI

Demo : 2 mn chrono

@YourTwitterHandle#YourSessionHashtag

URL api Uber

https://api.uber.com/v1/estimates/time?

start_latitude=33.9799396&

start_longitude=-118.3343132&

server_token=

LNiO_-f8xKfUM4qPDYnX4UbCNxSQd061k1NIhfLK

https://proxy.streamdata.io/

https://api.uber.com/v1/estimates/time?

start_latitude=33.9799396&

start_longitude=-118.3343132&

server_token=

LNiO_-f8xKfUM4qPDYnX4UbCNxSQd061k1NIhfLK

@YourTwitterHandle@YourTwitterHandle@StreamdataIO#streamingAPI

Summary

@StreamdataIO#streamingAPI

Conclusions

1. Objectif 0,5 seconde de latence applicative

2. Mettre des données dynamiques

3. « Plus les UI des autres sont biens, plus la tienne est

pourrie »(A. Einstein, « Relativity concept applied to UX », Plon, 1932)

4. Venez nous voir stand 23

@YourTwitterHandle@YourTwitterHandle@StreamdataIO#streamingAPI

Q & A