Pourquoi les librairies JS ?

La problématique

Synchroniser le DOM et l'état

Pourquoi autant de framework ?

React, VueJS, Svelte, Angular, Preact, Solid...

Un problème mais plusieurs solutions

Gestion de l'état

React, Preact

Utilisation d'un setter

          const [count, setCount] = useState(3);

          const increment = () => {
            setCount(v => v + 1);
          }
          const reset = () => {
            setCount(0);
          }
        

Angular, Preact, Solid, VueJS

Utilisation de signaux / observable

          const count = signal(0);

          const increment = () => {
            count.update(v => v + 1)
          }
          const reset = () => {
            count.set(0)
          }
          console.log("La valeur : " + count())
        

Svelte

Ajoute la détection à la compilation

          let count = 0;

          const increment = () => {
            count++
          }
        

Réactivité (muter le DOM)

VirtualDOM

React, Preact, VueJS

            <div class="alert alert-info">Bonjour les gens</div>
          

              h('div', {className: 'alert alert-info', children: 'Bonjour les gens'})
        

Muter le DOM

Svelte, Angular, SolidJS

p: function update(ctx, [dirty]) {
    if (dirty & /*count*/ 1) set_data(t1, /*count*/ ctx[0]);

    if (/*count*/ ctx[0] >= 10) {
        if (if_block) {

        } else {
            if_block = create_if_block(ctx);
            if_block.c();
            if_block.m(if_block_anchor.parentNode, if_block_anchor);
        }
    } else if (if_block) {
        if_block.d(1);
        if_block = null;
    }
},
        

Comment choisir ?

On peut en connaitre plusieurs

• Facile à prendre en main
• Concepts sont similaires

Cas d'utilisation

Framework ou librairie ?

Taux d'utilisation

• Apprentissage
• Écosystème
• Emploi

Préférences personnelles

Pour comparer : component-party.dev

À vous de jouer