web UI技术综述

Kimmking@163.com

2009年3月

一、      Web UI技术发展历程

1.1          Web 1.0的UI技术

在HTML规范发展的过程中，以HTML标签为基础来构建的页面一直是Web UI的主流技术。

1.1.1    纯文本网页

1989年，英国人Tim Berners Lee发明了www（World Wide Web），万维网诞生。通过www，分散在网络上各处的资源可以相互访问。最开始的网页没有UI的概念，只包含纯文本的数据和跳转的超链接。

1.1.2    静态HTML页面

随着越来越多的数据被放置到了互联网上，纯文本的HTML已经不能满足人们的期望。Marc Andreessen在1993年引入了图片。随后，字体、背景、框架和一些特效（marquee、blink）等元素相继被引入了HTML中。

1993年6月，互联网工程工作小组 （IETF，Internet Engineering Task Force）发布了HTML草案；1995年11月，提出了HTML2.0规范。

         此时的web UI已经具有较强的静态展示能力，丰富多彩的展示效果，被越来越多的人所接受。Web UI技术逐渐形成。

1.1.3    Web UI的成熟期

1996年是HTML发展的一个里程碑，JavaScript和叠样式表（CSS，Cascading Style Sheets）相继诞生，W3c（World Wide Web Consorium）制定的HTML3.2规范出炉。

此时的web UI可以在展现后，与用户的操作交互，根据用户的行为方便地修改UI元素和调整样式，从而实现动态的DHTML页面。至此，传统的HTML Web UI技术发展到成熟期。后来的发展中，HTML标准没再有大的改动。

从这个时期开始，一般的web站点或是web应用系统的实现都是从界面设计人员使用Photoshop或是Dreamweaver等工具设计出效果图或是界面原型开始。此时的内容还都是所谓的静态页面，无法根据不同的外部条件展示不同的内容。

1.1.4    服务器端技术

随后，CGI、ASP(Active Server Page)、JSP(Java Server Pages)、PHP(Personal home page Hypertext Preprocessor)等服务器端脚本技术相继涌现，真正的动态页面出现了。服务器端代码分析用户提交的请求参数，从数据库服务器获取相应的业务数据，动态地将网页和数据组合拼装出网页的HTML文本输出到客户端浏览器。

此时的服务器端页面不再是一个单纯的UI模型，而只是一个服务器端脚本引擎来处理生成客户端UI模型的模板，其中包括HTML片段、脚本块和标签等元素。比如Struts、Tapestry和WebWork等基于JavaEE技术的web框架就是此类技术的集大成者。

随着web开发技术的进一步发展，又出现服务器端UI组件技术。例如asp.net中的服务器端UI组件和JSP中的JSF组件。其使用服务器端脚本技术，封装部分HTML、JavaScript和CSS片段构建一个完整的UI组件模型，在运行期间解释并与数据进行整合，最终输出为实际的HTML代码。

1.2          Web 2.0的UI技术

Web2.0是2003年之后互联网的热门概念之一，不过目前对什么是Web2.0并没有很严格的定义。一般来说Web2.0是相对Web1.0的新的一代互联网技术的统称。Web1.0的主要特点在于用户通过浏览器获取信息，Web2.0则更注重用户的交互作用，用户既是网站内容的浏览者，也是网站内容的制造者。

但业务系统与商业网站有着巨大的区别，业务系统主要使用web2.0来改善用户体验，而极少关注博客（BLOG）、百科全书(Wiki)、社会网络（SNS）等用户互动和参与技术。

1.2.1    Ajax

进入21世纪后，Ajax（Asynchronous JavaScript And Xml）技术的崛起绝对是互联网应用的一个划时代的变革。简单地说，Ajax就是为浏览器提供了在不提交整个页面的情况下动态的与服务器简单交互的能力。这样，就可以通过使用JavaScript脚本来提交数据和刷新或是渲染页面中的某些部分，此后人们就不必在页面提交和显示之间的空白状态等待，web应用的用户体验得到巨大增强。

Ajax技术通过在JavaScript语言环境中使用XmlHttpRequest对象与服务器端数据和业务交互，并从UI界面获取用户输入和将服务器端处理结果通过UI界面展现出来。

目前主流的客户端Ajax框架有：Jquery，Dojo，MooTools，Prototype等等。服务器端的Ajax框架有DWR，Buffalo，Ajax4jsf等等。

1.2.2    基于JavaScript的UI技术

   基于JavaScript的UI技术的出现，将web UI的控制权从界面设计人员递交给了程序员，即可以直接在web的前端使用JavaScript脚本来描述一个UI组件模型，然后在运行时，由浏览器的脚本解释器调用核心的UI技术框架来将其转换成HTML的UI界面。

此类UI技术框架跟服务器端UI技术的思路一致，只是在客户端浏览器中封装了一套UI模型。这样界面设计不需要服务器端的支持，在开发期间能更好的展示和测试界面效果。同时由于UI界面的构建和控制都在客户端，只需要和服务器端传递请求参数和数据，这样就能比服务器端UI技术大大的降低服务器端的压力和网络数据的传递量。

此类技术有Ext JS，Yahoo UI，qooxdoo等等。其中Ext JS框架比较完善并且易用的。

        Ext JS最初是一个基于YUI(Yahoo！UI)的扩展，现在已经完全独立。Ext JS是目前最好的纯JavaScript UI展示框架，其提供了一整套的基于JavaScript和CSS的组件体系，以及整合了许多web UI的其他功能。

