Apprendre en construisant soi-même le fonctionnement des frameworks JavaScript modernes

 (nolanlawson.com)
26 points par GN⁺ 2023-12-04 | 1 commentaires | Partager sur WhatsApp

Comprendre le fonctionnement des frameworks JavaScript modernes

  • Construire son propre framework JavaScript aide à apprendre.
  • Les « frameworks JavaScript modernes » désignent les frameworks apparus après React.
  • Ces frameworks ont été inspirés par React, mais ont évolué dans des directions similaires.

Caractéristiques des frameworks modernes

  • Utilisation de la réactivité (reactivity) pour mettre à jour le DOM.
  • Utilisation du clonage de templates (cloning templates) pour le rendu du DOM.
  • Utilisation d’API web modernes comme <template> et Proxy.

Réactivité (Reactivity)

  • On mentionne souvent que React n’est pas réactif.
  • Les frameworks modernes privilégient les performances en utilisant un modèle réactif basé sur le push.
  • Avec Proxy, ils sont implémentés de façon à mettre à jour le DOM à chaque changement d’état.

Clonage d’arbres DOM (Cloning DOM trees)

  • Utiliser la balise <template> pour parser le HTML une seule fois puis cloner rapidement l’ensemble est une technique efficace.
  • Cette méthode est utilisée dans divers frameworks JavaScript.

API JavaScript modernes

  • <template> et Proxy sont des API qui aident à construire un système de réactivité.
  • Les tagged template literals permettent de simplifier l’API de templates HTML.

Étapes de construction de la réactivité

  • La réactivité, qui définit la gestion de l’état et la mise à jour du DOM lors des changements d’état, constitue la base du framework.
  • Proxy sert à détecter les changements d’état, et queueMicrotask permet de gérer efficacement les mises à jour.

Étapes de rendu du DOM

  • La fonction html sert à construire l’arbre DOM et à le mettre à jour efficacement.
  • Les tagged template literals sont utilisés pour écrire des templates HTML, et WeakMap sert à optimiser le parsing du HTML.

Combiner réactivité et rendu du DOM

  • createEffect permet de mettre à jour le DOM en fonction de l’état.
  • L’implémentation permet de mettre automatiquement à jour le texte lorsque l’état change.

Étapes suivantes

  • Il existe plusieurs façons d’améliorer le système de rendu du DOM.
  • L’objectif est de parser les templates une seule fois et de configurer les bindings une seule fois afin de minimiser les mises à jour.

Avis de GN⁺

L’essentiel de cet article est de comprendre les concepts clés des frameworks JavaScript modernes et leur mise en œuvre, puis d’apprendre en vivant l’expérience de créer son propre framework. Cette approche peut offrir aux ingénieurs logiciels débutants une occasion intéressante et utile de comprendre le fonctionnement interne des frameworks et de l’appliquer concrètement.

À lire aussi

1 commentaires

 
GN⁺ 2023-12-04
Avis Hacker News

  • Recommande les ressources suivantes pour acquérir une compréhension de base de ce sujet intéressant :

  • Explications sur certaines idées reçues à propos de React et sur son fonctionnement réel :

    • Lors d’une mise à jour d’état, React ne reconstruit pas tout l’arbre du DOM virtuel, mais seulement le composant concerné et ses enfants.
    • useMemo n’empêche pas les rerenders ; c’est React.memo qui joue ce rôle.
    • React n’est pas « push-only » parce qu’il met les mises à jour en tampon.
    • L’avantage des signaux (signals) est que le framework sait quelles propriétés du DOM doivent être rerendues, mais cela ne signifie pas pour autant qu’il s’agisse de réactivité.

  • Évaluation positive de Svelte et cas d’usage :

    • Le compilateur Svelte est très extensible et peut traiter les templates Svelte d’une manière particulière.
    • Partage d’une expérience de construction de Svekyll (un clone de l’outil de blog statique Jekyll) avec Svelte.

  • Divers points de vue sur les frameworks réactifs :

    • Fournit des ressources d’introduction aux frameworks réactifs comme Solid.
    • Partage d’une expérience d’écriture d’un renderer/framework web pour comprendre la réactivité de solid-js.
    • Recommande des ressources pédagogiques pour implémenter React soi-même.

  • Questions et discussions sur la réactivité de React :

    • Question sur les moyens de rendre React « réactif ».
    • Avis selon lequel il faudrait éviter de créer davantage de frameworks JS.

  • Question adressée aux personnes ayant une grande expérience des frameworks frontend :

    • Question sur l’existence de frameworks/bibliothèques prenant en charge un effect system pour les tâches de rendu.