Image by Andrew Walpole on twitter

Rethinking Frontend Apps with Svelte

svelte.dev

$ whoami

Eras of JavaScript

  1. jQuery
  2. React
  3. ???
Svelte mentioned at Chrome Dev Summit 2018

Reactivity and Spreadsheets

Forward Referencing

Example from Rich Harris' Rethinking Reactivity slides

Example from Rich Harris' Rethinking Reactivity slides

Example from Rich Harris' Rethinking Reactivity slides

Reactive Programming

Example from Paul Stovell's What is reactive programming?

Example from Paul Stovell's What is reactive programming?

DX vs. UX

Which is easier to write and maintain?

Which is more performant?

When the `input` event is fired

Using the DOM APIs directly

  1. Update the `<span>` in the actual DOM
Using a Virtual DOM
  1. Update the state
  2. Rerender the VDOM
  3. Reconcile and figure out what changed
  4. Update the `<span>` in the actual DOM
... better for users
... better for developers

Best of both worlds

  • Write JSX
  • Lifecycles
  • BUT, compile to Native DOM API calls

No runtime? 🤔

Differences with React

  • Reactive by assignments
  • Compiled to DOM APIs
  • No runtime
  • Declarative transitions compiled to CSS animations
  • Two-way binding
  • HTMLX instead of JSX

Svelte @ Razorpay

Razorpay Checkout
  • Checkout runs in production on Svelte v2
  • Needs to have small bundle-size
  • Needs to be fast
  • Should not conflict with your code

Advantages

  • Short, concise syntax
  • Transitions compiled to CSS
  • Reactivity by assignments
  • Scoped styles
  • DOM is the runtime
  • Smaller bundles

When wouldn't you use Svelte?

  • .svelte files for each component
  • Composition needs relearning
  • Bundle size increases with # of components
  • Two-way binding
  • No TypeScript support
  • No proper testing library
  • Fewer plugins
  • Not a lot of people know Svelte

Getting started

  1. Svelte REPL: https://svelte.dev/repl
  2. npx degit sveltejs/template my-project cd my-project npm install npm run dev

There's more

  • Sapper
  • Svelte Native

Thank you!