NiortWeb - Svelte.

js
Le framework JavaScript amélioré cybernétiquement !

09/12/2020 via Jitsi

NiortWeb – Svelte.js
 Sommaire

1.1. Présentation
Présentation de Svelte
de Svelte
2. Avantages et inconvénients
3. Coder en Svelte
4. Démo
5. Le futur de Svelte
6. Aller plus loin
7. Conclusion

NiortWeb – Svelte.js ASI ® @ASI_Informatic 2

Présentation
Pourquoi Svelte ?

• Les frameworks habituels sont lourds

• Temps de chargement longs
• Temps d’exécution longs

• Virtual DOM = couche de traitement

supplémentaire

• Rich Harris a voulu tester « un compilateur

JS produisant du code de qualité »

NiortWeb – Svelte.js 3
Présentation
Histoire brève

• 16 novembre 2016 : 1° commit

• 20 novembre 2016 : première beta

• 26 novembre 2016 : 1° article de blog

présentant le concept

• 29 novembre 2016 : v1.0.0 stable

• Avril 2018 : v2.0.0 (gros nettoyage)

• Avril 2019 : v3.0.0 (refonte complète)

• Octobre 2020 : Svelte Summit 2020

NiortWeb – Svelte.js
Présentation
Chiffres clés

• Nombre de contributeurs : + de 350

• Nombre de projets commerciaux : 145

• Nombre de projets sur GitHub utilisant

Svelte : + de 30 800

• Nombre de forks : + de 1900

• Nombre de stars sur GitHub : + de 39600

• Nombre de téléchargements NPM

hebdomadaires : entre 25k et 110k

NiortWeb – Svelte.js
Présentation
Exemples de projets

Application Pomodoro (POC) H-Geo : application de cours REPL Svelte

Et d'autres ...

NiortWeb – Svelte.js 6
 Sommaire

1. Présentation de Svelte
2.2. Avantages
Avantages et inconvénients
et inconvénients
3. Coder en Svelte
4. Démo
5. Le futur de Svelte
6. Aller plus loin
7. Conclusion

NiortWeb – Svelte.js ASI ® @ASI_Informatic 7

Avantages
"HYPER VITESSE !"

• Rapidité d'exécution
• Compilation
• Pas de DOM virtuel

• Rapidité de chargement
• Application légère et sans superflu ⇒ poids réduit
au minimum
• Efficace pour une démarche d’éco-conception

NiortWeb – Svelte.js
Avantages
Mais aussi ...

• Composants plus maintenables et

réutilisables
• Regroupement de la vue et du style dans le code
du composant
• Code concis et facile à comprendre

• Limitation des effets de bord graphiques

• Isolation du style pour chaque composant

• Compatibilité ES2018

NiortWeb – Svelte.js
Inconvénients
"Houston, nous avons un problème"

• Syntaxe inhabituelle pour les fervents des

frameworks plus traditionnels

• Communauté moins importante que

Angular, React ou Vue

• Ecosystème dans ses débuts

• Portages mobile et serveur encore en cours

de développement (stade expérimental)

NiortWeb – Svelte.js
 Sommaire

1. Présentation de Svelte
2. Avantages et inconvénients
3.3. Coder
Coderenen Svelte
Svelte
4. Démo
5. Le futur de Svelte
6. Aller plus loin
7. Conclusion

NiortWeb – Svelte.js ASI ® @ASI_Informatic 11

Coder en Svelte
Architecture générale

• main.js : Bootstrap de l’application

• App.svelte : Conteneur principal de

l’application

• Dossier components : Composants

• Shared : Fichiers de configuration, services,

stores

• Dossier « public » : Fichiers compilés

NiortWeb – Svelte.js
Coder en Svelte
Syntaxe des composants

• Balise script
• Imports
• Logique du composant (JS)

•Balise style
Mise en forme du composant

•HTML
Structure en HTML classique
Composants Svelte
Variables et "Code Svelte" entre accollades

NiortWeb – Svelte.js
Coder en Svelte
Syntaxe des directives et blocs Svelte

• Directives
Evénements en on:
Binding de propriétés en bind:
Actions en use:
Animations en animate:
Et d'autres ...

• Blocs
Blocs de début en #
Blocs intermédiaires en :
Blocs de fin en /
Plusieurs fonctions
 Structure
 Conditions
 Spéciaux (debugging …) en @

NiortWeb – Svelte.js
Coder en Svelte
Stores et module contexts

• Stores
Partage de données partout dans l'application
Changements déclenchent l'émission d'un
Observable (programmation réactive)

• Module contexts
• Partage de code au sein d'un même module
fonctionnel

NiortWeb – Svelte.js
Coder en Svelte
Mais aussi

• Variables dérivées ($:)

• Cycle de vie (onMount, onDestroy …)

• Transitions de valeur

• Animations

NiortWeb – Svelte.js
 Sommaire

1. Présentation de Svelte
2. Avantages et inconvénients
3. Coder en Svelte
4.4. Démo
Démo
5. Le futur de Svelte
6. Aller plus loin
7. Conclusion

NiortWeb – Svelte.js ASI ® @ASI_Informatic 17

 Démo

NiortWeb – Svelte.js 18
 Sommaire

1. Présentation de Svelte
2. Avantages et inconvénients
3. Coder en Svelte
4. Démo

5.5. Le
Lefutur
futurde de Svelte
Svelte
6. Aller plus loin
7. Conclusion

NiortWeb – Svelte.js ASI ® @ASI_Informatic 19

Le futur de Svelte
Dans un avenir plus ou moins proche

• Accessibilité

• Internationalisation

• CLI type "create-react-app"

• Svelte Native

• WebGL

• SvelteKit

NiortWeb – Svelte.js
 Sommaire

1. Présentation de Svelte
2. Avantages et inconvénients
3. Coder en Svelte
4. Démo
5. Le futur de Svelte
6.6. Aller
Allerplus
plus
loinloin
7. Conclusion

NiortWeb – Svelte.js ASI ® @ASI_Informatic 21

Aller plus loin
Liens utiles #1 : Guides et généralités

• Conférence d'Alexis Jacomy au DevFest

Nantes 2019

• Mon article sur le sujet

• Blog officiel

NiortWeb – Svelte.js
Aller plus loin
Liens utiles #2 : Technique

• Awesome list

• Tutoriel officiel

• REPL

• Plugin ESLint

• Svelte Summit 2020

NiortWeb – Svelte.js
 Sommaire

1. Présentation de Svelte
2. Avantages et inconvénients
3. Coder en Svelte
4. Démo
5. Le futur de Svelte
6. Aller plus loin
7.7. Conclusion
Conclusion

NiortWeb – Svelte.js ASI ® @ASI_Informatic24

Conclusion
Parce qu'il faut bien une fin

• De plus en plus populaire

• Légèreté, simplicité et rapidité

MAIS

• Syntaxe inhabituelle

• Petite communauté

BREF

• Grand potentiel, à surveiller

NiortWeb – Svelte.js
 Merci pour votre attention !

Des questions ?

NiortWeb – Svelte.js 26