Presentation about Vue Js Virtual Dom in a Vue.jsLyon and LyonJS meet up.

1. Vue.js Lyon & LyonJS
Le DOM Virtuel

2. Hease Robotics
RETAIL TRANSPORTS
CENTRE DE
LOISIRS
CONCIERGERIE
CENTRES COMMERCIAUX
BOUTIQUES
SHOWROOM
GARES
AÉROPORTS
OFFICE DU TOURISME
CINÉMA
MUSÉE
PARC DE LOISIRS
ACCUEIL
GUIDE
SÉCURISATION
ADRIEN
Full stack developer

3. Introduction

4. DOM: Document Object Model

5. Evolution des librairies/framework
 Jquery
 MooTools
Librairies
 Angular
 Backbone
 EmberJS
Framework
MVC
 React
 VueJS
Framework
DOM
Virtuel

6. Fonctionnement

7. Le Fonctionnement du DOM Virtuel

8. Petite démonstration

9. Quand l’utiliser ?

10. Le DOM virtuel n’est pas plus rapide que le DOM
Par définition le DOM est l’implémentation la plus rapide pour manipuler les objets.
MAIS :
• C’est au développeur de spécifier chaque mise à jour souhaité
• L’automatisation de cette tache entraine un render complet des éléments children
• Les phases de Painting et Rendering se font à chaque changement
ALORS QU’AVEC LE DOM VIRTUEL:
• Le render est automatisé
• Le Diff-Dom s’occupe de choisir les éléments à mettre à jour
• Les phases de Painting et Rendering se font à des instant choisis

11. Le DOM virtuel
de Vue.JS

12. La classe VNode

13. Les tips offerts
Le DOM virtuel de Vue permet certaines actions pratiques:
• this.$nextTick(() => {//doSomething})
•
• Life Cycle Hook:
• Created != Mounted -> BeforeDestroy != Destroyed
•
• Lazy load

14. DOM Virtuel
!= Shadow DOM
!= ANGULAR CHANGE
DETECTION

15. Shadow DOM

16. Angular Change Detection
Le DOM virtuel c’est super bien pour les
performances des applications progressives !
Mais alors pourquoi Angular qui n’en a pas est
aussi rapide que React et VueJS ?

17. What next ?

18. HTML templates & JavaScript template literals
Nouvelle manière de créer des templates nativement.
Permet un render ciblé sans markup parser ni build process.
https://github.com/Polymer/lit-html

19. Questions ?

20. History of DOM: https://anybox.fr/blog/appli-web-histoire-du-dom-react-redux
Petite démonstration: https://medium.com/@n.kokla/dans-les-entrailles-du-dom-virtuel-part-1-d6d3fea60428
Why updating real dom is slow: https://hackernoon.com/virtual-dom-in-reactjs-43a3fdb1d130
Write your own virtual DOM: https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060
Shadow DOM != Virtual DOM: https://develoger.com/shadow-dom-virtual-dom-889bf78ce701
Vue.JS Virtual DOM: https://codingexplained.com/coding/front-end/vue-js/understanding-virtual-dom
Vue.JS Virtuea DOM code: https://github.com/vuejs/vue/tree/dev/src/core/vdom
Lit-html: https://github.com/Polymer/lit-html
Angular Change Detection: https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.htm
Bonus : http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html
Sources