今年的Google I/O大会,绝对是一场为开发者所准备的盛会,发布多个软件产品与服务,并且主要以发布平台和服务为主,比如让Android开发者称赞的Android Studio、推出Google Play Game服务、对地图进行重大升级等。而在Web平台领域,Google则发布了最新的Web UI库Polymer。
Polymer基于Shadow DOM、Custom Elements、MDV等最新浏览器特性,代表了下一代Web框架的方向:一切皆组件、尽量减少代码量、尽量减少框架限制。由加盟Google的原Palm webOS开发团队打造。
架构图
快速入门
1.把项目拷贝到解决方案的根目录文件夹中,参考 Get the code。
1 | git clone git: //github.com/Polymer/polymer.git --recursive
|
2.启动Web服务器
3.在主页面引用polymer.js
1 | <script src= "Polymer/polymer.js" ></script>
|
4.阅读
开始指南5.学习如何使用Polymer内核快速搭建Web组件
6.玩转toolkit-ui示例(必须在Web服务器上运行)
7.加入mailing list,提问并且得到相应地回复。
Polymer内核
Polymer内核代码由polymer.js这个文件提供,其提供了一个薄层代码来表示Polymer选项,并且提供了所有组件使用的糖。
- 组件声明
Web组件声明代码如下所示:
1 2 3 4 5 6 7 8 | <element name= "tag-name" >
<template>
<!-- shadow DOM here -->
</template>
<script>
// lifecycle setup here
</script>
</element>
|
在该组件中添加Polymer.register生命周期来初始化组件的<script>块,如下所示:
1 2 3 4 5 6 7 8 | <font face= "Menlo, Monaco, monospace, sans-serif" ><element name= "tag-name" >
<template>
<!-- shadow DOM here -->
</template>
<script>
Polymer.register( this );
</script>
</element></font>
|
- 元素初始化
第一个参数Polymer.register是引用到<element>元素里的,因为脚本在element标记里运行,所以参数就设为“this”。
你可以提供第二个对象参数到Polymer.register里去定义对象原型,在下面的代码里,该组件初始化了一个message属性和ready方法。
1 2 3 4 5 6 | Polymer.register( this , {
message: "Hello!" ,
ready: function () {
// component is ready now, we can do stuff
}
});
|
目前,Polymer还处于初期阶段,它和其他框架一样,尽可能地拥抱HTML。它的目标是通过使用像Custom Elements和Shadow DOM这些新兴的Web标准的少量独立polyfill发展Web平台。此外,应用于移动平台也是其中的核心目标之一。Polymer开发团队正在研究响应式组件,让其可以正确无误地在台式机、平板电脑、手机上进行自动化配置。
当然,Polymer的诞生也意味着Google现在有三个相互竞争的Web应用开发库:Polymer、Dart(也具有UI开发功能)和AngularJS。
对于Polymer,开发者有哪些话要说呢?让我们一起来看下:
清风一二两:Palm webOS用另一种方式重生?
三合一赵:Enyo的Google版~换汤不换药~
刘晗的微博:在HTML领域离标准太远自己搞一套,出路不大。特别是像这种绑定机制,貌似理念是MVC,但MVC这种东西做简单页面还行。
eldude:声明性质、封装、数据绑定、属性和事件驱动API这些都是数量级的,要比现有JavaScript/HTML UI组件简单。
neilk:这个框架看起来非常酷,但“built by Google”有点用词不当,像Closure或Angular、Polymer等这些都Google内部使用的技术,在经过千锤百炼后才像面向公众,因此称作 "technologies by Googlers"更为合适。
相关资料
Polymer主页: http://www.polymer-project.org/
项目主页上的FAQ描述比较清晰: http://www.polymer-project.org/faq.html
架构图: http://www.polymer-project.org/images/architecture-diagram.svg?20130516
GitHub: https://github.com/polymer/polymer
本文为CSDN编译整理,未经允许不得转载,如需转载请联系market#csdn.net(#换成@)