An introduction to Svelte
![](https://s3.amazonaws.com/media-p.slid.es/uploads/205744/images/6755687/23617963.png)
Why bother learning a new framework ?
It lets you better understand and critically assess the API choices of other frameworks
React might not be around forever
also Facebook is evil
Some background on Svelte
![](https://s3.amazonaws.com/media-p.slid.es/uploads/205744/images/6755756/bFyXy8Pu_400x400.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/205744/images/6755759/silicon-valleys-erlich-bachman-capitalist-hero.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/205744/images/6755765/3f343ffc604a6c839e31d3f052b78abfa34ab588.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/205744/images/6755766/twitter-card.jpg)
Rich Harris
V3 released in April 2019
What makes Svelte unique
Compiler framework
🤯
{
"dependencies": {}
}
Performance
4KB (min + gzip) for a "hello world" app
no virtual DOM
Simplicity
<script>
let a = 1;
let b = 2;
</script>
<input type="number" bind:value={a}>
<input type="number" bind:value={b}>
<p>{a} + {b} = {a + b}</p>
import React, { useState } from 'react';
export default () => {
const [a, setA] = useState(1);
const [b, setB] = useState(2);
function handleChangeA(event) {
setA(+event.target.value);
}
function handleChangeB(event) {
setB(+event.target.value);
}
return (
<div>
<input type="number" value={a} onChange={handleChangeA}/>
<input type="number" value={b} onChange={handleChangeB}/>
<p>{a} + {b} = {a + b}</p>
</div>
);
};
<template>
<div>
<input type="number" v-model.number="a">
<input type="number" v-model.number="b">
<p>{{a}} + {{b}} = {{a + b}}</p>
</div>
</template>
<script>
export default {
data: function() {
return {
a: 1,
b: 2
};
}
};
</script>
Svelte
React (w/ hooks)
Vue
"True" reactivity
var a = 10;
var b = a + 1;
a = 11;
b = a + 1;
Example from Paul Stovell's What is reactive programming ?
var a = 10;
$: b = a + 1;
a = 20;
console.log(b); // 21
var a = 10;
var b <= a + 1;
a = 20;
console.log(b); // 21
Making a statement reactive
Other specificities of Svelte
Single file components
"Props" system similar to React
<script>
export let foo;
// Values that are passed in as props
// are immediately available
console.log({ foo });
</script>
You can also "dispatch" custom events up the component tree but general data-flow is top -> down
Scoped CSS out of the box
Bonus : unused selectors are not shipped to the browser !
Some basic templating logic for conditional rendering, looping over iterables in your html
Two-way data bindings on form elements
Built-in centralized store system
Limitations
(aka why don't we refactor all Keytrade web apps to Svelte)
Lack of maturity / stability
Small ecosystem
Sapper
Svelte Native
DSL aka templating language (disclaimer : I really like JSX)
Reactivity through assignments takes a little time to get your head around
e.g. array methods like .push() and .splice() won't automatically trigger updates !
Try it out !
An introduction to Svelte
By maelig
An introduction to Svelte
- 1,657