Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Svelte: Building Front-End Applications Without...

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

Nico Rehwaldt

August 20, 2019
Tweet

More Decks by Nico Rehwaldt

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  4. 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