Svelte
is it time to jump on the hypetrain?
Konrad Trzciński
Stackoverflow most loved web framework 2022
State of JS 2021
Why do we need hype?
Ecosystem!
What exactly is Svelte?
Frontend
component framework
| function component() { |
| const p = document.createElement('p'); |
| return p; |
| } |
| function component() { |
| const p = document.createElement('p'); |
| let toggled = false; |
| p.textContent = `State is ${toggled ? 'ON' : 'OFF'}`; |
| return p; |
| } |
| function component() { |
| const p = document.createElement('p'); |
| let toggled = false; |
| p.textContent = `State is ${toggled ? 'ON' : 'OFF'}`; |
| p.addEventListener('click', () => { |
| toggled = !toggled; |
| p.textContent = `State is ${toggled ? 'ON' : 'OFF'}`; |
| }); |
| return p; |
| } |
| function component() { |
| const [toggled, setToggled] = useState(false); |
| const handleClick = () => setToggled(prev => !prev); |
| return ( |
| <p onClick={handleClick}> |
| State is {toggled ? 'ON' : 'OFF'} |
| </p> |
| ); |
| } |
| function component() { |
| const [toggled, setToggled] = useState(false); |
| const handleClick = () => setToggled(prev => !prev); |
| return ( |
| <p onClick={handleClick}> |
| State is <strong>{toggled ? 'ON' : 'OFF'}</strong> |
| </p> |
| ); |
| } |
| function component() { |
| const p = document.createElement('p'); |
| let toggled = false; |
| p.textContent = `State is ${toggled ? 'ON' : 'OFF'}`; |
| p.addEventListener('click', () => { |
| toggled = !toggled; |
| p.textContent = `State is ${toggled ? 'ON' : 'OFF'}`; |
| }); |
| return p; |
| } |
| function component() { |
| const p = document.createElement('p'); |
| let toggled = false; |
| const strong = document.createElement('strong'); |
| strong.textContent = toggled ? 'ON' : 'OFF'; |
| p.addEventListener('click', () => { |
| toggled = !toggled; |
| p.textContent = `State is ${toggled ? 'ON' : 'OFF'}`; |
| }); |
| return p; |
| } |
| function component() { |
| const p = document.createElement('p'); |
| let toggled = false; |
| const strong = document.createElement('strong'); |
| strong.textContent = toggled ? 'ON' : 'OFF'; |
| p.append( |
| document.createTextNode('State is '), |
| strong |
| ); |
| p.addEventListener('click', () => { |
| toggled = !toggled; |
| strong.textContent = toggled ? 'ON' : 'OFF'; |
| }); |
| return p; |
| } |
| function component() { |
| const p = document.createElement('p'); |
| let toggled = false; |
| const strong = document.createElement('strong'); |
| strong.textContent = toggled ? 'ON' : 'OFF'; |
| p.append( |
| document.createTextNode('State is '), |
| strong |
| ); |
| p.addEventListener('click', () => { |
| toggled = !toggled; |
| strong.textContent = toggled ? 'ON' : 'OFF'; |
| }); |
| return p; |
| } |
| function component() { |
| const [toggled, setToggled] = useState(false); |
| const handleClick = () => setToggled(prev => !prev); |
| return ( |
| <p onClick={handleClick}> |
| State is <strong>{toggled ? 'ON' : 'OFF'}</strong> |
| </p> |
| ); |
| } |
function component() {
const p = document.createElement("p");
let toggled = false;
p.textContent = `State is ${toggled ? "ON" : "OFF"}`;
p.addEventListener("click", () => {
toggled = !toggled;
p.textContent = `State is ${toggled ? "ON" : "OFF"}`;
});
return p;
}
function App() {
const [toggled, setToggled] = React.useState(false);
const handleClick = () => setToggled(prev => !prev);
return (
<p onClick={handleClick}>
State is {toggled ? 'ON' : 'OFF'}
</p>
);
}
<script>
let toggled = false;
const handleClick = () => (toggled = !toggled);
</script>
<p on:click={handleClick}>
State is {toggled ? "ON" : "OFF"}
</p>
The
magical
disappearing framework
Svelte has shallow learning
curve
Close to native JS with little to no API =
less boilerplate
Passing props
| <Component {name} {options} /> |
| return ( |
| <Component name={name} options={options} /> |
| ); |
Using state
| let name = ''; |
| const updateState = (value) => name = value; |
| const [name, setName] = useState(''); |
| const updateState = (value) => setName(value); |
Two way binding
| <script> |
| let name = ''; |
| </script> |
| <input bind:value={name} type="text" /> |
| const [name, setName] = useState(''); |
| const handleChange = (e) => setName(e.target.value); |
| return ( |
| <input value={name} onChange={handleChange} type="text" /> |
| ); |
Reactive values
| <script> |
| let name = ''; |
| $: greeting = expensiveGreetingGeneration(name); |
| </script> |
| <input bind:value={name} type="text" /> |
| <p>{greeting}</p> |
| const [name, setName] = useState(false); |
| const handleChange = (e) => setName(e.target.value); |
| const greeting = React.useMemo( |
| () => compicatedGreetingGeneration(name), |
| [name] |
| ); |
| return ( |
| <> |
| <input value={name} onChange={handleChange} type="text" /> |
| <p>{greeting}</p> |
| </> |
| ); |
Around 40% less code generated
vs
React
Industry Average: "about
15 - 50 errors per 1000 lines of delivered code."
Microsoft Applications: "about
10 - 20 defects per 1000 lines of code during
in-house testing
No hard to grasp concepts for beginners
Harder to introduce performance issues
Svelte was written with
performance in mind
Internal state management through
stores
No need to introduce tools like
redux
import { writable } from 'svelte/store';
export const count = writable(0);
<script>
import { count } from './stores.js';
const increment = () => $count += 1;
</script>
<p>{$count}</p>
<button on:click={increment}>Increment</button>
Drawbacks
-
Young age
-
Quite barebones
-
Shipping size might get bigger in large applications
Summary
- Great DX
- Better performance
-
Ease to introduce less experienced developers
-
Worth considering especially in smaller projects
Thank you for your attention!