作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
Alejandro拥有软件工程学士学位,并在各种规模的软件公司工作了10多年.
大约一年前,也就是2013年5月,b谷歌上线了 Polymer.js.
所以一年后,我们到了这里. 问题是:它是否已经为黄金时段做好了准备? 是否有可能使用聚合物web开发技术创建一个生产就绪的应用程序?
要回答这个问题, 我把Polymer拿出来试驾,以开发一个web应用程序,看看它的表现如何. 这篇文章就是关于这段经历以及我在这个过程中学到的东西.
在我们进入我们的聚合物教程之前,让我们首先定义聚合物.不是因为它声称是什么,而是因为它实际上是什么.
当你开始检查聚合物, 你会不由自主地被它自称独特的世界观所吸引. 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项目示例,我将命名应用程序的顶层元素
然而,下一步需要更多的思考. 我们需要决定如何将应用程序组件化. 一个简单的方法就是试着去识别, 从视觉角度看, 在我们的应用程序中的组件,然后尝试创建它们作为自定义元素在聚合物.
例如,假设我们有一个应用程序,它的屏幕如下:
我们可以确定,顶部栏和侧边栏菜单不会改变,应用程序的实际“内容”可以加载不同的“视图”.
在这种情况下,一个合理的方法是创建
然后我们可以创建两个主要视图, 一个叫ListView,一个叫SingleView, 要加载到“content”区域. 对于ListView中的项,我们可以创建一个ItemView.
这将产生一个类似这样的结构:
现在我们有了我们的示例聚合物应用程序, 我们可以通过导入我们的“toptal-app”将其插入任何网页.Html”并添加标记
事实上,这正是聚合物范式的力量和魅力所在. 为应用程序创建的自定义元素(包括整个应用程序的顶层元素)被视为网页中的任何其他元素. 因此,您可以从任何其他JavaScript代码或库(例如JavaScript代码库)访问它们的属性和方法.g., Backbone.js, Angular.js, etc.). 您甚至可以使用这些库来创建自己的新元素.
Moreover, 您的自定义组件与其他自定义元素库(如Mozilla的)兼容 X-Tag). 因此,使用什么来创建自己的自定义元素并不重要, 它与聚合物和任何其他浏览器技术兼容.
因此,我们已经开始看到一个元素创造者社区的出现,他们在论坛上公开和分享他们新创建的元素,这并不奇怪 Custom Elements site. 你可以找到任何你需要的组件然后在你的应用中使用它.
聚合物仍然是一项足够新的技术,特别是开发人员 新手应用开发者他们可能会发现它有点脆,有一些不那么难发现的粗糙边缘.
这里有一个例子:
依赖错误和版本问题. 即使你下载了Polymer.Js元素, 您可能会发现自己遇到依赖项错误, 指向同一元素中的不同版本依赖项. 众所周知,聚合物元件目前正在大力发展, 这类问题会使开发变得相当具有挑战性, 侵蚀开发者的信心和兴趣.
聚合物是一项有趣的技术,但不可否认,它仍处于起步阶段. As such, 它还不太适合开发大型, enterprise level, 生产就绪的应用程序. 此外,没有很多针对Polymer的指南或教程.Js web开发.
至于以javascript为中心的方法还是以dom为中心的方法从根本上更好, 目前尚无定论. 聚合物提出了一些令人信服的论点,但也存在相反的论点.
也许最值得注意的是, 聚合物要求在使用浏览器技术(如DOM)方面具有相当高的专业水平. 在很多方面,您都回到了jQuery之前的时代, 学习DOM API来完成简单的任务,比如从元素中添加或删除CSS类. 这确实让人感觉, 至少在某种程度上是这样, 好像你是在后退而不是前进.
But that said, 自定义元素在未来很可能成为Web开发的重要组成部分, 因此,就目前而言,趁早出手或许是明智的 web developer. 如果您以前从未尝试过创建自己的自定义元素, 聚合物(和本教程)可能是一个明智的开始.
Alejandro拥有软件工程学士学位,并在各种规模的软件公司工作了10多年.
世界级的文章,每周发一次.
世界级的文章,每周发一次.