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

用了一年多Flex，感觸多多。偶爾有同行的朋友問我啥是Flex，說實(shí)話，一時(shí)半會(huì)兒我還真說不清楚。尤其是對(duì)于一個(gè)從未接觸過Flex的朋友，想要由淺入深地只用嘴巴不用電腦給他講明白，這確實(shí)難為一個(gè)整天只跟機(jī)器打交道的程序員了。后來(lái)我想了一個(gè)辦法，我說你知道開心農(nóng)場(chǎng)吧，那就是拿Flex做的。這下子很多人有興趣了，呵呵，如果你也有興趣，請(qǐng)繼續(xù)往下看。失言未察之處，歡迎拍磚。

 

一般來(lái)說，一項(xiàng)技術(shù)的產(chǎn)生都是為了解決業(yè)界的重大難題而出現(xiàn)的。那么說到Flex我們就不得不先說一下RIA。RIA這個(gè)概念其實(shí)早就出現(xiàn)了，我最初是07年在《程序員》雜志上關(guān)于Ajax技術(shù)的介紹時(shí)看到的。到了08年，伴隨著網(wǎng)絡(luò)視頻的飛速發(fā)展，RIA應(yīng)用已經(jīng)搞得有聲有色熱火朝天了，其實(shí)翻譯過來(lái)就是個(gè)富客戶端（Rich Internet Application），相較于BS的瘦客戶端，也可以稱之為胖客戶端。當(dāng)然如果你已經(jīng)被這些名詞概念熏得焦頭爛額，請(qǐng)連跳四段（小黑好心提示，本部分僅余四段。。。）。

 

RIA簡(jiǎn)單的說，就是CS+BS的開發(fā)部署模式。CS和BS大家都很熟悉，CS的全拼是Client/Server，它的優(yōu)點(diǎn)在于借助局域網(wǎng)的信息安全和帶寬優(yōu)勢(shì)，充分利用客戶機(jī)器的運(yùn)算能力從而降低服務(wù)器壓力，缺點(diǎn)就是安裝部署更新麻煩，比如老板讓我跑到一千公里外的客戶那安裝一千臺(tái)機(jī)器的客戶端，過幾天我回來(lái)了，老板說那邊有幾臺(tái)機(jī)器運(yùn)行有問題，你去維護(hù)一下~！過幾個(gè)月，老板說你去把那一千臺(tái)機(jī)器全部升級(jí)一遍，他們自己不會(huì)裝。。。呵呵，這些痛苦我當(dāng)然不曾經(jīng)歷，我杜撰的。

 

那么在1998年，互聯(lián)網(wǎng)風(fēng)起云涌的時(shí)候，BS，Browser/Server，逢時(shí)而生。BS充分利用互聯(lián)網(wǎng)的優(yōu)勢(shì)，解決了CS安裝部署更新的一大難題。通過把業(yè)務(wù)邏輯處理放在服務(wù)器端，然后解析為HTML，利用HTTP協(xié)議傳輸?shù)娇蛻舻臑g覽器上就萬(wàn)事大吉。看起來(lái)很美，其實(shí)干過就知道也很痛苦。哪兒痛呢，痛的當(dāng)然是我們這些開發(fā)者。安裝部署更新倒是省事兒了，裝個(gè)IE，給個(gè)網(wǎng)址就能讓客戶登錄了。但是，基于HTML+JavaScript的技術(shù)讓人很崩潰。JavaScript我好久不用了，在以前畢業(yè)實(shí)習(xí)的時(shí)候，感覺開發(fā)和調(diào)試都不方便，而且還面臨著不同瀏覽器不兼容的噩夢(mèng)（據(jù)說現(xiàn)在上述問題隨著Ajax的風(fēng)行有所改善，我不太了解）。另外，BS還有一些潛在的缺點(diǎn)。比如，客戶端體驗(yàn)簡(jiǎn)單，不易開發(fā)豐富的效果來(lái)展示數(shù)據(jù)（這和當(dāng)時(shí)的網(wǎng)絡(luò)帶寬也有關(guān)系）；必須聯(lián)網(wǎng)才能運(yùn)行，信息安全無(wú)法保障；應(yīng)用程序需要通過其他技術(shù)輔助才能操作客戶端資源；服務(wù)器負(fù)載過高而客戶機(jī)運(yùn)算能力未充分使用等。

 

