让我们使用 Polymer 构建一些应用!

去年,Polymer 团队花费了大量时间来教开发者如何创建自己的元素。这带来了一个快速发展的生态系统,这在很大程度上得益于 Polymer 的核心元素和 Paper 元素,以及 Mozilla 团队创建的 Brick 元素。

随着开发者越来越熟悉如何创建自己的元素,并开始考虑构建应用,一些问题随之而来:

  • 应该如何设计应用界面的结构?
  • 您如何在不同的状态之间转换?
  • 有哪些提升广告效果的策略?
  • 您应该如何提供离线体验?

在 Chrome 开发者峰会上,我尝试通过构建一款小型通讯录应用并分析构建该应用的过程来解答这些问题。以下是我的想法:

结构

将应用分解为可组合和重复使用的模块化部分是 Web 组件的核心租户。Polymer 的 core-* 和 paper-* 元素可让您轻松地从一些小组件着手,例如 core-工具栏paper-icon-button...

Polymer 可帮助开发者更快地构建应用

...利用组合的强大力量,将它们与任意数量的元素组合起来,创建一个应用 Scaffold。

Polymer 让 Web 组件更贴心

搭建通用 Scaffold 之后,您就可以应用自己的 CSS 样式,将其打造为您的品牌独有的体验。使用组件执行此操作的好处在于,您可以在利用相同应用构建基元的同时打造截然不同的体验。有了基架后,您就可以继续思考内容。

core-list 是特别适合处理大量内容的一个元素。

Polymer 让 Web 组件更贴心

core-list 可以连接到数据源(基本上是对象数组),对于数组中的每一项,它都会生成一个模板实例。在模板中,您可以利用 Polymer 数据绑定系统的强大功能,快速将您的内容连接起来。

转场效果

设计和实现应用的各个部分后,下一个任务是弄清楚如何在这些部分之间实际导航。

虽然仍是实验性元素,但 core-animated-pages 提供了一个可插入的动画系统,可用于在应用中的不同状态之间转换。

Polymer 报告卡片需要改进

但动画只是整个谜题的一半,应用需要将这些动画与路由器结合起来,才能正确管理其网址。

在网络组件中,路由分为两种类型:命令式和声明式。根据您的项目需求,将 core-animated-pages 与上述任一方法结合使用都是有效的。

命令式路由器(例如 Flatiron's Director)可以监听匹配的路由,然后指示 core-animated-pages 更新其所选项。

Polymer 报告卡片需要改进

如果您需要在路线匹配后到下一部分过渡之前执行一些操作,这会非常有用。

另一方面,声明式路由器(例如 app-router)实际上可以将路由和 core-animated-pages 合并到单个元素中,从而使两者的管理变得更简单。

Polymer 报告卡片需要改进

如果您希望进行更精细的控制,则可以考虑使用更路由这样的库,它可以通过数据绑定与 core-animated-pages 结合使用,从而可以实现两全其美。

性能

随着您的应用逐渐成型,您必须密切关注性能瓶颈,尤其是与网络相关的所有瓶颈,因为这通常是移动网络应用运行速度最慢的部分。

有条件地加载 Web 组件 polyfill 有助于轻松提升性能。

Polymer 报告卡片需要改进

如果平台已经获得全面支持,那就无需承担那么多的费用!在新的 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 导入内容,还可以显著提升网络性能。

Polymer 报告卡片需要改进

Vulcanize 会将您的导入内容合并成一个 bundle,从而大幅减少应用发出的 HTTP 请求数量。

线下

但仅仅构建高性能应用并不能解决用户连接很少或没有网络连接的困境。换言之,如果您的应用无法离线工作,那么它就不是真正的移动应用。目前,您可以使用多样化的应用缓存来离线您的资源,但展望未来,Service Worker 应该很快就会改善离线开发体验。

Jake Archibald 最近发表了有关 Service Worker 模式的精彩实战宝典,但我将为您提供快速入门教程:

安装 Service Worker 非常简单。创建一个 worker.js 文件,并在应用启动时注册该文件。

Polymer 报告卡片需要改进

请务必在应用的根目录中找到 worker.js,这样才能拦截来自应用中任何路径的请求。

在工作器的安装处理程序中,我将大量资源(包括驱动该应用的数据)缓存起来。

Polymer 报告卡片需要改进

这样,如果用户离线访问我的应用,我的应用至少可以提供一种后备体验。

继续前进!

Web 组件是 Web 平台的一大新增亮点,但它们仍处于起步阶段。随着这些应用进入越来越多的浏览器,构建应用程序的最佳实践将由我们(开发者社区)来负责。上述解决方案只是一个起点,还有很多需要了解。继续打造更出色的应用!