Flex是咋回事之一 集CS和BS之大成的RIA

用了一年多Flex，感触多多。偶尔有同行的朋友问我啥是Flex，说实话，一时半会儿我还真说不清楚。尤其是对于一个从未接触过Flex的朋友，想要由浅入深地只用嘴巴不用电脑给他讲明白，这确实难为一个整天只跟机器打交道的程序员了。后来我想了一个办法，我说你知道开心农场吧，那就是拿Flex做的。这下子很多人有兴趣了，呵呵，如果你也有兴趣，请继续往下看。失言未察之处，欢迎拍砖。

 

一般来说，一项技术的产生都是为了解决业界的重大难题而出现的。那么说到Flex我们就不得不先说一下RIA。RIA这个概念其实早就出现了，我最初是07年在《程序员》杂志上关于Ajax技术的介绍时看到的。到了08年，伴随着网络视频的飞速发展，RIA应用已经搞得有声有色热火朝天了，其实翻译过来就是个富客户端（Rich Internet Application），相较于BS的瘦客户端，也可以称之为胖客户端。当然如果你已经被这些名词概念熏得焦头烂额，请连跳四段（小黑好心提示，本部分仅余四段。。。）。

 

RIA简单的说，就是CS+BS的开发部署模式。CS和BS大家都很熟悉，CS的全拼是Client/Server，它的优点在于借助局域网的信息安全和带宽优势，充分利用客户机器的运算能力从而降低服务器压力，缺点就是安装部署更新麻烦，比如老板让我跑到一千公里外的客户那安装一千台机器的客户端，过几天我回来了，老板说那边有几台机器运行有问题，你去维护一下~！过几个月，老板说你去把那一千台机器全部升级一遍，他们自己不会装。。。呵呵，这些痛苦我当然不曾经历，我杜撰的。

 

那么在1998年，互联网风起云涌的时候，BS，Browser/Server，逢时而生。BS充分利用互联网的优势，解决了CS安装部署更新的一大难题。通过把业务逻辑处理放在服务器端，然后解析为HTML，利用HTTP协议传输到客户的浏览器上就万事大吉。看起来很美，其实干过就知道也很痛苦。哪儿痛呢，痛的当然是我们这些开发者。安装部署更新倒是省事儿了，装个IE，给个网址就能让客户登录了。但是，基于HTML+JavaScript的技术让人很崩溃。JavaScript我好久不用了，在以前毕业实习的时候，感觉开发和调试都不方便，而且还面临着不同浏览器不兼容的噩梦（据说现在上述问题随着Ajax的风行有所改善，我不太了解）。另外，BS还有一些潜在的缺点。比如，客户端体验简单，不易开发丰富的效果来展示数据（这和当时的网络带宽也有关系）；必须联网才能运行，信息安全无法保障；应用程序需要通过其他技术辅助才能操作客户端资源；服务器负载过高而客户机运算能力未充分使用等。

 

综合来讲，BS仍然是一个不错的解决方案，它的Web应用程序和CS的桌面应用程序曾一度二分天下，各领风骚数十年。从解耦角度来看，CS以数据库的方式把数据从程序中分离，BS以浏览器页面的方式把界面和逻辑再次分离，然而第二次分离是不彻底的。表面上只是代码结构的分离，从实质上看表现层仍然是逻辑层的附庸，前台UI完全和后台实现技术绑死（把已有项目后台从C#换成JAVA是不可能的。。。）为了解决这个问题，RIA出现了（顺便搞定了一些其他问题，比如页面异步刷新，前台UI不够丰富等等），RIA基本实现了不依赖于特定后台技术，能与多种服务端搭配使用。

 

在2002年，MacroMedia公司（简称MM，05年被Adobe收购）首先在Flash Player6中引入了RIA概念。2004年，MM正式发布Flex1.0（汗，终于说到Flex了），随着Ajax的火爆，RIA开始受到广泛关注。RIA主要有两个方面的含义，一是用户界面的丰富即富客户端，二是数据模型的智能，服务器已经变成了支持客户端正常运行的数据服务，并提供了异步数据传输和脱机缓存机制等复杂的数据处理能力。前面提到，RIA本质上就是CS+BS，它想集大成，想搞总结，想终结CS和BS二分天下的局面。说浅显点就是，如果以前的CS程序现在能在网络上运行，并且保持了原来的功能和特征，那么这就是一个RIA。关于RIA的详细介绍GOOGLE上一搜一大把，在此就不继续作详细展开。回到当下，RIA各种技术一番拼杀，现在广为人知的只剩下四个NB小伙：Ajax、Flex、SilverLight、JavaFx。在本文第二部分中，我将简要介绍一下Flex（貌似进度有点儿慢，多谢支持。。。）

 

 

Flex是咋回事之二 前世今生 

 

