Crie experiências do WordPress no navegador com o WordPress Playground e o WebAssembly

O WordPress completo com PHP em execução somente no navegador com WebAssembly

Thomas Nattestad
Thomas Nattestad

Quando você vê o WordPress Playground pela primeira vez, ele parece um site comum, exceto pelo plano de fundo colorido. É tudo, menos. O que você está vendo é uma pilha de tecnologia do WordPress inteira, incluindo PHP e um banco de dados, executada diretamente no navegador.

Neste post, Adam Zieliński (líder do WordPress Playground) e Thomas Nattestad (gerente de produtos do V8) abordam:

  • Como o WordPress Playground pode ajudar você como desenvolvedor do WordPress.
  • Como funciona.
  • O que isso significa para o futuro do WordPress.

Use o WordPress sem instalação, incorpore-o ao seu app e até mesmo controle-o com JavaScript

Você pode usar e personalizar o WordPress incorporado em playground.wordpress.net sem custos financeiros. Não há infraestrutura e suporte em nuvem para pagar, porque o site é totalmente exibido no navegador. Ninguém mais pode acessá-lo. Isso também é temporário. Assim que você refrescar a página, ela vai desaparecer. Você pode acessar quantos sites quiser para criar protótipos, testar plug-ins e explorar ideias rapidamente.

Você pode até usá-los para testar seu código em diferentes ambientes usando o comutador de versão PHP e WordPress integrado:

página phpinfo.

O WordPress Playground é uma maneira totalmente nova de usar o WordPress. No entanto, o poder total só é liberado quando ele é incluído no app. A maneira mais fácil é incorporar o WordPress Playground em um <iframe> e configurá-lo usando a API de parâmetros de consulta. É isso que o showcase oficial faz. Quando você seleciona, por exemplo, o tema Pendant e o plug-in Coblocks, o iframe incorporado é atualizado para apontar para https://playground.wordpress.net/?theme=pendant&plugin=coblocks.

Exibição do WordPress Playground.

O iframe é uma maneira fácil de começar, mas também é limitado à opção de configuração básica. Se você precisar de mais, há outra API mais poderosa.

O cliente JavaScript do WordPress Playground permite o controle total sobre o site incorporado

É possível controlar todo o site do WordPress, incluindo o sistema de arquivos e o PHP, usando a API completa disponível no pacote npm @wp-playground/client. O exemplo a seguir mostra como usá-lo. Confira o tutorial interativo para conferir mais exemplos:

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

Usar o WebAssembly PHP mesmo sem o WordPress

O WordPress Playground não é um monólito. O WebAssembly PHP é lançado independente do WordPress e também pode ser usado separadamente. Para a Web, use o pacote npm @php-wasm/web otimizado para um tamanho de pacote baixo. No Node.js, use @php-wasm/node, que oferece mais extensões do PHP. Adam usou o primeiro para adicionar snippets PHP interativos a este tutorial do WP_HTML_Tag_Processor. Confira como usá-lo:

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

Neste ponto, você deve estar pensando: como isso funciona? Boa pergunta! Vamos nos aprofundar nas partes internas e descobrir. Apertem os cintos!

No funcionamento interno, há o PHP do WebAssembly, um tradutor de SQL e um servidor no navegador

O PHP é executado como um binário do WebAssembly

O PHP não funciona apenas no navegador. O WordPress Playground desenvolveu um pipeline dedicado para criar o interpretador do PHP para WebAssembly usando Emscripten. Criar o PHP vanilla não é muito complexo. Basta ajustar uma assinatura de função aqui, forçar uma variável de configuração ali e aplicar alguns pequenos patches. Confira como criar:

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

No entanto, os builds do PHP padrão não são muito úteis no navegador. Como um software de servidor, o PHP não tem uma API JavaScript para transmitir o corpo da solicitação, fazer upload de arquivos ou preencher o stream php://stdin. O WordPress Playground teve que criar um do zero. O binário do WebAssembly vem com um módulo dedicado da API PHP escrito em C e uma classe PHP do JavaScript que expõe métodos como writeFile() ou run().

