La versión completa de WordPress con tecnología de PHP que se ejecuta únicamente en el navegador con WebAssembly
Cuando ves por primera vez WordPress Playground, te parece como un sitio común, tal vez excepto por el fondo colorido. Es cualquier cosa pero. En realidad, lo que se observa es una pila tecnológica completa de WordPress. como PHP y una base de datos que se ejecuta directamente en el navegador.
En esta publicación, Adam Zieliński (líder de WordPress Playground) y Thomas Nattestad (Administrador de productos para V8) Explorar:
- Cómo WordPress Playground puede ayudarte como desarrollador de WordPress
- Cómo funcionan de forma interna
- Qué significa para el futuro de WordPress
Usa WordPress sin instalación, incorpóralo a tu app y contrólalo con JavaScript
Puedes usar y personalizar la versión incorporada de WordPress en playground.wordpress.net. Hay infraestructura de nube y asistencia paga, porque el sitio está por completo en tu navegador, nadie más puede visitarla. También es temporal. En cuanto actualizar la página, ya no está. Puedes obtener tantos sitios como desees por crear prototipos, probar complementos y explorar ideas rápidamente.
Incluso puedes usarlas para probar el código en diferentes entornos con el selector de versiones de PHP y WordPress integrado:
WordPress Playground es una forma completamente nueva de usar WordPress. Toda su potencia,
Sin embargo, solo se desbloquea si se incluye en tu app. La manera fácil es incorporar
WordPress Playground en un <iframe> y configurarlo con el
API de parámetros de consulta.
De eso se trata el exhibidor oficial
hace. Cuando seleccionas, por ejemplo,
El tema del colgante y las
Complemento de Coblocks, el iframe incorporado
se actualice para que apunte a
https://playground.wordpress.net/?theme=pendant&plugin=coblocks.
El iframe es una manera fácil de comenzar, pero también se limita a los de configuración básica. Si necesitas más que eso, hay otro, más API potente.
El cliente de JavaScript de WordPress Playground habilita el control total del sitio incorporado
Puedes controlar todo el sitio de WordPress, incluidos el sistema de archivos y PHP, con la API completa, disponible en el @wp-playground/client npm . En el siguiente ejemplo se muestra cómo usarlo: verifica el instructivo interactivo para ver 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. Lanzamiento de PHP de WebAssembly de forma independiente de WordPress y también puedes usarlo de forma independiente. Para la Web, puedes usar el archivo npm @php-wasm/web optimizado para un tamaño de paquete bajo, y en Node.js puedes optimizar en @php-wasm/node que proporciona más extensiones de PHP. Adam usó el primero para agregar fragmentos interactivos de PHP. este instructivo de WP_HTML_Tag_Processor. Aquí te mostramos un adelanto de cómo utilizarlas:
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 estar pensando: ¿cómo funciona eso? Excelente pregunta. Analicemos los detalles internos y averigüémoslo. Abróchate el cinturón.
En detalle, está el PHP WebAssembly, un traductor de SQL y un servidor en el navegador
PHP se ejecuta como un objeto binario de WebAssembly
PHP no solo funciona en el navegador de forma inmediata. WordPress Playground desarrolló un canalización dedicada para compilar el intérprete de PHP en WebAssembly con Emscripten. Compilar PHP convencional no es demasiado complejo; solo toma ajustar una firma de función aquí, fuerzas a una variable de configuración en ese lugar, y aplicar algunos parches pequeños. Puedes construirlo por tu cuenta de la siguiente manera:
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 habituales de PHP no son muy útiles en el navegador. Como servidor
PHP no tiene una API de JavaScript para pasar el cuerpo de la solicitud, sube
o propagar la transmisión de php://stdin. WordPress Playground tuvo que compilar
desde cero. El objeto binario de WebAssembly incluye un
módulo de API de PHP dedicado
escritas en C y a
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, la versión de PHP
es bastante aburrido. Simplemente le indica al navegador que descargue, por
Por ejemplo, php_7_3.wasm en lugar de 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 puedes ejecutar en el navegador. Por lo tanto, WordPress Playground incluye PHP controlador nativo de SQLite y se basa en SQLite.
Pero ¿cómo se puede ejecutar WordPress en una base de datos diferente?
Detrás de escena, el legado oficial Integración de bases de datos SQLite este complemento intercepta todas las consultas de MySQL y las reescribe en el dialecto SQLite. La versión 2.0 naves de lanzamiento una nueva capa de traducción basada en el Playground de WordPress que permite que WordPress en SQLite pase el 99% del paquete de pruebas de unidades de WordPress.
El servidor web está alojado en el navegador.
En una versión de WordPress común, si haces clic en un vínculo, como 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 interfaz PHP integrada en el navegador
de Compute Engine que se ejecuta en un bucket
Trabajador web.
Las Herramientas de redes son compatibles con WebSockets
Cuando se trata de hacer contactos, los programas de WebAssembly se limitan a llamar APIs de JavaScript. Es una función de seguridad, pero también supone un desafío. ¿Cómo admites el código de red síncrono de bajo nivel que usa PHP con el APIs asíncronas de alto nivel disponibles en JavaScript?
Para WordPress Playground, la respuesta involucra un proxy de socket WebSocket a TCP,
Asincrónico y aplicación de parches profundas
Componentes internos de PHP, como php_select Es complejo, pero hay una recompensa. El
La compilación de PHP orientada a Node.js puede solicitar APIs web, instalar paquetes de Composer y
o incluso conectarse a un servidor MySQL.
WordPress se puede usar en más lugares que el navegador
Como WordPress ahora puede ejecutarse en WebAssembly, también puedes ejecutarlo en Node.js. servidor, es el mismo motor V8. Por supuesto, con StackBlitz también puedes ejecutar Node.js directamente en el navegador, lo que significa que puedes ejecutar WordPress y PHP compilada en WebAssembly, que se ejecuta en Node.js, que también se compila en WebAssembly en ejecución en el navegador. WebAssembly también está creciendo en popularidad en el espacio sin servidores y en el en el futuro, esto también podría ejecutarse en esa infraestructura.
El futuro puede implicar apps de WordPress interactivas, que no requieren configuración y que son colaborativas
Imagina que estás directamente en un editor de código, en el que puedes crear la infraestructura de inmediato, y completar toda la configuración. Incluso puedes compartir un simple vínculo e iniciar una sesión de edición multijugador, como en Documentos de Google. Y cuando hayas terminado, solo necesitarás un clic para implementar sin inconvenientes tu de alta calidad a una variedad de servicios de hosting, sin tener que instalar nada a nivel local.
¡Y eso es solo una mirada! Es posible que veamos tutoriales interactivos, demostraciones de complementos en vivo, sitios de etapa de pruebas, WordPress descentralizado en servidores perimetrales y hasta complementos del teléfono.
El futuro es emocionante, y puedes ser parte de él. Tus ideas y contribuciones son el oxígeno de WordPress Playground. Visitar el repositorio de GitHub, por ejemplo, Hola en el #meta-playground el canal de Slack de WordPress.org, y no dudes en para comunicarte con Adam mediante correo electrónico a adam@adamziel.com.