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:

PacoteDescrição
commerce-sdk-reactBiblioteca de React Hooks para busca de dados no Salesforce B2C Commerce.
internal-lib-buildFerramentas internas usadas por outros pacotes no repositório pwa-kit.
pwa-kit-create-appFerramenta para geração de projetos do PWA Kit com base em modelo de projeto.
pwa-kit-devFerramenta de linha de comando para desenvolvimento, criação e implantação de projetos do PWA Kit.
pwa-kit-react-sdkBiblioteca de componentes e utilitários compatível com o pipeline de renderização.
pwa-kit-runtimeBiblioteca de ambientes de execução para que aplicações Node.js possam ser executadas no Managed Runtime.
template-express-minimalModelo básico de projeto para aplicativos em execução no Managed Runtime.
template-retail-react-appModelo de projeto que inclui uma loja virtual em JavaScript isomórfico.
template-typescript-minimalModelo de projeto que não requer configuração para aplicações TypeScript criadas com SDKs do PWA Kit.