使用 Web 组件处理 PWA 中的视图和语言环境的设计模式最佳实践

Question

我正在使用 Web 组件制作我的第一个 PWA。我正在使用 lit-element 库。我已经有了一个基本的布局和东西，但我想建立一个好的系统来模块化加载视图，并能够处理每个视图内字符串的语言环境。是否有任何最佳实践指南或设计模式可以提供一种清晰的方式来处理视图和语言环境，以确保高度的灵活性和适当的 url / 路由处理？我不想购买框架。

Answer 1

首先让我们澄清一些术语：

• PWA（渐进式 Web 应用程序）是任何通过使用现代 Web API（例如 Service Worker、Notifications API 和 Web App Manifest）提供类似本机应用程序体验的 Web 应用程序。

• SPA（单页应用程序）是一种网络应用程序，可将其 URL 重定向到index.html，然后使用 JavaScript 更新页面内容，而无需index.html再次请求。

PWA 可以是 SPA，也可以是传统的（多页面）网络应用程序。因此，对您的问题的严格回答可能涉及任何语言的任何 Web 框架，无论是后端还是前端。不过，我想你的问题更多地与 SPA 相关，而不是多页应用程序，所以这个答案的其余部分与 SPA 相关

现在“如何编写 SPA”是一个非常灵活和动态的领域，并且充满了意见。确实没有“正确的方法”来做到这一点，但有一些首选的结果，例如：

• Web 可访问性（即符合 WCAG）

• 加载性能（例如小包大小、快速首次绘制时间和其他指标）

• 运行时性能（例如避免卡顿）

• 用户体验

最后一点，用户体验，可能是主观的。但有些事情可以强调：

• 维护用户期望，例如后退按钮的工作方式

• 使用 URL 存储应用程序的状态，以便共享和复制

但除此之外，真的没有极限。我不能说这个答案的其余部分是“规范”或“最佳”实践，但这些工具和方法对我有用。

路由器

路由器是 SPA 响应 URL 更改以更新页面的一种方式。它们通常通过拦截页面上的点击并阻止正常的浏览器导航过程来工作。

有无数的 SPA 路由库可以帮助您实现这些目标，以下是我过去使用过并可以推荐的三个：

• PWA-Helpers Router小巧、简单且不拘一格

• Vaadin Router功能强大且流行

• Simplr Router是新的和有前途的

状态管理

对于中大型应用程序，通常建议使用状态管理库来处理页面状态，例如启用了哪些按钮、要获取和显示哪些数据等。

这里有很多选择，但一些流行的选择是：

• 终极版

• MobX

• 阿波罗（用于 GraphQL）

尤其是最后一个非常强大。我写了一个库来帮助它与 Web 组件一起使用：Apollo Elements

其余的部分

对于其他事情，例如

• 如何编写组件

• 如何构建生产

• 如何设置开发工作流程