使用 Web 组件处理 PWA 中的视图和语言环境的设计模式最佳实践
Design pattern best practices to handle views and locale in a PWA using web components
我正在使用 Web 组件制作我的第一个 PWA。我正在使用 lit-element 库。我已经有了一个基本的布局和东西，但我想建立一个好的系统来模块化加载视图，并能够处理每个视图中字符串的语言环境。
是否有任何最佳实践指南或设计模式可以提供一种清晰的方式来处理视图和语言环境，以确保高度的灵活性和适当的 url / 路由处理？
我不想购买框架。
首先让我们澄清一些术语：
- PWA（渐进式 Web 应用程序）是任何通过使用现代网络 API（例如 Service Worker）提供 native-app-like 体验的网络应用程序、通知 API 和 Web 应用程序清单。
- SPA（单页应用程序）是一个将其 URL 重定向到
index.html 然后使用 JavaScript 更新的网络应用程序无需再次请求 index.html 的页面内容。
PWA 可以是 SPA，也可以是传统的 (multi-page) 网络应用程序。因此，对您的问题的严格回答可能涉及任何语言的任何 Web 框架，无论是 back-end 还是前端。不过，我想你的问题更多地与 SPA 相关，而不是多页应用，所以这个答案的其余部分与 SPA 相关
现在“如何编写 SPA”是一个非常灵活和动态的领域，并且充满了各种意见。确实没有做到这一点的“正确方法”，但有一些首选结果，例如：
- Web 可访问性（即符合 WCAG）
- 加载性能（例如小包大小、快速首次绘制时间和其他指标）
- 运行时性能（例如避免卡顿）
- 用户体验
前三点资源很多，例如：
最后一点，用户体验，可能是主观的。但有些事情需要强调：
- 维持用户期望，例如后退按钮的工作方式
- 使用 URLs 来存储您的应用程序的状态，以便可以共享和复制它
但除此之外，真的没有极限。我不能说这个答案的其余部分是“规范”或“最佳”实践，但这些工具和方法对我有用。
路由器
路由器是 SPA 响应 URL 更改以更新页面的一种方式。它们通常通过拦截页面上的点击并阻止正常的浏览器导航过程来工作。
有无数的 SPA 路由库可以帮助您实现这些目标，以下是我过去使用过并可以推荐的三个：
- PWA-Helpers Router 是
小巧、简单、不拘一格
- Vaadin Router强大又受欢迎
- Simplr Router 是新的和有前途的
状态管理
对于 medium-large 应用，通常建议使用状态管理库来处理页面状态，例如启用了哪些按钮，要获取和显示哪些数据等
这里有很多选择，但一些流行的选项是：
特别是最后一个非常强大。我写了一个库来帮助它与网络组件一起使用：Apollo Elements
剩下的
对于其他事情，例如
- 如何编写组件
- 如何构建生产环境
- 如何设置开发工作流，
我whole-heartedly推荐Open Web Components（披露：我是核心成员）
我正在使用 Web 组件制作我的第一个 PWA。我正在使用 lit-element 库。我已经有了一个基本的布局和东西，但我想建立一个好的系统来模块化加载视图，并能够处理每个视图中字符串的语言环境。
是否有任何最佳实践指南或设计模式可以提供一种清晰的方式来处理视图和语言环境，以确保高度的灵活性和适当的 url / 路由处理？
我不想购买框架。
首先让我们澄清一些术语：
- PWA（渐进式 Web 应用程序）是任何通过使用现代网络 API（例如 Service Worker）提供 native-app-like 体验的网络应用程序、通知 API 和 Web 应用程序清单。
- SPA（单页应用程序）是一个将其 URL 重定向到
index.html然后使用 JavaScript 更新的网络应用程序无需再次请求index.html的页面内容。
PWA 可以是 SPA，也可以是传统的 (multi-page) 网络应用程序。因此，对您的问题的严格回答可能涉及任何语言的任何 Web 框架，无论是 back-end 还是前端。不过，我想你的问题更多地与 SPA 相关，而不是多页应用，所以这个答案的其余部分与 SPA 相关
现在“如何编写 SPA”是一个非常灵活和动态的领域，并且充满了各种意见。确实没有做到这一点的“正确方法”，但有一些首选结果，例如：
- Web 可访问性（即符合 WCAG）
- 加载性能（例如小包大小、快速首次绘制时间和其他指标）
- 运行时性能（例如避免卡顿）
- 用户体验
前三点资源很多，例如：
最后一点，用户体验，可能是主观的。但有些事情需要强调：
- 维持用户期望，例如后退按钮的工作方式
- 使用 URLs 来存储您的应用程序的状态，以便可以共享和复制它
但除此之外，真的没有极限。我不能说这个答案的其余部分是“规范”或“最佳”实践，但这些工具和方法对我有用。
路由器
路由器是 SPA 响应 URL 更改以更新页面的一种方式。它们通常通过拦截页面上的点击并阻止正常的浏览器导航过程来工作。
有无数的 SPA 路由库可以帮助您实现这些目标，以下是我过去使用过并可以推荐的三个：
- PWA-Helpers Router 是 小巧、简单、不拘一格
- Vaadin Router强大又受欢迎
- Simplr Router 是新的和有前途的
状态管理
对于 medium-large 应用，通常建议使用状态管理库来处理页面状态，例如启用了哪些按钮，要获取和显示哪些数据等
这里有很多选择，但一些流行的选项是：
特别是最后一个非常强大。我写了一个库来帮助它与网络组件一起使用：Apollo Elements
剩下的
对于其他事情，例如
- 如何编写组件
- 如何构建生产环境
- 如何设置开发工作流，
我whole-heartedly推荐Open Web Components（披露：我是核心成员）