O WordPress completo com tecnologia PHP executado exclusivamente no navegador com WebAssembly
Quando você vê o WordPress Playground, ele parece um site comum, talvez exceto pelo plano de fundo colorido. É tudo menos. Este é um conjunto de tecnologias do WordPress, incluindo PHP e um banco de dados, executado diretamente no navegador.
Nesta postagem, Adam Zielilandsski (líder do WordPress Playground) e Thomas Nattestad (gerente de produtos do V8) exploram:
- Como o WordPress Playground pode ajudar você como desenvolvedor do WordPress.
- Como funciona nos bastidores.
- O que isso significa para o futuro do WordPress.
Use o WordPress sem instalação, incorpore-o ao seu app e até controle com JavaScript
É possível usar e personalizar o WordPress incorporado em playground.wordpress.net sem custo financeiro. Não há infraestrutura de nuvem e suporte para pagar, porque esse site fica inteiramente no seu navegador. Ninguém mais pode acessá-lo. Também é temporário. Assim que você atualizar a página, ela desaparecerá. Você pode ter quantos sites quiser para prototipagem, testar plug-ins e explorar ideias rapidamente.
Você pode até usá-los para testar seu código em diferentes ambientes usando o seletor de versões integrado do PHP e do WordPress:
O WordPress Playground é uma maneira totalmente nova de usar o WordPress. No entanto, toda a capacidade
só pode ser aproveitada ao ser incluída no app. A maneira mais fácil é incorporar o
WordPress Playground a um <iframe> e configurá-lo usando a
API de parâmetros de consulta.
É isso que a vitrine 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.
O iframe é uma maneira fácil de começar, mas também se limita à opção de configuração básica. Se você precisar de mais do que isso, há outra API mais eficiente.
Com o cliente JavaScript do Playground do WordPress, é possível ter 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 por meio do pacote npm @wp-playground/client. O exemplo a seguir mostra como usá-lo. Consulte o tutorial interativo para ainda 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);
Use o WebAssembly PHP mesmo sem o WordPress
O WordPress Playground não é um monolítico. O WebAssembly PHP é lançado de forma independente do WordPress, e você também pode usá-lo separadamente. Para a Web, use o pacote npm @php-wasm/web, otimizado para um tamanho de pacote baixo. Já no Node.js, você pode usar @php-wasm/node, que oferece mais extensões PHP. Ele usou o primeiro para adicionar snippets PHP interativos a este tutorial do WP_HTML_Tag_Processor. Aqui está uma demonstração de 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 momento, você deve estar pensando: como isso funciona? Boa pergunta. Vamos mergulhar nos detalhes internos e descobrir. Aperte os cintos!
Nos bastidores, há o WebAssembly PHP, um conversor de SQL e um servidor no navegador.
O PHP é executado como um binário WebAssembly
O PHP não funciona apenas no navegador pronto para uso. O WordPress Playground desenvolveu um pipeline dedicado para criar o interpretador do PHP para WebAssembly usando o Emscripten. Criar PHP baunilha não é muito complexo. Basta ajustar uma assinatura de função aqui, forçar uma variável de configuração e aplicar alguns pequenos patches. Veja como você pode criá-lo:
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 básicos do PHP não são muito úteis no navegador. Como um software
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 para 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ões do PHP é bastante chato. Ele simplesmente instrui o navegador a fazer o download. Por
exemplo, php_7_3.wasm em vez de php_8_2.wasm.
O banco de dados é compatível com uma camada de tradução do SQL
O WordPress requer MySQL. No entanto, não existe uma versão WebAssembly do MySQL para executar no navegador. Portanto, o WordPress Playground vem com PHP com o driver SQLite nativo e se baseia no SQLite.
Mas como o WordPress pode ser executado em um banco de dados diferente?
Em segundo plano, o plug-in oficial de integração do banco de dados SQLite (link em inglês) intercepta todas as consultas do MySQL e as reescreve no dialeto SQLite. A versão 2.0 inclui uma nova camada de tradução informada pelo Playground do WordPress que permite que o WordPress no SQLite passe em 99% do pacote de testes de unidade do WordPress.
O servidor da Web reside no navegador
Em um WordPress normal, clicar em um link, como Blog,iniciaria uma solicitação HTTP
para o back-end remoto 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 para uma instância PHP
no navegador, executada em outro
Web Worker.
A rede é compatível com WebSockets
Quando se trata de rede, os programas WebAssembly se limitam a chamar APIs JavaScript. É um recurso de segurança, mas também apresenta um desafio. Como oferecer suporte ao código de rede síncrono de baixo nível usado pelo PHP com as APIs assíncronas de alto nível disponíveis em JavaScript?
Para o WordPress Playground, a resposta envolve um proxy de soquete WebSocket para TCP,
Asyncify e a aplicação de patches
internos em PHP, como php_select. É complexo, mas há uma recompensa. O build
do PHP segmentado para 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. É o mesmo mecanismo V8. Com o StackBlitz, você também pode executar o Node.js diretamente no navegador. Isso significa que é possível executar WordPress e PHP compilados no WebAssembly e em Node.js, que também é compilado para o WebAssembly em execução no navegador. O WebAssembly também está crescendo 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 interativos, colaborativos e sem configuração
Imagine ir direto para um editor de código onde 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 multiplayer, como no app Documentos Google. Quando terminar, basta um único clique para implantar as criações em vários serviços de hospedagem, tudo isso sem precisar instalar nada localmente.
E isso é só uma olhada! Podemos ver tutoriais interativos, demonstrações de plug-ins ao vivo, sites de teste, WordPress descentralizado em servidores de borda e até mesmo criar plug-ins no seu smartphone.
O futuro é emocionante, 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 oi no canal do WordPress.org no Slack (em inglês) e entre em contato com Adam pelo e-mail adam@adamziel.com.