The latency of an application is not just about data transfer time. Once you have received data from the network, you have to process it and display it.
We are going to do a UI benchmark based on the bike demo available on github and the branch streaming simple. This demo displays in realtime the bikes available in different cities, Lyon/France in our case.
Both implementations use streamdata.io to stream the data from the API provider (JCDecaux). Hence, streamdata.io server pushes updates in JSON, containing patches (JSON-Patch) with new bike availability. The first example (streaming simple) re-displays the entire UI every time a patch is received and applied. The second example (master branch) displays only the modifications deduced from the patch.
Streaming simple – entire UI reloaded
Bike demo master – only the patch is displayed
Note: Benchmark was performed on
Chrome Version 44.0.2403.157 (64-bit)
Ubuntu 14.04.3 LTS
4CPU Intel Core i5 @3.2 GHz
In this example, using JSON-Patch allows to refresh only the relevant parts of the page:
The UI is displayed 20 times faster!!
You can also guess this has a huge impact on the battery consumption… But we will see that in another post!