22"
Introduction à SvelteKit
23 Avr. 2021
Matthieu 🐛
Des clients et des frameworks
Expériences professionnelles avec :
Vue
React + Material Kit
Vue + Vuetify
Nuxt
Projets persos développés avec :
Svelte
"Le site est lent à charger..."
Problèmes de performances
Lags sur page de recherche
Un hot reloading de 7s
Des clients et des frameworks
Comment rendre un client heureux ?
Component framework
App framework
✅
✅
✅
❌
❌
❌
Des clients et des frameworks
Comment rendre un développeur heureux ?
Component framework
App framework
✅
✅
✅
✅
❌
❌
Des clients et des frameworks
How to make everyone happy 🥳
Component framework
App framework
✅
❌
❌
❌
❌
❌
Pourquoi choisir Svelte-Kit ?
Satisfaction utilisateurs selon State of JS 2020
Pourquoi choisir Svelte-Kit ?
1. Syntaxe concise et agréable
• Les "for" et les "if" ne sont pas liés à des éléments HTML
• Pas besoin de key dans les boucles "for" (each)
• Boilerplate réduit (+20% de code avec Vue3)
• Code plus concis et lisible donc :
➤ moins de bugs 🐛
➤ du temps gagné ⏱️
• Demo live
Pourquoi choisir Svelte-Kit ?
1. Syntaxe concise et agréable
2. Parfaite intégration Typescript (comme React)
Pourquoi choisir Svelte-Kit ?
1. Syntaxe concise et agréable
2. Parfaite intégration Typescript (comme React)
3. Convient à tous les types de projets (app framework)
• Du blog statique le plus bidon...
• à l'application la plus énorme et la plus complexe.
Pourquoi choisir Svelte-Kit ?
1. Syntaxe concise et agréable
2. Parfaite intégration Typescript (comme React)
3. Convient à tous les types de projets (app framework)
4. SvelteKit est facile à apprendre
• Si on connaît Svelte, on connaît SvelteKit à 90%
Pourquoi choisir Svelte-Kit ?
1. Syntaxe concise et agréable
2. Parfaite intégration Typescript (comme React)
3. Convient à tous les types de projets (app framework)
4. SvelteKit est facile à apprendre
5. Une application pour toutes les plateformes !
• Grâce aux adapteurs
• Il suffit de changer d'adapteur pour changer de plateforme !
• Code once, deploy everywhere : Netlify, AWS, Render, Electron, Svelte Native, etc... 🤯
Pourquoi ne pas choisir Svelte-Kit ?
➤ Parce que je n'aime pas
➤ Parce que SvelteKit est moins connu que Vue ou React
• Smelte : material design UI kit
• Felte : pour gérer les formulaires
• Figsvelte : pour créer des plugins Figma avec Svelte
➤ Je ne comprends pas comment Svelte marche...
La "magie" de Svelte
Ou comment résoudre le problème de la réactivité
• transformation de toutes les propriétés en getters / setters
• utilisation de proxies
• hooks à la React avec "ref" et "reactive"
• réactivité manuelle avec "setState" et "getState"
• hooks avec "useState"
• le code Javascript est analysé et transformé 🧙
• wtf is this "$" thing???
La "magie" de Svelte
Ou comment résoudre le problème de la réactivité
• transformation de toutes les propriétés en getters / setters
• utilisation de proxies
• hooks à la React avec "ref" et "reactive"
• réactivité manuelle avec "setState" et "getState"
• hooks avec "useState"
• les assignements déclenchent un render
• les expressions qui suivent un label "$:" déclenchent un render quand l'expression change