Playing with

By Tommy Marshall

What is Svelte?

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

~50KB

~2.7KB

What benefits do you get?

  • Much, much, smaller bundle size
  • Compile to whatever
  • Much faster

Why was it created?

Develop Faster

  • Less boilerplate
  • Use HTML, CS, JavaScript
  • Intuitive API
  • Helpful helpers (a11y)

Reactivity Built-in

Specify dynamic behavior of a value at the time of declaration

No Virtual DOM

What does Svelte

look like?

  • useMemo
  • useCallback
  • shouldComponentUpdate
  • React.PureComponent

Reactive By Default

Reactive Declarations

Reactive Statements

Performance

320KB  >  37KB

Tokopedia

IN CONCLUSION

  • Svelte is a Framework
  • It's compiler, smaller bundles
  • It's reactive, less code
  • No Virtual DOM, faster renders
  • Helper helpers: a11y, data binding
  • Less verbose, easy dev
  • "Rethinking Reactivity" made me rethink best practices

Thanks!

We're hiring at Medallia!