Visão geral do PWA Kit
Esta visão geral apresenta de forma sucinta as principais partes da arquitetura do PWA Kit, além de proporcionar contexto útil para o resto da documentação do produto.
O Retail React App é um aplicativo React renderizado no lado do servidor que é otimizado para o comércio eletrônico. Ele proporciona um ponto de partida para criar sua loja (virtual) que já inclui recursos-chave, como:
- Empacotamento de código, separação de código e transpilação
- Biblioteca de componentes com temas
- Sistema de estilos com base em JavaScript (CSS em JS)
- Scripts para automação de tarefas de rotina de desenvolvimento
- Worker de serviço e manifesto para os recursos do Progressive Web App (PWA)
- Conjuntos de testes
A loja (virtual) do Retail React App inclui páginas e funcionalidades de comércio eletrônico padrão, como página de listagem de produtos (PLP), página de detalhes de produtos (PDP), carrinho e checkout. Cada aspecto da loja (virtual) foi projetado para ser aperfeiçoado e adaptado com seu próprio código.
Para saber mais, leia o guia de arquitetura completo → O Retail React App.
Para proporcionar a melhor experiência de cliente, as lojas (virtuais) do PWA Kit usam um sistema para renderização e roteamento que executa o mesmo código-fonte em dois contextos diferentes: no lado do servidor e no lado do cliente. A renderização no lado do servidor melhora a velocidade de carregamento de páginas. Já a renderização no lado do cliente torna a interface do usuário mais responsiva e possibilita transições de páginas mais consistentes.
O sistema de renderização e roteamento é estabelecido pelo Retail React App com a configuração do servidor Express e uma hierarquia de componentes do React. Nesse sistema, você pode:
- Adicionar novos componentes de página e modificar os existentes.
- Fornecer dados para os componentes de página a partir de solicitações de API e da interação do usuário.
- Definir padrões o roteamento de solicitações de URL aos componentes da página.
- Personalizar a saída de todas as páginas
Para saber mais, leia os guias de arquitetura completos → Renderização e Roteamento.
O PWA Kit está disponível como um projeto de código-fonte aberto no GitHub.
O repositório no GitHub para o PWA Kit está configurado como um monorepo com vários pacotes, inclusive bibliotecas, modelos de projetos, SDKs e outras ferramentas.
Para facilitar a navegação no repositório, confira a seguir uma visão geral de cada pacote incluído:
| Pacote | Descrição |
|---|---|
| commerce-sdk-react | Biblioteca de React Hooks para busca de dados no Salesforce B2C Commerce. |
| internal-lib-build | Ferramentas internas usadas por outros pacotes no repositório pwa-kit. |
| pwa-kit-create-app | Ferramenta para geração de projetos do PWA Kit com base em modelo de projeto. |
| pwa-kit-dev | Ferramenta de linha de comando para desenvolvimento, criação e implantação de projetos do PWA Kit. |
| pwa-kit-react-sdk | Biblioteca de componentes e utilitários compatível com o pipeline de renderização. |
| pwa-kit-runtime | Biblioteca de ambientes de execução para que aplicações Node.js possam ser executadas no Managed Runtime. |
| template-express-minimal | Modelo básico de projeto para aplicativos em execução no Managed Runtime. |
| template-retail-react-app | Modelo de projeto que inclui uma loja virtual em JavaScript isomórfico. |
| template-typescript-minimal | Modelo de projeto que não requer configuração para aplicações TypeScript criadas com SDKs do PWA Kit. |