Sortie de JSX Alternative HTM 3.0, avec mise en cache statique des sous-arbres et prise en charge de TypeScript – Bien choisir son serveur d impression

La bibliothèque Hyperscript Tagged Markup (HTM), qui propose une alternative de moins de 1 Ko sans transpilateur à JSX, a publié sa troisième itération majeure. HTM 3.0 optimise désormais le rendu des modèles en détectant et en mettant automatiquement en cache les sections statiques d'un modèle. HTM 3.0 fournit également des fichiers de frappe TypeScript et contient des mises à jour de la documentation.

HTM 3.0 peut désormais détecter et mettre en cache des nœuds statiques. Un nœud est considéré comme statique par HTM s'il n'a pas de parties dynamiques; cela se produit lorsque le nœud ou les enfants du nœud ne dépendent d'aucune valeur transmise via la chaîne de modèle. La note de publication fournit l'exemple suivant:

html`
 <div>
   <p classe="une">
     
     
     
     C'est un <em>statique</em>    sous-arbre.
   </p>
   <p classe="b">
     
     
     
     C'est $ "not".
   </p>
 </div>



"

Dans cet exemple, le sous-arbre enraciné dans

est considéré comme statique par HTM, tandis que le sous-arbre enraciné à

n'est pas. La note de version explique:

Lorsque le modèle est évalué pour la première fois, HTM met en cache le

sous-arbre créé par le het réutilise cette valeur lors des évaluations ultérieures.

La mise en cache statique des sous-arbres permet aux bibliothèques d'interface utilisateur d'ignorer le rendu des nœuds référentiellement égaux, ce qui peut augmenter les performances de rendu. Jason Miller, HTM et mainteneur de Preact, fait allusion sur Twitter à certains gains de performances également lors du rendu du serveur:

Cela réduira la consommation de mémoire et le temps de rendu pour les sous-arbres statiques, comme sur le client.

La différence dans les performances de rendu peut être observée à partir de la démo suivante:

La démo montre que le rendu initial prend beaucoup plus de temps que les suivants. Bien que des optimisations similaires puissent exister pour des bibliothèques d'interface utilisateur spécifiques, HTM 3 les active pour toute bibliothèque (comme React, Preact ou lit-html) qui expose une fonction hyperscript h de la forme (type, accessoires, ... enfants) => X. En fait, HTM 3 peut être utilisé avec la technique de rendu bare-bones consistant à mettre à jour innerHTML.

Joachim Viide a commenté sur Twitter:

La mise en cache de HTM est similaire à https://babeljs.io/docs/en/babel-plugin-transform-react-constant-elements…, bien qu'un peu moins intelligent mais entièrement réalisé au moment de l'exécution. Dans les deux cas (React + plugin et React + HTM), les objets de noeud VDOM statiques sont recyclés entre les rendus, et React peut utiliser ces informations («old_vnode === new_vnode») pour court-circuiter la différence.

HTM est également livré avec un ensemble optimisé prédéfini de HTM avec Preact. Le bundle optimisé pour le nouveau HTM 3.0 est désormais livré avec la version Preact X, qui comprend des crochets. HTM 3 ajoute également des fichiers de saisie pour HTM et les mises à jour de la documentation.

La version précédente HTM 2 a apporté des améliorations de taille et de vitesse, a permis le rendu du serveur et a adopté une syntaxe plus proche de JSX. Avec la mise en cache statique des sous-arbres, HTM 3 reste léger avec une taille de bundle d'environ 700 octets.

Les développeurs peuvent utiliser HTM partout où ils peuvent utiliser JSX. HTM est disponible sous la licence open source Apache 2.0. Diverses démos et exemples sont disponibles dans le projet HTM GitHub. Des contributions et des commentaires peuvent également être fournis via le projet HTM GitHub.