Svelte

Svelte is a feature-rich yet easy-to-use UI framework to create reactive web UI’s. While most frameworks are implemented as runtime libraries, Svelte is implemented as a compiler. It looks at your code at build-time and produces runtime code, which makes it more powerful and less heavy.

Reactivity

<script>
let name = "world";
setTimeout(() => name = "Waldo", 5000);
$: len = name.length;
$: console.log("name", name);
</script>

<p>Hello {name}</p>
<p>Len: {len}</p>

Not only will the paragraph say Hello world initially, 5 seconds later it will automatically update to Hello Waldo. The reactive declaration marked with $: will also be executed every time the value of name changes.

Main Features of Svelte

  1. Templates - ability to use JS variables in HTML wrapped in {}
  2. Reactive templates - when a value changes, it re-renders parts of the page that use that variable
  3. Reactive declarations ($:)
  4. Single file components - HTML, CSS, and JavaScript all in one file
  5. Components can receive props
  6. CSS styles are “scoped” by default
  7. Attach event listeners
  8. Provides reactive stores
  9. Provides actions (use:action)

Learn Svelte

  1. svelte.dev - the flagship site for Svelte
  2. Svelte Tutorial - Do all modules, except “Motion”, “Animation”, and “Transitions”
  3. Video: Why learn Svelte
  4. Video: How to learn Svelte