Introduction à la mitose : le transformateur réactif universel

Mitosis.js est un outil de compilation qui utilise une syntaxe de composant universelle et génère un code spécifique au framework. Cela signifie que vous pouvez écrire une fois la fonctionnalité de l’application et la générer pour React, Svelte ou Angular, entre autres. Ce qui distingue Mitosis des autres frameworks de compilation est son approche de compilation “écrire une fois, exécuter n’importe où”. Mitosis est une prouesse d’ingénierie impressionnante, et il a des applications partout où vous avez besoin d’abstraire les frameworks frontaux en composants enfichables.

L’avantage caché de Mitosis est sa révélation des aspects communs et de l’unité dans les frameworks JavaScript frontaux. Il s’agit d’un nouveau modèle qui pourrait apporter des informations inattendues et de nouvelles orientations pour le développement futur de JavaScript.

Qu’est-ce que Mitosis.js ?

Mitosis est un projet des gens de Constructeur.ioqui a également développé des projets d’étirement d’enveloppe comme le Qwik.js cadre et Ville de fête. Builder est lui-même un bon exemple du type d’application qui bénéficie de Mitosis. En bref, Builder vous permet de concevoir visuellement des dispositions d’interface utilisateur dans diverses implémentations de framework sous-jacentes. Il a besoin d’un langage commun pour traiter et produire ces divers cadres, et ce langage est la mitose.

Au moment d’écrire ces lignes, Mitosis prend en charge les frameworks JavaScript frontaux suivants :

Mitosis prend également en charge la sortie en HTML simple et a Qwik.js sur la feuille de route. En outre, Mitosis est le pont de traduction utilisé par Builder entre l’outil de conception tiers Figma. C’est-à-dire que la couche d’abstraction est utile pour prendre la sortie de conception et la transformer dans le cadre cible souhaité.

Mitosis est syntaxiquement un sous-ensemble de JSX, ou JavaScript XML. Cela a du sens pour plusieurs raisons. JSX est la syntaxe de React, le framework JavaScript le plus courant et le plus influent. De plus, en fin de compte, JSX est une assez bonne distillation des éléments d’un descripteur d’interface utilisateur réactif. Plus précisément, Mitosis utilise une variante JSX inspirée de celle utilisée dans Solid.js.

La liste 1 est un exemple simple qui montre quelques conventions de la variante JSX de Mitosis.

Liste 1. Sortie de liste de base dans Mitosis (TypeScript)

import  useStore  from '@builder.io/mitosis';

type Props = 
  writer: string;
;

export default function SongList(props: Props) 
  const state = useStore(
    songs: [
       title: "Strawberry Fields", writer: "John Lennon" ,
       title: "Penny Lane", writer: "Paul McCartney" ,
       title: "Dark Horse", writer: "George Harrison" ,
       title: "It don't come Easy", writer: "Ringo Starr" 
    ],
  );
  return (
    <div>
      <For each=state.songs>(song, index) => <div>song.title</div></For>
    </div>
  );

Le listing 1 prend une liste d’objets (songs) et génère une propriété à partir de chacun (song.title). Il y a peu de choses à noter dans cet échantillon. Tout d’abord, le fichier exporte une fonction par défaut. Par conséquent, il définit un composant fonctionnel. Mitosis transformera ce composant en la bonne structure pour son cadre cible.

Ensuite, notez que le composant utilise un crochet, useStore. Ce crochet fonctionne de manière analogue à celui trouvé dans React. Le code utilise ensuite l’état pour itérer sur les chansons avec un <For> composant. L’itération sur les collections est l’un de ces domaines de diversité dans les cadres et le <For> offre un moyen simple et unifié de l’exprimer.

Respectez également le traitement standard des propriétés des composants, via les props argument à la fonction (avec sa définition de type TypeScript associée de Props).

Exécutez le compilateur

Pour faire passer ce composant par le compilateur Mitosis (ou, à proprement parler, transpiler), nous pouvons mettre en place un simple projet Node Package Manager (NPM). Pour commencer, lancez un projet (npm init), puis installez les bibliothèques Mitosis en saisissant

npm install @builder.io/mitosis-cli @builder.io/mitosis

Le compilateur Mitosis trouvera automatiquement les fichiers que nous voulons compiler en fonction d’un mitosis.config.js dossier. Nous utiliserons le plus simple présenté dans le Listing 2.

Liste 2. Mitosis.config.js

module.exports = 
  files: 'src/**',
  targets: ['vue3', 'solid', 'svelte', 'react', 'angular'],
;

