⚙ Introduction to Svelte
French software engineer building a new life in Japan. My journey here is a big challenge—from learning the language to navigating the tech scene. I use this blog as a space to share what I'm learning, both in tech and in life.
Svelte
- It's a recent frontend framework
- There is a compilator notion
- It's a light framework cause there is no virtual-DOM
- pure JavaScript and support TypeScript since 2020
- You can see errors during compilation and few others at runtime
- Easy to learn
- Good growth, maybe in top3 in 2021
How it works
Reminder about React
compontent > browser JS engine > virtual DOM node > check the difference before and after DOM and updated virtualDOM > update DOM
Svelte
component > compiler > ideal JS that surgically updates DOM
compilator make Svelte lighter and faster
Tools
- GitHub svelte template
- Rollup version
- Webpack version
- Plugin svelte pour intelliJ et VS Code
- Extension chrome svelte (version > 3.12.0)
REPEL (interpreteur) / playground svelte.dev/repl
Command
Install
npx degit sveltejs/template my-svelte-project
cd my-svelte-project/
npm install
yarn dev
Others
script npm run dev et build (prod with public directory)
Example
fichier svelte = composant export let => param du compo declare l'event on:click vide sur le compo et redefinir l'event dans le composant appelant
beforeUpdate onMount(async () => ( afterupdate destroy
reactive declaration link des properties reactive statement => watch en vuejs
style is component scoped
{@html variable} to display markdown but it's not injection proof
$:observable
Can be read and updated like a local variable to exchange global variable between compo
Attribut Dynamique
<img src={src}>
similaire
<img {src}>
Conditions
Block await
Events
Modifiers
Binding
bi-directional data exchange
