Visión general del PWA Kit
Esta visión general sirve para introducir brevemente las partes principales de la arquitectura del PWA Kit y proporciona un contexto útil para el resto de la documentación del producto.
La Retail React App es una aplicación React renderizada del lado del servidor que está optimizada para el comercio electrónico. Ofrece un punto de partida para la construcción del storefront gracias a que ya incluye características clave, como:
- Agrupación, separación y transpilación de códigos
- Librerías de componentes temáticas
- Sistema de estilizado basado en JavaScript (CSS en JS)
- Scripts para automatizar las tareas rutinarias de desarrollo
- Trabajador de servicios y manifiesto para las características de la aplicación web progresiva (PWA)
- Suites de prueba
El storefront de la Retail React App incluye páginas y características estándar de comercio electrónico, como una página de listado de productos (PLP), una página de detalles del producto (PDP), un carrito y la finalización de la compra (checkout). Cada aspecto del storefront está diseñado para poder mejorarse y ampliarse con su propio código.
Para obtener más información, consulte la guía de arquitectura completa Retail React App.
Para que la experiencia del comprador sea la mejor posible, los storefronts de PWA Kit utilizan un sistema de renderización y enrutamiento que ejecuta el mismo código fuente en dos contextos diferentes: en el lado del servidor y en el lado del cliente. La renderización del lado del servidor optimiza la velocidad de carga inicial de la página, mientras que la renderización del lado del cliente permite una interfaz de usuario con mayor capacidad de respuesta y transiciones fluidas de página.
El sistema de renderización y enrutamiento lo establece la Retail React App con su configuración de servidor exprés y componentes React organizados jerárquicamente. Dentro de este sistema, se puede hacer lo siguiente:
- Agregar nuevos componentes de página y modificar los existentes.
- Suministrar datos a los componentes de la página a partir de solicitudes a la API o de las interacciones de los usuarios.
- Definir patrones para enrutar solicitudes de URL a los componentes de la página.
- Personalizar la salida de todas las páginas.
Para obtener más información, consulte las guías de arquitectura completas → Renderización y Enrutamiento.
El PWA Kit es un proyecto de código abierto alojado en GitHub.
El repositorio de GitHub para PWA Kit se establece como un monorepo con varios paquetes, incluidos bibliotecas, plantillas de proyecto, SDK y otras herramientas.
Para ayudarle a navegar por el repositorio, aquí puede ver una visión general de cada paquete que contiene:
| Paquete | Descripción |
|---|---|
| commerce-sdk-react | Biblioteca de enlaces de React para obtener datos de Salesforce B2C Commerce. |
| internal-lib-build | Herramientas internas utilizadas por otros paquetes en el repositorio de pwa-kit. |
| pwa-kit-create-app | Herramienta para generar proyectos de PWA Kit en función de plantillas de proyectos. |
| pwa-kit-dev | Herramienta de línea de comandos para desarrollar, generar e implementar proyectos de PWA Kit. |
| pwa-kit-react-sdk | Biblioteca de componentes y utilidades que admite el pipeline de renderizado. |
| pwa-kit-runtime | Biblioteca de entornos de tiempo de ejecución que permite que las aplicaciones Node.js se ejecuten en Managed Runtime. |
| template-express-minimal | Plantilla de proyecto esquemático para aplicaciones que se ejecutan en Managed Runtime. |
| template-retail-react-app | Plantilla del proyecto que incluye un storefront de JavaScript isomórfico. |
| template-typescript-minimal | Plantilla de proyecto de configuración cero para aplicaciones TypeScript generadas con SDK de PWA Kit. |