PWA Kit 概述
本概述简要介绍 PWA Kit(PWA 套件)架构的主要部分,并为您提供有关产品文档其余部分的有用的上下文。
Retail React App(零售反应应用)是针对电子商务进行了优化的服务器端呈现的 React(反应)应用程序。它为您构建已经包含以下关键功能的网店提供了入手点:
- 代码捆绑包、代码拆分和转译
- 带有主题的组件库
- 基于 JavaScript 的样式系统(JS 中的 CSS)
- 用于自动化日常开发任务的脚本
- 用于 Progressive Web App (PWA) 功能的 Service Worker 和清单
- 测试套件
Retail React App 的网店包括标准电子商务页面和功能,例如产品列表页面 (PLP)、产品详细信息页面 (PDP)、购物车和结帐。网店的每个方面都旨在使用您自己的代码进行增强和扩展。
要了解更多信息,请阅读完整的架构指南 → Retail React App。
为获得最佳购物体验,PWA Kit 网店使用进行渲染和路由的系统,该系统在两种不同的上下文中运行相同的源代码:服务器端和客户端。服务器端渲染优化了初始页面加载速度,而客户端渲染实现了响应式用户界面和平滑的页面转换。
渲染和路由系统由 Retail React App 使用其 Express服务器配置和 React 组件的层次结构建立。在这个系统中,您可以:
- 添加新页面组件和修改现有页面组件
- 从 API 请求或用户交互向页面组件提供数据
- 定义将 URL 请求路由到页面组件的模式
- 自定义所有页面的输出
PWA Kit 是托管在 GitHub 上的开源项目。
PWA Kit 的 GitHub 存储库设置为带有多个包的单一存储库,包括库、项目模板、SDK 和其他工具。
为了帮助您浏览存储库,以下是它包含的每个包的概述:
包 | 说明 |
---|---|
commerce-sdk-react | 用于从 Salesforce B2C Commerce 获取数据的 React 挂钩库。 |
internal-lib-build | 由 pwa-kit 存储库中的其他包使用的内部工具。 |
pwa-kit-create-app | 基于项目模板生成 PWA Kit 项目的工具。 |
pwa-kit-dev | 用于开发、构建和部署 PWA Kit 项目的命令行工具。 |
pwa-kit-react-sdk | 支持渲染管道的组件和实用程序库。 |
pwa-kit-runtime | 使 Node.js 应用程序能够在 Managed Runtime 上运行的运行时环境库。 |
template-express-minimal | 在 Managed Runtime 运行的应用程序的准系统项目模板。 |
template-retail-react-app | 包含同构 JavaScript 网店的项目模板。 |
template-typescript-minimal | 使用 PWA Kit SDK 构建的 TypeScript 应用程序的零配置项目模板。 |