Le listing 2 indique où se trouvent les sources (src/**) et quels frameworks de sortie utiliser.

Notre composant est en TypeScript, nous aurons donc besoin d’un simple tsconfig.json fichier, ainsi :

Liste 3. tsconfig.js

  "compilerOptions": 
    "jsx": "preserve",
    "jsxImportSource": "@builder.io/mitosis"
  

Le listing 3 indique l’interface de ligne de commande TypeScript (tsc-cli) comment gérer le JSX qu’il rencontre. Dans ce cas, il laisse la syntaxe telle quelle (preserve) et définit le module à utiliser pour l’import (@builder.io/mitosis). Voir le Présentation de JSX et exemple de code dans la documentation TypeScript pour plus de détails.

Mitose avec React

Nous sommes maintenant prêts à obtenir une sortie. Courir npm exec mitosis build. Cela déposera les fichiers dans le output/ répertoire, une branche pour chaque framework cible. Jetons un coup d’œil au /output/react/src/components/Songs.jsx version, qui ressemblera à quelque chose comme Listing 4.

Listing 4. Version réactive de Songs.jsx

import * as React from "react";
import  useState  from "react";
function SongList(props) 
  const [songs, setSongs] = useState(() => [
    
      title: "Strawberry Fields",  writer: "John Lennon"
    ,
    
      title: "Penny Lane",  writer: "Paul McCartney"
    ,
    
      title: "Dark Horse",  writer: "George Harrison"
    ,
    
      title: "It don't come Easy",  writer: "Ringo Starr"
    
  ]);
  return /* @__PURE__ */ React.createElement("div", null, songs == null ? void 0 : songs.map((song, index) => /* @__PURE__ */ React.createElement("div", null, song.title)));

export 
  SongList as default
;

Ainsi, nous pouvons voir que Mitosis est passé à l’utilisation de l’implémentation React de useState et a choisi d’utiliser React.createElement pour définir le div et song.map() pour parcourir la collection. Il exporte le composant en tant que module par défaut. Cela ressemble à React valide jusqu’à présent, mais vérifions-le.

Nous pouvons aller dans un autre répertoire et faire tourner un create-react-app très vite (voir le Créer une page d’application React pour plus de détails), puis rendez-vous dans le nouveau répertoire qui vient d’être créé. Dans le /src répertoire, nous allons copier sur le output/react/src/components/Songs.jsx fichier de notre projet Mitosis. Nous ouvrons App.jsx et importez le nouveau composant en ajoutant import “./Songs.jsx” comme Songspuis allez dans le balisage du modèle et utilisez le composant quelque part avec <Songs />.

Maintenant, nous pouvons exécuter l’application avec npm start. Vérifiez la sortie à localhost:3000 et vous verrez la liste des noms de chansons sur la page.

Agréable. Nous savons maintenant que Mitosis travaille avec React. Dans une situation réelle, nous pourrions facilement créer un pipeline pour ajouter Mitosis à notre processus de construction.

Mitose avec Svelte

Utilisons un raccourci rapide pour voir comment Mitosis fonctionne avec Svelte. Copiez le contenu de /output/svelte/src/components/Songs.svelte (remarquant que Mitosis a donné l’extension appropriée au fichier). Allez à la Cour de récréation svelte et collez la source dans le panneau de code de gauche. Après un moment, vous verrez la liste des chansons sur le côté droit de l’écran.

La mitose génère une Svelte correcte. Si vous êtes curieux, le Listing 5 montre l’itération idiomatique de Svelte pour le <For> composant.

Listing 5. Itérateur de chanson dans Svelte

#each songs as song, index
  <div>song.title</div>
/each
And Vue, Angular, SolidJS

Vous pouvez suivre des étapes similaires pour vérifier l’exactitude de chacune des autres cibles de sortie.

Configuration et plugins

La mitose est censée être assez flexible. En particulier, le Aire de jeux Mitose démontre la possibilité de modifier une configuration pour sélectionner non seulement des frameworks différents, mais également des caractéristiques différentes en leur sein. Par exemple, vous pouvez choisir un fournisseur d’état dans React, en choisissant entre useState, Mobx et Solid. Vous pouvez également sélectionner différentes solutions de style, telles que Emotion CSS, Styled Components et Styled JSX.

Mitosis prend également en charge la possibilité de définir des plugins qui exécutent du code arbitraire à des moments stratégiques, comme avant et après la génération de la structure de données JSON sous-jacente.

Consommer du code cadre

Vous vous demandez peut-être s’il est possible de faire basculer la fonctionnalité de Mitosis de la production à la consommation de code cadre. Par exemple, pourrions-nous prendre une interface utilisateur définie dans une implémentation de framework et l’analyser dans le modèle Mitosis JSON ? Cela nous permettrait non seulement de traduire dans les deux sens entre Mitosis et un framework, mais également de traduire entre différents frameworks via le modèle Mitosis.

J’ai demandé au fondateur de Builder.io, Steve Sewell, si Mitosis pouvait comprendre le code du framework. Voici ce qu’il a dit :

[Framework parsing] est certainement la plus grande demande que nous recevons. À l’heure actuelle, la plupart des frameworks sont un peu trop libres (pas assez de contraintes) pour le faire de manière fiable. Cela dit, Svelte est le meilleur candidat pour cela, sur lequel on travaille activement, nous l’appelons sveltosis.

Conclusion

La mitose est actuellement encore en version bêta. Cela étant dit, il a plus de 6 000 étoiles sur GitHub et est utilisé activement sur Builder.io. La chose la plus intéressante à propos de Mitosis est peut-être qu’elle décrit une interface utilisateur réactive en tant que JSON. Il représente de manière déclarative dans les données la fonctionnalité complexe au cœur des frameworks front-end, qui fournit une base pour développer un modèle universel de frameworks de développement front-end. L’approche inter-framework de Mitosis pour la compilation JavaScript indique la possibilité de méta-frameworks et de plates-formes que les développeurs pourraient utiliser pour composer des applications à un niveau d’abstraction plus élevé.