WordPress Playground: WordPress executado inteiramente no navegador

 (developer.wordpress.org)
5 pontos por GN⁺ 2023-07-15 | 1 comentários | Compartilhar no WhatsApp
  • WordPress Playground é uma ferramenta online para experimentar e aprender WordPress sem instalação, e esta página funciona como um hub oficial de documentação, não como um site de produto
  • A documentação é dividida em Documentation, Blueprints, Developers e API Reference, orientando respectivamente sobre primeiros passos, configuração baseada em JSON, integração com código e referência de API
  • Usuários podem colocar um novo site WordPress no ar em menos de 5 minutos e testar blocos, temas e plugins, ou testar uma versão específica do WordPress/PHP
  • Desenvolvedores podem escolher entre Query API, Blueprints API e JavaScript API conforme o objetivo, e usar o Playground como um ambiente de desenvolvimento local sem configuração
  • Por rodar dentro de uma sandbox no navegador e ter pouca dependência de backend e autenticação, é adequado para demos rápidas, protótipos e ambientes de experimentação gerados por IA

Hub de documentação do WordPress Playground

  • O site oficial do Playground foi movido para wordpress.org/playground/, e esta página é usada como ponto de entrada da documentação
  • WordPress Playground é uma ferramenta online para experimentar e aprender WordPress
  • A documentação é composta por quatro hubs
    • Documentation: introdução ao WordPress Playground, guia de primeiros passos e ponto de entrada da documentação
    • Blueprints: documentação de arquivos JSON para configurar instâncias do Playground
    • Developers: como usar o Playground a partir de código
    • API Reference: referência completa das APIs expostas pelo WordPress Playground

Primeiros passos e fluxo de desenvolvimento

  • Quem está usando pela primeira vez pode começar rapidamente pelo Quick Start Guide, criando um novo site WordPress, testando blocos, temas e plugins, e testando versões específicas do WordPress/PHP
  • Playground web instance trata da instância do Playground fornecida em https://playground.wordpress.net/
  • Em About Playground, é possível conferir a segurança do Playground, formas de uso e limitações atuais
    • Pela documentação Build, Test, Launch, é possível ver o fluxo de uso do Playground para desenvolver, validar e lançar produtos
  • Guides reúne documentação com instruções passo a passo e formas de uso, enquanto Links and resources reúne materiais relacionados

Primeiro passo e escolha da API

Contribuição e uso com IA

  • WordPress Playground é um projeto open source e aceita contribuições em código, design, documentação e triagem
  • O Playground foi projetado para ser usado com agentes de codificação de IA e ferramentas baseadas em IA
    • Ele roda totalmente no lado do cliente em WebAssembly, não precisa de autenticação nem backend e não deixa efeitos colaterais persistentes fora da sandbox do navegador
    • Using Playground with AI agents: em Claude Code, Cursor, Gemini CLI, GitHub Copilot e outros, é possível instalar a skill wp-playground para delegar a execução de comandos
    • AI-readable site index: resumo llms.txt, legível por máquina, dos recursos, APIs e documentação do Playground
    • AGENTS.md: instruções para agentes de codificação de IA que contribuem para esta base de código
  • WordPress Playground é software livre sob os termos da GNU General Public License version 2 ou posterior, e a licença completa está em LICENSE.md

Leituras relacionadas

