【转】谈谈Google Polymer以及Web UI框架的未来
原文转自:http://www.csdn.net/article/2013-05-27/2815450-google-polymer
摘要:开发者Axel Rauschmayer在自己的博客上详解了Google Polymer的设计理念与组成架构,深得Polymer开发者的认同。他认为Polymer这样高互操作性的设计才应该是Web开发的未来。
虽然今年的Google I/O也已结束,但会上揭晓的新技术、新工具仍然让开发者兴奋不已。其中Web开发方面尤以Ploymer和Web Components为重。
Polymer由加盟Google的原Palm webOS开发团队打造,是一套以“一切皆组件、最少化代码量、最少框架限制”为设计理念的Web UI框架。Web Components则提供了一种更彻底的解耦方式,更加方便了UI的开发和模块化,可以说是Polymer的基础之一。
开发者Axel Rauschmayer在自己的博客上详解了Polymer的设计理念与组成架构,深得Polymer开发者sjmiles(Scott J. Miles)的认同。CSDN编译如下:
在刚刚结束的Google I/O 2013中,Google发布了一个新的Web UI框架——Polymer,似乎为所有Web UI框架指明了发展方向。
1. Polymer
Polymer由以下几层组成:
- 基础层(Foundation)——platform.js:基本构建块,其中大部分API最终将成为原生浏览器API。
- 核心层(Core)——polymer.js:基础层实现的辅助工具。
- 元素层(Elements):包括构建于核心层之上的UI以及非UI组件。
1.1 基础层(platform.js)
其中,基础层使用了以下技术:
- DOM Mutation Oberservers和 Object.observe():用于监视DOM元素和简单JavaScript对象的改变。该功能可能会在ECMAScript 7中正式标准化。
- Pointer Events :在所有的平台上以同样的方式处理鼠标和触摸操作。
- Shadow DOM:将结构和样式封装在元素内(比如定制元素)。
- Custom Elements:定义自己的HTML5元素。自定义元素的名字中必须包括一个破折号,它的作用类似于命名空间,为了将其与标准元素区分开来。
- HTML Imports:封装自定义元素,包中包括HTML、CSS、JavaScript元素。
- Model-Driven Views(MDV):直接在HTML中实现数据绑定。仍没有标准化的计划。
- Web Animations:统一Web动画实现API。
以上第3-5个API都是Web Components的一部分。很明显,Web Components对Polymer的重要性非同一般。
platform.js的作用在于代替浏览器提供这些API,它在经过充分压缩后仅仅31KB。而根据已公开的信息,我们还知道Polymer的目标之一就在于测试这些未标准化的HTML5 UI API。
1.2 核心层和元素层
Polymer本身非常像原生的HTML5:“attributes in, events out”。以UIwidget(widget)polymer-panels为例:
- <polymer-panels
- on-select="panelSelectHandler"
- selected="{{selectedPanelIndex}}">
- </polymer-panels>
可以看出其结构非常“面向组件(component-oriented)”,所有组件都是HTML元素。有的元素本身并不提供UI,比如animations元素并不提供UI,但是你可以将它与UI元素相关联,实现动画效果。此外,Polymer的很多widget中都内建了响应式设计,也就是说,他们会依平台的不同变化成最适合的形状。
1.3 互操作性
Polymer设计得像菜单一样,可以按需选择。得益于Web Components,其元素都具有非常高的互操作性。在I/O大会上我们就看到了这样的例子:Mozilla项目中的元素X-Tag(同样基于Web组件)与Polymer协同得非常好。
1.4 什么时候可以使用Polymer?
Polymer目前仍是一个Alpha预览版,因此不建议在公共项目中使用。但是,作为一个开源项目,你可以随时使用它的代码。
1.5 Polymer与其它Web框架相比如何?
Polymer并不是为终结其它框架而生,相反,现有的这些框架也可以构建在同样的基础层之上。如果你已经尝试过Ember.js、AngularJS这样的UI框架,一定会发现很多API非常熟悉。AngularJS甚至在在Twitter上宣布:”Angular将基于Polymer开发widget,这会是一个双赢的方案。“
2. Polymer究竟意味着什么?
没有人会想要使用框架,我们只是想高效地开发Web UI而已,只不过框架恰恰满足了我们的需求。与之相反,原生HTML却缺乏这些功能:
- 丰富的widget集。在我看来,Web Components最大的意义莫过于此。得益于Web Components,我们将能轻易获得众多widget,随意使用。
- 用户界面布局。我对 CSS Grid Layout寄予了厚望,Grid Layout是原生的HTML,自然它也能与Web Component很好地协同工作。
- widget间的“粘合剂”(比如数据绑定)。
就目前看来,各大框架仍难以互相兼容:各自使用各自的工具链、继承API、widget基础构架等等。本文中描述的开发模式,以及ECMAScript 6中的类与模块,都指明Web开发的未来应该是更高的互操作性。这对Web开发生态系统的益处显而易见。
相关资源
如果你想更深入地了解Polymer,可以访问以下网址:
- Google I/O 2013中的演讲:
- “Web Components: A Tectonic Shift for Web Development”——Eric Bidelman
- “Web Components in Action”——Matthew McNulty, Alex Komoroske(基于上面的演讲,还提到了Polymer)
- HTML5 Rocks上关于Web Component的文章。
- Polymer项目主页: polymer-project.org
原文链接: 2ality
【转】谈谈Google Polymer以及Web UI框架的未来的更多相关文章
- 【JavaScript】谈谈Google Polymer以及Web UI框架的未来
摘要:开发者Axel Rauschmayer在自己的博客上详解了Google Polymer的设计理念与组成架构,深得Polymer开发者的认同.他认为Polymer这样高互操作性的设计才应该是Web ...
- Google Polymer以及Web UI框架
时代在进步,原本前端只是用来简单的数据显示以及提交数据到后端处理逻辑的地方,而随着SPA的发展,前端的逻辑也越来越是庞大,恰巧,今天看微博的时候,发现一个概念讨论的比较多,就是 Web Compone ...
- 国产 WEB UI 框架 (收费)-- Quick UI,Mini UI
国产 WEB UI 框架 (收费)-- Quick UI,Mini UI : http://www.uileader.com/ http://www.miniui.com/
- (转载)比较web ui 框架
以下是几个精致的web UI框架 1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范, ...
- 推荐几个精致的web UI框架
1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. git ...
- 推荐几个精致的web UI框架及常用前端UI框架
1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. git ...
- 《转》推荐几个精致的web UI框架
1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. git ...
- Java Web UI框架
1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. git ...
- 推荐10款优秀的JavaScript Web UI库 框架和套件
在进行Web开发时,并非所有的库都适合你的项目,但真正开发的时候,你任然需要依赖一款UI框架.特别在你时间紧迫的时候,它是你忠实的朋友. 他们都是些广泛使用包含不同语言实现的WEB UI框架.今天我就 ...
随机推荐
- python学习之while语句
while循环 1.简单的while循环while True: ")#这是一个简单的while循环,当等于True时会一直打印1 2.while执行多少次后退出 coun=0while Tr ...
- sourceforge免费空间申请及使用笔记
sourceforge免费空间申请及使用笔记 sourceforge免费空间安装WordPress博客程序 WordPress博客程序安装文件的上传需要使用工具WinSCP. 你需要在FTP地址填写的 ...
- Caffe + Ubuntu 14.04 64bit + CUDA6.5 + 无GPU 配置
官网: http://caffe.berkeleyvision.org/installation.html#compilation 参考网站: http://www.cnblogs.com/dupul ...
- 深入浅出设计模式——桥接模式(Bridge Pattern)
模式动机设想如果要绘制矩形.圆形.椭圆.正方形,我们至少需要4个形状类,但是如果绘制的图形需要具有不同的颜色,如红色.绿色.蓝色等,此时至少有如下两种设计方案: 第一种设计方案是为每一种形状都提供一套 ...
- JAVA 使用POI导出数据格式为Execl
需要下载一个poi的jar包. 控制器 @Override public void getContractListExecl(Contract contract, BindingResult resu ...
- Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with
stackoverflow上的的解决方法:Install a web server and load your HTML document from there.
- python3 字典相关函数
python版本3.5 #Author by Liguangbo#_*_ coding:utf-8 _*_'''info={'No.1':'ligb','No.2':'donglx','No.3':' ...
- python——协程
由于python中的多线程比较特殊,所以协程的概念就变得尤为珍贵了,对于cpu密集型的操作,使用协程的效率无疑要好过多线程很多.因为协程的创建及其间切换的时间成本要低于线程很多.也因为这一点,很多人说 ...
- 初识python中的类与对象
这篇博客的路线是由深入浅,所以尽管图画的花花绿绿的很好看,但是请先关注我的文字,因为初接触类的小伙伴直接看类的实现可能会觉得难度大,只要耐着性子看下去,就会有一种“拨开迷雾看未来”的感觉了. 一.py ...
- Linux Vim不明原因卡死解决办法
使用vim的时候,偶尔会碰到vim莫名其妙的僵在那里. 解决方案: 经查,原来Ctrl+S在Linux里是锁定屏幕的快捷键,如果要解锁,按下Ctrl+Q就可以了. 经验总结: 牢记这两个VIM组合键 ...