Créez des expériences WordPress dans le navigateur avec WordPress Playground et WebAssembly

La version complète de WordPress, basée sur PHP, exécutée uniquement dans le navigateur avec WebAssembly

Adam Zieliński

Thomas Nattestad

Lorsque vous voyez pour la première fois WordPress Playground, il semble qu'il s'agisse d'un site ordinaire, à l'exception de son arrière-plan coloré. Il n'y a rien, sauf. Il s'agit en réalité d'une pile technologique WordPress complète, y compris PHP et une base de données, qui s'exécutent directement dans votre navigateur.

Dans cet article, Adam Zieliński (responsable de WordPress Playground) et Thomas Nattestad (responsable produit pour V8) abordent les sujets suivants:

• Découvrez comment WordPress Playground peut vous aider en tant que développeur WordPress.
• Fonctionnement détaillé
• Qu'est-ce que cela implique pour l'avenir de WordPress ?

Utilisez WordPress sans l'installer, intégrez-le à votre application et contrôlez-le avec JavaScript

Vous pouvez utiliser et personnaliser sans frais le WordPress intégré à playground.wordpress.net. Vous n'avez aucune infrastructure cloud ni aucune assistance à payer, car ce site vit entièrement dans votre navigateur : personne d'autre ne peut le consulter. C’est aussi temporaire. Dès que vous actualisez la page, elle disparaît. Vous pouvez obtenir autant de sites que vous le souhaitez pour créer des prototypes, essayer des plug-ins et explorer rapidement des idées.

Vous pouvez même les utiliser pour tester votre code dans différents environnements à l'aide du sélecteur de version intégré de PHP et de WordPress:

WordPress Playground est une toute nouvelle façon d'utiliser WordPress. Toutefois, sa pleine puissance n'est déverrouillée qu'en l'incluant dans votre application. Le moyen le plus simple consiste à intégrer WordPress Playground dans un <iframe> et à le configurer à l'aide de l'API des paramètres de requête. C'est le rôle de la présentation officielle. Lorsque vous sélectionnez, par exemple, le thème du pendant et le plug-in Coblocks, l'iFrame intégré est mis à jour pour pointer vers https://playground.wordpress.net/?theme=pendant&plugin=coblocks.

L'iFrame permet de démarrer facilement, mais se limite également à l'option de configuration de base. S'il vous en faut plus, il existe une autre API plus puissante.

Le client JavaScript WordPress Playground offre un contrôle total sur le site intégré

Vous pouvez contrôler l'intégralité du site WordPress, y compris le système de fichiers et PHP, à l'aide de l'API complète disponible via le package npm @wp-playground/client. L'exemple suivant montre comment l'utiliser. Consultez le tutoriel interactif pour obtenir d'autres exemples:

import {
  connectPlayground,
  login,
  connectPlayground,
} from '@wp-playground/client';

const client = await connectPlayground(
  document.getElementById('wp'), // An iframe
  { loadRemote: 'https://playground.wordpress.net/remote.html' },
);
await client.isReady();

// Login the user as admin and go to the post editor:
await login(client, 'admin', 'password');
await client.goTo('/wp-admin/post-new.php');

// Run arbitrary PHP code:
await client.run({ code: '<?php echo "Hi!"; ?>' });

// Install a plugin:
const plugin = await fetchZipFile();
await installPlugin(client, plugin);

Utiliser PHP WebAssembly même sans WordPress

WordPress Playground n'est pas un monolithe. WebAssembly PHP est publié indépendamment de WordPress et vous pouvez également l'utiliser séparément. Pour le Web, vous pouvez utiliser le package npm @php-wasm/web, optimisé pour une faible taille de groupe. En Node.js, vous pouvez vous appuyer sur @php-wasm/node, qui fournit plus d'extensions PHP. Adam a utilisé les anciens pour ajouter des extraits PHP interactifs à ce tutoriel WP_HTML_Tag_Processor. Voici un aperçu de son utilisation:

import { PHP } from '@php-wasm/web';
const php = await PHP.load('8.0', {
  requestHandler: {
    documentRoot: '/www',
  },
});

// Create and run a script directly
php.mkdirTree('/www');
php.writeFile('/www/index.php', `<?php echo "Hello " . $_POST['name']; ?>`);
php.run({ scriptPath: '/www/index.php' });

// Or use the familiar HTTP concepts:
const response = php.request({
  method: 'POST',
  relativeUrl: '/index.php',
  data: { name: 'John' },
});
console.log(response.text); // Hello John

À ce stade, vous devez vous demander comment cela fonctionne, Excellente question. Intéressons-nous de plus près aux composants internes. Attachez votre ceinture !

En arrière-plan, il y a WebAssembly PHP, un traducteur SQL et un serveur intégré au navigateur

PHP s'exécute en tant que binaire WebAssembly

