Web UI 技术发展历程

本文内容

• 纯文本和静态 HTML 页面
• 服务器端技术
• 插件技术——ActiveX、Applet 和 Flash
• Ajax 异步时代和基于 JavaScript 的 UI 技术
• RIA——Adobe Flex、Microsoft Silverlight、Sun JavaFx

本文回顾一下 Web UI 的发展历程。

纯文本和静态 HTML 页面

---

1989 年 Tim Berners Lee 发明了万维网，可以相互访问分散在网络上各处的资源。那时的网页没有 UI 概念，只是纯文本和跳转的超链接而已。

随着数据量的增大和人们需求的变化，纯文本 HTML（HyperText）已经不能满足人们的期望。Marc Andreessen 在 1993 年引入了图片。随后，字体、背景、框架和一些特效（marquee、blink）等元素也相继被引入。渐渐地 Web UI 已具有较强的展示能力，被越来越多人接受。1993 年 6 月，IETF（Internet Engineering Task Force）发布了 HTML 草案（不是标准）。

• HTML 2.0 – 1995 年 11 月作为 RFC 1866 发布，在 RFC 2854 于 2000 年 6 月发布之后被宣布已经过时。
• HTML 3.2 – 1996 年 1 月 14 日，W3C 推荐标准。这是里程碑的发展。

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

这个时期，Web UI 设计人员使用 Photoshop 或 Dreamweaver 等工具来设计出效果图或界面原型。此时还都是所谓的静态页面，无法根据不同的外部条件呈现不同的内容。

• HTML 4.0 – 1997 年 12 月 18 日，W3C 推荐标准。
• HTML 4.01 – 1999 年 12 月 24 日，W3C 推荐标准。
• HTML 5 - 第一份正式草案已于 2008 年 1 月 22 日公布，仍继续完善。

服务器端技术

---

之后，CGI（Common Gateway Interface）、ASP（Active Server Page）、JSP（Java Server Pages）、PHP（Personal home page Hypertext Preprocessor）等服务器端脚本技术相继涌现，出现真正的动态页面。服务器端代码处理用户提交的请求，动态地将网页和数据组合拼出网页的 HTML 文本输出到客户端浏览器。

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

如果你是 VS 的开发人员，那么一定还记得用 ASP 开发 Web 应用程序。

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

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

插件技术——ActiveX、Applet 和 Flash

---

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

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

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

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

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

Ajax 异步时代和基于 JavaScript 的 UI 技术

---

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

Ajax 技术通过 XmlHttpRequest 对象与服务器端数据和业务交互。目前主流的客户端 Ajax 框架有：jQuery，Dojo，MooTools，Prototype 等等。服务器端 Ajax 框架有 DWR，Buffalo，Ajax4jsf 等等。

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

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

此类技术有 Ext JS，Yahoo UI，qooxdoo 等等。

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

RIA——Adobe Flex、Microsoft Silverlight、Sun JavaFx

---

Adobe Flex 最初由 Macromedia 公司在 2004 年 3 月发布的，基于其专有的 Macromedia Flash 平台，它是涵盖了支持 RIA 的开发和部署的一系列技术组合。Flex 目标是让程序员更快更简单地开发 RIA 应用。Flex SDK 使用基于 XML 的 MXML 语言，提供多种常用的组件，可实现 Web Services，远程对象，拖放，列排序，图表等功能；Flex 内建动画效果和其它简单互动界面等。

2007 年 9 月 5 日，Microsoft Silverlight 1.0 正式版发布。Microsoft Silverlight 是一个跨浏览器、跨客户平台的技术，能够设计、开发和发布有多媒体体验的 RIA 程序。Silverlight 提供了强大的开发、运行平台和设计工具，能够开发出具有专业图形、音频和视频的 Web 应用程序。

2008 年底的 SunOne 大会上，Sun 发布了 JavaFx 1.0 正式版本，旨在基于 JVM 环境和通过函数式编程的 JavaFx 脚本来简化 RIA 开发。JavaFx 技术具有可以直接调用 Java API 的能力，可以调用目前的java第三方类库，方便地与 J2EE 系统集成和交互。

虽然 RIA 的确够炫，曾经红极一时。但是面对 HTML 5，前途就有点难说了。

以上主要是针对 B/S 应用程序的 Web UI，而在 C/S 桌面应用程序的 UI 领域。这两者在早先的应用程序开发中界限可是相当明显。但是在未来 RIA 的背景下，C/S 与 B/S 应用程序的界限将越来越模糊。

早先的 MFC（Microsoft Foundation Classes），wxWidgets（一个开源的跨平台的 C++ framework，提供图形用户界面和其它工具），再看看现在的 Flex 和 WPF 后，视觉对比何其强烈。另外，像 MFC 的事件处理是基于消息-映射模型，而现在基本上都类似事件监听模型了。Eclipse SWT（Standard Widget Toolkit）、NetBeans AWT/Swing、Flex、WPF、JSF（JavaServer Faces，一种用于构建 Web 应用程序的新标准 Java 框架）的事件处理机制都很相似，都是先设计好界面，然后在代码里面写上事件监听器。

从两点，一是 UI 都是用 XML 描述；二是采用监听模型。

