O WordPress completo com tecnologia PHP e executado exclusivamente no navegador com o WebAssembly
Quando o WordPress Playground aparece pela primeira vez, parece como um local comum, exceto pelo fundo colorido. É qualquer coisa mas. O que você está vendo é um conjunto de tecnologias completo do WordPress, incluindo PHP e um banco de dados, em execução diretamente no navegador.
Nesta postagem, Adam Zieliwillski (líder do WordPress Playground) e Thomas Nattestad (gerente de produto da V8) explore:
- Como o WordPress Playground pode ajudar você como desenvolvedor do WordPress.
- Como ele funciona em segundo plano.
- O que isso significa para o futuro do WordPress.
Use o WordPress sem instalação, incorpore-o ao seu app e até mesmo controle com JavaScript
Você pode usar e personalizar o WordPress incorporado em playground.wordpress.net sem custo financeiro. Há sem infraestrutura em nuvem e suporte para pagar, porque o site existe no navegador, ninguém mais pode acessá-lo. Também é temporário. Assim que você atualize a página, ela não existe mais. Você pode ter quantos sites quiser para prototipagem, testes de plug-ins e exploração rápida de ideias.
Elas podem até ser usadas para testar o código em diferentes ambientes Alternador de versões integrado ao PHP e ao WordPress:
O WordPress Playground é uma maneira completamente nova de usar o WordPress. Toda a capacidade dele,
No entanto, só é desbloqueado ao incluí-lo no app. A maneira mais fácil é incorporar
O Playground do WordPress em um <iframe> e o configura usando o
API de parâmetros de consulta.
É assim que o destaque oficial
faz. Quando você seleciona, por exemplo,
Tema pendente e as
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 apenas aos opção de configuração básica. Se você precisa de mais do que isso, há outro, mais com uma API eficiente.
O cliente JavaScript Playground do WordPress permite controle total sobre o site incorporado
Você pode controlar todo o site WordPress, incluindo o sistema de arquivos e o PHP, usando a API completa disponível no NPM @wp-playground/client . O exemplo a seguir mostra como usá-lo. Marque 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);
Usar o WebAssembly PHP mesmo sem o WordPress
O WordPress Playground não é um monolítico. Lançamento do WebAssembly PHP independente do WordPress e você também pode usá-lo separadamente. Para a Web, use o npm @php-wasm/web otimizado para um tamanho de pacote baixo e, em Node.js, você pode otimizar em @php-wasm/node, que fornece ou mais extensões PHP. Adam usou o primeiro para adicionar snippets PHP interativos neste tutorial do WP_HTML_Tag_Processor. Veja uma prévia 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
Nesse momento, você deve estar pensando: como isso funciona? Boa pergunta! Vamos nos aprofundar e descobrir. Aperte o cinto!
Nos bastidores, há o WebAssembly PHP, um tradutor de SQL e um servidor no navegador
O PHP é executado como um binário WebAssembly
O PHP não funciona no navegador pronto para uso. Playground do WordPress desenvolveram um pipeline dedicado para criar o interpretador do PHP para o WebAssembly usando o Emscripten. Criar um PHP básico não é excessivamente complexo – leva apenas ajustando uma assinatura de função aqui, Forçar uma variável de configuração ali e aplicando algumas pequenas partes. Veja como você pode criá-la por conta própria:
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 PHP básicos não são muito úteis no navegador. Como servidor
software, o PHP não tem uma API JavaScript para passar o corpo da solicitação, faça upload
ou preencher o fluxo php://stdin. O WordPress Playground teve que criar
um do zero. O binário WebAssembly vem com um
módulo dedicado da API para PHP
escrita em C e
classe PHP JavaScript que
expõe métodos como writeFile() ou run().
Como cada versão do PHP é apenas um arquivo .wasm estático, a versão do PHP
o seletor é bem chato. Ele simplesmente diz ao navegador para fazer o download, para
exemplo, php_7_3.wasm em vez de php_8_2.wasm.
O banco de dados é compatível com uma camada de conversão do SQL
O WordPress requer o MySQL. No entanto, não há uma versão WebAssembly do MySQL que podem ser executados no navegador. Por isso, o WordPress Playground envia o PHP com o driver SQLite nativo e usa o SQLite.
Mas como o WordPress pode ser executado em um banco de dados diferente?
Nos bastidores, a cantora Integração de banco de dados SQLite intercepta todas as consultas do MySQL e as reescreve no dialeto SQLite. A versão 2.0 naves de lançamento 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 fica dentro do navegador
Em um WordPress normal, clicar em um link, como Blog, iniciaria uma
ao back-end remoto para buscar a página blog. No entanto, o WordPress
O Playground não tem um back-end remoto. Ele tem um
Service Worker
que intercepta todas as solicitações enviadas e as passa para um servidor PHP no navegador
em execução em uma instância separada
Web Worker.
Há suporte para rede por meio de WebSockets
Quando se trata de redes, os programas WebAssembly se limitam a fazer chamadas APIs JavaScript do Google. É um recurso de segurança, mas também apresenta um desafio. Como você oferece suporte para código de rede síncrono de baixo nível usado por PHP com o APIs assíncronas de alto nível disponíveis em JavaScript?
No WordPress Playground, a resposta envolve um WebSocket para proxy de soquete TCP,
Asyncify e aplicação de patches profundos
Componentes internos do PHP, como php_select. É complexo, mas tem um prêmio. A
O build em PHP segmentado para Node.js pode solicitar APIs da Web, instalar pacotes do Composer e
e até se conectar a um servidor MySQL.
O WordPress pode ser usado em ainda mais lugares que o navegador
Como o WordPress agora pode ser executado no WebAssembly, você também pode executá-lo em um Node.js servidor, é o mesmo mecanismo V8! Com o StackBlitz, você também pode executar Node.js diretamente no navegador, o que significa que é possível executar WordPress e PHP compilado para WebAssembly, executado em Node.js, que também é compilado para WebAssembly em execução no navegador. O WebAssembly também está bombando em popularidade no espaço sem servidor e na no futuro ela também poderá ser executada nessa infraestrutura.
O futuro pode oferecer apps do WordPress interativos, colaborativos e sem configuração
Imagine ir direto para um editor de código onde você pode simplesmente inserir criando imediatamente e com toda a configuração concluída. Você pode até mesmo compartilhar link simples e iniciar uma sessão de edição multiplayer, como no Google Docs. E Quando terminar, bastaria um clique para implantar sem problemas seu criações a uma variedade de serviços de hospedagem, tudo sem nunca instalar nada localmente.
E isso é só um vislumbre! Podemos ver tutoriais interativos, demonstrações de plug-ins em tempo real, sites de teste, descentralizou o WordPress em servidores de borda e até plug-ins no seu telefone.
O futuro é empolgante, e você pode fazer parte dele. Suas ideias e contribuições são o oxigênio do WordPress Playground. Acessar repositório do GitHub, por exemplo, oi no #meta-playground canal do WordPress.org no Slack para entrar em contato com Adam pelo e-mail adam@adamziel.com.