Si le problème était tapis dans les méandres de plusieurs projets, il est apparu au grand jour lors de tentatives d'affichage des transports public suisses en temps réel sur une carte. L'outil, basé sur du SVG et D3, proposait des perspectives intéressantes mais la réalisation souffrait d'à-coups et les batteries des laptops disparaissaient à grande vitesse. Une vidéo d'un premier projet est disponible et peut être comparée à une deuxième réalisation, basée sur des techniques présentées dans cet article. Pour rendre le problème encore plus universel, nous nous sommes rendus compte que le simple affichage d'une horloge, basée sur une transition/rotation, pouvait consommer jusqu'à 20% du CPU d'un laptop moderne!
Si D3 n'a aucun concurrent sérieux pour de nombreux problèmes, nous avons décidé d'essayer une autre approche, issue des jeux en ligne. Une libraire (parmi d'autres) permet de se servir de la puissance d'HTML5 et du GPU: pixi.js.
Nous commencerons cet article par une comparaison entre les deux librairies en termes de performance de rendering. Pour clore cet aspect du débat, nous aborderons aussi les transitions CSS natives. Dans un second temps, nous aborderons quelques trucs et astuces pour tirer le meilleur parti de chacun des frameworks et nous verrons même comment combiner les deux.
Le code et les mesures sont disponibles sur github et une démo sur github.io.
Le reste de l'article est en anglais.