Lancement du site web VanillaJSX.com

Exemples de Vanilla JSX

Et si JSX renvoyait des éléments DOM ?

• La fonction ClickMe crée un bouton et affiche le nombre de clics
• Le texte est mis à jour à chaque clic sur le bouton

export default function ClickMe() {
  let i = 0;
  const el = <button>Click me</button> as HTMLButtonElement;
  el.onclick = (e) => {
    el.textContent = `Clicked ${++i} times`;
  };
  return el;
}

Réutilisabilité

• Le composant ClickMe peut être utilisé plusieurs fois, chaque instance conservant son propre état

import ClickMe from "./sample1.js";
export default () => <>
  <p><ClickMe /></p>
  <p><ClickMe /></p>
  <p><ClickMe /></p>
</>;

Création d’un arbre DOM interactif

• Les classes TodoInput et TodoList permettent de gérer une liste de tâches
• Il est possible d’ajouter des éléments et de les supprimer par clic

function TodoInput(attrs: { add: (v: string) => void }) {
  const input = <input /> as HTMLInputElement;
  input.placeholder = 'Add todo item...';
  input.onkeydown = (e) => {
    if (e.key === 'Enter') {
      attrs.add(input.value);
      input.value = '';
    }
  };
  return input;
}

class TodoList {
  ul = <ul class='todolist' /> as HTMLUListElement;
  add(v: string) {
    const item = <li>{v}</li> as HTMLLIElement;
    item.onclick = () => item.remove();
    this.ul.append(item);
  }
}

export default () => {
  const list = new TodoList();
  list.add('foo');
  list.add('bar');
  return <>
    <TodoInput add={(v) => list.add(v)} />
    {list.ul}
  </>;
};

Traitement de grandes quantités de données

• La fonction FindNames traite et filtre un grand volume de données pour afficher les résultats
• Les éléments correspondants sont mis à jour en temps réel selon la valeur saisie

import { data } from "../fetch-dataset.js";
export default function FindNames() {
  const status = <p style='margin:1em 0' /> as HTMLParagraphElement;
  const results = <ul /> as HTMLUListElement;
  const input = <input value='eri(c|k)a?' autocomplete='new-password' oninput={updateMatches} /> as HTMLInputElement;
  updateMatches();

  function updateMatches() {
    const matched = (data.entries().filter(([k]) => k.match(input.value)).toArray());
    const matches = (Iterator.from(matched).map(match => <Item regex={input.value} match={match} />).take(30));
    results.replaceChildren(...matches);
    status.textContent = `${matched.length} / ${data.size}`;
  }

  return <div class='sample4'>
    {input}
    {status}
    {results}
  </div>;
}

function Item(attrs: { match: [string, number], regex: string }) {
  const [name, count] = attrs.match;
  const total = <small style='color:#fff3'>({count})</small>;
  return <li>
    <span innerHTML={highlight(name, attrs.regex)} /> {total}
  </li>;
}

function highlight(str: string, regex: string) {
  if (!regex) return str;
  const r = new RegExp(`(${regex})`, 'gi');
  return str.replace(r, '<span class="match">$1</span>');
}

Présentation d’imlib

• imlib est une bibliothèque développée pour immaculatalibrary.com
• Elle a été utilisée pour construire minigamemaker.com ainsi que le site web que vous êtes en train de lire
• Elle a été créée parce que les solutions existantes ne suffisaient pas, et c’est la méthode préférée de l’auteur pour créer des applications

Résumé de GN⁺

• Cet article explique comment créer directement des éléments DOM et interagir avec eux à l’aide de JSX
• Il présente une manière de traiter efficacement de grands volumes de données sans utiliser de DOM virtuel
• La bibliothèque imlib permet de développer des applications de façon simple et intuitive
• D’autres projets aux fonctionnalités similaires incluent React et Vue.js

[GN⁺]

Avis Hacker News

• Merci de vous intéresser au projet

  • J’ai lancé ce projet parce que j’étais insatisfait de l’état des SSG depuis 10 ans
  • Je crée principalement des sites web statiques et je voulais quelque chose de simple et intuitif
  • JSX semblait adapté, mais j’étais lassé par la complexité des frameworks JSX comme React
  • J’ai créé un SSG qui rend JSX en chaînes de caractères, puis je l’ai étendu pour le rendre en éléments DOM dans le navigateur
  • Cela fonctionne bien avec des composants partagés dans certaines mises en page
  • Cela fonctionne aussi bien pour le SEO
  • Le support IDE n’est pas parfait

• Si l’on renvoie de vrais nœuds DOM, on perd un gros avantage de JSX

  • Il faut renvoyer une description du DOM pour pouvoir réévaluer le template avec un nouvel état et le mettre à jour efficacement
  • L’exemple effectue les mises à jour avec l’API DOM impérative
  • Le principal avantage du VDOM est de répéter des éléments dans les templates
  • Le problème du VDOM, c’est la lenteur du diffing

• L’origine de JSX remonte à XHP de Facebook

  • XHP s’inspirait de E4X

• L’exemple final ne fonctionne pas dans Firefox

  • Cela fonctionne dans Edge, mais une erreur se produit dans Firefox

• Très similaire à Vanilla TSX

  • Un exemple d’application écrite avec Vanilla TSX est fourni

• Cela fait penser à Action Script 3

  • XML était au cœur du langage, et c’était amusant, mais ce n’est pas devenu ES4
  • Il a fallu plus de 10 ans pour atteindre un niveau similaire avec Typescript et JSX

• Les exemples ne montrent pas de composants avec des props susceptibles de changer au fil du temps

  • Il semble que ce sera difficile à étendre à des applications plus complexes

• J’ai moi aussi créé une bibliothèque UI basée sur des expressions de template jsx qui génèrent de vrais nœuds DOM

  • J’associe des objets de modèle aux propriétés pour supprimer le boilerplate des gestionnaires d’événements impératifs
  • Je pense que c’est une bonne idée

• Je ne comprends pas l’attrait de JSX

  • D’autres méthodes qui fournissent automatiquement les boucles, l’insertion de variables, etc., sont plus simples

• Je recommande Imba

  • J’ai l’impression que ce n’est pas populaire parce que les développeurs JS se laissent facilement séduire par le marketing des Faang