Como cada versão do PHP é apenas um arquivo .wasm estático, o seletor de versão do PHP é bastante simples. Ele simplesmente informa ao navegador para fazer o download, por exemplo, php_7_3.wasm em vez de php_8_2.wasm.

O banco de dados tem suporte a uma camada de tradução do SQL

O WordPress requer o MySQL. No entanto, não há uma versão do MySQL para WebAssembly que possa ser executada no navegador. Portanto, o WordPress Playground envia o PHP com o driver SQLite nativo e depende do SQLite.

Mas como o WordPress pode ser executado em um banco de dados diferente?

Nos bastidores, o plug-in oficial SQLite Database Integration intercepta todas as consultas do MySQL e as reescreve no dialeto SQLite. A versão 2.0 envia uma nova camada de tradução informada pelo WordPress Playground que permite que o WordPress no SQLite passe em 99% do pacote de testes de unidade do WordPress.

O servidor da Web fica dentro do navegador

Em um WordPress normal, clicar em um link, por exemplo, Blog, iniciaria uma solicitação HTTP para o back-end remoto para buscar a página blog. No entanto, o WordPress Playground não tem um back-end remoto. Ele tem um service worker que intercepta todas as solicitações de saída e as transmite a uma instância PHP no navegador em execução em um Web Worker separado.

Diagrama de fluxo que começa com um iframe apontando para o recurso wp-admin, cujas chamadas são interceptadas pelo service worker, renderizadas na linha de execução do worker e, por fim, traduzidas para uma resposta do WordPress pelo servidor no navegador.

A rede é compatível com WebSockets

Em termos de rede, os programas do WebAssembly são limitados a chamadas de APIs JavaScript. Ele é um recurso de segurança, mas também apresenta um desafio. Como você oferece suporte a um código de rede síncrono de baixo nível usado pelo PHP com as APIs assíncronas de alto nível disponíveis no JavaScript?

Para o WordPress Playground, a resposta envolve um proxy de soquete WebSocket para TCP, Asyncify e a correção de problemas internos do PHP, como php_select. É complexo, mas há uma recompensa. O build PHP direcionado ao Node.js pode solicitar APIs da Web, instalar pacotes do Composer e até se conectar a um servidor MySQL.

O WordPress pode ser usado em ainda mais lugares do que o navegador

Como o WordPress agora pode ser executado no WebAssembly, você também pode executá-lo em um servidor Node.js, que é o mesmo mecanismo V8. Com o StackBlitz, você também pode executar o Node.js diretamente no navegador, o que significa que você pode executar o WordPress e o PHP compilados para o WebAssembly, executando no Node.js, que também é compilado para o WebAssembly em execução no navegador. O WebAssembly também está explodindo em popularidade no espaço sem servidor, e no futuro, ele também poderá ser executado nessa infraestrutura.

O futuro pode trazer apps do WordPress sem configuração, interativos e colaborativos

Imagine entrar diretamente em um editor de código em que você pode começar a criar imediatamente, com toda a configuração concluída. Você pode até compartilhar um link simples e iniciar uma sessão de edição para vários participantes, como nos Documentos Google. E quando você terminar, basta um clique para implantar suas criações em vários serviços de hospedagem, sem precisar instalar nada localmente.

Isso é só um pouquinho do que vocês podem fazer. Podemos ver tutoriais interativos, demonstrações de plug-ins ao vivo, sites de teste, WordPress descentralizado em servidores de borda e até mesmo a criação de plug-ins no seu smartphone.

O futuro é incrível, e você pode fazer parte dele! Suas ideias e contribuições são o oxigênio do WordPress Playground. Acesse o repositório do GitHub, diga olá no canal do Slack do WordPress.org #meta-playground e entre em contato com Adam em adam@adamziel.com.