Svelte: Building Front-End Applications Without Virtual DOM

Slide 1

Slide 1 text

Svelte: Building Front-End Applications Without Virtual DOM Nico Rehwaldt

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Virtual DOOM ● Bad Implications ○ Rendering to Virtual DOM is not free ○ Difﬁng 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

Slide 4

Slide 4 text

Innovative Idea Plain of virtual DOM workarounds and local optimizations Let’s get rid of Virtual DOM

Slide 5

Slide 5 text

How is Svelte Different? ● No UI library but a Compiler ● Bakes change detection and efﬁcient 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

Slide 6

Slide 6 text

What Svelte Means for Web Performance

Slide 7

Slide 7 text

https://github.com/nikku/todolist-review-2019

Slide 8

Slide 8 text

Port everything now? Nope.

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Thanks https://github.com/nikku/todolist-review-2019