Utilisation de WebAssembly avec React

WebAssembly est l’une des technologies les plus récentes pour le développement Web avec de nouvelles fonctionnalités prometteuses en matière de performances. Voici un aperçu de la manière dont nous pourrions lentement intégrer la nouvelle technologie à une application React existante

WebAssembly est l’une des dernières technologies en développement Web. Il vous permet d'exécuter du code créé dans d'autres langages – une fonctionnalité dont vous pouvez tirer parti sans une réécriture majeure, car nous pouvons l'incorporer aux bases de code existantes. Comme le moyen le plus simple d’adopter une nouvelle technologie consiste à l’intégrer lentement à une base de code existante, nous allons utiliser une application React construite avec create-react-app et ajouter des bibliothèques WebAssembly qui ont été construits à Rust. Il est assez courant que plusieurs équipes travaillent sur une application React (frontend + backend), et je ne peux penser à une expérience plus cool que de partager du code sans partager de langue.

Le code source de cet article est disponible. sur GitHub: react-wasm-migration et react-wasm-rust-library .

Application de travail React initiale

J'ai commencé à créer une application React à l'aide du passe-partout.

 npx créer-réagir-application réagir-wasm-migration 

Dès sa création, créer-réagir-application ne prendra pas en charge WebAssembly. Nous devons apporter quelques modifications à la configuration Webpack sous-jacente qui alimente l'application. Malheureusement, create-react-app n'expose pas le fichier de configuration webpack. Nous devrons donc intégrer certaines dépendances de développeurs pour aider. react-app-rewired va nous permettre de modifier le Webpack sans éjecter, et wasm-load l'aidera à gérer WebAssembly.

Fil:

 le fil ajouté réagit wasm-loader --dev 

npm:

 npm installer react-app-rewired wasm-loader -D 

Une fois que cela est fait, vous devriez avoir une application entièrement fonctionnelle, et nous pouvons sauter faites quelques modifications à notre pack Web.

Modification de Webpack pour prendre en charge WebAssembly

Nous devons ajouter un fichier config-overrides.js à la racine de notre application. Ce fichier nous permettra d’apporter des modifications à notre fichier webpack sans le réécrire.

 const path = require ('path');

module.exports = function override (config, env) {
  const wasmExtensionRegExp = /.wasm$/;

  config.resolve.extensions.push ('. wasm');

  config.module.rules.forEach (règle => {
    (rule.oneOf || []). forEach (oneOf => {
      if (oneOf.loader && oneOf.loader.indexOf ('chargeur de fichiers')> = 0) {
        // fait que le chargeur de fichiers ignore les fichiers WASM
        oneOf.exclude.push (wasmExtensionRegExp);
      }
    });
  });

  // ajouter un chargeur dédié pour WASM
  config.module.rules.push ({
    test: wasmExtensionRegExp,
    include: path.resolve (__ dirname, 'src'),
    utiliser: [{ loader: require.resolve('wasm-loader'), options: {} }]
  });

  retour config;

Le fichier ci-dessus a été valorisé par les personnes de Wasm Loader GitHub Issues qui travaillaient dans le même but, qui consistait à intégrer WebAssembly à une application de création de réaction (19659017). Si vous lancez yarn start vous n'utiliserez pas les modifications de configuration de WebPack, car nous devons modifier les scripts de package. Nous devons apporter quelques modifications à package.json afin de tirer parti des modifications que nous venons de faire.

Old:

 "scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "test de réact-scripts"
} 

Nouveau:

 "scripts": {
  "start": "react-app-rewired start",
  "build": "la construction de react-app-rewired",
  "test": "test de réact-app-rewired"
} 

Si vous exécutez yarn start vous devriez voir la même page initiale pour une application de création-réaction. Après chaque étape, vous devriez avoir une application opérationnelle.

Y compris WebAssembly

