Svelte: Building Front-End Applications Without Virtual DOM

This presentation discusses the implications of using Virtual DOM as a technique to sync UI updates in modern front-end libraries.

It also discusses how being a compiler, rather than a runtime library puts Svelte (https://svelte.dev) in a unique position to tackle performance issues. Rather than relying on Virtual DOM it can bake change detection and efficient DOM updates right into your app, giving you a boost of speed and one abstraction less to worry about.

Links:

- Frameworks without the framework: https://svelte.dev/blog/frameworks-without-the-framework
- Todo list example apps: https://github.com/nikku/todolist-review-2019

Transcript

1. Svelte: Building Front-End Applications Without Virtual DOM Nico Rehwaldt
2. Virtual DOM • The go-to solution for managing UI updates in front-end applications in 2019 • Used in your favorite UI library, too • Good idea behind it: Minimize DOM updates Change detected Render to Virtual DOM Diff with last Virtual DOM Apply DOM updates
3. Virtual DOOM • Bad Implications ◦ Rendering to Virtual DOM is not free ◦ Diffing is not free ◦ Re-computation is global mostly • In case of React ◦ Ugly performance optimizations are needed, e.g. React.Context, PureComponent ◦ Functional components re-compute Virtual DOM all the time
4. Innovative Idea Plain of virtual DOM workarounds and local optimizations Let’s get rid of Virtual DOM
5. How is Svelte Different? • No UI library but a Compiler • Bakes change detection and efficient DOM updates into your app • Neglectable foot print at run-time • Highest possible performance • Updates always local • No virtual DOM Change detected Apply DOM Updates https://svelte.dev/blog/frameworks-without-the-framework Schedule DOM Update Next Animation Frame
6. What Svelte Means for Web Performance
7. <Demo /> https://github.com/nikku/todolist-review-2019
8. Port everything now? Nope.
9. Personal Assessment + App performance that scales + Lightweight components + Find errors on compile + An actual framework - Developer experience and convenience - Reactivity feels like magic, sometimes - Stability - Eco System
10. Thanks https://github.com/nikku/todolist-review-2019