先说一下Flash Player（简称FP）。经常上网的朋友一定遇到过Flash Player版本升级的提示吧，这东西其实就是浏览器插件，据说已经有了98%的安装普及率，没办法，谁让咱们这么爱看视频呢（FP具体介绍请见http://baike.baidu.com/view/1585492.htm）。Flex生成的页面主要是通过Html包装一下生成的swf文件，和Flash生成的swf一样，它也靠FP才能完美运行，这有点类似JVM虚拟机和.NET FRAMEWORK（FP里内嵌了AVM虚拟机）。FP又分调试版和产品版，总体来讲，咱们只管用FP提供的API，以及及时关注最新版本的功能，其余不会过多接触（我对FP10关于3D方面的支持很感兴趣，不过貌似其支持效果不太理想）。

 

再说一下Flash的历史。在1996年,小软件公司FutureWave Software为了给Netscape开发一个全新的网页浏览插件，创建了名为Future Splash Animator的动态小程序，该产品基于Java，是由一个称为SmartSketch的产品演化而来，这就是Flash的老祖了。具有讽刺意味的是，这家FutureWave的公司本来是打算把这项技术卖给Adobe的，但在那个时候Adobe根本不睬它。而Macromedia（简称MM）却很有兴趣，就这样在1996年11月,MM在拥有了FutureWave这家公司的技术后，把FutureSplash重新命名为Flash Player 1.0。在随后的许多年间，Flash被打包为Studio套件的一部分，并与其他Studio产品（如Dreamweaver和Fireworks）一起发布，世人称网页三剑客。。。三剑客横行无敌，到了05年4月18日这天，ADOBE实在看不下去了，阔绰出手，又以34亿美元天价收购MM。。。ADOBE大叔估计很后悔当年没收购Future Splash，搞到现在，被MM给做大了（Flash具体历史介绍参见http://flash.9ria.com/viewthread.php?tid=13194和http://space.flash8.net/space/?625743/viewspace-350122）

 

如同今年4月Oracle收购Sun一样，MM嫁入ADOBE豪门，在当时的业界也是一片哗然炸雷。许多MM的忠实粉丝觉得，那三剑客就是被ADOBE大叔招安了啊，依据其收购产品的一贯猥琐恶行，这几位剑侠估计很快就会被不声不响地给整掉了（当时Flex还是襁褓，大家都没注意到。。。）Fireworks是PhotoShop的老对头了，肯定是斩立决；Dreamweaver要不就是改装变身，要不就是各种理由直接缓死；Flash日子会好过些，但其一贯的MM风格是否能延续也很难保证。

 

然而ADOBE这次出乎意料的善良，三剑客无一遗弃，相反还忍痛把自己推行多年的SVG死缓（个人也很喜欢SVG，无奈和FLASH冲突，出于商业策略，这孩子被牺牲了）。在最新的CS4（Creative Suite 4）产品系列中，三剑客依然活力四射地与其他成员工具们和谐奋进。那么事隔收购事件四年多之后，我们已经渐渐接受了MM产品前面强行加上的ADOBE标签。可以说，ADOBE充分吸纳整合了MM的精神和风格，无论是FP还是三剑客，ADOBE一直都在努力地做得更好更和谐。（本人现在已经是ADOBE FANS了，哈哈，不过还是挺怀念Flash MX2004 和Dreamweaver2004那个时代的，尽管当时也没闪出啥东西来。。。）

 

说了这么多关于Flash的事情，其实是因为Flash比Flex更出名，ADOBE也察觉到这一点，所以在预备推出FLEX4时，又将其更名为Flash，只是SDK仍然沿用FLEX的名号。FLEX和FLASH并没有本质区别，它们最终都是转为ActionScript源文件，然后被编译为二进制的swf文件（就和JAVA文件被编译成class一样），再交由FP（FP就像JVM虚拟机一样）来执行。不同的是，FLASH更偏向于设计人员，它有时间轴和帧的概念，能更好地实现动画、特效、短片等美工效果。Flex是面向开发者的，隐藏了时间轴的概念（只有两帧），更专注于解决企业应用的表现层方案，提供了大量的通用组件用于构建前端页面、通过数据服务技术能更好的分离界面和逻辑业务层。

 

从04年3月MM手中的Flex1.0，到05年10月ADOBE手中的Flex2.0，再到07年1月伴随着强大的面向对象语言ActionScript3出现的Flex3.0,再到明年初发布的强力Flex4.0。借着RIA的春风，Flex在不断走向成熟的同时，也被更多的业界开发者和企业用户所关注接受。如果看到这里你很感兴趣，推荐在GOOGLE上搜索一把，现在不是08年了，网上已经涌现出大量的简易教程供我们参考学习。当然如果你有些闲钱，或是想系统地学习一下，也可以买几本书。（有时间我会整理些网站博客和书籍推荐的）

 

在本文第三部分中，我将结合项目经验谈一下Flex的优缺点和使用心得。没用过Flex的可能无法共鸣吧，那就直接跳过不看了，呵呵

 

 

Flex是咋回事之三　谁用谁知道

 

