Web Components Polymer

###一、Web Components###
首先从Web Components开始,今年在Google I/O谷歌发布Android L预览版的时候,也是Google Design上线的时候,那时对Material的风格印象非常深刻。但是无奈Android版没有提供兼容库去实现,在某个巧合看到了Polymer,于是去了解了一下看起来非常有前途的Web Components。

仅仅从名字就能看出是web组件的封装,首先不论基于js动态生成还是提供css样式进行渲染的方法,目前很多前端框架如bootstrap,都已经提供了非常简单实用且强大的框架支持。但是在使用过程中会深切的感受到,由于框架资源与自定义资源属于同一个级别,使用中需要去详细了解框架提供的样式和JS方法。不仅仅是为了风格统一和资源重复利用,更重要的是为了避免与框架的冲突。

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
  ...
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  ...
</ul>

而Web Components提出了一套非常详细和完善的标准,初看起来简直是前端开发者的福音。使用link import导入控件,直接使用控件指定的标签即可简单高效的使用组件化的思想。在浏览器启用Shadow DOM特性支持的前提下,控件标签会被Shadow DOM封装成一个独立的控件。并且和Web界面是相互隔离的,即我们在源代码中式无法看到控件的内在细节,展现给我们的仅仅是自己写的标签而已。

如上图,自定义的标签封装和隔离了web界面,不仅仅是的其本身的样式信息与主界面分隔开来,互不影响。而且可以自带脚本语句,相互嵌套引用等。哪个开发者看到这些不会心动?实现Web Components的框架有许多,在这里仅仅对Polymer进行简单的说明。

###一、Google Polymer###

Google Polymer框架,在2013年的Google I/O大会上发布。其来自加盟谷歌的原Palm webOS的Enyo框架团队打造,使用了最新的浏览器特性。但是对于目前仍然处于开发阶段的框架,又如何吸引开发者去使用呢?以前几乎没有,但是现在Material design推出之后,也许会有所改观。

特别是在Polymer的Paper elements支持Material之后,其效果的在线示例(已缓存在本网站)更是达到了前所未有的惊艳,特别是其反馈效果。其提供的基本控件样式、控件交互动画,布局动画和大量的控件,为在Web端实现Material效果提供了极其便利的途径。

这样的最大好处就是Android 5.0发布之后(好像从11月3号推迟到了11号),新的一轮应用改版热潮中,web端也能简单的实现与Android端相一致的功能了吧。在以InBox为首的谷歌自家应用全线向Material design风格靠拢的时候,甚至是InBox网页版也做到了和Android端高度一致的时候,Polymer依旧处于开发阶段,其未来存在越来越多的不确定因素。

这一切的开始从我打算做一个Android app的服务器端开始。经过一段时间的选型之后,后台决定使用python/tornado + mysql。前端在看到正好Paper elements支持了Material design,于是根据之前的一些了解决定试试Polymer。但是随着设计和实现的展开,一步步阅读Polymer文档之后,我发现这个现在真的不适合使用。特别是选了python这种节约人参的语言之后,当然了Polymer目前依旧可以作为一个实现性的工具进行小规模使用。相比之下谷歌的另外一个框架AngularJS,他还是太年轻了,并且AngularJS也推出了对Material design的支持。但是AngularJS的学习曲线真的是太陡峭了,虽然思想是如此的先进,功能是如此的强大。

<polymer-element name="tag-name" constructor="TagName">
  <template>
    <!-- shadow DOM here -->
  </template>
  <script>
    Polymer({
      // properties and methods here
    });
  </script>
</polymer-element>

在此,对polymer的使用不做过多的说明,但是到目前为止我依旧记得第一次打开Polymer Project的网站时给我带来的惊喜。polymer目前依旧处于开发阶段,其本身依旧存在很多问题,而且还有浏览器兼容性这个暂时无法解决的难题。联想到谷歌无数夭折的项目,不禁对Polymer的未来… …

但是我个人依旧希望Polymer可以成功。