WordPress complet, optimisé par PHP et exécuté uniquement dans le navigateur avec WebAssembly
Lorsque vous voyez WordPress Playground pour la première fois, il semble être un site ordinaire, à l'exception peut-être de l'arrière-plan coloré. C'est tout sauf. En réalité, vous regardez une pile technologique WordPress complète, y compris PHP et une base de données, qui s'exécute directement dans votre navigateur.
Dans cet article, Adam Zieliński (responsable de WordPress Playground) et Thomas Nattestad (responsable produit pour V8) explorent les points suivants:
- En quoi WordPress Playground peut-il vous aider en tant que développeur WordPress ?
- Fonctionnement en arrière-plan
- Conséquences pour l'avenir de WordPress
Utilisez WordPress sans installation, intégrez-le à votre application et même contrôlez-le avec JavaScript.
Vous pouvez utiliser et personnaliser WordPress intégré sur playground.wordpress.net sans frais. Il n'y a pas d'infrastructure cloud ni d'assistance à payer, car ce site se trouve entièrement dans votre navigateur. Personne d'autre ne peut le consulter. Il est également temporaire. Dès que vous actualisez la page, elle disparaît. Vous pouvez utiliser autant de ces sites que vous le souhaitez pour créer des prototypes, tester 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 PHP et WordPress intégré:
WordPress Playground est une toute nouvelle façon d'utiliser WordPress. Cependant, vous ne pouvez exploiter tout son potentiel qu'en l'incluant dans votre application. Le moyen le plus simple est d'intégrer WordPress Playground dans un <iframe> et de le configurer à l'aide de l'API des paramètres de requête.
C'est ce que fait la présentation officielle. Lorsque vous sélectionnez, par exemple, le thème 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 est un moyen simple de commencer, mais il est également limité à l'option de configuration de base. Si vous avez besoin de 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 encore plus d'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. PHP WebAssembly 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 taille de bundle faible. Dans Node.js, vous pouvez vous appuyer sur @php-wasm/node, qui fournit davantage d'extensions PHP. Adam a utilisé la première pour ajouter des extraits PHP interactifs à ce tutoriel sur 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 ? Bonne question. Découvrons-le en détail. Attachez votre ceinture !
Sous le capot, vous trouverez WebAssembly PHP, un traducteur SQL et un serveur dans le navigateur.
PHP s'exécute en tant que binaire WebAssembly
PHP ne fonctionne pas simplement dans le navigateur sans configuration préalable. WordPress Playground a développé un pipeline dédié pour compiler l'interpréteur PHP en WebAssembly à l'aide d'Emscripten. La compilation de PHP standard n'est pas trop complexe. Il suffit d'ajuster une signature de fonction ici, de forcer une variable de configuration là-bas et d'appliquer quelques correctifs. Voici comment procéder:
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 standards ne sont pas très utiles dans le navigateur. En tant que logiciel serveur, PHP ne dispose pas d'API JavaScript pour transmettre le corps de la requête, importer des fichiers ni renseigner le flux php://stdin. WordPress Playground a dû en créer une à partir de zéro. Le binaire WebAssembly est fourni avec un module d'API PHP dédié écrit en C et 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 indique simplement au navigateur de télécharger, par exemple, php_7_3.wasm au lieu de php_8_2.wasm.
La base de données est compatible avec une couche de traduction SQL
WordPress nécessite MySQL. Toutefois, il n'existe pas de version WebAssembly de MySQL que vous pourriez 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 coulisses, le plug-in officiel SQLite Database Integration intercepte toutes les requêtes MySQL et les réécrit dans le dialecte SQLite. La version 2.0 inclut une nouvelle couche de traduction basée sur WordPress Playground qui permet à WordPress sur SQLite de réussir 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,déclenche une requête HTTP vers le backend distant pour récupérer la page blog. Toutefois, WordPress Playground ne dispose pas de backend à distance. Il dispose d'un service worker qui intercepte toutes les requêtes sortantes et les transmet à une instance PHP dans le navigateur exécutée dans un Web worker distinct.
La mise en réseau est compatible avec WebSockets.
En ce qui concerne la mise en réseau, les programmes WebAssembly sont limités à l'appel d'API JavaScript. Il s'agit d'une fonctionnalité de sécurité, mais elle présente également un défi. Comment prendre en charge le code 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 WebSocket vers un socket TCP, Asyncify et le correctif des éléments internes PHP profonds tels que php_select. C'est complexe, mais il y a une récompense. La compilation PHP ciblée Node.js peut demander des API Web, installer des packages Composer et même se connecter à un serveur MySQL.
WordPress peut être utilisé dans encore plus d'endroits que le navigateur
Étant donné que WordPress peut désormais s'exécuter sur WebAssembly, vous pouvez également l'exécuter sur un serveur Node.js. Il s'agit du même moteur V8. Bien entendu, avec StackBlitz, vous pouvez également exécuter Node.js directement dans le navigateur. Cela signifie que vous pouvez exécuter WordPress et PHP compilés en WebAssembly, exécutés dans Node.js, qui est également compilé en WebAssembly exécuté dans le navigateur. La popularité de WebAssembly explose également dans l'espace sans serveur, et à l'avenir, il pourrait également s'exécuter sur cette infrastructure.
Des applications WordPress sans configuration, interactives et collaboratives pourraient voir le jour
Imaginez passer directement dans un éditeur de code où vous pouvez commencer à créer immédiatement, une fois la configuration terminée. Vous pouvez même partager un simple lien et démarrer une session de modification multijoueur, par exemple dans Google Docs. Et lorsque vous avez terminé, il vous suffit d'un clic pour déployer facilement vos créations sur différents services d'hébergement, sans avoir à installer quoi que ce soit localement.
Et ce n'est qu'un aperçu ! Nous pourrons voir des tutoriels interactifs, des démonstrations de plug-ins en direct, des sites de préproduction, WordPress décentralisé sur des serveurs de 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. Consultez le dépôt GitHub, dites bonjour sur le canal Slack WordPress.org #meta-playground et n'hésitez pas à contacter Adam à l'adresse adam@adamziel.com.