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

La version complète de WordPress, fournie par PHP, qui s'exécute uniquement dans le navigateur avec WebAssembly

Thomas Nattestad
Thomas Nattestad

Lorsque vous voyez WordPress Playground pour la première fois, comme un site ordinaire, peut-être à l'exception de l'arrière-plan coloré. C'est tout mais. Il s'agit en fait d'une pile technologique WordPress complète, y compris PHP et une base de données, directement dans votre navigateur.

Dans cet article, Adam Zieliński (responsable de WordPress Playground) et Thomas Nattestad (responsable produit pour V8) découvrez:

  • Comment WordPress Playground peut vous aider en tant que développeur WordPress
  • Fonctionnement en arrière-plan
  • Ce que cela signifie 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 le WordPress intégré à l'adresse playground.wordpress.net. Il y a vous n'avez pas à payer d'infrastructure cloud ni d'assistance, car ce site vit entièrement dans votre navigateur, et personne d'autre ne peut y accéder. C’est aussi temporaire. Dès que vous actualiser la page, il a disparu. Vous pouvez obtenir autant de sites que vous le souhaitez le prototypage, l'essai de plug-ins et l'exploration rapide d'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é:

phpinfo.

WordPress Playground est une toute nouvelle façon d'utiliser WordPress. Toute sa puissance, Cependant, elle n'est déverrouillée qu'en l'incluant dans votre application. La méthode la plus simple consiste à intégrer WordPress Playground dans un <iframe> et le configurer à l'aide de la classe API Query Parameters. C'est ce que la vitrine officielle . Lorsque vous sélectionnez, par exemple, Thème pendant et Le plug-in Coblocks, l'iFrame intégré est mis à jour pour pointer vers https://playground.wordpress.net/?theme=pendant&amp;plugin=coblocks.

Présentation de WordPress Playground.

L'iFrame est un moyen simple de commencer, mais il se limite aux seuls tags l'option de configuration de base. Si vous avez besoin de plus d'espace, il existe une autre solution, plus puissante.

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

Vous pouvez contrôler l'ensemble du site WordPress, y compris le système de fichiers et PHP, à l'aide de l'API complète disponible via npm @wp-playground/client d'un package. L'exemple suivant montre comment l'utiliser. Vérifiez le tutoriel interactif pour découvrir 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 WebAssembly PHP même sans WordPress

WordPress Playground n'est pas une application monolithique. Lancement de WebAssembly PHP indépendamment de WordPress. Vous pouvez également l'utiliser séparément. Pour le Web, vous pouvez utiliser la commande npm @php-wasm/web optimisé pour une faible taille de bundle. Avec Node.js, vous pouvez sur @php-wasm/node, qui fournit plus d'extensions PHP. Adam a utilisé le premier pour ajouter des extraits PHP interactifs à ce tutoriel WP_HTML_Tag_Processor. Voici un aperçu de la façon de l'utiliser:

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-t-il ? Bonne question. Entrons dans le vif du sujet pour le découvrir. 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 directement dans le navigateur. WordPress Playground a développé un pipeline dédié pour créer l'interpréteur PHP dans WebAssembly à l'aide d'Emscripten. Créer des versions PHP standards n'est pas trop complexe. ajuster la signature d'une fonction ici, en y forçant une variable de configuration, et en appliquant quelques petites correctifs. Voici comment vous pouvez la 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 serveur PHP ne dispose pas d'API JavaScript pour transmettre le corps de la requête, des fichiers, ou remplissez le flux php://stdin. WordPress Playground a dû créer en partant de zéro. Le binaire WebAssembly est fourni avec module d'API PHP dédié écrites en C et une classe PHP JavaScript qui expose des méthodes telles que writeFile() ou run().

Chaque version de PHP étant un simple fichier .wasm statique, la version PHP c'est en fait assez ennuyeux. Il indique simplement au navigateur de télécharger, par 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 pourriez exécuter dans le navigateur. WordPress Playground intègre donc PHP avec pilote SQLite natif s'appuie sur SQLite.

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

En coulisses, la chaîne officielle Intégration de bases de données SQLite intercepte toutes les requêtes MySQL et les réécrit dans le dialecte SQLite. La version 2.0 lancement de vaisseaux 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 une interface WordPress standard, le fait de cliquer sur un lien, par exemple Blog,déclenche au backend distant pour récupérer la page blog. Toutefois, WordPress Playground n'a pas de backend distant. Il comporte une Service worker qui intercepte toutes les requêtes sortantes et les transmet à une interface PHP s'exécutant dans un bucket Nœud de calcul Web

Schéma de flux commençant par un iFrame pointant vers la ressource wp-admin, les appels vers lesquels le service worker est intercepté, affichés dans le thread du nœud de calcul, puis traduits en réponse WordPress par le serveur intégré au navigateur.

La mise en réseau est compatible avec WebSockets.

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

Pour WordPress Playground, la réponse implique un proxy de socket vers WebSocket vers TCP. Asyncify et l'application de correctifs Informations internes PHP comme php_select C'est complexe, mais il y a une récompense. La 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é dans davantage d'endroits que le navigateur

Étant donné que WordPress peut désormais s'exécuter sur WebAssembly, vous pouvez également l'exécuter dans un Node.js C'est le même moteur V8 ! Bien sûr, avec StackBlitz, vous pouvez aussi exécuter Node.js directement dans le navigateur, ce qui signifie que vous pouvez exécuter WordPress et PHP compilé dans WebAssembly, s'exécutant en Node.js, qui est également compilé WebAssembly en cours d'exécution dans votre navigateur. WebAssembly connaît également une popularité grandissante dans le domaine des solutions sans serveur. à l'avenir, cela pourrait également fonctionner sur cette infrastructure.

À l'avenir, les applications WordPress interactives, collaboratives et sans installation

Imaginez-vous entrer directement dans un éditeur de code où vous êtes libre de bâtiment, une fois la configuration terminée. Vous pouvez même partager un lien simple et démarrer une session d'édition multijoueur, comme dans Google Docs. Et une fois l'opération terminée, un seul clic suffit pour déployer vers différents services d'hébergement, sans avoir à 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, un WordPress décentralisé sur des serveurs en périphérie plug-ins sur votre téléphone.

L'avenir est passionnant et vous pouvez y participer ! Vos idées et contributions sont l'oxygène de WordPress Playground. Rendez-vous sur dépôt GitHub, salut dans le #meta-playground chaîne Slack WordPress.org. pour contacter Adam à l'adresse adam@adamziel.com.