一项技术，从概念提出到技术研发到商业发布，再到实际应用，最终将产品呈现在用户面前，这是一个漫长而复杂的过程。在这当中，很多有创意有生命力的技术因为各种原因小小遗憾地不幸夭折了。Flex能走到今天确实不易，下面让我们从不同的角度来看一下它是如何过关斩将，赢得众多青睐的。

 

技术角度：

（１）具备了RIA时代富客户端的优点（C/S+B/S）

（２）支持多种服务器语言（JAVA、.NET、PHP）及主流框架（Spring、Hibernate）

（３）与Java结合后相当强大，能充分利用Java的资源背景

（４）拥有丰富的组件和第三方组件，对企业级的数据汇总和业务流程展现力较强悍

（５）借助开源的力量，拥有众多民间组织和牛人支持

（６）Adobe公司（还有MM多年积累）的强大背景

（７）源于Flash的天生丽质，轻松使用多媒体资源，动态交互性强

（８）借助FlashPlayer的安装普及度，轻松实现跨浏览器跨平台

（９）良好的架构设计和制作精良的文档示例（明年FLEX４同步推出中文版）

（１０）借助于插件丰富的Eclipse开发平台并拥有独立的IDE

（１１）框架设计重用性高，有利于模块化设计

（１２）近几年发展态势良好，获得了广泛认可，产品和技术也越发成熟

 

开发者角度：

（１）开源，透明（国人没有不喜欢开源的，哈哈）

（２）基于Eclipse开发平台，易上手，且插件丰富（巨人的肩膀啊~）

（３）基于Eclipse平台，开发调试方便(FB4中的条件断点）

（４）ActionScript语言与Java的融合度和相似度较高，易学易用

（５）MXML标签与XML相似，逻辑清晰可读性强

（６）架构设计良好，耦合度低，有利于组件重用

（７）无需针对不同浏览器编写代码，摆脱编写和调试的噩梦（针对JS说的）

（８）类似VB的可视化拖拽组件，快速创建界面

（９）方便定制及使用第三方的皮肤和样式，无需美工也有好效果

（１０）支持多媒体资源，轻易开发动态交互性强的界面

（１１）众多的RPC组件保障对后台数据访问的安全性和效率

（１２）文档示例丰富，通过网络可以获取大量的学习资源

（１３）近两年发展态势良好，前景光明

 

企业角度：

（１）开源，免费（其实很多时候还是直接用破解的。。。）

（２）具备了RIA时代富客户端的优点（C/S+B/S）（潮流啊~！）

（３）项目和组件的重用性高，易于资源积累和快速构建

（４）Flex提供了与其他语言的结合，能广泛利用已有的资源

（５）界面华丽，客户认可度高

（６）学习曲线一般，培训成本低

 

用户角度：

（１）部署和更新方便

（２）界面漂亮，交互性强

（３）安全

 

说了这么多好话，再来综合说一下缺点。鉴于我着迷于Flex的光环效应，没有看到的缺点还请诸位多多提出。

缺点：

（１）不擅长处理复杂的业务流程，主要还是适合展现（Flex不是万能的）

（２）继承了Flash的诸多优点，却唯独丢掉了Flash的小巧轻盈（减肥是永恒的话题）

（３）目前尚没有比较好的减肥策略，带宽较好时这不是问题（不是一般的卡。。。）

（４）对服务器和客户端的硬件设备都有一定要求（CPU和内存占用很生猛。。。）

（５）运行期内存泄露状况严重，尽管可以通过一定手段改善（这个很崩溃）

（６）对一些较专业的领域涉及较少，需要第三方组件支持（比如地质方面的）

（７）Adobe公司对中国分部的支持不够（感觉宣讲和文档都做得不够）

（８）搜索引擎对swf文件的支持不够（Adobe一直在努力）

（９）与以往浏览习惯不同，比如右键被屏蔽，图片无法保存（可以改善）

 

鉴于Flex生成的swf文件太肥是其主要缺点（加载慢，运行慢，内存占用多），我就主要从减肥和优化的角度来说一下使用心得。

使用心得：

（１）Flex只是前台展现，需要搭配强大的后台（注意前后台的均衡和优化）

（２）考虑异步加载（比如分步加载外部资源）

（３）界面推荐使用相对布局，合理组合，避免多余嵌套

（４）界面加载图片推荐使用外部加载方式，尽可能多使用矢量图形

（５）规范CSS样式表，尤其注意使用的外部字体大小

（６）使用额外的皮肤和特效时需要综合考虑生成的文件大小和执行效率

（７）适当地考虑延时加载策略，主界面只显示必要的内容

（８）规范编码，提高执行效率，避免内存泄露

（９）使用RSL和Module和其他有效方式努力减肥

（１０）尽可能重写一些继承底层类的组件，执行效率更好

（１１）慎重使用重量级组件（比如DataGrid，AdvancedDataGrid）

 

原文来自：雨枫技术教程网 http://www.fengfly.com