2014 年 Chrome 开发者峰会 - 使用 Polymer 构建一些应用

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

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

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

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

结构

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

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

借助组合的强大功能,将它们与任意数量的元素组合起来,形成应用基架。

Polymer 让 Web Components 更贴心

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

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

Polymer 让 Web Components 更贴心

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,这样才能拦截来自应用中任何路径的请求。

在 worker 的安装处理程序中,我缓存大量资源(包括支持应用的数据)。

Polymer 报告卡片需要改进

这样,如果用户离线访问应用,应用就能至少为用户提供后备体验。

继续前进!

Web 组件是 Web 平台的一项新增功能,目前仍处于起步阶段。随着应用越来越多地推出,将由我们(开发者社区)来找出构建应用程序的最佳实践。上述解决方案只是一个开始,还有很多东西需要了解。继续构建更优质的应用!