Crea esperienze WordPress nel browser con WordPress Playground e WebAssembly

L'intera versione di WordPress basata su PHP in esecuzione esclusivamente nel browser con WebAssembly

Adam Zieliński

Thomas Nattestad

Quando vedi per la prima volta WordPress Playground, sembra che come un normale sito, magari tranne che per lo sfondo colorato. È qualsiasi cosa ma... Quello che stai effettivamente cercando è un intero stack tecnico WordPress, inclusi PHP e un database, in esecuzione direttamente nel tuo browser.

In questo post, Adam Zieliński (lead di WordPress Playground) e Thomas Nattestad (Product Manager per V8) esplora:

• Come WordPress Playground può aiutarti in qualità di sviluppatore WordPress.
• Come funziona dietro le quinte.
• Cosa significa per il futuro di WordPress.

Usa WordPress senza installarlo, incorporalo nella tua app e persino controllarlo con JavaScript

Puoi utilizzare e personalizzare WordPress incorporato in playground.wordpress.net senza costi. C'è nessuna infrastruttura cloud e nessun supporto a pagamento, perché quel sito vive interamente nel tuo browser, nessun altro può visitarlo. È anche temporaneo. Non appena aggiorna la pagina, è scomparsa. Puoi ottenere tutti i siti che vuoi prototipazione, prova di plug-in ed esplorazione rapida di idee.

Puoi anche utilizzarli per testare il tuo codice in diversi ambienti utilizzando selettore di versione incorporato di PHP e WordPress:

WordPress Playground è un modo completamente nuovo di utilizzare WordPress. È tutta la sua potenza, ma si sblocca solo includendola nell'app. Il modo più semplice è incorporare WordPress Playground in un <iframe> e configuralo utilizzando API dei parametri di query. Ecco la vetrina ufficiale encoder-decoder. Ad esempio, quando selezioni Tema ciondolo e plug-in Coblocks, l'iframe incorporato viene aggiornato in modo che punti a https://playground.wordpress.net/?theme=pendant&plugin=coblocks.

L'iframe è un modo semplice per iniziare, ma è limitato l'opzione di configurazione di base. Se serve di più, ce n'è un'altra, potente API.

Il client JavaScript di WordPress Playground consente il controllo completo sul sito incorporato

Puoi controllare l'intero sito WordPress, inclusi file system e PHP, utilizzando l'API completa disponibile @wp-playground/client npm pacchetto. L'esempio seguente mostra come utilizzarlo: il tutorial interattivo per altri esempi:

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);

Usa la tecnologia PHP di WebAssembly anche senza WordPress

WordPress Playground non è un monolite. Viene rilasciato il linguaggio PHP di WebAssembly indipendentemente da WordPress, e puoi anche usarlo separatamente. Per il web, puoi utilizzare il file npm @php-wasm/web ottimizzato per bundle di dimensioni ridotte, e in Node.js puoi su @php-wasm/node che fornisce più estensioni PHP. Adam ha utilizzato il primo per aggiungere snippet PHP interattivi a questo tutorial su WP_HTML_Tag_Processor. Ecco un'anteprima di come utilizzarlo:

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

A questo punto devi pensare: come funziona? Ottima domanda. Approfondiamo l'aspetto interno e scopriamolo. Allaccia la fibbia!

Alla base ci sono WebAssembly PHP, un traduttore SQL e un server interno al browser.

PHP viene eseguito come programma binario WebAssembly

PHP non funziona solo subito all'interno del browser. WordPress Playground ha sviluppato pipeline dedicata per creare l'interprete PHP per WebAssembly utilizzando Emscripten. La creazione di un PHP "vanilla" non è troppo complessa, basta solo regolare una firma di funzione qui, forzando lì una variabile di configurazione, e l'applicazione alcune piccole patch. Ecco come puoi crearlo autonomamente:

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

