Vollständiges WordPress-Betriebssystem, das mit WebAssembly ausschließlich im Browser ausgeführt wird
Wenn Sie WordPress Playground zum ersten Mal aufrufen, wirkt es wie eine gewöhnliche Website – vielleicht nur aufgrund des farbenfrohen Hintergrunds. Es ist alles andere. Sie sehen nun einen ganzen WordPress-Technologie-Stack, einschließlich PHP und einer Datenbank, der direkt in Ihrem Browser ausgeführt wird.
In diesem Beitrag befassen sich Adam Zieliński (Leiter von WordPress Playground) und Thomas Nattestad (Product Manager für V8) mit folgenden Themen:
- So kann WordPress Playground euch als WordPress-Entwickler unterstützen.
- So funktionierts:
- Was es für die Zukunft von WordPress bedeutet
Verwenden Sie WordPress ohne Installation, betten Sie es in Ihre App ein und steuern Sie es sogar mit JavaScript
Sie können das unter playground.wordpress.net eingebettete WordPress-Plug-in kostenlos verwenden und anpassen. Es fallen keine Kosten für Cloud-Infrastruktur und Support an, da sich diese Website vollständig in Ihrem Browser befindet und niemand sonst auf sie zugreifen kann. Es ist auch temporär. Sobald Sie die Seite aktualisieren, ist sie verschwunden. Sie können so viele dieser Websites erstellen, wie Sie möchten, um Prototypen zu erstellen, Plug-ins auszuprobieren und schnell Ideen zu entwickeln.
Sie können sie sogar verwenden, um Ihren Code mithilfe des integrierten PHP- und WordPress-Versionswechsels in verschiedenen Umgebungen zu testen:
WordPress Playground ist eine völlig neue Art, WordPress zu nutzen. Die volle Leistung lässt sich jedoch erst nutzen, wenn Sie das Tool in Ihre App einbinden. Am einfachsten ist es, WordPress Playground in ein <iframe> einzubetten und es mit der Abfrageparameters-API zu konfigurieren.
Genau das macht der offizielle Showcase. Wenn Sie beispielsweise das Anhängerdesign und das Coblocks-Plug-in auswählen, wird der eingebettete iFrame so aktualisiert, dass er auf https://playground.wordpress.net/?theme=pendant&plugin=coblocks verweist.
Der iFrame ist ein einfacher Einstieg, ist aber auch auf die Option für die grundlegende Konfiguration beschränkt. Wenn Sie mehr benötigen, gibt es eine andere, leistungsstärkere API.
Der JavaScript-Client für WordPress Playground ermöglicht die vollständige Kontrolle über die eingebettete Website.
Sie können die gesamte WordPress-Website, einschließlich Dateisystem und PHP, mit der vollständigen API steuern, die über das npm-Paket @wp-playground/client verfügbar ist. Das folgende Beispiel zeigt die Verwendung. Weitere Beispiele finden Sie in der interaktiven Anleitung:
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);
WebAssembly PHP auch ohne WordPress verwenden
WordPress Playground ist keine monolithische Anwendung. WebAssembly PHP wird unabhängig von WordPress veröffentlicht und kann auch separat verwendet werden. Für das Web können Sie das npm-Paket @php-wasm/web verwenden, das für eine geringe Bundle-Größe optimiert ist. In Node.js können Sie auf @php-wasm/node zurückgreifen, das weitere PHP-Erweiterungen bietet. Adam hat Ersteres verwendet, um dieser WP_HTML_Tag_Processor-Anleitung interaktive PHP-Snippets hinzuzufügen. Hier ein kleiner Vorgeschmack auf die Verwendung:
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
Jetzt müssen Sie sich fragen: Wie funktioniert das überhaupt? Gute Frage. Sehen wir uns das Innere an und finden wir es heraus. Schnall dich an!
Im Hintergrund sind WebAssembly PHP, ein SQL-Übersetzer und ein Browser-Server integriert.
PHP wird als WebAssembly-Binärprogramm ausgeführt
PHP funktioniert nicht standardmäßig im Browser. WordPress Playground hat eine dedizierte Pipeline entwickelt, um den PHP-Interpreter mithilfe von Emscripten für WebAssembly zu erstellen. Das Erstellen einer einfachen PHP-Version ist nicht allzu komplex. Sie müssen nur hier eine Funktionssignatur anpassen, hier eine Konfigurationsvariable erzwingen und ein paar kleine Patches anwenden. Gehen Sie dazu so vor:
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
Einfache PHP-Builds sind im Browser nicht sehr nützlich. Als Serversoftware hat PHP keine JavaScript API, um den Anfragetext zu übergeben, Dateien hochzuladen oder den php://stdin-Stream auszufüllen. musste WordPress Playground
von Grund auf neu erstellen. Die WebAssembly-Binärdatei enthält ein dediziertes PHP API-Modul, das in C geschrieben ist, und eine JavaScript-PHP-Klasse, die Methoden wie writeFile() oder run() zur Verfügung stellt.
Da jede PHP-Version nur eine statische .wasm-Datei ist, ist der PHP-Versionswechsler eigentlich ziemlich langweilig. Der Browser wird lediglich aufgefordert, php_7_3.wasm anstelle von php_8_2.wasm herunterzuladen.
Datenbank wird mit einer SQL-Übersetzungsebene unterstützt
WordPress erfordert MySQL. Es gibt jedoch keine WebAssembly-Version von MySQL, die Sie im Browser ausführen können. WordPress Playground enthält daher PHP mit dem nativen SQLite-Treiber und nutzt SQLite.
Aber wie kann WordPress in einer anderen Datenbank ausgeführt werden?
Im Hintergrund fängt das offizielle Plug-in SQLite Database Integration alle MySQL-Abfragen ab und schreibt sie im SQLite-Dialekt um. Version 2.0 enthält eine neue, von WordPress Playground informierte Übersetzungsebene, mit der WordPress auf SQLite 99% der Testsuite für WordPress-Einheiten besteht.
Der Webserver befindet sich im Browser.
In einem normalen WordPress wird durch Klicken auf einen Link wie Blog eine HTTP-Anfrage an das Remote-Back-End ausgelöst, um die Seite blog abzurufen. WordPress Playground hat jedoch kein Remote-Back-End. Es hat einen Service Worker, der alle ausgehenden Anfragen abfängt und an eine browserinterne PHP-Instanz übergibt, die in einem separaten Web Worker ausgeführt wird.
Netzwerke werden über WebSockets unterstützt
Im Hinblick auf Netzwerke sind WebAssembly-Programme auf den Aufruf von JavaScript APIs beschränkt. Es ist eine Sicherheitsfunktion, die aber auch eine Herausforderung darstellt. Wie wird der von PHP verwendete synchrone Low-Level-Netzwerkcode mit den in JavaScript verfügbaren übergeordneten asynchronen APIs unterstützt?
Bei WordPress Playground umfasst die Antwort einen WebSocket-zu-TCP-Socket-Proxy, Asyncify und das Patchen von Deep-PHP-Interna wie php_select. Es ist komplex, aber dafür gibt es eine Belohnung. Der auf Node.js ausgerichtete PHP-Build kann Web-APIs anfordern, Composer-Pakete installieren und sogar eine Verbindung zu einem MySQL-Server herstellen.
WordPress kann an noch mehr Stellen als der Browser verwendet werden
Da WordPress jetzt auf WebAssembly ausgeführt werden kann, kann es auch auf einem Node.js-Server ausgeführt werden – es ist dieselbe V8-Engine. Natürlich können Sie Node.js mit StackBlitz auch direkt im Browser ausführen. Das bedeutet, dass Sie WordPress und PHP ausführen können, die in WebAssembly kompiliert sind, und dann in Node.js ausführen, das wiederum zu WebAssembly kompiliert wird, die im Browser ausgeführt wird. Auch im serverlosen Bereich ist WebAssembly immer beliebter geworden. In Zukunft könnte es auch auf dieser Infrastruktur ausgeführt werden.
WordPress-Apps für die Zukunft bieten möglicherweise interaktive und kollaborative WordPress-Apps ohne Einrichtung
Stellen Sie sich vor, Sie gelangen direkt zu einem Code-Editor, in dem Sie sofort mit dem Erstellen beginnen können, nachdem die gesamte Einrichtung abgeschlossen ist. Sie können sogar einen einfachen Link teilen und eine Bearbeitungssitzung im Mehrspielermodus starten, z. B. in Google Docs. Und wenn Sie fertig sind, können Sie Ihre Kreationen mit nur einem Klick nahtlos bei einer Vielzahl von Hosting-Diensten bereitstellen – ohne lokal irgendetwas installieren zu müssen.
Und das ist nur ein kleiner Einblick! Dabei kann es sich um interaktive Tutorials, Live-Plug-in-Demos, Staging-Websites, dezentralisiertes WordPress auf Edge-Servern und sogar zum Erstellen von Plug-ins auf Ihrem Smartphone handeln.
Die Zukunft ist spannend und Sie können ein Teil davon sein! Ihre Ideen und Beiträge sind der WordPress Playground. Besuchen Sie das GitHub-Repository, berichten Sie über den Slack-Kanal von WordPress.org über #meta-playground und kontaktieren Sie Adam unter adam@adamziel.com.