綜合來(lái)講，BS仍然是一個(gè)不錯(cuò)的解決方案，它的Web應(yīng)用程序和CS的桌面應(yīng)用程序曾一度二分天下，各領(lǐng)風(fēng)騷數(shù)十年。從解耦角度來(lái)看，CS以數(shù)據(jù)庫(kù)的方式把數(shù)據(jù)從程序中分離，BS以瀏覽器頁(yè)面的方式把界面和邏輯再次分離，然而第二次分離是不徹底的。表面上只是代碼結(jié)構(gòu)的分離，從實(shí)質(zhì)上看表現(xiàn)層仍然是邏輯層的附庸，前臺(tái)UI完全和后臺(tái)實(shí)現(xiàn)技術(shù)綁死（把已有項(xiàng)目后臺(tái)從C#換成JAVA是不可能的。。。）為了解決這個(gè)問題，RIA出現(xiàn)了（順便搞定了一些其他問題，比如頁(yè)面異步刷新，前臺(tái)UI不夠豐富等等），RIA基本實(shí)現(xiàn)了不依賴于特定后臺(tái)技術(shù)，能與多種服務(wù)端搭配使用。

 

在2002年，MacroMedia公司（簡(jiǎn)稱MM，05年被Adobe收購(gòu)）首先在Flash Player6中引入了RIA概念。2004年，MM正式發(fā)布Flex1.0（汗，終于說到Flex了），隨著Ajax的火爆，RIA開始受到廣泛關(guān)注。RIA主要有兩個(gè)方面的含義，一是用戶界面的豐富即富客戶端，二是數(shù)據(jù)模型的智能，服務(wù)器已經(jīng)變成了支持客戶端正常運(yùn)行的數(shù)據(jù)服務(wù)，并提供了異步數(shù)據(jù)傳輸和脫機(jī)緩存機(jī)制等復(fù)雜的數(shù)據(jù)處理能力。前面提到，RIA本質(zhì)上就是CS+BS，它想集大成，想搞總結(jié)，想終結(jié)CS和BS二分天下的局面。說淺顯點(diǎn)就是，如果以前的CS程序現(xiàn)在能在網(wǎng)絡(luò)上運(yùn)行，并且保持了原來(lái)的功能和特征，那么這就是一個(gè)RIA。關(guān)于RIA的詳細(xì)介紹GOOGLE上一搜一大把，在此就不繼續(xù)作詳細(xì)展開。回到當(dāng)下，RIA各種技術(shù)一番拼殺，現(xiàn)在廣為人知的只剩下四個(gè)NB小伙：Ajax、Flex、SilverLight、JavaFx。在本文第二部分中，我將簡(jiǎn)要介紹一下Flex（貌似進(jìn)度有點(diǎn)兒慢，多謝支持。。。）

 

 

Flex是咋回事之二 前世今生 

 

先說一下Flash Player（簡(jiǎn)稱FP）。經(jīng)常上網(wǎng)的朋友一定遇到過Flash Player版本升級(jí)的提示吧，這東西其實(shí)就是瀏覽器插件，據(jù)說已經(jīng)有了98%的安裝普及率，沒辦法，誰(shuí)讓咱們這么愛看視頻呢（FP具體介紹請(qǐng)見http://baike.baidu.com/view/1585492.htm）。Flex生成的頁(yè)面主要是通過Html包裝一下生成的swf文件，和Flash生成的swf一樣，它也靠FP才能完美運(yùn)行，這有點(diǎn)類似JVM虛擬機(jī)和.NET FRAMEWORK（FP里內(nèi)嵌了AVM虛擬機(jī)）。FP又分調(diào)試版和產(chǎn)品版，總體來(lái)講，咱們只管用FP提供的API，以及及時(shí)關(guān)注最新版本的功能，其余不會(huì)過多接觸（我對(duì)FP10關(guān)于3D方面的支持很感興趣，不過貌似其支持效果不太理想）。

 