Tuttavia, le build PHP vanilla non sono molto utili nel browser. Come server PHP non dispone di un'API JavaScript per passare il corpo della richiesta, o completare lo stream php://stdin. WordPress Playground ha dovuto creare una da zero. Il file binario WebAssembly include modulo dedicato API PHP scritto in C e A classe PHP JavaScript che espone metodi come writeFile() o run().

Poiché ogni versione PHP è solo un file .wasm statico, la versione PHP in realtà è abbastanza noioso. Indica semplicemente al browser di scaricare, ad esempio php_7_3.wasm anziché php_8_2.wasm.

Il database è supportato con un livello di traduzione SQL

WordPress richiede MySQL. Tuttavia, non esiste una versione WebAssembly di MySQL che puoi eseguire nel browser. Per questo motivo, WordPress Playground invia PHP con driver SQLite nativo e si basa su SQLite.

In che modo WordPress può essere eseguito su un database diverso?

Dietro le quinte, il team Integrazione del database SQLite il plug-in intercetta tutte le query MySQL e le riscrive in dialetto SQLite. La soluzione 2.0 rilascio astronavi un nuovo livello di traduzione basato su WordPress Playground che consente a WordPress su SQLite di superare il 99% della suite di test delle unità WordPress.

Il server web si trova all'interno del browser

In un normale WordPress, facendo clic su un link, ad esempio Blog,si avviava un messaggio HTTP al backend remoto di recuperare la pagina blog. Tuttavia, WordPress Playground non ha backend remoto. Ha un Addetto ai servizi che intercetta tutte le richieste in uscita e le passa a un PHP nel browser in esecuzione in un processo Web worker.

Il networking è supportato tramite WebSocket

Quando si tratta di networking, i programmi WebAssembly si limitano a chiamare API JavaScript. È una caratteristica di sicurezza, ma rappresenta anche una sfida. Come faccio a sapere è supportato il codice di networking sincrono di basso livello utilizzato da PHP con le API asincrone di alto livello disponibili in JavaScript?

Per WordPress Playground, la risposta riguarda un proxy socket da WebSocket a TCP, Asincronizzazione e applicazione approfondita delle patch Elementi interni PHP come php_select. È una procedura complessa, ma c'è una ricompensa. La La build PHP mirata a Node.js può richiedere API web, installare pacchetti Composer e e persino connetterti a un server MySQL.

WordPress può essere utilizzato in ancora più posti rispetto al browser

Poiché ora WordPress può essere eseguito su WebAssembly, potresti eseguirlo anche in un file Node.js server: è lo stesso motore V8! Ovviamente con StackBlitz puoi anche eseguire Node.js direttamente nel browser, il che significa che puoi eseguire WordPress e PHP compilato in WebAssembly, eseguito in Node.js, anch'esso compilato in WebAssembly in esecuzione nel browser. WebAssembly sta crescendo di popolarità anche nello spazio serverless e nel in futuro questo potrebbe essere eseguito anche su quella infrastruttura.

Il futuro potrebbe offrire app WordPress a configurazione zero, interattive e collaborative

Immagina di passare direttamente a un editor di codice in cui puoi creando subito, dopo aver completato la configurazione. Puoi anche condividere è semplice e avvia una sessione di modifica multiplayer, come in Documenti Google. e al termine, per un deployment ottimale sarà sufficiente un solo clic di contenuti a una varietà di servizi di hosting, il tutto senza dover installare nulla a livello locale.

E questo è solo un assaggio! Potremmo vedere tutorial interattivi, demo di plug-in live, siti temporanei, decentralizzato WordPress su server perimetrali e persino creare plug-in sul telefono.

Il futuro è entusiasmante e puoi farne parte! Le tue idee e i tuoi contributi sono l'ossigeno di WordPress Playground. Visita la pagina il repository GitHub, ad esempio ciao nel #meta-playground Canale Slack di WordPress.org e non esitare a per contattare Adam all'indirizzo adam@adamziel.com.