L'ambiente WordPress completo basato su PHP in esecuzione esclusivamente nel browser con WebAssembly
Quando vedi per la prima volta WordPress Playground, sembra un sito banale, forse tranne che per lo sfondo colorato. Non serve altro. Quello che ti interessa è 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 di V8) esplorano:
- In che modo WordPress Playground può aiutarti in qualità di sviluppatore WordPress.
- Uno sguardo alle caratteristiche.
- Che cosa significa per il futuro di WordPress.
Utilizza WordPress senza installarlo, incorporalo nella tua app e controllalo con JavaScript
Puoi utilizzare e personalizzare WordPress incorporato all'indirizzo playground.wordpress.net senza costi. Non ci sono infrastruttura cloud e assistenza da pagare, perché quel sito risiede interamente nel tuo browser e nessun altro può visitarlo. Anche questa è temporanea. Una volta aggiornata, la pagina viene rimossa. Puoi ottenere tutti questi siti che vuoi per prototipare, provare i plug-in e trovare rapidamente nuove idee.
Puoi anche utilizzarli per testare il tuo codice in diversi ambienti utilizzando il selettore di versione integrato di PHP e WordPress:
WordPress Playground è un modo completamente nuovo di utilizzare WordPress. Tuttavia, le sue potenzialità vengono sbloccate solo se lo includi nella tua app. Il modo più semplice è incorporare WordPress Playground in un <iframe> e configurarlo utilizzando l'API dei parametri di query.
Ecco cosa fa la presentazione ufficiale. Quando selezioni, ad esempio, il tema pendant e il plug-in Coblocks, l'iframe incorporato viene aggiornato in modo che rimandi a https://playground.wordpress.net/?theme=pendant&plugin=coblocks.
L'iframe è un modo semplice per iniziare, ma si limita anche all'opzione di configurazione di base. Se serve altro, c'è un'altra API più potente.
Il client JavaScript Playground di WordPress attiva il controllo completo sul sito incorporato
Puoi controllare l'intero sito WordPress, inclusi il file system e PHP, utilizzando l'API completa disponibile tramite il pacchetto npm @wp-playground/client. L'esempio seguente mostra come utilizzarlo. Consulta 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);
Utilizza WebAssembly PHP anche senza WordPress
WordPress Playground non è un monolite. WebAssembly PHP viene rilasciato in modo indipendente da WordPress e puoi anche utilizzarlo separatamente. Per il web, puoi utilizzare il pacchetto npm @php-wasm/web, ottimizzato per pacchetti di dimensioni ridotte, mentre in Node.js puoi affidarti a @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. Analizziamo i dettagli e scopriamolo. Allacciati la cintura!
Alla base ci sono WebAssembly PHP, un traduttore SQL e un server interno al browser
PHP viene eseguito come programma binario WebAssembly
Il linguaggio PHP non funziona solo all'interno del browser. WordPress Playground ha sviluppato una pipeline dedicata per creare l'interprete PHP per WebAssembly utilizzando Emscripten. La creazione di un PHP avanzato non è eccessivamente complesso: basta modificare la firma di una funzione qui, forzare una variabile di configurazione in quella posizione e applicare 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 di Vanilla non sono molto utili nel browser. In quanto software server, PHP non dispone di un'API JavaScript per passare il corpo della richiesta, caricare file o compilare lo stream php://stdin. WordPress Playground ha dovuto
crearne uno da zero. Il programma binario WebAssembly viene fornito con un modulo API PHP dedicato scritto in C e una classe PHP JavaScript che espone metodi come writeFile() o run().
Ogni versione PHP è un file .wasm statico, pertanto il selettore di versione
di PHP è piuttosto noioso. Chiede 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 da eseguire nel browser. Di conseguenza, WordPress Playground fornisce PHP con il driver SQLite nativo e si basa su SQLite.
Ma come può essere eseguito WordPress su un database diverso?
Dietro le quinte, il plug-in ufficiale di integrazione dei database SQLite intercetta tutte le query MySQL e le riscrive in dialetto SQLite. La release 2.0 include 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à di WordPress.
Il server web risiede all'interno del browser
In un normale WordPress, facendo clic su un link, ad esempio Blog,veniva avviata una richiesta HTTP al backend remoto per recuperare la pagina blog. Tuttavia, WordPress
Playground non ha un backend remoto. Dispone di un service worker che intercetta tutte le richieste in uscita e le passa a un'istanza PHP nel browser in esecuzione in un web worker separato.
Il networking è supportato tramite WebSocket
Per quanto riguarda il networking, i programmi WebAssembly si limitano alle chiamate alle API JavaScript. È una funzionalità per la sicurezza, ma anche una sfida. Come è possibile supportare 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 prevede un proxy socket da WebSocket a TCP, Asyncify e l'applicazione di patch a interni PHP come php_select. È complesso, ma c'è una ricompensa. La build PHP con targeting Node.js può richiedere API web, installare pacchetti di Composer e persino connettersi 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 server Node.js, ovvero lo stesso motore V8. Ovviamente con StackBlitz puoi anche eseguire Node.js direttamente nel browser, il che significa che puoi eseguire WordPress e PHP in WebAssembly, eseguendolo in Node.js, anch'esso compilato in WebAssembly in esecuzione nel browser. WebAssembly sta inoltre spopolando nel settore serverless e in futuro potrebbe essere eseguito anche su questa infrastruttura.
Il futuro potrebbe introdurre app WordPress senza configurazione, interattive e collaborative
Immagina di entrare direttamente in un editor di codice dove puoi iniziare subito a creare completamente tutta la configurazione. Puoi anche condividere un semplice link e avviare una sessione di modifica multiplayer, come in Documenti Google. Al termine, basterà un solo clic per eseguire il deployment delle tue creazioni in una varietà di servizi di hosting, il tutto senza dover installare nulla localmente.
E questo è solo un assaggio. Potremmo vedere tutorial interattivi, demo di plug-in in tempo reale, siti di gestione temporanea, WordPress decentralizzato su server periferici e persino creazione di plug-in sul telefono.
Il futuro è entusiasmante e anche tu puoi farne parte! Le tue idee e i tuoi contributi sono l'ossigeno di WordPress Playground. Visita il repository GitHub, saluta il #meta-playground canale Slack di WordPress.org, e non esitare a contattare Adam all'indirizzo adam@adamziel.com.