再說一下Flash的歷史。在1996年,小軟件公司FutureWave Software為了給Netscape開發(fā)一個(gè)全新的網(wǎng)頁(yè)瀏覽插件，創(chuàng)建了名為Future Splash Animator的動(dòng)態(tài)小程序，該產(chǎn)品基于Java，是由一個(gè)稱為SmartSketch的產(chǎn)品演化而來(lái)，這就是Flash的老祖了。具有諷刺意味的是，這家FutureWave的公司本來(lái)是打算把這項(xiàng)技術(shù)賣給Adobe的，但在那個(gè)時(shí)候Adobe根本不睬它。而Macromedia（簡(jiǎn)稱MM）卻很有興趣，就這樣在1996年11月,MM在擁有了FutureWave這家公司的技術(shù)后，把FutureSplash重新命名為Flash Player 1.0。在隨后的許多年間，F(xiàn)lash被打包為Studio套件的一部分，并與其他Studio產(chǎn)品（如Dreamweaver和Fireworks）一起發(fā)布，世人稱網(wǎng)頁(yè)三劍客。。。三劍客橫行無(wú)敵，到了05年4月18日這天，ADOBE實(shí)在看不下去了，闊綽出手，又以34億美元天價(jià)收購(gòu)MM。。。ADOBE大叔估計(jì)很后悔當(dāng)年沒收購(gòu)Future Splash，搞到現(xiàn)在，被MM給做大了（Flash具體歷史介紹參見http://flash.9ria.com/viewthread.php?tid=13194和http://space.flash8.net/space/?625743/viewspace-350122）

 

如同今年4月Oracle收購(gòu)Sun一樣，MM嫁入ADOBE豪門，在當(dāng)時(shí)的業(yè)界也是一片嘩然炸雷。許多MM的忠實(shí)粉絲覺得，那三劍客就是被ADOBE大叔招安了啊，依據(jù)其收購(gòu)產(chǎn)品的一貫猥瑣惡行，這幾位劍俠估計(jì)很快就會(huì)被不聲不響地給整掉了（當(dāng)時(shí)Flex還是襁褓，大家都沒注意到。。。）Fireworks是PhotoShop的老對(duì)頭了，肯定是斬立決；Dreamweaver要不就是改裝變身，要不就是各種理由直接緩死；Flash日子會(huì)好過些，但其一貫的MM風(fēng)格是否能延續(xù)也很難保證。

 

然而ADOBE這次出乎意料的善良，三劍客無(wú)一遺棄，相反還忍痛把自己推行多年的SVG死緩（個(gè)人也很喜歡SVG，無(wú)奈和FLASH沖突，出于商業(yè)策略，這孩子被犧牲了）。在最新的CS4（Creative Suite 4）產(chǎn)品系列中，三劍客依然活力四射地與其他成員工具們和諧奮進(jìn)。那么事隔收購(gòu)事件四年多之后，我們已經(jīng)漸漸接受了MM產(chǎn)品前面強(qiáng)行加上的ADOBE標(biāo)簽。可以說，ADOBE充分吸納整合了MM的精神和風(fēng)格，無(wú)論是FP還是三劍客，ADOBE一直都在努力地做得更好更和諧。（本人現(xiàn)在已經(jīng)是ADOBE FANS了，哈哈，不過還是挺懷念Flash MX2004 和Dreamweaver2004那個(gè)時(shí)代的，盡管當(dāng)時(shí)也沒閃出啥東西來(lái)。。。）

 

說了這么多關(guān)于Flash的事情，其實(shí)是因?yàn)镕lash比Flex更出名，ADOBE也察覺到這一點(diǎn)，所以在預(yù)備推出FLEX4時(shí)，又將其更名為Flash，只是SDK仍然沿用FLEX的名號(hào)。FLEX和FLASH并沒有本質(zhì)區(qū)別，它們最終都是轉(zhuǎn)為ActionScript源文件，然后被編譯為二進(jìn)制的swf文件（就和JAVA文件被編譯成class一樣），再交由FP（FP就像JVM虛擬機(jī)一樣）來(lái)執(zhí)行。不同的是，F(xiàn)LASH更偏向于設(shè)計(jì)人員，它有時(shí)間軸和幀的概念，能更好地實(shí)現(xiàn)動(dòng)畫、特效、短片等美工效果。Flex是面向開發(fā)者的，隱藏了時(shí)間軸的概念（只有兩幀），更專注于解決企業(yè)應(yīng)用的表現(xiàn)層方案，提供了大量的通用組件用于構(gòu)建前端頁(yè)面、通過數(shù)據(jù)服務(wù)技術(shù)能更好的分離界面和邏輯業(yè)務(wù)層。

 

