大约一年前，也就是2013年5月，b谷歌上线了 Polymer.js.

所以一年后，我们到了这里. 问题是:它是否已经为黄金时段做好了准备? 是否有可能使用聚合物web开发技术创建一个生产就绪的应用程序?

要回答这个问题, 我把Polymer拿出来试驾，以开发一个web应用程序，看看它的表现如何. 这篇文章就是关于这段经历以及我在这个过程中学到的东西.

Polymer.js: The Concept

在我们进入我们的聚合物教程之前，让我们首先定义聚合物.不是因为它声称是什么，而是因为它实际上是什么.

当你开始检查聚合物, 你会不由自主地被它自称独特的世界观所吸引. Polymer声称自己采取了一种回归自然的方法，“将元素放回到web开发的中心”。. With Polymer.j，你可以自己制作 HTML elements 并将它们组合成完整的、复杂的、可扩展和可维护的web应用程序. 这一切都是关于创造新事物.e., 自定义)元素，这些元素可以以声明的方式在HTML页面中重用, 不需要知道或理解它们的内部结构.

毕竟，元素是网络的基石. 因此,聚合物的 weltanschauung web开发是否应该从根本上基于扩展现有元素范例来构建更强大的功能 web components，而不是用“脚本”(用他们的话来说)替换标记。. 换一种说法, Polymer相信利用浏览器的“原生”技术，而不是依赖于越来越复杂的自定义JavaScript库(jQuery et. al.). 这确实是个有趣的想法.

好的，这就是理论. 现在让我们来看看现实.

聚合物网络开发:现实

而聚合物的哲学方法当然有其优点, 不幸的是，这是一个(至少在某种程度上)超前于时代的想法.

Polymer.Js对浏览器提出了大量的要求, 依赖于许多仍在标准化过程中的技术(由W3C)，并且尚未出现在当今的浏览器中. 例子包括 shadow dom, 模板元素, custom elements, HTML imports, 突变观察员、模型驱动视图; pointer events, and web animations. 这些都是了不起的技术，但至少到目前为止，它们还没有出现在现代浏览器中.

聚合物策略是 前端开发人员 利用这些前沿技术, still-to-come, 基于浏览器的技术, 目前正在标准化过程中(由W3C), 当它们可用时. 同时，为了填补这一空白，聚合物建议使用 polyfills (可下载的JavaScript代码，提供了当今浏览器尚未内置的功能). 推荐的polyfills是这样设计的(至少在理论上)，一旦这些功能的本地浏览器版本可用，就可以无缝地替换.

OK, fine. 但是让我把事情搞清楚. 至少现在，我们将使用JavaScript库.e.(polyfills)以避免使用JavaScript库? 这就是"迷人".

The bottom line, then, 是我们在聚合物上处于一种不确定的模式, 因为它最终依赖于(或者更准确地说), 接近于还不存在的浏览器技术. 因此,聚合物.今天的Js似乎更像是在研究未来如何构建以元素为中心的应用程序.e., 当所有必要的特性都在主流浏览器中实现并且不再需要填充时). But, 至少目前是这样, 聚合物看起来更像是一个有趣的概念，而不是现在创建健壮的“改变你对世界的看法”应用程序的实际选择, 这使得在b谷歌的文档之外编写(或查找)一个聚合物教程变得困难.

聚合物体系结构

现在，看看我们的指南. Polymer.Js在架构上分为四层:

原生:所有主流浏览器当前本地可用的所需功能. 基础:实现浏览器本身尚未提供的所需浏览器特性的Polyfills. (其目的是让这一层随着时间的推移而消失，因为它提供的功能将在浏览器中本地可用.). 核心:聚合物元素利用原生层和基础层提供的功能所必需的基础结构.. 元素:一组基本的元素, 旨在作为可以帮助您创建应用程序的构建块. 包括提供以下内容的元素: 基本功能，如ajax、动画、flex布局和手势. 封装复杂的浏览器api和CSS布局. UI组件渲染器，如手风琴、卡片和侧边栏.

创建聚合物应用程序

首先，有一些 articles and tutorial write-ups 帮助您了解聚合物，它的概念和结构. 但如果你像我一样, 当您完成它们并准备好实际构建应用程序时, 你很快意识到你真的不太确定从哪里开始或者如何创建它. 既然我现在已经经历了这个过程并弄清楚了，这里有一些建议…

聚合物web开发就是关于创建元素，并且仅仅是关于创建元素. 因此，与聚合物世界观一致，我们的应用程序将成为……一个新元素. 不多不少. Oh OK, I get it. 这就是我们开始的地方.

对于我们的Polymer项目示例，我将命名应用程序的顶层元素 , 由于自定义元素名称(无论使用什么框架创建它们)必须包含连字符(e.g.， x标签，聚合物元件等.).

