2014.12.11 - TECH CONF #3 - Présentation Bootstrap
Télécharger en tant que PPTX, PDF2 j'aime1,400 vues
Le document présente une expertise sur les technologies D3.js et Bootstrap, en mettant en avant leur utilisation dans la création de pages web orientées données. D3.js est décrit comme une bibliothèque de manipulation du DOM pour la visualisation graphique, tandis que Bootstrap est une librairie CSS facilitant la construcción d'interfaces utilisateur. Le texte aborde également les différences entre SVG et HTML5 Canvas, ainsi que les meilleures pratiques pour optimiser le code JavaScript.
![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!](https://image.slidesharecdn.com/presbootstrapd32014-141212073756-conversion-gate02/85/2014-12-11-TECH-CONF-3-Presentation-Bootstrap-11-320.jpg)
2014.12.11 - TECH CONF #3 - Présentation Bootstrap
- 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