Polymer.js：Web 应用程序开发的未来？
已发表: 2022-03-11大约一年前的 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 制定）并且尚未出现在当今浏览器中的技术。 示例包括 shadow dom、模板元素、自定义元素、HTML 导入、突变观察者、模型驱动视图、指针事件和 Web 动画。 这些都是了不起的技术，但至少到目前为止，这些技术还没有出现在现代浏览器中。
Polymer 的策略是让前端开发人员利用这些领先的、即将出现的、基于浏览器的技术，这些技术目前正处于标准化过程中（由 W3C 提供）。 同时，为了填补这一空白，Polymer 建议使用 polyfill（可下载的 JavaScript 代码，提供当今浏览器尚未内置的功能）。 推荐的 polyfill 的设计方式是（至少在理论上）一旦这些功能的本机浏览器版本可用，就可以无缝替换。
好的。 但让我直截了当。 至少现在，我们将使用 JavaScript 库（即 polyfills）来避免使用 JavaScript 库？ 嗯，这很“迷人”。
因此，底线是我们处于 Polymer 的一种不确定模式，因为它最终依赖于（或者更准确地说，近似于）尚不存在的浏览器技术。 因此，今天的 Polymer.js 似乎更像是对未来如何构建以元素为中心的应用程序的研究（即，当所有必要的功能都在主要浏览器中实现并且不再需要 polyfill 时）。 但是，至少目前，Polymer 似乎更像是一个有趣的概念，而不是在此时此地创建强大的改变你的世界观的应用程序的实际选项，这使得在外面编写（或查找）Polymer 教程变得困难谷歌的文档。
聚合物架构
现在，进入我们的指南。 Polymer.js 在架构上分为四层：
原生：目前所有主流浏览器都原生提供所需的功能。 Foundation：实现所需浏览器功能的 Polyfills，这些功能在浏览器本身中尚不可用。 （目的是让这一层随着时间的推移而消失，因为它提供的功能在浏览器中本机可用。）。 核心：Polymer 元素利用 Native 和 Foundation 层提供的功能所必需的基础设施。元素：一组基本元素，旨在用作可以帮助您创建应用程序的构建块。 包括提供以下功能的元素： 基本功能，如 ajax、动画、flex 布局和手势。 封装复杂的浏览器 API 和 CSS 布局。 UI 组件渲染器，例如手风琴、卡片和侧边栏。
创建聚合物应用程序
首先，有一些文章和教程文章可以帮助您了解 Polymer、它的概念和结构。 但是，如果您像我一样，当您完成它们并准备实际构建您的应用程序时，您很快就会意识到您真的不太确定从哪里开始或如何创建它。 既然我现在已经完成了这个过程并弄清楚了，这里有一些指示……
Polymer Web 开发都是关于创建元素的，并且只是关于创建元素。 因此，与 Polymer 的世界观一致，我们的应用程序将成为……一个新元素。 不多也不少。 哦，好的，我明白了。 这就是我们开始的地方。
对于我们的 Polymer 项目示例，我将命名应用程序的顶级元素
然而，下一步需要更多的思考。 我们需要决定如何组件化我们的应用程序。 一种简单的方法是尝试从视觉角度识别我们应用程序中的组件，然后尝试将它们创建为 Polymer 中的自定义元素。
例如，假设我们有一个具有以下屏幕的应用程序：
我们可以确定顶部栏和侧边栏菜单不会改变，应用程序的实际“内容”可能会加载不同的“视图”。
在这种情况下，一种合理的方法是创建
然后我们可以创建两个主视图，我们将它们称为 ListView 和 SingleView，以加载到“内容”区域。 对于 ListView 中的项目，我们可以创建一个 ItemView。
这将产生一个类似这样的结构：
好消息
现在我们有了示例 Polymer 应用程序，我们可以将其插入到任何网页中，只需导入“toptal-app.html”并添加标签
事实上，Polymer 范式的强大之处和美丽之处确实在于其中。 您为应用程序创建的自定义元素（包括整个应用程序的顶级元素）被视为网页中的任何其他元素。 因此，您可以从任何其他 JavaScript 代码或库（例如，Backbone.js、Angular.js 等）访问它们的属性和方法。 您甚至可以使用这些库来创建自己的新元素。
此外，您的自定义组件与其他自定义元素库（例如 Mozilla 的 X-Tag）兼容。 因此，无论您使用什么来创建自己的自定义元素，它都与 Polymer 和任何其他浏览器技术兼容。
因此，我们已经开始看到元素创建者社区的出现并不奇怪，他们在自定义元素网站等论坛上公开和分享他们新创建的元素。 你可以去那里获取你需要的任何组件，然后在你的应用程序中使用它。
另一方面…
Polymer 仍然是一种足够新的技术，开发人员，尤其是新手应用程序开发人员，可能会发现它有些脆弱，有许多不那么难发现的粗糙边缘。
这是一个示例：
- 缺乏文件和指导。
- 并非所有 Polymer.js UI 和非 UI 元素都已记录在案。 有时，关于如何使用它们的唯一“指导”就是演示代码。 在某些情况下，甚至有必要参考 Polymer Element 的源代码，以更好地了解它的工作原理以及可以/应该使用的方式。
- 如何组织更大的应用程序并不完全清楚。 特别是，你应该如何在元素之间传递单例对象？ 您应该采用哪种策略来测试您的自定义元素？ 在这一点上，关于这些类型问题的指导充其量是很少的。
依赖错误和版本问题。 即使按照推荐的方式下载 Polymer.js 元素，您也可能会发现依赖项错误，指向同一元素中的不同版本依赖项。 虽然据了解，Polymer Elements 目前正在大力开发中，但这类问题可能会使开发变得相当具有挑战性，削弱开发人员的信心和兴趣。
- 移动平台上的问题。 Polymer.js 在移动平台上的性能通常介于令人沮丧和有问题之间。
- 下载整个库和 polyfills（没有 gzip'ing）很慢，你需要下载你打算使用的每个 Polymer Element。
- 在移动平台上处理 polyfill、库和自定义元素似乎是一项昂贵的任务。 即使下载完成，您仍然经常会出现几秒钟的空白屏幕。
- 特别是对于更复杂的功能（例如拖放或渲染到画布），您可能会发现在桌面上运行良好的功能在移动平台上无法正常运行或尚不支持。 在我的特殊情况下，我遇到的一个挫折是在 iOS 上渲染到画布上。
- 错误报告不足或令人困惑。 有时，当您拼错属性名称，或者只是破坏了与核心层本身相关的内容时，您会在控制台上收到一条奇怪的错误消息，其中包含两个调用堆栈，您需要对其进行调查以确定问题出在哪里。 有时很容易解决这个问题，但有时你最终需要尝试完全不同的策略来避免错误，因为你无法追踪它的来源。
结论
聚合物是一种有趣的技术，但不可否认它仍处于起步阶段。 因此，它还不太适合开发大型企业级生产就绪应用程序。 此外，针对 Polymer.js Web 开发的指南或教程并不多。
至于以 JavaScript 为中心还是以 DOM 为中心的方法是否真的从根本上更好，尚无定论。 Polymer 提出了一些令人信服的论点，但确实存在相反的论点。
也许最值得注意的是，Polymer 在使用 DOM 等浏览器技术方面需要相当高水平的专业知识。 你在很多方面都回到了 jQuery 之前的日子，学习 DOM API 来完成简单的任务，比如从元素中添加或删除 CSS 类。 至少在某种程度上，这确实让人感觉像是在倒退而不是前进。
但话虽如此，自定义元素似乎确实很可能在未来成为 Web 开发的重要组成部分，因此对于今天的 Web 开发人员来说，早点而不是晚点可能是谨慎的。 如果您以前从未尝试过创建自己的自定义元素，Polymer（和本教程）可能是一个明智的起点。