Présentation Bootstrap de Patrick Duverger à la TECH CONF #3 Telecom Valley du 11 décembre 2014.

1. http://fr.linkedin.com/in/duvergerp
Retour sur expérience sur
les technologies D3.js & Bootstrap
(HTML / JS / CSS / SVG)
freedatamap.com
Patrick Duverger

2. Petit aperçu de ce qu’on peut
(facilement) faire dans une page Web

3. Data Driven
Document : D3
D3.js framework ou library ?
• Un framework appelle notre code, notre code appelle une library.
• Réponse : plus une library qu’un framework, mais en matière de UI, la gestion
des événements impose que la lib appelle notre code.
D3.js une library de visualization ou un clone de jQuery ?
• La base de D3 c’est la manipulation du DOM (HTML object model), d’où son
nom.
• D3 hérite de toutes les bibliothèques graphiques du projet Protovis : il fournit
l’implémentation de beaucoup d’algorithmes mathématiques complexes.
• La puissance graphique de D3 repose en grande partie sur SVG qui n’est pas
qu’un moteur de rendu vectoriel statique, mais qui fonctionne très bien lorsque
vous changez dynamiquement les coordonnées des objets SVG.
• D3 = jQuery orienté manipulation graphique avec un riche panel
d’implémentations de rendus graphiques sur étagère
http://d3js.org/
http://bl.ocks.org/mbostock/3231298
Mike Bostock est le développeur principal de D3 (et auparavant Protovis)

4. SVG or
HTML5 Canvas?
Doit-on choisir ?
• Oui, c’est l’un ou l’autre : les langages de création des objets graphiques sont
différents (avec similitudes) et le code javascript pour les manipuler aussi.
• HTML5 canvas : un peu plus rapide, mais les objets rendus ne sont pas dans le
DOM, cela fait toute la différence!
• SVG : tous les objets vectoriels sont accessibles dans le DOM avec jQuery ou
D3  facile à débugguer, facile pour rajouter des événements, facile de
grouper les objets et manipuler seulement les coordonnées du groupe.
• Les opérations booléennes entre calques sont très faciles en HTML5 canvas,
par contre en SVG le dernier dessiné est le dernier affiché (la conception du
rendu vectoriel a des implications sur le flux d’exécution du code qui le génère).
• D3 utilise SVG et absolument pas les canvas HTML, ce qui est logique puisque
le moteur de D3 est fait pour manipuler le DOM donc des objets, qu’ils soient
HTML ou SVG.
Evidemment l’un et l’autre cohabitent très bien. Il suffit de mettre
un calque transparent (style=’z-index:-1;’) avec un canvas par
dessus un objet SVG.

5. D3.js
Data Driven Document
Sélections en W3C DOM API:
retourne un tableau de .name et .value paires
Sélections en jQuery:
Sélections en D3.js:
• Adapté à une multi sélection
• Chaînable
• Possibilité de mettre une fonction
qui est exécutée à chaque fois
que la valeur est requise

6. D3 vs jQuery vs
Il faut malheureusement utiliser les 3 formes de manipulation du DOM :
natives jQuery D3.js
• DOM en direct : syntaxe lourde et pas d’implémentation pour manipuler le CSS,
mais indispensable pour travailler avant l’import de jQuery ou D3 comme pour
interagir avec des iFrames.
• jQuery
D3.js = jQuery for SVG
• Très abouti, très puissant sur les fonctions de requêtes
• Facile pour manipuler les CSS
• Possibilité de stocker un objet ‘data’ dans n’importe quel objet du DOM
(utile plutôt que garder une trace des id et abuser des select)
• Light et indispensable pour travailler dans un worker thread
• D3 : ne peut pas remplacer jQuery (nécessite le DOM de la page qui n’est
pas référencée dans les threads).
• + : Gère n’importe quelle valeur comme une fonction
• - : double tableau incompréhensible

7. D3.js
Exemple de manipulation du DOM en D3 :
• Les méthodes sont chainables (elles renvoient toutes l’objet D3 concerné) : très
pratique, très lisible.
• Une syntaxe un peu déroutante au début : il faut sélectionner un objet qui
n’existe pas pour le créer.
• D3 lie un vecteur de données avec les objets du DOM.
• Adapté pour évaluer des fonctions en lieu et place de valeurs habituellement.
• Attention dans les fonctions : d = donnée, i = index de la
donnée dans le vecteur de données, ne pas utiliser « this »
(objet parent de la fonction appelé depuis une méthode D3)
• enter() et exit() : actions exécutée lorsque le vecteur de données est
différent des objets sélectionnés dans le DOM

8. Physic engine
D3.js contient une implémentation de l’algorithme « Verlet integration » qui est à la
base des moteurs physiques.
position d’après = position d’avant + vitesse * delta temps
vitesse d’après = vitesse d’avant + accélération * delta temps
force = masse * accélération
Verlet integration :
Pos d’après après = 2*pos d’après – pos + force/masse * delta temps^2
Autre qualité de D3 : les transitions

9. Petit moteur physique fait-maison
en HTML5 canvas

10. D3 physic engine example

11. Putting alltogether
Comment passer d’un objet dom à un objet jquery ou d3 et vice versa ?
$(objet dom) -> objet jquery sur lequel on peut invoquer find() ou attr() ou css()
D3.select(objet dom) -> objet d3 sur lequel on peut invoquer select(), append() ou
attr() ou style()
Réciproquement
d3object[0][0] = 1er objet dom de la sélection
objectJquery[0] = 1er objet dom de la sélection
Donc $() renvoie un vecteur d’objets DOM car le sélecteur peut renvoyer plusieurs
objets
D3.select() renvoie un vecteur de vecteurs (le premier préserve la structure des
selectAll, le deuxième contient les objets)
Comment faire du code rapide ?
• utiliser les profilers de chrome et de firefox
• proscrire les array en javascript et préférer les { }
var a = [] ; for(i) { a.push(obj_i) ; }  a[i] très très lent…
var o = {} ; for(i) { o[‘’ + i] = obj_i ; }  o[i] très très rapide!

12. Deux mots sur Bootstrap
Twitter Bootstrap offre une collection complète de widgets pour construire une UI
 Très utile pour bénéficier de widgets Web qui ont un bon look&feel
 Très facile et utile pour ceux qui n’aiment pas CSS
Bootstrap étant principalement une library css, c’est lui qui fait le boulot
 Beaucoup de changements entre la version 2 et la version 3
(personnellement je suis resté sur la v2 comme beaucoup…)
 Pas trouvé mieux : jQueryMobile impose un loading screen dans la
mainPage, Bootstrap est lightweight donc se loade facilement dans des
iframe
 Petit retour d’expérience : beaucoup de bugs dans les composants
javascript,
 Prévoir de mettre les mains dedans…
 Beaucoup de modifs pour avoir du véritable responsive design
 mauvaise réaction aux événements tactiles
Un conseil : centralisez les événements dans un seul objet
avec un handler central « à la Xwindows »

13. FIN
merci pour votre attention