More Related Content
Similar to Creating your own Virtual DOM from scratch
Similar to Creating your own Virtual DOM from scratch (20)
Recently uploaded
Recently uploaded (20)
Creating your own Virtual DOM from scratch
- 1. Creating your own VDOM from scratch Daniel Leite de Oliveira
- 2. Creating your own VDOM from scratch Daniel Leite de Oliveira
- 3. Creating your own VDOM from scratch Daniel Leite de Oliveira
- 4. About Me - Front-end developer at Cheesecake Labs - Joaquim's Daddy - Passionate by Open Source culture
- 5. About Me - Front-end developer at Cheesecake Labs - Joaquim's Daddy - Passionate by Open Source culture
- 6. About Me - Front-end developer at Cheesecake Labs - Joaquim's Daddy - Passionate by Open Source culture
- 8. About Me - Front-end developer at Cheesecake Labs - Joaquim's Daddy - Passionate by Open Source culture
- 9. About Me - Front-end developer at Cheesecake Labs - Joaquim's Daddy - Passionate by Open Source culture
- 10. Addendum
- 12. Let's go back a little bit in time but before...
- 14. IT ALL BEGAN IN THE 90s
- 15. NCSA Mosaic First popular web browser
- 18. Brendan Eich Father of JavaScript
- 21. REMEMBER
- 22. the web needed a small language that could
- 24. VDOM is a strategy to update DOM in an efficient way
- 26. HOW IT WORKS?
- 27. f(p0) = V0; f(p1) = V1; ∆DOM = diff(V0 ,V1 )
- 28. Let's do it?
- 29. Is VDOM more performant than the Browser DOM?
- 34. Efficiency ≠ Performanceachieving maximum productivity with minimum wasted effort or expense. the action of accomplishing an action, task, or function.
- 35. Virtual DOM is NOT more performant than the Browser DOM
- 37. The web is evolving!
- 38. We need to maintain our essence!
- 39. Make the web even more dynamic!
- 40. THANK YOU ALL
- 42. We are hiring!
- 43. ckl.io/careers
- 44. References - Rock Crossfiteiro: http://bit.ly/2JL3oKd - A Brief History of JavaScript: http://bit.ly/2A1SobA - The Inner Workings Of Virtual DOM: http://bit.ly/2uUKhI1 - How to write your own Virtual DOM: http://bit.ly/2A2czWS - Matt-Esch/virtual-dom: http://bit.ly/2LJ3zre - Respo/respo - Virtual DOM in Clojure Script: http://bit.ly/2LgSJfN
Editor's Notes
- Y
- is the web browser that popularized the World Wide Web Governo Centro Nacional de Aplicações de Supercomputação Pouca liberdade para criação de features Pouco investimento Talvez, naquela época a NCSA não acreditasse muito na WEB.
- was founded by the very same people that took part in the development of Mosaic with money and independence, they had the necessary freedom to seek further ways to expand the web.
- part of the ex-Mosaic team, had the vision that the web needed a way to become more dynamic Animations, interaction and other forms of small automation should be part of the web of the future this scripting language people without experience in the software Java was on the rise as well, and Java applets were to be a reality soon The web was static. HTML was still young and simple enough for non-developers to pick up. the web needed interact with the DOM Mocha was born. Mocha was to become a scripting language for the web. Simple, dynamic, and accessible to non-developers.
- Eich was contracted by Netscape Communications to develop a "Scheme for the browser". Scheme is a Lisp dialect and, as such, comes with very little syntactic weight. It is dynamic, powerful, and functional in nature. lot of pressure to come up with a working prototype as soon as possible. Sun Microsystems was making a big deal with Netscape Communications to make Java available in the browser So Eich had to work fast. Lots of important decisions had to be made and very little time JavaScript, a.k.a. Mocha, was born in this context. Scheme for the browser turned into something very different. So Mocha was not like Scheme at all. It looked like a dynamic Java, In short time, it was renamed to LiveScript. "live" was convenient from a marketing point of view. In December 1995, Netscape Communications and Sun closed the deal: Mocha/LiveScript would be renamed JavaScript,
- palestrante mencionou que a checagem suja do modelo pode ser lenta. Mas o cálculo do diff entre os DOMs virtuais, na verdade, é ainda menos performatico, já que o DOM virtual, na maioria dos casos, deve ser maior que o modelo?
- In React, each of your components have a state. React knows when to re-render because it is able to observe when this data changes. The virtual DOM is used for efficient re-rendering of the DOM. This isn't really related to dirty checking your data. some overhead in computing the diff between two virtual trees, but the virtual DOM diff is about understanding what needs updating in the DOM and not whether or not your data has changed. In fact, the diff algorithm is a dirty checker itself but it is used to see if the DOM is dirty instead. We aim to re-render the virtual tree only when the state changes. efficient way to prevent unnecessary re-renders, If nothing has changed, we do nothing. A virtual DOM is nice because it lets us write our code as if we were re-rendering the entire scene. Behind the scenes we want to compute a patch operation that updates the DOM to look how we expect. So while the virtual DOM diff/patch algorithm is probably not the optimal solution, it gives us a very nice way to express our applications. We just declare exactly what we want and React/virtual-dom will work out how to make your scene look like this. We don't have to do manual DOM manipulation or get confused about previous DOM state.