Il existe plusieurs guides sur la création de WebAssembly dans la langue de votre choix, nous allons donc passer sous silence cette création dans cet article. J'ai attaché un lien au référentiel que j'ai utilisé pour créer le fichier .wasm que nous allons utiliser pour cette application. Vous pouvez le vérifier avec quelques détails sur la façon dont je l'ai créé dans de la bibliothèque de réaction-wasm-rouille .

À ce stade, notre application React peut prendre en charge WebAssembly – il suffit de l'inclure dans l'application. J'ai copié mon ensemble WebAssembly dans un nouveau dossier appelé "external" au niveau racine.

Pour WebAssembly, nous avons ajouté hello add . ] et sub fonctions. Hello prend une chaîne et retourne Hello, . Ajouter prendra deux nombres et retournera leur somme. La sous- prendra deux numéros et retournera leur différence.

Ensuite, il nous faut ajouter notre Wasm à notre package.json et l'installer à l'aide du yarn install - force ou npm install .

 dépendances: {
  "external": "fichier: ./ external"
} 

Ce n'est pas standard – nous sautons en fait l'étape où nous publions le package WebAssembly sur npm et l'installons comme toute autre dépendance de nœud. Pour la production, vous souhaitez publier votre package WebAssembly sur un npm privé ou public et l'installer à l'aide de Yarn ou de npm.

Relier tous les points

Nous avons tout en place pour prendre en charge WebAssembly; Webpack a été modifié pour prendre en charge WebAssembly et nous avons inclus notre package WebAssembly dans notre application. La dernière étape consiste à commencer à utiliser le code.

WebAssembly doit être chargé de manière asynchrone, nous devons donc l'inclure à l'aide de l'instruction import figurant dans App.js :

 composantDidMount () {
  this.loadWasm ();
}

loadWasm = async () => {
  essayer {
    const wasm = wait import ('external');
    this.setState ({wasm});
  } catch (err) {
    console.error (`Erreur inattendue dans loadWasm. [Message: ${err.message}]`);
  }

Cela nous donnera accès à WebAssembly sous le nom this.state.wasm . Ensuite, nous devons utiliser notre bibliothèque.

 render () {
  const {wasm = {}} = this.state;
  revenir (
    

      

        
        
 Edit  src / App.js  et enregistrez pour recharger. 
         En savoir plus Réagir 
      

        
 Nom:  this.setState ({name: e.target.value} )} /> 
        
 {wasm.hello && wasm.hello (this.state.name)} 
      
      

        

           Ajouter:
           this.setState ({addNum1: e.target.value})} />
           this.setState ({addNum2: e.target.value})} />
        
        

          Résultat:
          {wasm.add && wasm.add (this.state.addNum1 || 0, this.state.addNum2 || 0)}
        
      
      

        

           Sous:
           this.setState ({subNum1: e.target.value})} />
           this.setState ({subNum2: e.target.value})} />
        
        

          Résultat:
          {wasms && wasms (this.state.snNum1 || 0, this.state.snNum2 || 0)}
        
      
    
  
); 

À ce stade, vous pouvez démarrer le fil et commencer à interagir avec votre WebAssembly.

Way

Vous pouvez voir à quel point cela peut changer radicalement la situation dans des endroits où vos équipes travaillent dans différentes langues mais doivent collaborer sur des livrables communs, car vous pouvez partager du code au lieu de contrats. Cependant, il est certain que vous devez faire attention à certains anti-modèles au début de votre aventure WebAssembly.

Vous voudrez que vos bibliothèques soient petites, car elles ne peuvent pas être groupées avec le reste de votre code. Si vous constatez que vous créez un énorme WebAssembly, il est peut-être temps de le décomposer en éléments plus petits.

Vous ne devriez pas WebAssembly. Si vous savez que le code est uniquement frontal et qu'il n'y a aucune raison de le partager, il peut être plus facile de l'écrire en JavaScript et de le conserver jusqu'à ce que vous puissiez vérifier que WebAssembly le rendra plus rapide.

Nous espérons que l'ajout de WebAssembly sera utile. votre projet React est à portée de main après la lecture de cet article.

---