Sans utiliser les frameworks et les librairies modernes, la tâche la plus difficile en JavaScript est de synchroniser l'état et le DOM.

• Robustesse: que faire quand l'HTML change?
• Encapsulation: comment être sûr que quelqu'un ne détruit pas quelque chose d'essentiel quelque part d'autre?
• Réusabilité: et si on voulait réutiliser certains éléments de l'interface?

En 2013, la librairie React (Facebook) introduit l'architecture des composants.

En des termes plus pratiques, pensez à une balise HTML qui implémenterait du HTML, du CSS et du JavaScript.

Actuellement, les principaux frameworks sont

• React (Meta)
• Angular (Google)
• Vue

En employant des critères tels que

• L'écosystème développé par les auteurs et la communauté
• La "simplicité"
• JSX, SFC ou templates?
• Performance
• Compatibilité avec les outils
• Intégration avec le backend
• etc.

La plupart des concepts introduits par les frameworks sont les mêmes. Nous les introduiserons par Svelte. La spécificité est de fournir une DX similaire à React avec plus de performance car on n'emploie pas de Virtual DOM.

Auteur

Rich Harris

Première version

Novembre 2016

Version courante

4.1.2

License

MIT

Langage

JavaScript

Svelte a une syntaxe plus concise que React, et nous permettra de nous concentrer sur les concepts.

Svelte utilise le principe d'un composant par fichier (SFC), comme Vue.js. Imaginons que le fichier Counter.svelte contienne le code suivant:

Vous pourrez réutiliser ce composant de la manière suivante:

Parfois vous voulez utiliser deux instances différentes du même composant.

En Svelte: avec le mot clé export

Dans Svelte, on peut employer {#if ...}, {:else if ...}, {:else} et {/if} pour le rendu conditionnel.

Lorsque l'on travaille avec des formulaires, il est nécéssaire de pouvoir lier une variable et la valeur d'un champ de texte. En svelte, ça se fait via la directive bind:value.

Dans Svelte, une assignation réactive est préfixée par $:. De telles quantités sont recalculées à chaque changement d'une dépendance.

Les arrays et les objets sont passés par référence. Une analogie utile serait de remarquer qu'on désigne parfois une maison par son adresse.

• Changer la maison ne signifie pas forcément changer d'adresse.
  En particulier, Svelte ne réagira pas à de tels changements.
  Show transpiled code

• Composant $\approx$ nouvelle balise HTML qui contient du HTML, CSS et JavaScript, dont le but est de représenter un élément d'UI.
• L'utilisation de composants permet la réutilisation, l'encapsulation et la composition.
• Les composants sont créés de manière déclarative, un framework JavaScript (tel que React ou Svelte) s'occupe de gérer les mutations.
• Les composants ont énormément amélioré l'expérience développeur (DX), ce qui a mené à une amélioration de l'UX.