La version complète de WordPress, fournie par PHP, qui s'exécute uniquement dans le navigateur avec WebAssembly
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é:
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&plugin=coblocks.
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
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.