微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

设计模式最佳做法,以使用Web组件处理PWA中的视图和语言环境

如何解决设计模式最佳做法,以使用Web组件处理PWA中的视图和语言环境

我正在使用Web组件制作第一个PWA。我正在使用照明元件库。我已经有了基本的布局和内容,但是我想建立一个用于模块化加载视图的良好系统,并能够处理每个视图中字符串的语言环境。

是否有任何最佳实践准则或设计模式可以提供清晰的方式来处理视图和语言环境,从而确保高度的灵活性和适当的url /路由处理?

我不想买一个框架。

解决方法

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

  • PWA (渐进式Web应用程序)是通过利用现代Web API(例如Service Worker,Notifications API和Web App Manifest)提供类似本机应用程序体验的任何Web应用程序。 / li>
  • SPA (单页应用程序)是一个网络应用程序,可将其URL重定向到index.html,然后使用JavaScript更新页面内容,而无需再次请求index.html

PWA可以是SPA,也可以是传统的(多页)Web应用程序。因此,对您问题的严格回答可能涉及任何语言的任何Web框架,无论是后端还是前端。我想您想知道的是,与多页应用程序相比,您对SPA的关注更多,因此,此答案的其余部分与SPA有关

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

  • 网络访问权限(即符合WCAG)
  • 加载性能(例如,小文件包尺寸,快速的首次涂漆时间和其他指标)
  • 运行时性能(例如避免出现垃圾)
  • 用户体验

前三点有很多资源,例如:

最后一点,用户体验可能是主观的。但有些事情需要强调:

  • 保持用户期望,例如后退按钮的工作方式
  • 使用URL存储应用程序的状态,以便可以共享和复制该应用程序

但是,实际上,天空是极限。我不能说这个答案的其余部分都是“规范”或“最佳”实践,但是这些工具和方法对我有用。

路由器

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

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

状态管理

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

这里有很多选择,但是一些受欢迎的选择是:

最后一个特别强大。我写了一个库来帮助将其与Web组件一起使用:Apollo Elements

其余

对于其他事情,例如

  • 如何编写组件
  • 如何为生产而建造
  • 如何设置开发工作流程,

我全心全意推荐Open Web Components(公开说明:我是核心成员)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。