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

2014.12.11 - TECH CONF #3 - Présentation Bootstrap

Embed Size (px)

Citation preview

Page 1: 2014.12.11 - TECH CONF #3 - Présentation Bootstrap

Retour sur expérience sur

les technologies D3.js & Bootstrap

(HTML / JS / CSS / SVG)

http://fr.linkedin.com/in/duvergerp

freedatamap.com

Patrick Duverger

Page 2: 2014.12.11 - TECH CONF #3 - Présentation Bootstrap

Petit aperçu de ce qu’on peut

(facilement) faire dans une page Web

Page 3: 2014.12.11 - TECH CONF #3 - Présentation Bootstrap

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)

Page 4: 2014.12.11 - TECH CONF #3 - Présentation Bootstrap

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.

Page 5: 2014.12.11 - TECH CONF #3 - Présentation Bootstrap

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

Page 6: 2014.12.11 - TECH CONF #3 - Présentation Bootstrap

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

• 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

D3.js = jQuery for SVG

Page 7: 2014.12.11 - TECH CONF #3 - Présentation Bootstrap

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

Page 8: 2014.12.11 - TECH CONF #3 - Présentation Bootstrap

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

Page 9: 2014.12.11 - TECH CONF #3 - Présentation Bootstrap

Petit moteur physique fait-maison

en HTML5 canvas

Page 10: 2014.12.11 - TECH CONF #3 - Présentation Bootstrap

D3 physic engine example

Page 11: 2014.12.11 - TECH CONF #3 - Présentation Bootstrap

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!

Page 12: 2014.12.11 - TECH CONF #3 - Présentation Bootstrap

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 »

Page 13: 2014.12.11 - TECH CONF #3 - Présentation Bootstrap

FIN

merci pour votre attention