PHP ne fonctionne pas seulement dans le navigateur par défaut. WordPress Playground a développé un pipeline dédié pour créer l'interpréteur PHP pour WebAssembly à l'aide d'Emscripten. Créer un langage PHP standard n'est pas trop complexe. Il suffit d'ajuster la signature d'une fonction ici, d'y forcer une variable de configuration et d'appliquer quelques petits correctifs. Voici comment vous pouvez le créer vous-même:

git clone https://github.com/WordPress/wordpress-playground
cd wordpress-playground && npm install
# Below, you can replace "8.2" with any other valid PHP version number.
npm run recompile:php:web:8.2

Cependant, les builds PHP vanilla ne sont pas très utiles dans le navigateur. En tant que logiciel serveur, PHP ne dispose pas d'une API JavaScript pour transmettre le corps de la requête, importer des fichiers ou remplir le flux php://stdin. WordPress Playground a dû en créer un à partir de zéro. Le binaire WebAssembly est fourni avec un module d'API PHP dédié écrit en C, ainsi qu'une classe PHP JavaScript qui expose des méthodes telles que writeFile() ou run().

Étant donné que chaque version de PHP n'est qu'un fichier .wasm statique, le sélecteur de version PHP est en fait assez ennuyeux. Il demande simplement au navigateur de télécharger, par exemple, php_7_3.wasm au lieu de php_8_2.wasm, par exemple.

La base de données est compatible avec une couche de traduction SQL

WordPress nécessite MySQL. Cependant, il n'existe pas de version WebAssembly de MySQL que vous pouvez exécuter dans le navigateur. WordPress Playground fournit donc PHP avec le pilote SQLite natif et s'appuie sur SQLite.

Mais comment WordPress peut-il s'exécuter sur une autre base de données ?

En arrière-plan, le plug-in officiel d'intégration de bases de données SQLite intercepte toutes les requêtes MySQL et les réécrit en dialecte SQLite. La version 2.0 intègre une nouvelle couche de traduction basée sur WordPress Playground, qui permet à WordPress sur SQLite de passer 99% de la suite de tests unitaires WordPress.

Le serveur Web se trouve dans le navigateur

Dans un WordPress standard, cliquer sur un lien, par exemple Blog,lance une requête HTTP au backend distant pour récupérer la page blog. Toutefois, WordPress Playground n'a pas de backend distant. Il dispose d'un Service Worker qui intercepte toutes les requêtes sortantes et les transmet à une instance PHP intégrée au navigateur, qui s'exécute dans un Web Worker distinct.

Mise en réseau possible via WebSockets

En matière de mise en réseau, les programmes WebAssembly se limitent à appeler des API JavaScript. Il s'agit d'une fonction de sécurité, mais elle représente également un défi. Comment prenez-vous en charge le code de mise en réseau synchrone de bas niveau utilisé par PHP avec les API asynchrones de haut niveau disponibles en JavaScript ?

Pour WordPress Playground, la réponse implique un proxy de socket WebSocket vers TCP, Asyncify, et l'application de correctifs aux éléments internes PHP profonds tels que php_select. C'est complexe, mais il y a une récompense. La version PHP ciblée sur Node.js peut demander des API Web, installer des packages Composer et même se connecter à un serveur MySQL.

WordPress peut être utilisé à bien d'autres endroits qu'avec le navigateur.

Puisque WordPress peut désormais s'exécuter sur WebAssembly, vous pouvez également l'exécuter sur un serveur Node.js, car il s'agit du même moteur V8. Bien entendu, avec StackBlitz, vous pouvez également exécuter Node.js directement dans le navigateur, ce qui signifie que vous pouvez exécuter WordPress et PHP compilé sur WebAssembly, en Node.js, qui est également compilé pour WebAssembly exécuté dans le navigateur. WebAssembly gagne également en popularité dans le domaine des solutions sans serveur. À l'avenir, elle pourrait également fonctionner sur cette infrastructure.

L'avenir pourrait aboutir à des applications WordPress sans configuration, interactives et collaboratives.

Imaginez que vous passiez directement dans un éditeur de code où vous êtes libre de créer immédiatement des applications, une fois la configuration terminée. Vous pouvez même partager un simple lien et démarrer une session d'édition multijoueur, comme dans Google Docs. Lorsque vous avez terminé, il vous suffit d'un clic pour déployer vos créations sur divers services d'hébergement, sans jamais installer quoi que ce soit en local.

Et ce n’est qu’un aperçu ! Nous pouvons voir des tutoriels interactifs, des démonstrations de plug-ins en direct, des sites de préproduction, des sites WordPress décentralisés sur des serveurs en périphérie et même la création de plug-ins sur votre téléphone.

L'avenir est passionnant, et vous pouvez en faire partie ! Vos idées et contributions sont l'oxygène de WordPress Playground. Accédez au dépôt GitHub, dites bonjour sur la chaîne Slack WordPress.org sur #meta-playground, et n'hésitez pas à contacter Adam à l'adresse [e-mail].