在过去一年中,Polymer 团队花了很多时间教开发者如何创建自己的元素。这促成了生态系统的快速发展,而这在很大程度上得益于 Polymer 的 Core 和 Paper 元素,以及 Mozilla 团队创建的 Brick 元素。
随着开发者逐渐熟悉创建自己的元素并开始考虑构建应用,就会产生许多问题:
- 您应如何构建应用的界面?
- 如何转换到不同的状态?
- 有哪些策略可以提升效果?
- 您又该如何提供线下体验?
在 Chrome 开发者大会上,我尝试通过构建一个小型通讯录应用并分析构建过程,来解答这些问题。我提出了以下建议:
结构
将应用拆分为可组合和重复使用的模块化部分是 Web 组件的核心理念。借助 Polymer 的 core-* 和 paper-* 元素,您可以轻松从小部件(例如 paper-toolbar 和 paper-icon-button)开始。

借助强大的组合功能,您可以将它们与任意数量的元素组合起来,以创建应用框架。

通用框架就绪后,您可以应用自己的 CSS 样式,将其转变为独具您品牌特色的体验。使用组件执行此操作的优势在于,您可以利用相同的应用构建基元来创建截然不同的体验。有了框架,您就可以继续考虑内容了。
core-list
非常适合处理大量内容。

core-list
可以连接到数据源(基本上是对象数组),并且对于数组中的每个项,它都会打印一个模板实例。在模板中,您可以利用 Polymer 强大的数据绑定系统快速连接内容。
转场效果
设计和实现应用的各个部分后,下一步就是确定如何实际在这些部分之间导航。
虽然 core-animated-pages
仍处于实验阶段,但它提供了一个可插拔的动画系统,可用于在应用的不同状态之间进行转换。

但动画只是问题的一半,应用需要将这些动画与路由器结合使用,才能妥善管理其网址。
在 Web 组件中,路由分为两种:命令式和声明式。您可以根据项目需求将 core-animated-pages
与任一方法结合使用。
命令式路由器(例如 Flatiron 的 Director)可以监听匹配的路由,然后指示 core-animated-pages
更新其所选项。

如果您需要在路线匹配后且在下一部分过渡之前执行一些工作,这会非常有用。
另一方面,声明式路由器(例如 app-router)实际上可以将路由和 core-animated-pages
合并到单个元素中,从而简化这两者的管理。

如果您希望实现更精细的控制,可以考虑使用 more-routing 等库,该库可与 core-animated-pages
结合使用数据绑定,从而让您同时获得这两者的优势。
性能
在应用逐渐成形的过程中,您必须密切关注性能瓶颈,尤其是与网络相关的任何内容,因为这通常是移动网站应用中最慢的部分。
通过有条件地加载 Web 组件 polyfill,您可以轻松提升性能。

如果平台已经提供全面支持,就没有必要承担所有这些费用!在新 webcomponents.js 代码库的每个版本中,polyfill 也已拆分为独立文件。如果您想有条件地加载部分 polyfill,这将非常有用。
<script>
if ('import' in document.createElement('link')) {
// HTML Imports are supported
} else {
document.write(
'<script src="bower_components/webcomponentsjs/HTMLImports.min.js"><\/script>'
);
}
</script>
此外,通过 Vulcanize 等工具运行所有 HTML 导入内容还能显著提升网络性能。

Vulcanize 会将导入内容串联到单个软件包中,从而显著减少应用发出的 HTTP 请求数量。
离线
但是,仅仅构建高性能应用并不能解决用户网络连接不佳或根本没有网络连接这一难题。换句话说,如果您的应用无法离线运行,那么它就不是真正的移动应用。目前,您可以使用备受诟病的应用缓存将资源离线存储,但展望未来,Service Worker 很快就会让离线开发体验变得更加出色。
Jake Archibald 最近发布了一本出色的 Service Worker 模式食谱,但我会为您提供快速入门指南,帮助您上手:
安装 Service Worker 非常简单。创建一个 worker.js
文件,并在应用启动时将其注册。

请务必将 worker.js
放置在应用的根目录中,这样它才能拦截来自应用中任何路径的请求。
在 worker 的 install 处理程序中,我缓存了大量资源(包括为应用提供支持的数据)。

这样一来,如果用户在离线状态下访问我的应用,应用至少可以为其提供后备体验。
继续!
Web 组件是 Web 平台的重要补充,但仍处于起步阶段。随着 WebAssembly 在更多浏览器中推出,我们开发者社区需要确定构建应用的最佳实践。上述解决方案为我们提供了一个起点,但我们仍有许多需要学习的内容。继续构建更出色的应用!