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