La versión completa de WordPress con tecnología de PHP que se ejecuta únicamente en el navegador con WebAssembly
Cuando ves WordPress Playground por primera vez, parece un sitio común, excepto por el fondo colorido. Es todo menos. En realidad, se observa una pila tecnológica completa de WordPress, que incluye PHP y una base de datos, que se ejecuta directamente en el navegador.
En esta publicación, Adam Zieliñski (director de WordPress Playground) y Thomas Nattestad (gerente de producto V8) exploran lo siguiente:
- Cómo WordPress Playground puede ayudarte como desarrollador de WordPress
- Funcionamiento interno
- Qué implica para el futuro de WordPress
Usa WordPress sin tener que instalarlo, incorpóralo a tu app y contrólalo con JavaScript
Puedes usar y personalizar WordPress incorporado en playground.wordpress.net de forma gratuita. No hay infraestructura de nube ni asistencia que debas pagar, ya que ese sitio reside por completo en tu navegador; nadie más puede visitarlo. También es temporal. En cuanto actualices la página, desaparecerá. Puedes obtener todos los sitios que desees para crear prototipos, probar complementos y explorar ideas rápidamente.
Incluso puedes usarlas para probar tu código en diferentes entornos con el selector de versiones integrado de PHP y WordPress:
WordPress Playground es una forma completamente nueva de usar WordPress. Sin embargo, solo se desbloquea si se incluye en tu app para acceder a toda su potencia. La forma sencilla es incorporar WordPress Playground en una <iframe> y configurarlo con la API de parámetros de consulta.
Eso es lo que hace el presentación oficial. Cuando seleccionas, por ejemplo, el tema Pendant y el complemento Coblocks, el iframe incorporado se actualiza para que apunte a https://playground.wordpress.net/?theme=pendant&plugin=coblocks.
El iframe es una forma fácil de comenzar, pero también se limita solo a la opción de configuración básica. Si necesitas más que eso, hay otra API más potente.
El cliente de JavaScript de WordPress Playground permite un control total del sitio incorporado
Puedes controlar todo el sitio de WordPress, incluidos el sistema de archivos y PHP, con la API completa disponible a través del paquete npm @wp-playground/client. En el siguiente ejemplo, se muestra cómo usar esta función. Consulta el instructivo interactivo para ver aún más ejemplos:
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 PHP de WebAssembly incluso sin WordPress
WordPress Playground no es una aplicación monolítica. WebAssembly PHP se lanza de forma independiente de WordPress y también puedes usarlo por separado. Para la Web, puedes usar el paquete de npm @php-wasm/web optimizado para un tamaño de paquete bajo y, en Node.js, puedes recurrir a @php-wasm/node, que proporciona más extensiones de PHP. Adam usó el primero para agregar fragmentos interactivos de PHP a este instructivo sobre WP_HTML_Tag_Processor. Este es un adelanto de cómo usarla:
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
En este punto, debes pensar: ¿Cómo funciona eso? Excelente pregunta. Analicemos el funcionamiento interno y averigüémoslo. Abróchate el cinturón.
De forma interna, se encuentran WebAssembly PHP, un traductor de SQL y un servidor integrado en el navegador.
PHP se ejecuta como objeto binario de WebAssembly
PHP no solo funciona en el navegador de inmediato. WordPress Playground desarrolló una canalización dedicada para compilar el intérprete de PHP en WebAssembly mediante Emscripten. Compilar PHP convencional no es demasiado complejo. Solo se necesita ajustar una firma de función aquí, forzar una variable de configuración allí y aplicar algunos parches pequeños. Aquí te mostramos cómo puedes crearlo por tu cuenta:
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
Sin embargo, las compilaciones de PHP vanilla no son muy útiles en el navegador. Como software de servidor, PHP no tiene una API de JavaScript para pasar el cuerpo de la solicitud, subir archivos o propagar la transmisión de php://stdin. WordPress tuvo que crear
una desde cero. El objeto binario WebAssembly viene con un módulo de API de PHP dedicado escrito en C y una clase PHP de JavaScript que expone métodos como writeFile() o run().
Como cada versión de PHP es solo un archivo .wasm estático, el selector de versiones de PHP es bastante aburrido. Solo le indica al navegador que descargue, por ejemplo, php_7_3.wasm en lugar de, por ejemplo, php_8_2.wasm.
La base de datos es compatible con una capa de traducción de SQL
WordPress requiere MySQL. Sin embargo, no hay una versión WebAssembly de MySQL que puedas ejecutar en el navegador. Por lo tanto, WordPress Playground envía PHP con el controlador SQLite nativo y usa SQLite.
Pero ¿cómo puede ejecutarse WordPress en una base de datos diferente?
En segundo plano, el complemento oficial SQLite Database Integration intercepta todas las consultas de MySQL y las reescribe en el dialecto SQLite. La versión 2.0 incluye una nueva capa de traducción informada por Playground de WordPress que permite que WordPress en SQLite apruebe el 99% del paquete de pruebas de unidades de WordPress.
El servidor web reside en el navegador
En una WordPress normal, si haces clic en un vínculo, por ejemplo, Blog, se iniciará una solicitud HTTP al backend remoto para recuperar la página blog. Sin embargo, WordPress Playground no tiene un backend remoto. Tiene un Service Worker que intercepta todas las solicitudes salientes y las pasa a una instancia de PHP en el navegador que se ejecuta en un Web Worker independiente.
Las herramientas de redes son compatibles con WebSockets.
Cuando se trata de herramientas de redes, los programas de WebAssembly se limitan a llamar a las APIs de JavaScript. Es una función de seguridad, pero también presenta un desafío. ¿Cómo admites código de herramientas de redes síncrono y de bajo nivel que usa PHP con las APIs asíncronas de alto nivel disponibles en JavaScript?
Para WordPress Playground, la respuesta implica un proxy de socket de WebSocket a TCP, Asyncify y la aplicación de parches a componentes internos profundos de PHP, como php_select. Es complejo, pero hay una recompensa. La compilación de PHP orientada a Node.js puede solicitar APIs web, instalar paquetes de Composer y hasta conectarse a un servidor MySQL.
WordPress se puede usar en incluso más lugares que el navegador
Dado que WordPress ahora puede ejecutarse en WebAssembly, también puedes ejecutarlo en un servidor Node.js; es el mismo motor V8. Por supuesto que con StackBlitz también puedes ejecutar Node.js directamente en el navegador, lo que significa que puedes ejecutar WordPress y PHP compilados en WebAssembly y ejecutarlos en Node.js, que también se compilan en WebAssembly en el navegador. WebAssembly también está creciendo en popularidad en el espacio sin servidores y, en el futuro, también podría ejecutarse en esa infraestructura.
El futuro podría traer sin necesidad de instalar apps de WordPress interactivas y colaborativas.
Imagina ir directamente a un editor de código en el que seas libre de comenzar a compilar de inmediato, con toda la configuración completada. Incluso puedes compartir un vínculo simple y comenzar una sesión de edición multijugador, como en Documentos de Google. Cuando termines, tus creaciones se implementarán sin problemas en una variedad de servicios de hosting con un solo clic y sin necesidad de instalar nada de forma local.
¡Y eso es solo un vistazo! Es posible que veamos instructivos interactivos, demostraciones de complementos en vivo, sitios de etapa de pruebas, WordPress descentralizado en servidores perimetrales o, incluso, la compilación de complementos en el teléfono.
El futuro es emocionante y puedes formar parte de él. Tus ideas y contribuciones son el oxígeno de WordPress Playground. Visita el repositorio de GitHub, envíale un saludo en el canal de WordPress.org en Slack de #meta-playground y puedes comunicarte con Adam mediante adam@adamziel.com.