Die vollständige WordPress-Version basierend auf PHP, die mit WebAssembly ausschließlich im Browser ausgeführt wird
Wenn Sie WordPress Playground zum ersten Mal sehen, wie eine gewöhnliche Website – vielleicht abgesehen vom farbigen Hintergrund. Alles ist möglich aber. Sie sehen einen kompletten WordPress-Technologie-Stack, einschließlich PHP und einer Datenbank, die direkt in Ihrem Browser ausgeführt werden.
In diesem Beitrag sind Adam Zieliński (Leiter von WordPress Playground) und Thomas Nattestad (Produktmanager für V8) Explore:
- Hier erfahren Sie, wie WordPress Playground Sie als WordPress-Entwickler unterstützen kann.
- Funktionsweise im Hintergrund
- Was bedeutet das für die Zukunft von WordPress?
WordPress ohne Installation nutzen, in Apps einbetten und sogar mit JavaScript steuern
Sie können die unter playground.wordpress.net kostenlos herunterladen. Es gibt Es gibt keine Cloud-Infrastruktur und keinen Support, für den man zahlen muss, da die Website ausschließlich in Ihrem Browser angezeigt wird. Es ist außerdem temporär. Sobald Sie aktualisiere die Seite, da ist sie nicht mehr da. Sie können beliebig viele dieser Websites für Prototyping, Ausprobieren von Plug-ins und schnelles Entwickeln von Ideen.
Sie können sie sogar verwenden, um Ihren Code mit der Methode integrierten Versionswechsler für PHP und WordPress:
WordPress Playground ist eine völlig neue Art, WordPress zu verwenden. Seine volle Leistung,
wird jedoch nur entsperrt, indem Sie es in Ihre App aufnehmen. Der einfachste Weg ist,
WordPress Playground in einem <iframe> und konfiguriere es mithilfe der
Abfrageparameter API verwenden.
Das ist die offizielle Präsentation
macht. Wenn Sie beispielsweise das Feld
Anhängerdesign und die
Coblocks-Plug-in, der eingebettete iFrame
so aktualisiert, dass sie auf
https://playground.wordpress.net/?theme=pendant&plugin=coblocks.
Der iFrame erleichtert den Einstieg, ist aber auch auf Basiskonfigurationsoption auswählen. Wenn Sie mehr brauchen, gibt es noch eine weitere, leistungsstarke API nutzen.
Der JavaScript-Client von WordPress Playground ermöglicht die vollständige Kontrolle über die eingebettete Website.
Sie können die gesamte WordPress-Website einschließlich Dateisystem und PHP unter Verwendung der vollständigen API, die über die @wp-playground/client npm Paket. Im folgenden Beispiel sehen Sie, wie Sie sie verwenden – prüfen Sie die interaktive Anleitung finden Sie weitere Beispiele:
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 kein Monolith. WebAssembly PHP wird veröffentlicht unabhängig von WordPress und können auch separat verwendet werden. Im Web Sie können das npm von @php-wasm/web verwenden ist für eine geringe Bundle-Größe optimiert und in Node.js können Sie unter @php-wasm/node mit einer weitere PHP-Erweiterungen. Adam hat mit Ersterem interaktive PHP-Snippets hinzugefügt. dieser WP_HTML_Tag_Processor-Anleitung. 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
An diesem Punkt müssen Sie sich Gedanken darüber machen, wie das funktioniert. Gute Frage. Sehen wir uns das Ganze einmal genauer an. Anschnallen!
Hinter den Kulissen gibt es WebAssembly PHP, einen SQL-Übersetzer und einen browserinternen Server
PHP wird als WebAssembly-Binärprogramm ausgeführt
PHP funktioniert nicht einfach standardmäßig im Browser. WordPress Playground entwickelt: dedizierte Pipeline den PHP-Interpreter in WebAssembly zu entwickeln mit Emscripten. Die Entwicklung von PHP- ganz einfach ist nicht allzu komplex – man braucht nur hier eine Funktionssignatur anpassen, hier eine Konfigurationsvariable erzwingen, und die Anwendung einige kleine Stellen. So können Sie sie selbst erstellen:
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 jedoch nicht sehr nützlich. Als Server
verfügt PHP über keine JavaScript-API, um den Anfragetext zu übergeben,
oder den php://stdin-Stream füllen. WordPress Playground entwickelte
von Grund auf erstellen. Das WebAssembly-Binärprogramm enthält eine
dediziertes PHP API-Modul
geschrieben in C und a
JavaScript PHP-Klasse, die
Methoden wie writeFile() oder run() bereitstellt.
Da jede PHP-Version nur eine statische .wasm-Datei ist, kann die PHP-Version
ist ziemlich langweilig. Es weist den Browser lediglich auf, die Datei herunterzuladen,
Beispiel: php_7_3.wasm statt php_8_2.wasm.
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önnten. WordPress Playground liefert daher PHP mit dem nativen SQLite-Treiber und auf SQLite.
Aber wie kann WordPress in einer anderen Datenbank ausgeführt werden?
Hinter den Kulissen SQLite-Datenbankintegration Das Plug-in fängt alle MySQL-Abfragen ab und schreibt sie in SQLite-Dialekt. Die 2.0 Schiffe entlassen eine neue, auf WordPress Playground basierende Übersetzungsebene ermöglicht es WordPress auf SQLite 99% der WordPress-Einheitentestsuite zu bestehen.
Der Webserver befindet sich innerhalb des Browsers
In einer herkömmlichen WordPress-Website wird durch einen Klick auf einen Link wie Blog eine HTTP-
-Anfrage an das Remote-Back-End, um die Seite blog abzurufen. WordPress
Playground hat kein Remote-Backend. Es hat eine
Service Worker
fängt alle ausgehenden Anfragen ab und übergibt sie an einen PHP-Server im Browser.
in einer separaten Instanz
Web Worker.
Netzwerke werden über WebSockets unterstützt
Im Networking-Bereich sind WebAssembly-Programme auf das Aufrufen von JavaScript-APIs. Dies ist eine Sicherheitsfunktion, stellt aber auch eine Herausforderung dar. Wie Sie unterstützen synchronen Low-Level-Netzwerkcode, der von PHP mit dem ob es sich um allgemeine asynchrone APIs in JavaScript handelt?
Für WordPress Playground beinhaltet die Antwort einen WebSocket-zu-TCP-Socket-Proxy,
Asynchronisieren und umfassende Patches
PHP-Interna wie php_select. Es ist komplex, aber es gibt eine Belohnung. Die
Ein auf Node.js ausgerichteter PHP-Build kann Web-APIs anfordern, Composer-Pakete installieren und
und sogar eine Verbindung
zu einem MySQL-Server herstellen.
WordPress kann an noch mehr Stellen genutzt werden als im Browser
Da WordPress jetzt auf WebAssembly ausgeführt werden kann, lässt es sich auch in einem Node.js-Skript ausführen. – es ist dieselbe V8-Engine! Natürlich können Sie bei StackBlitz auch Node.js direkt im Browser, sodass Sie WordPress und PHP ausführen können in WebAssembly kompiliert und in Node.js ausgeführt, das ebenfalls zu WebAssembly wird ausgeführt im Browser. WebAssembly wird auch im serverlosen Bereich und in der und in Zukunft auch auf dieser Infrastruktur laufen könnte.
In Zukunft werden WordPress-Apps möglicherweise ohne Einrichtung, interaktiv und für die Zusammenarbeit angeboten.
Stellen Sie sich vor, Sie würden direkt in einem Code-Editor Gebäude sofort erstellt und die Einrichtung ist abgeschlossen. Sie können sogar ein und eine Multiplayer-Bearbeitungssitzung starten, z. B. in Google Docs. Und Wenn Sie fertig sind, ist es mit nur einem Klick erledigt, Kreationen mit einer Vielzahl von Hosting-Diensten – und das alles, ohne dass Sie jemals etwas installieren müssen. lokal!
Und das ist nur eine kleine Kleinigkeit. Es gibt interaktive Tutorials, Live-Plug-in-Demos, Staging-Websites, dezentralisiertes WordPress auf Edge-Servern und sogar auf Ihrem Handy.
Die Zukunft ist spannend und du kannst ein Teil davon sein! Deine Ideen und Beiträge sind der Sauerstoff von WordPress Playground. Besuchen Sie GitHub-Repository, z. B. hallo im #meta-playground den Slack-Kanal von WordPress.org. wenden Sie sich bitte unter adam@adamziel.com an Adam.