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

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

随着开发者越来越熟悉如何创建自己的元素,并开始考虑构建应用,这就带来了许多问题:

  • 您应如何构建应用的界面?
  • 您如何在不同状态之间过渡
  • 可以采用哪些策略来提升效果
  • 应如何提供离线体验?

对于 Chrome 开发者峰会,我尝试通过构建小型通讯录应用并分析构建流程来回答这些问题。以下是我找到的内容:

结构

将应用分解为可组合和重复使用的模块化片段是 Web 组件的核心租户。Polymer 的 core-* 和 paper-* 元素可以轻松从小块开始,例如 core-toolbarpaper-icon-button...

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

...借助组合的强大力量,可以将它们与任意数量的元素结合使用,以构建应用基架。

Polymer 使 Web 组件的功能更丰富

搭建通用基架后,您可以应用自己的 CSS 样式,将其转换为品牌独有的体验。使用组件执行此操作的优点是,它使您能够在利用相同的应用构建基元创建截然不同的体验。搭建好支架后,就可以开始思考内容了。

有一个元素特别适合处理大量内容,那就是 core-list

Polymer 使 Web 组件的功能更丰富

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

转场效果

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

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

Polymer 报告卡需要改进

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

在 Web 组件的路由中,路由分为两种形式:命令式和声明式。根据您的项目需求,将 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 平台的重大补充,但仍处于起步阶段。随着这些技术陆续登陆更多浏览器,我们(开发者社区)将需要找出构建应用结构的最佳实践。以上解决方案给我们提供了一个起点,但还有很多内容需要了解。继续构建更优质的应用!