[置顶] ZK(The leading enterprise Ajax framework)入门指南
1. Why ZK
JavaEE领域从来就不缺少Framework尤其是Web Framework,光是比较流行的就有:SpringMVC、Struts2、JSF系列……
其它不怎么流行的、小众的、非主流的全加起来估计上百,让人眼花缭乱。
那为什么还要去学习ZK这个知名度不高的框架呢?ZK官网关于Why ZK列出了很多特性:http://www.zkoss.org/whyzk/features
下面给出我最看重的ZK优于其他框架的独特优势:
- 纯Java“端到端”Web解决方案
- 提供丰富的页面组件和声明式的用户界面描述语言(ZUML)
- 支持MVVM模式数据绑定
- 支持自动化功能测试
虽然只有这几点,但是每一个都非常有价值,解决了我们多年以来开发Web应用过程中很头疼的几个问题,后面会分别展开介绍。
2. ZK总体架构
前面说到Web框架种类繁多,但是仔细研究发现它们可以分成以下3种类型:
- 请求响应模型的MVC框架:struts1、webwork2、struts2、springmvc、apache wicket、grails、play
- 事件模型的RIA组件框架:jsf系的n种实现、gwt系列(好几个分支)、vaddin、zk
- REST风格架构:最近出现的一种新的架构风格,前端采用UI框架如Ext、JQueryUI、HTML5,后端REST服务框架(如SpringMVC)提供数据(json、xml)。
ZK属于第二种类型——事件模型的RIA组件框架,具体的,用ZK开发一个Web应用只要做两件事:
- 用 ZK的UI组件搭建用户界面
- 基于ZK框架处理用户界面上发生的事件
然后其它的事情就都由ZK搞定了,这就是所谓透明的AJAX;
2.1. AJAX处理流程
ZK应用处理一个典型客户端AJAX请求的完整过程如下:
- 用户的某个操作触发Client Event发送给Widget
- Event被Widget一路向上转发到了ZK Clent Engine
- Clent Engine发出AJAX Request给位于服务端的ZK Update Engine
- Update Engine通知ZK Component处理AJAX Request
- Component生成服务端Event发送到ZK Event Queue;
- ZK框架调用Event Listener处理Event;
- Event Listener执行业务逻辑,并更新Component状态 或 生成新的Event发送到Queue;
- Update Engine收集所有Component状态的修改并转换成指令集合返回客户端;
- Client Engine根据指令更新Widget状态;
- Widget更新DOM Tree改变用户界面;
上述十个步骤构成了一个AJAX请求的处理流程,用户在浏览器中的所有操作都是上述步骤的循环;
但是在这个循环开始前,还有一个环节——请求ZK页面:
- 浏览器请求一个页面URL
- ZK框架load对应的ZUL页面,并根据ZUL定义来创建和组装Components Tree
- ZK根据ZUL定义渲染HTML返回客户端;如果是第一次请求,还会连同Client Engine一起返回;
- Client Engine渲染页面创建DOM Tree,生成用户界面;
- 然后Client Engine就常驻浏览器中,处理用户操作产生的Event;
若干个ZUL页面就构成了一个完整的ZK应用。
2.2. ZUL与控制器
对于ZK应用开发人员来说,一个ZK应用就是由一组ZUL页面及其控制器组成的,
其中,ZUL负责以声明式方式定义页面(声明页面由哪些组件构成以及组件之间的关系——布局),控制器负责处理页面组件产生的各种事件;
ZUL与控制器之间的关联也是在ZUL中定义的,因此ZK有点像Web层的SpringFramework(XML定义Bean及其依赖关系,Bean封装服务);
ZK非常的灵活,既可以用ZUL(一种XML)声明式方式定义用户界面,也可以采用类似Swing的编程式方式,
前者定义包 含大量组件的复杂页面时非常简单,后者优势是灵活动态,
而且两种模式可以混合使用——用ZUL定义一个复杂页面的大框架,然后在控制器中填充或修改部分需特殊处理的UI;
3. ZK的优势
3.1. 纯Java“端到端”Web解决方案
3.1.1. 分工的代价
通常情况下,一个Web开发人员除了要掌握一种服务端技术(JavaEE、.Net、PHP或RoR)以外,还必须熟悉Html、CSS、JavaScript这三种技术才能独立完成一个Web应用,
因为缺少了上述任何一项技能,都无法开发出一个完整Web应用的哪怕很小的一个功能模块,或者做出的东西质量不合格(例如界面丑陋、交互性不好、浏览器兼容性不好等)。
同时精通上述所有技能的开发人员非常少而且昂贵,于是很多团队通过分工来解决这个问题——将开发人员进一步分成前端开发、后端开发,另外前端开发可能还依赖美工提供页面素材;
现代软件工程方法(尤其是敏捷开发和精益开发方法)提倡“全功能团队”,反对严格的分工,认为分工会带来高昂的沟通成本和集成成本、更容易出现生产力瓶颈、造成大量资源浪费;
关于全功能团队的更多内容见http://www.infoq.com/cn/articles/hk-build-full-function-team,本文不做过多论述。
总之,由于传统Web开发需要掌握的技术领域多达4种(而且每一个领域能包含很多内容,光JS就涉及N多框架和库),导致开发团队分工,进而严重影响开发效率。
3.1.2. 端到端的开发
相比之下ZK的优势十分明显——无需Html、CSS和JavaScript只用Java即可实现一个完整的Web应用,扔掉了前端和美工这两根“拐杖”,开发人员的生产力水平产生巨大提升,
再也不会出现那种“后端等前端前端等美工 或者 后端人不够前端美工没事做”的局面。
另外一个不容忽视的因素就是Java语言相对于JS语言的优势,Java语法严格、有编译器和IDE约束、便于调试、便于单元测试、可读性好,更适合大型团队和长期维护的项目!
ZK应用在客户端看来还是标准的Web应用——接受Http请求返回标准Html、CSS和Javascript,ZK只不过将这些Web底层技术细节对ZK应用开发人员屏蔽了,
ZK将Html、CSS和Javascript视为Web领域的汇编语言,将开发人员从Web技术细节中解放出来去更多的专注于实现业务逻辑。
3.2. 丰富的组件和声明式的用户界面
XML标签是描述复杂页面最简单直观也容易维护的方式,例如XHTML、JSP、FreeMarker等,
ZK屏蔽了HTML细节同时为开发人员提供了更高层面的抽象——页面组件,原本需要大量HTML标签绘制的页面,使用ZUL只需很少的ZK组件标签就可以定义出来。
另外ZUL标签语法简洁、严格,可读性和可维护性都比HTML更好。下面示例为一个表单页面的定义及其效果:
<window id="win" title="Car Inventory Editor" width="400px" border="normal" apply="demo.getting_started.input.EditController"> <grid> <rows> <row> Title: <textbox id="titleTextbox" value="${win$composer.inventoryItem.title}" constraint="no empty" /> </row> <row> Created Date (yyyy/MM/dd): <datebox id="createdDatebox" value="${win$composer.inventoryItem.createdDate}" format="yyyy/MM/dd" constraint="no empty" /> </row> <row> Bar Code: <intbox id="barcodeIntbox" value="${win$composer.inventoryItem.barcode}" format="000000" constraint="no empty,no negative" /> </row> <row> Unit Price: <doublebox id="unitPriceDoublebox" value="${win$composer.inventoryItem.unitPrice}" format=",###.#" constraint="no empty,no negative" /> </row> <row> Quantity: <spinner id="quantitySpinner" value="${win$composer.inventoryItem.quantity}" format=",###" constraint="no empty,min 0" /> </row> <row> Location (click location to edit): <textbox id="locationTextbox" value="${win$composer.inventoryItem.location}" inplace="true" /> </row> </rows> </grid> <button id="submitButton" label="Submit" /> </window>
3.3. MVVM模式
MVVM模式是著名的MVC模式的改良,它进一步的降低了Controller与View的耦合——只有View依赖Controller,消除了Controller对View的依赖,
因为View发生变化的频率非常高,所以MVVM极大的减少了因页面需求变化导致的对Controller的不必要修改,提高了可维护性。
3.4. 自动化功能测试
Web应用的自动化功能测试一直没有理想的解决方案,Selenium之类的跨进程测试工具运行速度很慢,而且基于最终Html的测试脚本非常啰嗦脆弱而难以维护,
ZK附带的功能测试框架ZATS完美的解决了这一难题,ZATS针对ZUL进行本地调用的测试,运行速度飞快而且代码简洁容易维护。
3.5. 文档与社区
ZK有丰富的官方文档(http://www.zkoss.org/documentation#Small_Talks)和活跃的社区(http://forum.zkoss.org/questions/),
其在线演示站点(http://www.zkoss.org/zkdemo)也是极好的学习材料。