從04年3月MM手中的Flex1.0，到05年10月ADOBE手中的Flex2.0，再到07年1月伴隨著強(qiáng)大的面向?qū)ο笳Z(yǔ)言ActionScript3出現(xiàn)的Flex3.0,再到明年初發(fā)布的強(qiáng)力Flex4.0。借著RIA的春風(fēng)，F(xiàn)lex在不斷走向成熟的同時(shí)，也被更多的業(yè)界開發(fā)者和企業(yè)用戶所關(guān)注接受。如果看到這里你很感興趣，推薦在GOOGLE上搜索一把，現(xiàn)在不是08年了，網(wǎng)上已經(jīng)涌現(xiàn)出大量的簡(jiǎn)易教程供我們參考學(xué)習(xí)。當(dāng)然如果你有些閑錢，或是想系統(tǒng)地學(xué)習(xí)一下，也可以買幾本書。（有時(shí)間我會(huì)整理些網(wǎng)站博客和書籍推薦的）

 

在本文第三部分中，我將結(jié)合項(xiàng)目經(jīng)驗(yàn)談一下Flex的優(yōu)缺點(diǎn)和使用心得。沒用過Flex的可能無(wú)法共鳴吧，那就直接跳過不看了，呵呵

 

 

Flex是咋回事之三　誰(shuí)用誰(shuí)知道

 

一項(xiàng)技術(shù)，從概念提出到技術(shù)研發(fā)到商業(yè)發(fā)布，再到實(shí)際應(yīng)用，最終將產(chǎn)品呈現(xiàn)在用戶面前，這是一個(gè)漫長(zhǎng)而復(fù)雜的過程。在這當(dāng)中，很多有創(chuàng)意有生命力的技術(shù)因?yàn)楦鞣N原因小小遺憾地不幸夭折了。Flex能走到今天確實(shí)不易，下面讓我們從不同的角度來(lái)看一下它是如何過關(guān)斬將，贏得眾多青睞的。

 

技術(shù)角度：

（１）具備了RIA時(shí)代富客戶端的優(yōu)點(diǎn)（C/S+B/S）

（２）支持多種服務(wù)器語(yǔ)言（JAVA、.NET、PHP）及主流框架（Spring、Hibernate）

（３）與Java結(jié)合后相當(dāng)強(qiáng)大，能充分利用Java的資源背景

（４）擁有豐富的組件和第三方組件，對(duì)企業(yè)級(jí)的數(shù)據(jù)匯總和業(yè)務(wù)流程展現(xiàn)力較強(qiáng)悍

（５）借助開源的力量，擁有眾多民間組織和牛人支持

（６）Adobe公司（還有MM多年積累）的強(qiáng)大背景

（７）源于Flash的天生麗質(zhì)，輕松使用多媒體資源，動(dòng)態(tài)交互性強(qiáng)

（８）借助FlashPlayer的安裝普及度，輕松實(shí)現(xiàn)跨瀏覽器跨平臺(tái)

（９）良好的架構(gòu)設(shè)計(jì)和制作精良的文檔示例（明年FLEX４同步推出中文版）

（１０）借助于插件豐富的Eclipse開發(fā)平臺(tái)并擁有獨(dú)立的IDE

（１１）框架設(shè)計(jì)重用性高，有利于模塊化設(shè)計(jì)

（１２）近幾年發(fā)展態(tài)勢(shì)良好，獲得了廣泛認(rèn)可，產(chǎn)品和技術(shù)也越發(fā)成熟

 

開發(fā)者角度：

（１）開源，透明（國(guó)人沒有不喜歡開源的，哈哈）

（２）基于Eclipse開發(fā)平臺(tái)，易上手，且插件豐富（巨人的肩膀啊~）

