Recentemente, lançamos nosso novo produto Bit Social, um plug-in usado para compartilhar seu conteúdo do WordPress nas mídias sociais. Embora muitos plug-ins ofereçam funcionalidade semelhante, queríamos criar algo que se destacasse pelo design amigável e pelo conjunto robusto de recursos. Bit Social está em constante evolução, com novos recursos sendo adicionados regularmente com base no feedback da comunidade, que tem sido extremamente positivo. O Bit Social e nossos outros produtos populares, como Forma de bit e Integrações de bitsOs sistemas de computação em nuvem, como o Google, também ganharam força significativa por sua velocidade e interfaces intuitivas. Com isso em mente, gostaríamos de compartilhar a pilha de tecnologia por trás de nossos produtos e os motivos pelos quais escolhemos essas tecnologias.
Neste artigo, discutiremos as tecnologias que usamos para criar o Bit Social e por que as escolhemos. Também forneceremos alguns insights sobre como usamos essas tecnologias para criar uma experiência de usuário perfeita.
No WordPress, não há uma estrutura específica ou um padrão de fato para a estrutura de plugins. Embora essa flexibilidade seja um dos pontos fortes do WordPress, ela também pode ser assustadora para os desenvolvedores que são novos na criação de plug-ins. Apesar da falta de uma arquitetura definida, há princípios fundamentais, práticas recomendadas e medidas de segurança essenciais que os desenvolvedores devem seguir.
Com base em nossa experiência com o Bit Form, acreditamos que é importante manter uma base de código reutilizável e de fácil manutenção. Para simplificar o desenvolvimento futuro, decidimos criar um boilerplate/framework que inclua componentes reutilizáveis e siga as práticas recomendadas, garantindo consistência e eficiência em nossos futuros produtos.
O principal objetivo de um boilerplate ou estrutura é oferecer uma base sólida para o desenvolvimento de plug-ins do WordPress. Ele acelera o desenvolvimento, aprimora a estrutura do código e simplifica a manutenção e os testes de longo prazo. Além disso, o uso de uma estrutura garante a consistência entre diferentes plug-ins, proporcionando uma vantagem significativa.
Nossa arquitetura de front-end é construída usando ReagirReact é uma biblioteca JavaScript amplamente utilizada para o desenvolvimento de interfaces de usuário. A velocidade, a simplicidade e a flexibilidade do React o tornam ideal para a criação de aplicativos da Web dinâmicos e interativos. Com TypeScript integrado à nossa base de código React, nos beneficiamos da verificação robusta de tipos, que ajuda a detectar possíveis erros durante o desenvolvimento, garantindo um código mais limpo e de melhor manutenção antes da implantação.
Para nosso sistema de design, utilizamos Design de formigasuma biblioteca popular de IU do React que oferece um conjunto abrangente de componentes e estilos pré-construídos. Combinado com nossas diretrizes de design personalizado, o Ant Design nos ajuda a fornecer uma interface de usuário consistente e visualmente atraente, garantindo uma experiência perfeita em todos os nossos produtos.
O gerenciamento de estados desempenha um papel fundamental no desenvolvimento moderno de front-end. Embora o Redux tenha sido uma escolha de longa data para muitos, optamos por Recoil.js e Jotai para gerenciar o estado do aplicativo. Essas bibliotecas introduzem o conceito de armazenamentos atômicos, tornando o gerenciamento de estado mais modular e intuitivo. Sua natureza leve e a sintaxe semelhante à do React proporcionam uma solução mais legível, flexível e eficiente em comparação com o Redux, o que as torna ideais para a arquitetura do nosso aplicativo.
Para proporcionar uma experiência de usuário perfeita, nos concentramos muito na busca de dados e no armazenamento em cache. Em contraste com os plug-ins tradicionais do WordPress, que recarregam páginas inteiras e recuperam dados a cada navegação, nosso design de aplicativo de página única (SPA) aprimora a experiência do usuário, evitando o recarregamento de páginas inteiras. Nós utilizamos React-Query (da Tanstack), uma ferramenta poderosa para gerenciar a busca e o armazenamento em cache de dados, que nos permite otimizar o desempenho buscando apenas os dados necessários, armazenando-os em cache para uso futuro e lidando com paginação e estados de erro de forma eficiente. Isso garante que os usuários não sofram atrasos desnecessários ao navegar pelos nossos produtos.
Para manter a alta qualidade do código e aplicar as práticas recomendadas, integramos ESLint e Mais bonita em nosso fluxo de trabalho. O `ESLint` ajuda a detectar possíveis problemas e a aplicar padrões de codificação, enquanto o Prettier garante a formatação consistente do código em toda a base de código. Além disso, usamos ganchos do Git, como o Lefthook e o Commitlint, para aplicar verificações de qualidade antes de cada confirmação, garantindo que um código limpo e confiável seja enviado para a produção.
Para otimização de agrupamento e compilação, contamos com ViteVite, uma ferramenta de front-end de última geração que oferece compilações rápidas, substituição de módulos a quente e pacotes de produção otimizados. A abordagem moderna do Vite acelera significativamente o desenvolvimento e simplifica nosso processo de compilação, facilitando a implementação e a manutenção de nossos produtos com eficiência.
Essa arquitetura não só garante uma experiência de desenvolvimento tranquila, mas também nos permite fornecer produtos de alta qualidade, com bom desempenho e de fácil manutenção aos nossos usuários.
No centro de nosso desenvolvimento de back-end do WordPress, aderimos às Diretrizes de plug-ins do WordPress e seguimos as práticas recomendadas do setor para garantir compatibilidade, segurança e desempenho de alto nível. Para melhorar a legibilidade e a qualidade do código, adotamos uma arquitetura modular inspirada na popular estrutura PHP Laravel. Essa abordagem nos permite isolar os principais componentes em pacotes reutilizáveis, o que nos permite manter a consistência, reduzir a duplicação e simplificar o desenvolvimento de plug-ins. Alguns desses pacotes são de código aberto e estão disponíveis em nosso repositório do GitHub.
Alguns componentes de nossa arquitetura:
Desenvolvemos um conjunto de componentes principais para lidar com tarefas essenciais, como recuperação de dados, armazenamento em cache e solicitações de API. No centro disso está o nosso kit wp uma coleção de componentes reutilizáveis e flexíveis que simplificam o desenvolvimento de plug-ins. Ao utilizar o wp-kit, garantimos um código consistente e de alta qualidade em vários plug-ins, acelerando o desenvolvimento e permitindo a criação de soluções robustas e repletas de recursos.
A integridade e a segurança dos dados são essenciais no desenvolvimento de plug-ins. Para lidar com solicitações, utilizamos a API REST do WordPress e o wp_ajax. Para aumentar ainda mais a segurança dos dados, usamos wp-validadorO wp-validator é um pacote de validação de código aberto inspirado no elegante sistema de validação do Laravel. Com uma sintaxe limpa e expressiva, o wp-validator permite que os desenvolvedores definam regras e mensagens de validação reutilizáveis, simplificando o processo de manutenção da validação de dados em diferentes pontos de extremidade.
Para interações com o banco de dados, criamos o banco de dados wp projetado para simplificar as operações CRUD e agilizar o gerenciamento do banco de dados. Ele abstrai tarefas comuns de banco de dados, como consulta, inserção, atualização e exclusão de registros, facilitando o trabalho com tabelas do WordPress e tipos de postagem personalizados. Além disso, ele oferece comandos CLI para migração e propagação de banco de dados, trazendo uma abordagem moderna para o gerenciamento de bancos de dados do WordPress.
Para garantir a manutenção de uma base de código limpa e sustentável, integramos ferramentas como PHP-CS-Fixer e PHPStan. Essas ferramentas aplicam padrões de codificação e realizam análise estática, detectando possíveis problemas com antecedência. Ao automatizar esses processos, garantimos que todos os plug-ins que fornecemos sejam confiáveis, seguros e alinhados com os padrões de desenvolvimento modernos.
Nossa abordagem de back-end modular nos permite criar rapidamente plug-ins dimensionáveis, seguros e de alta qualidade. Temos o compromisso de compartilhar mais do nosso trabalho de código aberto, fornecendo à comunidade ferramentas que simplificam o desenvolvimento de plug-ins do WordPress.
Os testes desempenham um papel fundamental em nosso processo de desenvolvimento, garantindo os mais altos padrões de qualidade e confiabilidade em nossos produtos. No backend, usamos o PHPUnit para testes unitários, mas estamos em processo de migração para o PragasA solução de desenvolvimento de software da Microsoft, uma estrutura mais moderna e amigável ao desenvolvedor, que aprimora a eficiência e a experiência do desenvolvedor.
Para o front-end, Vitest é a nossa ferramenta preferida para testes unitários e de integração, garantindo que todos os componentes do React sejam verificados minuciosamente e estejam livres de bugs. Esse teste rigoroso nos ajuda a detectar problemas com antecedência, contribuindo para a estabilidade geral de nossos aplicativos.
Além dos testes unitários e de integração, contamos com Cipreste para testes de ponta a ponta. Com a Cypress, podemos simular interações reais do usuário e testar nossos aplicativos em vários navegadores e dispositivos, o que nos dá a confiança de que a experiência do usuário permanece consistente e confiável em diferentes condições.
Para complementar nossa abordagem de teste, também usamos Livro de histórias para testes de componentes e regressão visual. O Storybook nos permite isolar e testar componentes individuais da UI, facilitando a detecção de inconsistências de design e problemas potenciais antes que eles afetem a interface geral do usuário.
Ao combinar essas ferramentas poderosas, mantemos um forte foco na qualidade do código e na robustez do produto, garantindo que nossos aplicativos sejam bem testados, visualmente consistentes e confiáveis para nossos usuários.
Ao implantar plug-ins, usamos o Repositório de Plug-ins do WordPress.org como nossa plataforma principal para garantir ampla acessibilidade aos usuários do WordPress em todo o mundo. Esse repositório é o hub central para a distribuição de plug-ins do WordPress, permitindo que milhões de usuários descubram, façam download e instalem plug-ins diretamente em suas instalações do WordPress.
Para manter os padrões de alta qualidade, seguimos rigorosamente as Diretrizes para Plugins do WordPress. Essas diretrizes abrangem tudo, desde a qualidade e a segurança do código até a documentação adequada do plug-in, garantindo que nossos produtos atendam aos mais altos padrões de compatibilidade, desempenho e segurança. A adesão a essas diretrizes nos ajuda a evitar possíveis problemas, como conflitos com outros plug-ins ou atualizações do núcleo do WordPress.
Para gerenciar o processo de desenvolvimento e implantação, usamos Ações do GitHub para automatizar a integração contínua e a implantação contínua (CI/CD). Essa abordagem nos permite otimizar o ciclo de lançamento do plug-in. Com o CI/CD implementado, cada alteração em nossa base de código é automaticamente testada, criada e preparada para lançamento. Essa automação minimiza o erro humano e garante que nossos plug-ins permaneçam atualizados e funcionem de forma confiável para os usuários.
Esse fluxo de trabalho contínuo significa que os usuários sempre têm acesso aos recursos mais recentes, às melhorias de desempenho e aos patches de segurança sem demora. Ao aproveitar esses sistemas e práticas recomendadas, garantimos que nossos plug-ins proporcionem uma excelente experiência ao usuário e, ao mesmo tempo, permaneçam seguros, compatíveis e bem mantidos ao longo do tempo.
Nosso compromisso de fornecer produtos de alta qualidade e fáceis de usar se reflete nas tecnologias que usamos e nas práticas de desenvolvimento que seguimos. Ao aproveitar ferramentas e estruturas modernas, criamos soluções robustas, de alto desempenho e de fácil manutenção que atendem às necessidades em constante evolução de nossos usuários. O Bit Social é o primeiro produto que criamos usando nosso boilerplate e estamos animados para continuar a refinar e expandir nossos produtos para oferecer ainda mais valor aos nossos usuários.
PT 
EN 
ES 
FR 
DE 
IT 
NL