Ext JS的特点如下：

1.         支持各种主流浏览器

2.         设计合理，基于中间层对象和插件机制，利于扩展

3.         组件丰富，结构清晰，体系完善

4.         纯JavaScript，不依赖于浏览器插件

5.         开源，文档资料全面

6.         与组件相关的Ajax封装

7.         数据处理、储存和绑定

8.         实现了一些特效、事件机制，Dom选择器

1.3          桌面程序化的Web UI

随着web技术和网络应用的发展、CPU处理器和浏览器能力的提高，人们对于web程序的期望值也越来越高，希望把越来越多的桌面程序的特性和能力移植到了web系统来实现，（与客户端操作系统和软硬件交互，操作二进制数据，访问网络，渲染图形等等），纯文本的HTML已经不能满足要求。于是各大厂商纷纷推出自己的解决方案，典型的技术有Microsoft的ActiveX技术、Sun的Applet技术和Macromedia的Flash技术等。

1.3.1    插件技术和ActiveX

Microsoft公司在1996年提出ActiveX技术。利用此技术，我们可以利用熟悉的开发工具比如vb/vc/delphi等开发一个拥有传统桌面程序界面、可用于web网页的组件，也可以将第三方发布的支持ActiveX标准的程序嵌入到web页面上去使用（当然不仅仅是web页面，也可以放到任何支持ActiveX的程序或容器中运行）。

相对与传统的HTML界面，ActiveX有如下的一些特点：

1.         代码的安全性

2.         组件的可重用性

3.         更强大的UI界面和系统功能

4.         客户端系统的不安全性

5.         开发和维护的复杂性

FireFox使用基本XX技术的插件，其它觉的浏览器也都有自己的插件技术。

插件技术是由浏览器支持的，本质上来说，Applet和Flex只是插件技术下的一种应用，它们和插件技术根本不能列在同一个层次上。但由于这两种技术应用太广泛，所以在讨论时常常忽略这种差别而直接放在一起进行讨论。

1.3.2    Applet

相对于ActiveX，Sun公司Applet是一个更安全的Web UI技术。Applet依赖于java的jvm，去掉危害系统安全性的功能，运行于一个有安全保障的沙箱之中。Applet小程序作为java源文件编译而成的二进制字节码，在网页运行时下载到客户端浏览器，并通过调用预先安装的jvm来运行。

Applet的特点如下：

1.         基于java，标准统一、开发简单

2.         客户端系统的安全性

3.         多浏览器支持

4.         单调的界面效果

1.3.3    Flash

Flash是另一种web上运行的、安全的、具有UI界面的二进制小程序。同时，Macromedia提供了给UI设计人员和开发人员使用的强大开发工具。借助Flash开发工具，使用者可以方便地在短时间内做出漂亮的用户界面、绚丽的动画效果。

Flash的一些特点：

1.         开发容易，入门简单上手快，甚至不需要编程知识。

2.         界面漂亮、动画效果、矢量图形、图像质量高。

3.         强大的开发工具支持。

4.         几乎所有浏览器支持。

5.         客户端系统的安全性。

　　由于以上开发技术都很专业，需要较强的技术水平和人力投入，因此往往只用于解决特定技术问题（如文件断点续传、单据套打等），不可能将整个业务系统完全基于上述技术来实现。

1.4           RIA技术

随着ActiveX等桌面应用元素融入到web系统中，web UI的开发技术进入了多元化时代。但是ActiveX的安全性和开发维护的技术门槛一直被人们所诟病。Flash在相对长的一段时间内被作为美工们点缀网站和美化界面的技巧性工具。Applet也因为种种原因也淡出人们的视野。然而伴随着Ajax技术给web UI带来的惊喜，越来越多内容丰富、效果绚丽的页面涌现出来，人们对于良好用户体验的UI界面的期待越来越高。在这种背景下，RIA（Rich Internet Applications，富互联网应用）技术出现，它们在提供强大UI构建和展现功能的同时，也提供了安全性保证、面向开发人员的模式和易用性、方便简单的一致性部署方式等等。RIA概念深入人心。

1.4.1    Flex

Adobe Flex是最初由Macromedia公司在2004年3月发布的，基于其专有的Macromedia Flash平台，它是涵盖了支持RIA的开发和部署的一系列技术组合。Flex的目标是让程序员更快更简单地开发RIA应用。

Flex SDK使用基于XML的MXML语言，提供多种常用的组件，可实现Web Services，远程对象，drag and drop，列排序，图表等功能；FLEX内建动画效果和其它简单互动界面等。

1.4.2    Silverlight

2007年9月5日，Microsoft Silverlight1.0正式版发布。Microsoft Silverlight是一个跨浏览器、跨客户平台的技术，能够设计、开发和发布有多媒体体验的RIA程序。

　　Silverlight提供了强大的开发、运行平台和设计工具，能够开发出具有专业图形、音频和视频的Web应用程序。

　　Silverlight具有以下的特点：

1.         跨浏览器、跨平台。

2.         一致的用户体验。

3.         基于.net技术，功能强大，体系完善。

4.         强大的程序开发和界面设计工具。

5.         可以方便地与现有的asp.net web系统集成。

1.4.3    JavaFx

2008年底的SunOne大会上，Sun发布了JavaFx 1.0正式版本，旨在基于jvm环境和通过函数式编程的JavaFx脚本来简化RIA开发。

JavaFx技术具有可以直接调用Java API的能力，可以调用目前的java第三方类库，方便地与j2ee系统集成和交互。