（３）基于Eclipse平臺(tái)，開發(fā)調(diào)試方便(FB4中的條件斷點(diǎn)）

（４）ActionScript語(yǔ)言與Java的融合度和相似度較高，易學(xué)易用

（５）MXML標(biāo)簽與XML相似，邏輯清晰可讀性強(qiáng)

（６）架構(gòu)設(shè)計(jì)良好，耦合度低，有利于組件重用

（７）無(wú)需針對(duì)不同瀏覽器編寫代碼，擺脫編寫和調(diào)試的噩夢(mèng)（針對(duì)JS說的）

（８）類似VB的可視化拖拽組件，快速創(chuàng)建界面

（９）方便定制及使用第三方的皮膚和樣式，無(wú)需美工也有好效果

（１０）支持多媒體資源，輕易開發(fā)動(dòng)態(tài)交互性強(qiáng)的界面

（１１）眾多的RPC組件保障對(duì)后臺(tái)數(shù)據(jù)訪問的安全性和效率

（１２）文檔示例豐富，通過網(wǎng)絡(luò)可以獲取大量的學(xué)習(xí)資源

（１３）近兩年發(fā)展態(tài)勢(shì)良好，前景光明

 

企業(yè)角度：

（１）開源，免費(fèi)（其實(shí)很多時(shí)候還是直接用破解的。。。）

（２）具備了RIA時(shí)代富客戶端的優(yōu)點(diǎn)（C/S+B/S）（潮流啊~！）

（３）項(xiàng)目和組件的重用性高，易于資源積累和快速構(gòu)建

（４）Flex提供了與其他語(yǔ)言的結(jié)合，能廣泛利用已有的資源

（５）界面華麗，客戶認(rèn)可度高

（６）學(xué)習(xí)曲線一般，培訓(xùn)成本低

 

用戶角度：

（１）部署和更新方便

（２）界面漂亮，交互性強(qiáng)

（３）安全

 

說了這么多好話，再來(lái)綜合說一下缺點(diǎn)。鑒于我著迷于Flex的光環(huán)效應(yīng)，沒有看到的缺點(diǎn)還請(qǐng)諸位多多提出。

缺點(diǎn)：

（１）不擅長(zhǎng)處理復(fù)雜的業(yè)務(wù)流程，主要還是適合展現(xiàn)（Flex不是萬(wàn)能的）

（２）繼承了Flash的諸多優(yōu)點(diǎn)，卻唯獨(dú)丟掉了Flash的小巧輕盈（減肥是永恒的話題）

（３）目前尚沒有比較好的減肥策略，帶寬較好時(shí)這不是問題（不是一般的卡。。。）

（４）對(duì)服務(wù)器和客戶端的硬件設(shè)備都有一定要求（CPU和內(nèi)存占用很生猛。。。）

（５）運(yùn)行期內(nèi)存泄露狀況嚴(yán)重，盡管可以通過一定手段改善（這個(gè)很崩潰）

（６）對(duì)一些較專業(yè)的領(lǐng)域涉及較少，需要第三方組件支持（比如地質(zhì)方面的）

（７）Adobe公司對(duì)中國(guó)分部的支持不夠（感覺宣講和文檔都做得不夠）

（８）搜索引擎對(duì)swf文件的支持不夠（Adobe一直在努力）

（９）與以往瀏覽習(xí)慣不同，比如右鍵被屏蔽，圖片無(wú)法保存（可以改善）

 

鑒于Flex生成的swf文件太肥是其主要缺點(diǎn)（加載慢，運(yùn)行慢，內(nèi)存占用多），我就主要從減肥和優(yōu)化的角度來(lái)說一下使用心得。

使用心得：

（１）Flex只是前臺(tái)展現(xiàn)，需要搭配強(qiáng)大的后臺(tái)（注意前后臺(tái)的均衡和優(yōu)化）

（２）考慮異步加載（比如分步加載外部資源）

（３）界面推薦使用相對(duì)布局，合理組合，避免多余嵌套

（４）界面加載圖片推薦使用外部加載方式，盡可能多使用矢量圖形

（５）規(guī)范CSS樣式表，尤其注意使用的外部字體大小

（６）使用額外的皮膚和特效時(shí)需要綜合考慮生成的文件大小和執(zhí)行效率

（７）適當(dāng)?shù)乜紤]延時(shí)加載策略，主界面只顯示必要的內(nèi)容

（８）規(guī)范編碼，提高執(zhí)行效率，避免內(nèi)存泄露

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

（１０）盡可能重寫一些繼承底層類的組件，執(zhí)行效率更好

（１１）慎重使用重量級(jí)組件（比如DataGrid，AdvancedDataGrid）

 

原文來(lái)自：雨楓技術(shù)教程網(wǎng) http://www.fengfly.com