目前根据 Vista 的 WPF 来看，UI 的趋势是将来界面一定都是以标记语言来描述的，而且桌面应用和 Web 应用将统一起来，不再有 C/S 和 B/S 之分，虽然这在 java 界看来遥遥无期，不过 Vista 貌似接近了。JSF 上也有 XML 描述 Java 界面的项目。

当然，其实用不用 XML 描述界面无所谓，重要的是要有好的 UI 设计器。比如 Swing 就有 NetBeans ，在 Java 中应该算是最好的界面设计器了，而 SWT 中最好是 SWT Designer 却收费还不好用，自己长得也不怎么样设计的界面也丑，跟 Matisse 有天壤之别。现在 XAML 就有 express blend ，达到了既是 XML 描述又有好的设计器（虽然它还没有和 VS 整合），堪称完美，微软果然是可怕的集团军。

Java 桌面现在声名最响的恐怕就是 eclipse 的 SWT 了，各个技术论坛都在谈 SWT 和 RCP，不过也有声音说 Swing 现在性能超过了 SWT，而且有文章说 Swing 现在已经是 GUI 主流工具了，参考 Swing is dominant GUI tool kit ，而在我看来国内现在大家似乎都在用 SWT 和 eclipse rcp，有了蓝色巨人的推广，跟着 eclipse 没错。传闻 Swing 既丑又慢，而 SWT 直接原生的操作系统控件， 跟本地操作系统外观一致。看看 eclipse 就知道 SWT 确实要漂亮，虽然 netbeans 5.5 也很漂亮，但还是得承认比不上 eclipse。不过有大牛说 Swing 丑是因为 SUN 把它做得默认外观不好，真正的好的 UI 还是要自己设计的，你要是真正设计起来其实 SWT 和 Swing 没有丑美之分，关键在人的设计。嗯，这话我赞同。 目前还有个难下决断的是如果纯从技术上讲 eclipse 的核心和 netbeans 的核心到底谁的架构好,网上很少有关于 eclipse 和 netbeans 核心的资料，eclipse 是基于 OSGI 标准的，netbeans 是基于 J2SE 的 META-INF/services 的，估计二者都一样吧，都是插件体系结构。

综上所述，Java 桌面现在的情况是：SWT 默认比 Swing 漂亮，不过这在人的设计，平手；SWT 没有好的UI 设计器，Swing 有 NetBeans ，Swing 胜出；SWT 跨平台性比 Swing 差，但可以利用操作系统的特性，可能比 Swing 快一点，Swing 绝对 WORA，平手； eclipse 已经牢牢占领了市场，SWT 和 RCP 的市场需求比 Swing 和 NetBeans RCP（Rich Client Platform）要大，这是致命的，SWT 胜一大截； SWT 架构不如 Swing 优美，其中还有类似 MFC 消息循环，令人反感，而 Swing 则是“MVC 的典范”，代码优雅漂亮，平手。

目前 eclipse RCP 嵌入式版本，e RCP, 对应的，就有嵌入式版本的 SWT、eSWT、NetBeans 似乎还没有嵌入式版本，但是在一篇文章看到预言netbeans 将分成三个版本，其中就包含一个嵌入式版本。

在 Web UI 上 Java 的框架可太多了，我只看中两个：Struts 和 JSF，Struts 现在已经成功和 webwork 整合，不同往日了，而 JSF 是 JSR 标准，很多厂商都直接支持这两个框架，还真分不出优劣。不过看了 Flex 做的网站我真的觉得这些框架都不理想，界面既不是用XML描述的还做不出什么好效果，即使做出来了也很费劲。国内还有一家公司在做 web 版的 SWT，smartSWT，想法不错但也有很多无法容忍的弊端。SF 也有 SwingS 和 SwingWeb，是用 Swing 在服务端描述界面，向客户端浏览器输出HTML界面，但都是小东西，很少人关注。唉，都说J2EE成功，但在Web UI 上怎么就难得有一个让人称心的工具呢？现在有一种思路是用Flex 做客户端，后端用J2EE，我实在不敢恭维，用不同的技术体系做一件事，增加学习成本，而且ActionScript的脚本风格实在不合我的胃口。我更倾向与一个纯java 的解决方案。看来web 界面上java 没什么出彩的东西。

 

Flex 用 XML 描述界面，后台用 actionscript3.0 写后台逻辑，能够实现界面和逻辑完全分离。Flash 相信大家都已经认同它的效果吧，Flex 就可以做出和 Flash 同样炫的效果，要多好看有多好看。Flex 有 Flex Builder 工具，开发起来很方便，而且即将出来的 Apollo 也很令人期待，所以看来 Flex 不经要占领Web 还要占领桌面，很有希望。唯一我不舒服的是ActionSript 3.0 的语法，总是像在写脚本，而不是编程，让人不放心，也许它的语法太灵活我还没有熟练驾驭吧。

WPF 跟 Flex 一样，也是用 XML 描述界面，目前 还只能用 C# 写后台逻辑，不过 WPF 有重量级的 .net 3.0 部署在客户端，如果 Vista 真的普及了，Flash 的末日就到了（估计还可以在手机上占据一席之地）。不过就目前情况看，flash player 远比 .net 的普及率高，加上 Flash 的轻量级和跨平台性，Flex 是目前最实际的RIA方案。

不管怎样，将来UI 都将用 XML 描述，B/S 和 C/S 统一，目前 .net 快要做到了，Apollo 也在努力，唯独还没见 Java 有对应的技术，让我们继续期待吧。