1 comentários

 
GN⁺ 2023-07-15
Opiniões no Hacker News

  • Testei no Firefox em um tablet Android barato e, embora a resposta não seja instantânea, não é muito diferente de rodar uma stack LAMP completa em uma instância de nuvem ou VPS razoável, o que me surpreendeu bastante
    Há um interpretador PHP inteiro, milhares de linhas da codebase do WordPress e até SQLite por cima disso. Mesmo assim, é impressionante que seja usável o suficiente

    • Sempre senti que o desempenho do WordPress não muda muito entre hardware de baixo e alto desempenho. No fim, parece que o próprio WordPress é o gargalo

  • A forma como fizeram isso funcionar é muito moderna: o PHP roda como um binário WebAssembly, o MySQL é substituído por SQLite via plugin do WordPress, e o servidor web é implementado como um Service Worker em JavaScript

  • Na frase “o Playground dá suporte a apps de notas para dispositivos móveis, ambientes de testes automatizados e até demos do WooCommerce rodando em sites”, os dois últimos fazem total sentido, mas a ideia de criar um app móvel baseado em WordPress que roda PHP em WebAssembly dentro do navegador dá um nó na cabeça

  • O WordPress divide bastante as inclinações do HN. Um lado vê o WordPress como uma ferramenta de amplificação de valor que permite a não desenvolvedores se concentrarem no trabalho principal sem se preocupar com programação; o outro lado o odeia por causa da codebase bagunçada, enquanto na prática se agarra a código perfeitamente formatado e hiperextensível que quase ninguém vai usar
    O WordPress move mais da metade da web. Pode não ser a melhor tecnologia, ou pode até ser a pior, mas a lição que muitos programadores continuam deixando passar é que ninguém se importa com como a salsicha é feita

    • Concordo totalmente quando se trata de criar um site utilitário pequeno, como o de uma banda. Basta jogar em uma hospedagem barata e torcer para a banda acabar antes de a integração com o Google Calendar quebrar
      Mas, como estou adiando a tarefa de migrar o SSO de terceiros de um site WordPress antigo e bagunçado para um site WordPress novo e bagunçado, vou desabafar um pouco: existe de fato um terceiro grupo que faz a manutenção para que o primeiro grupo não precise se importar com como a salsicha é feita.
      Faço esse tipo de trabalho há uns 14 anos, hospedei cerca de 300 sites WordPress de uma universidade de médio porte, também criei e mantive sites .gov, e, por causa da direção tomada pela equipe do Gutenberg, desenvolvi vários blocos baseados em React seguindo três padrões bem diferentes. Já fiz de tudo: deploy de servidores, ajustes de CSS para IE6, raspagem de um CMS inexistente para migrar milhares de páginas e dezenas de milhares de imagens para o WordPress, criação de comandos WP-CLI, código para forçar a propagação de eventos de calendário em multisite.
      Alguém precisa saber como a salsicha é feita, e eu sei. Por isso também sei o quanto o WordPress é uma pilha de lixo instável. Já trabalhei com codebases realmente úteis, com ferramentas melhores e bancos de dados compreensíveis, e sei que outras plataformas também têm problemas, mas o WordPress é realmente ruim.
      Então não tenho problema em criticá-lo. Estou completamente em burnout, a ponto de pensar em simplesmente largar tudo, morar em um caminhão e tocar música. É uma plataforma horrível, e as pessoas nem pagam bem pelo trabalho de mantê-la funcionando. No fim, há pessoas que, por força das circunstâncias, continuam voltando para esse prédio em chamas que é o WordPress, e o ódio coletivo por essa plataforma é bem fundamentado
    • O WordPress é ótimo para o primeiro grupo mencionado. Vejo-o como ferramentas que democratizaram o software e o tornaram acessível a todos, como Excel, FileMaker e Visual Basic
      Naturalmente, essas ferramentas têm limitações e problemas de qualidade, e alguns usuários acabam esbarrando neles. Isso, por si só, não é problema. O problema surge quando se espera que profissionais integrem ou construam em cima delas. Quem procura desenvolvedores web chega com expectativas de qualidade, problemas específicos e requisitos; o legado do WordPress coloca tantas armadilhas e obstáculos diante desses objetivos que muitas vezes vira uma tentativa de encaixar um pino quadrado em um buraco redondo. Dá para dizer algo parecido sobre CRMs comuns ou plataformas de e-commerce
    • Eu me considero um engenheiro de software sério, mas uso WordPress no site da empresa
    • Talvez não seja tanto uma fuga para “código perfeitamente formatado e hiperextensível”, mas sim parar de trabalhar na codebase imperfeita atual e começar um novo projeto que será perfeito
    • Essa divisão parece mais próxima da diferença entre a nova geração de desenvolvedores JavaScript full-stack e quem aprendeu com PHP + MySQL

  • Em dezembro de 2022, no keynote State of the Word, havia a intenção de dar bastante destaque a isso: https://wordpress.tv/2023/01/04/matt-mullenweg-state-of-the-...
    Como engenheiro, foi bem impactante ver aquilo funcionando de verdade e pensar em todas as camadas que precisam interagir para isso acontecer. É engraçado ver isso virar assunto no HN seis meses depois

    • Tenho interesse em rodar no navegador coisas que até agora eram consideradas aplicações “server-side”, então isso é muito interessante. É ainda mais interessante porque parece ser um dos primeiros casos de SQLite rodando em um produto real; antes eu só tinha visto demos de brinquedo.
      Dando uma olhada no código, também percebi que hoje quase não sei PHP, e não parece que isso use a abordagem “tradicional” de SQLite sobre OPFS para persistência. Lendo mais, nem ficou claro se armazenamento persistente via Emscripten ainda é possível. No fim encontrei https://github.com/WordPress/wordpress-playground/issues/19, o que parece significar que ainda não há persistência no WordPress dentro do navegador, o que é uma pena
    • A apresentação foi boa. Para quem tiver curiosidade, o Wordpress Playground é apresentado a partir de 48:33

  • Pergunta sincera: deixando o banco de dados de lado por enquanto, isso quer dizer que seria possível rodar WordPress em um Cloudflare Worker? https://developers.cloudflare.com/workers/runtime-apis/webas...

  • Uso WordPress com frequência para vários sites quase estáticos. É bom para permitir que pessoas não técnicas continuem adicionando conteúdo, e para esse objetivo não há alternativa muito próxima do WordPress
    Mas é preciso escolher com cuidado os plugins usados, configurar um front-end adequado na Cloudflare e impedir que usuários façam coisas que, por fora, parecem simples, mas são perigosas. Tenho a impressão de que boa parte do ódio ao WordPress vem de gente que usou há muito tempo, ou tinha requisitos que o WordPress não atendia, ou herdou um legado

    • Para mim foi uma combinação do segundo e do terceiro caso, além de clientes que insistiram em WordPress em projetos nos quais um CMS headless + código customizado teria sido muito melhor
      Na verdade não é culpa do WordPress, mas isso não muda o fato de que só ouvir o nome já me faz encolher um pouco de medo

  • Esse Playground que roda PHP em WASM é muito mais responsivo do que 95% dos sites comuns

    • O ponto mais legal aqui é que ele reduz imensamente as idas e voltas ao servidor. Todas as chamadas ao banco de dados e requisições de assets acontecem no cliente. Claro, é preciso aceitar alguns segundos de tempo de carregamento
      WordPress provavelmente é a solução de aplicação multipágina mais usada, e isto basicamente a transforma em uma aplicação de página única. Além disso, como não precisa continuar enviando requisições de API ao servidor, ele também tem desempenho melhor do que a maioria das aplicações de página única.
      As partes de aplicação de página única, como o editor de posts/páginas e o editor do site, são apps React complexos, mas nesta demo parecem mais ágeis do que no ambiente de desenvolvimento local. Isso mostra bem o quanto uma aplicação de página única pode melhorar quando se eliminam as idas e voltas ao servidor. Para constar, trabalho na Automattic, e foi realmente muito legal acompanhar esse experimento

  • Não é preciso desmerecer o WordPress, mas ele tem uma longa história e muitos problemas. Seria bom ter uma alternativa moderna de hospedagem própria que pudesse ser usada sem geração de sites estáticos ou hospedagem complexa

    • Qualquer concorrente precisa superar um problema do ovo e da galinha bem cruel. O WordPress tem plugins que fazem quase qualquer coisa e, em geral, também dá para conseguir suporte pago, então é difícil evitá-lo.
      A base de código não é boa, desenvolver em cima dela é penoso, e a forma como foi projetada e a gestão da loja oficial também não impedem a confusão e os riscos do lado do banco de dados. Mesmo assim, uma proposta de configurar tudo em dois dias e gastar US$ 80 por mês em plugins/temas é muito mais fácil de vender do que “ótimo, primeiro vamos precisar de pelo menos dois meses de desenvolvimento”.
      Mesmo quando é necessário trabalho de desenvolvimento, é fácil encontrar gente com experiência em WordPress; e, se você não quiser contratar diretamente, há muitas agências especializadas em WordPress. Concorrentes emergentes não têm essa vantagem de escala. Projetar um sistema extensível, com estrutura de plugins e temas, muito melhor que o WordPress não é uma tarefa pequena, mas também não é impossível nem exige uma equipe de gênios. Só que, no caminho para desbancar o WordPress no mercado real, essa é a etapa mais fácil
    • Há muitos substitutos funcionalmente completos, mas a verdadeira proposta de valor do WordPress é o ecossistema de plugins, o conjunto de desenvolvedores e a base de usuários que o defendem.
      Todo mundo provavelmente já encontrou clientes que só querem WordPress e não aceitam outra coisa. Muitas vezes, mesmo quando se entrega uma solução nova e mais limpa, o cliente acaba voltando para o WordPress. Vi valor em uma abordagem híbrida em que requisitos complexos são tratados por um app customizado feito com outro framework, enquanto o conteúdo é gerenciado por uma instância do WordPress e conectores
    • O motivo do sucesso atual do WordPress é que, durante anos, enquanto outros CMSs continuavam quebrando APIs, o WordPress em geral manteve a estabilidade, e graças a isso cresceu um enorme ecossistema de plugins.
      Além disso, a API PHP do WordPress quase não usa orientação a objetos e é composta principalmente de funções e arrays, então até pessoas com conhecimentos bem básicos de programação conseguiam criar seus próprios plugins ou temas
    • O CMS com o qual desenvolvedores querem trabalhar e o CMS que empresas querem usar são coisas diferentes. Para entrar neste último grupo, é preciso fazer muitas escolhas pragmáticas que afastam o produto do primeiro.
      Empresas gostam de coisas que sobreviveram por muito tempo, e essas coisas, por definição, muitas vezes são antiquadas
    • Aqui está: https://github.com/Qbix/Platform

  • A tecnologia por trás desta demonstração é realmente muito legal. Seria bom poder ver logs em tempo real de erros/avisos do PHP, especialmente para conferir o quão completo é este simulador, incluindo até a reescrita do banco de dados SQLite.
    Testar plugins ou temas também é muito fácil. Basta adicionar &plugin=plugin-slug-from-dir; se o slug corresponder ao slug do plugin na URL do WordPress.org, ele é baixado automaticamente e adicionado à sandbox. A documentação completa da API de consultas que configura a sandbox está aqui: https://wordpress.github.io/wordpress-playground/query-api/
    Tenho certeza de que deve haver alguma forma de abrir ou exibir o log de depuração. Se não houvesse, eles não teriam conseguido desenvolver isso