然而，下一步需要更多的思考. 我们需要决定如何将应用程序组件化. 一个简单的方法就是试着去识别, 从视觉角度看, 在我们的应用程序中的组件，然后尝试创建它们作为自定义元素在聚合物.

例如，假设我们有一个应用程序，它的屏幕如下:

我们可以确定，顶部栏和侧边栏菜单不会改变，应用程序的实际“内容”可以加载不同的“视图”.

在这种情况下，一个合理的方法是创建 元素和, 在元素内部, 我们可以使用一些聚合物UI元素来创建顶部栏和侧栏菜单.

然后我们可以创建两个主要视图, 一个叫ListView，一个叫SingleView, 要加载到“content”区域. 对于ListView中的项，我们可以创建一个ItemView.

这将产生一个类似这样的结构:

The Good News

现在我们有了我们的示例聚合物应用程序, 我们可以通过导入我们的“toptal-app”将其插入任何网页.Html”并添加标记 因为，我们的应用毕竟只是一个元素. That’s cool.

事实上，这正是聚合物范式的力量和魅力所在. 为应用程序创建的自定义元素(包括整个应用程序的顶层元素)被视为网页中的任何其他元素. 因此，您可以从任何其他JavaScript代码或库(例如JavaScript代码库)访问它们的属性和方法.g., Backbone.js, Angular.js, etc.). 您甚至可以使用这些库来创建自己的新元素.

Moreover, 您的自定义组件与其他自定义元素库(如Mozilla的)兼容 X-Tag). 因此，使用什么来创建自己的自定义元素并不重要, 它与聚合物和任何其他浏览器技术兼容.

因此，我们已经开始看到一个元素创造者社区的出现，他们在论坛上公开和分享他们新创建的元素，这并不奇怪 Custom Elements site. 你可以找到任何你需要的组件然后在你的应用中使用它.

另一方面，……

聚合物仍然是一项足够新的技术，特别是开发人员 新手应用开发者他们可能会发现它有点脆，有一些不那么难发现的粗糙边缘.

这里有一个例子:

• 缺乏文档和指导.
  • Not all Polymer.js UI和非UI元素都有文档. 有时候，关于如何使用它们的唯一“指导”就是演示代码. In some cases, 甚至有必要参考一个聚合物元素的源代码，以更好地理解它是如何工作的，可以/应该使用.
  • 如何组织更大的应用程序并不完全清楚. 特别是，如何在元素之间传递单例对象? 您应该采用哪种策略来测试自定义元素? 在这一点上，关于这类问题的指导充其量是很少的.

• 依赖错误和版本问题. 即使你下载了Polymer.Js元素, 您可能会发现自己遇到依赖项错误, 指向同一元素中的不同版本依赖项. 众所周知，聚合物元件目前正在大力发展, 这类问题会使开发变得相当具有挑战性, 侵蚀开发者的信心和兴趣.

• 手机平台的问题. Polymer.Js在移动平台上的表现通常是令人沮丧和有问题的.
  • 下载整个库和多边形(没有 gzip()是缓慢的，并且您需要下载您打算使用的每个Polymer Element.
  • 处理多边形, libraries, 在移动平台上定制元素似乎是一项昂贵的任务. 即使下载完成，你仍然经常有几秒钟的空白屏幕.
  • 特别是对于更复杂的功能(例如拖放或呈现到画布中), 您可能会发现在桌面上运行良好的功能根本无法正常工作, 或者还不支持, 在移动平台. 在我的特殊情况下，我遇到的一个这样的挫折是 在iOS上渲染成画布.
• 错误报告不充分或令人困惑. 有时当您拼错属性名称时, 或者只是破坏与核心层本身有关的东西, 您在控制台收到一条奇怪的错误消息，其中包含两个调用堆栈，您需要对其进行调查以确定问题所在. 有时候解决这个问题很容易, 但有时你最终需要尝试一种完全不同的策略来避免错误，因为你无法追踪到它的来源.

Conclusion

聚合物是一项有趣的技术，但不可否认，它仍处于起步阶段. As such, 它还不太适合开发大型, enterprise level, 生产就绪的应用程序. 此外，没有很多针对Polymer的指南或教程.Js web开发.

至于以javascript为中心的方法还是以dom为中心的方法从根本上更好, 目前尚无定论. 聚合物提出了一些令人信服的论点，但也存在相反的论点.

也许最值得注意的是, 聚合物要求在使用浏览器技术(如DOM)方面具有相当高的专业水平. 在很多方面，您都回到了jQuery之前的时代, 学习DOM API来完成简单的任务，比如从元素中添加或删除CSS类. 这确实让人感觉, 至少在某种程度上是这样, 好像你是在后退而不是前进.

But that said, 自定义元素在未来很可能成为Web开发的重要组成部分, 因此，就目前而言，趁早出手或许是明智的 web developer. 如果您以前从未尝试过创建自己的自定义元素, 聚合物(和本教程)可能是一个明智的开始.