本文概述
大约一年前的2013年5月, Google启动了Polymer.js。
一年之后, 我们到了。问题是：准备好迎接黄金时段了吗？是否有可能使用Polymer Web开发技术创建可用于生产的应用程序？
为了回答这个问题, 我带了Polymer进行测试驱动, 以开发Web应用程序并查看其表现如何。本文介绍了这种经验以及我在此过程中学到的知识。
Polymer.js：概念
在进入Polymer教程之前, 我们首先定义Polymer.js, 而不是定义它的名称, 而是定义它的实际含义。
当你开始查看Polymer时, 你会被它自称的独特世界观所吸引。 Polymer声称自己采取了一种回归自然的方法, 即”将元素放回到Web开发的中心”。使用Polymer.js, 你可以制作自己的HTML元素, 并将它们组成完整的, 可扩展和可维护的复杂Web应用程序。这一切都是关于创建新的(即自定义)元素, 然后可以以声明方式在HTML页面中重用它们, 而无需了解或了解其内部。
毕竟, 元素是网络的基础。因此, Polymer的建议是, Web开发从根本上应该基于扩展现有元素范式以构建功能更强大的Web组件, 而不是用”脚本块”(使用其文字)替换标记。换句话说, Polymer相信利用浏览器的”本机”技术, 而不是依赖于日益复杂的自定义JavaScript库的迷宫(jQuery等)。确实是一个有趣的概念。
好的, 这就是理论。现在让我们看一下现实。
Polymer Web开发：现实
尽管Polymer的哲学方法固然有其优点, 但不幸的是(至少在某种程度上)领先于时代。
Polymer.js依赖于仍在标准化过程中(由W3C进行)并且在当今的浏览器中尚不存在的许多技术, 对浏览器提出了大量要求。示例包括阴影dom, 模板元素, 自定义元素, HTML导入, 变异观察者, 模型驱动的视图, 指针事件和Web动画。这些是奇妙的技术, 但至少到现在为止, 这些技术还尚未出现在现代浏览器中。
Polymer策略是让前端开发人员利用这些仍基于浏览器的尖端技术, 这些技术目前已经标准化(通过W3C), 并已可用。同时, 为了填补空白, Polymer建议使用polyfills(可下载的JavaScript代码, 该代码提供了当今浏览器尚未内置的功能)。推荐的polyfill的设计方式是(至少理论上)一旦这些功能的本地浏览器版本可用就可以无缝替换。
好的。但是, 让我弄清楚这一点。至少到目前为止, 我们将使用JavaScript库(即polyfills)来避免使用JavaScript库？好吧, 那”很有趣”。
最重要的是, 我们与Polymer处于一种混战状态, 因为它最终依赖于(或者更准确地说是近似)尚不存在的浏览器技术。因此, Polymer.js如今似乎更像是对将来如何构建以元素为中心的应用程序的研究(即, 当在主要浏览器中实现了所有必要的功能并且不再需要polyfill时)。但是, 至少在目前, Polymer看起来更像是一个有趣的概念, 而不是用于在此时此刻创建健壮的”改变你的世界观”应用程序的实际选择, 这使编写(或查找)Polymer教程变得困难Google文档。
Polymer架构
现在, 进入我们的指南。 Polymer.js在结构上分为四层：
本机：所有主要浏览器本机当前可用的所需功能。基础：实现了所需的浏览器功能的Polyfill, 这些功能在浏览器本身尚不可用。 (该层的目的是随着其提供的功能在浏览器中本地可用而随时间消失)。核心：Polymer元素利用本机层和基础层提供的功能所必需的基础结构。元素：基本元素集, 旨在用作可帮助你创建应用程序的构建块。包括提供以下内容的元素：基本功能, 例如ajax, 动画, 伸缩布局和手势。封装复杂的浏览器API和CSS布局。 UI组件渲染器, 例如手风琴, 卡片和侧边栏。
相关：Init.js：为什么和如何使用全栈JavaScript指南
创建Polymer应用程序
首先, 有一些文章和教程文章可以帮助你介绍Polymer, 其概念和结构。但是, 如果你像我一样, 当你遍历它们并准备好实际构建你的应用程序时, 你会很快意识到你不太确定从哪里开始或如何创建它。既然我已经完成了整个过程并弄清楚了, 这里有一些提示…
PolymerWeb开发全部与创建元素有关, 仅与创建元素有关。因此, 与Polymer世界的观点一致, 我们的应用程序将成为……一个新元素。一无所有, 一无所有。哦, 知道了。这就是我们的起点。
对于我们的Polymer项目示例, 我将命名为应用程序的顶级元素, 因为自定义元素名称(无论你使用何种框架创建它们)都必须包含连字符(例如x-tags, polymer-elements等) )。
但是, 下一步需要更多的思考。我们需要决定如何对应用程序进行组件化。一种简单的方法是尝试从视觉角度识别应用程序中的组件, 然后尝试在Polymer中将它们创建为自定义元素。
例如, 假设我们有一个带有以下屏幕的应用程序：
我们可以确定顶部栏和侧栏菜单不会更改, 并且应用程序的实际”内容”可能会加载不同的”视图”。
在这种情况下, 一种合理的方法是为我们的应用程序创建元素, 然后在该元素内部, 我们可以使用一些Polymer UI Elements来创建顶部栏和侧面栏菜单。
然后, 我们可以创建两个主要视图, 分别称为ListView和SingleView, 以将其加载到”内容”区域中。对于ListView中的项目, 我们可以创建一个ItemView。
然后将产生如下结构：
好消息
现在我们有了示例Polymer应用程序, 只需导入” srcmini-app.html”并添加标签即可将其插入任何网页, 因为毕竟我们的应用程序只是一个元素。这很酷。
实际上, 它确实体现了Polymer范式的许多功能和优点。你为应用程序创建的自定义元素(包括整个应用程序的顶级元素)将被视为网页中的任何其他元素。因此, 你可以从任何其他JavaScript代码或库(例如Backbone.js, Angular.js等)访问它们的属性和方法。你甚至可以使用这些库来创建自己的新元素。
此外, 你的自定义组件与其他自定义元素库(例如Mozilla的X-Tag)兼容。因此, 你使用什么来创建自己的自定义元素都没有关系, 它与Polymer和其他任何浏览器技术都兼容。
因此, 毫不奇怪, 我们已经开始看到Element Creators社区的出现, 它们在诸如Custom Elements网站之类的论坛中公开和共享其新创建的元素。你可以去那里获取所需的任何组件, 然后在应用程序中使用它。
另一方面…
Polymer仍然是一种足够新的技术, 开发人员(尤其是新手应用程序开发人员)可能会发现它有些脆弱, 并具有许多不太容易找到的粗糙边缘。
这是一个样本：
- 缺乏文档和指导。
- 并非所有的Polymer.js UI和非UI元素都已记录在案。有时, 关于如何使用它们的唯一”指导”是演示代码。在某些情况下, 甚至有必要参考Polymer Element的源代码以更好地了解它的工作方式以及可以/应该使用的方式。
- 目前尚不清楚如何组织更大的应用程序。特别是, 你应该如何在元素之间传递单例对象？你应该采用哪种策略来测试自定义元素？到目前为止, 关于这类问题的指导充其量是很少的。
-
依赖性错误和版本炎。即使按照建议的方式下载Polymer.js元素, 你也可能会遇到依赖项错误, 指向同一元素中的不同版本依赖项。虽然可以理解, Polymer元素目前正在大量开发中, 但是这类问题会使开发变得颇具挑战性, 侵蚀了开发人员的信心和兴趣。
- 移动平台上的问题。移动平台上的Polymer.js性能通常介于令人沮丧和有问题之间。
- 下载整个库和polyfill(不进行gzip压缩)很慢, 因此你需要下载要使用的每个Polymer Element。
- 在移动平台上, 处理polyfill, 库和自定义元素似乎是一项昂贵的任务。即使下载完成, 你仍然经常会在空白屏幕上停留几秒钟。
- 特别是对于更复杂的功能(例如拖放或渲染到画布中), 你可能会发现在桌面上正常工作的功能根本无法在移动平台上正常工作或尚不支持。在我的特殊情况下, 我遇到的一个挫折感就是在iOS上渲染为画布。
- 错误报告不充分或令人困惑。有时, 当你拼写错误的属性名称或只是破坏与核心层本身相关的内容时, 你会在控制台上收到一条奇怪的错误消息, 其中包含两个调用堆栈, 你需要调查这些调用堆栈以尝试确定问题出在哪里。有时候解决这个问题很容易, 但是有时候你最终不得不尝试一种完全不同的策略, 只是为了避免错误, 因为你无法找到错误的源头。
总结
Polymer是有趣的技术, 但不可否认, 它仍处于起步阶段。因此, 它不太适合开发大型的企业级, 可用于生产的应用程序。此外, 对于Polymer.js网络开发, 没有很多可用的指南或教程。
至于以JavaScript为中心的方法还是以DOM为中心的方法从根本上来说是更好的选择, 目前尚无定论。 Polymer提出了一些令人信服的论点, 但确实存在反论点。
也许最值得注意的是, Polymer在使用诸如DOM之类的浏览器技术时需要相当丰富的专业知识。你将以多种方式回到jQuery之前的日子, 学习DOM API来完成一些简单的任务, 例如在元素中添加或删除CSS类。至少在某种程度上, 这确实的确使你感觉到你正在往后退而不是前进。
但是, 话说回来, 自定义元素很可能会成为将来Web开发的重要组成部分, 因此, 对于当今的Web开发人员而言, 早日而不是早日潜水是明智的。而且, 如果你以前从未尝试过创建自己的自定义元素, Polymer(以及本教程)可能是一个明智的起点。
相关：流星教程：使用流星构建实时Web应用程序
