淺論Flex和Html5的未來

江麟

Html5+css3的完美搭配為前端開發(fā)者打開了新大門，讓人不禁嘆服于其快捷和方便。

HTML 5的出現(xiàn)讓Flex更加專注某些方向和領(lǐng)域。所以，它們是互補(bǔ)的，而非替代。

與曾經(jīng)的強(qiáng)勢(shì)不同，flash開始慢慢淡化在IT新聞大潮中，Adobe公司先后放棄了Linux環(huán)境下的、TV端的flash，最后終于放棄了移動(dòng)端的flash，可謂損失慘重，卻沒有太詳細(xì)的理由說明原因，只有Adobe副總裁兼交互開發(fā)業(yè)務(wù)總經(jīng)理丹尼·維諾科(Danny Winokur)在公司網(wǎng)站上發(fā)表博客稱：Adobe將不再為移動(dòng)瀏覽器開發(fā)Flash Player，公司未來的發(fā)展方向是桌面瀏覽器、移動(dòng)應(yīng)用和HTML5。

Flex和Flash將要消失？

從Html5技術(shù)強(qiáng)勢(shì)崛起、在各大IT公司一呼百應(yīng)可看出，Html5技術(shù)的日漸完善才是Adobe忍痛割愛的直接原因，甚至被放棄的不止這些胎死腹中的計(jì)劃，flash應(yīng)用開發(fā)的利器flash builder（Flex項(xiàng)目開發(fā)平臺(tái)）也被贈(zèng)與開源社區(qū)，一時(shí)間人們仿佛看到了flash的末日，開發(fā)者放棄flash項(xiàng)目，二次開發(fā)公司放棄基于flex的應(yīng)用服務(wù)，更愿意提及的是Html5這個(gè)即將完善、“無所不能”的“超人”。

盲目的屈從和跟風(fēng)往往是導(dǎo)致身陷囹圄、進(jìn)退維谷的重要原因，在疏遠(yuǎn)flash的時(shí)候，我們是否該想想：為什么要放棄一個(gè)成熟的技術(shù)，為什么在自己、用戶、產(chǎn)品都習(xí)慣了flash時(shí)突然去改變它，選擇的替代品是否有足夠的能力勝任功能和業(yè)務(wù)的需求。大多數(shù)人在贊揚(yáng)Html5的優(yōu)點(diǎn)，抨擊flash的缺點(diǎn)時(shí)并未仔細(xì)考慮過匆忙中下的結(jié)論是否真的符合Flash、Html5在當(dāng)前IT形式下所扮演的角色，是否對(duì)Flash這個(gè)若干年來勤勤懇懇為網(wǎng)頁絢麗的效果和穩(wěn)定的視頻播放環(huán)境提供支持的元?jiǎng)鬃銐蚬剑欠駥?duì)Html5這個(gè)很多功能尚處在商議和爭論中的新產(chǎn)品有些神化的夸大。

作為地圖服務(wù)運(yùn)營商，高德公司幾乎在Adobe宣布Flex開源化和停止更新的不久，就下架了flash地圖api，未下架的flex版的維護(hù)和更新也幾乎停滯，將更多的精力轉(zhuǎn)入Html5的研發(fā)計(jì)劃。面對(duì)大量的技術(shù)人員轉(zhuǎn)入Html5、越來越多的服務(wù)提供商停滯flex產(chǎn)品版本更新或關(guān)閉服務(wù)，我們是否惶恐：未來不久某天flash突然消失，flash服務(wù)突然關(guān)閉，Adobe公司完全放棄flash，我們的項(xiàng)目該怎么辦？客戶該怎么辦？

怎么辦？微軟公司很好地給出了解答，4月8日微軟終止提供Windows XP全部技術(shù)支持服務(wù)，相關(guān)漏洞補(bǔ)丁一并停止提供。人們?cè)诨袒讨邪l(fā)現(xiàn)，4月9日XP系統(tǒng)依然能用。顯而易見，停止更新并不意味著軟件用不了。同樣，即便Adobe公司放棄Flex，Html5淡化Flash的重要地位，并不意味著它們不能再被使用，我們依然能用Flex編譯出Flash文件，依然可以通過開源社區(qū)獲取最新的版本更新，可以使用Flash Player觀看喜歡的電影，可以開發(fā)基于Flex的項(xiàng)目，依然可以繼續(xù)打開那些熟悉的Flash網(wǎng)站。Flash、Flex還不會(huì)消失，至少從目前來看。

Flex的優(yōu)勢(shì)

Flex這個(gè)讓普通程序員開發(fā)制作Flash成可能的互聯(lián)網(wǎng)技術(shù)巨頭，如今為何幾乎被Html5死死壓制著？

我們先來細(xì)說一下Flex，F(xiàn)lex最早是由Macromedia公司開發(fā)的一種語言和編譯器，版本是Flex 1.0和Flex 1.5，后由Adobe公司接手，分別于2006年、2008年和2010年發(fā)布了Flex 2.0、Flex 3.0和Flex 4。從功能上看，F(xiàn)lex應(yīng)用程序與AJAX應(yīng)用程序十分相似，都能夠動(dòng)態(tài)更新用戶界面，在后臺(tái)發(fā)送和加載數(shù)據(jù)，但是更簡單、更快捷是Flex制勝法寶。

其內(nèi)置的面向?qū)ο缶幊陶Z言ActionScript，增強(qiáng)了FlashPlatform的能力，雖然較早版本的ActionScript提供的強(qiáng)大功能和靈活性已足以創(chuàng)建富有魅力的在線體驗(yàn)，但是新版本ActionScript 3.0更一步增強(qiáng)了語言，即使對(duì)著有巨大數(shù)據(jù)集合完全面向?qū)ο蟮目芍赜么a的最復(fù)雜應(yīng)用程序，ActionScript 3.0也能幫得上忙。Flex中的MXML是一種XML語言，通過聲明性XML語法簡化了創(chuàng)建和維護(hù)界面的工作，不必編寫和維護(hù)ActionScript代碼，就可以方便地創(chuàng)建可視的、具有多層結(jié)構(gòu)的復(fù)雜UI。在構(gòu)建Flex應(yīng)用程序時(shí)，MXML會(huì)自動(dòng)被編譯為ActionScript。flex優(yōu)勢(shì)公認(rèn)有如下幾個(gè)方面：

解決異步調(diào)用：前后臺(tái)數(shù)據(jù)交互做到不刷新頁面，不用擔(dān)心瀏覽器兼容性。

對(duì)流媒體的支持：Flex是被公認(rèn)為流媒體技術(shù)支持最好的應(yīng)用。

跨平臺(tái)：Flash player能夠在Linux環(huán)境下、手機(jī)上運(yùn)行，不用擔(dān)心被綁死在Windows上

對(duì)底層的可操作性：Flex能夠調(diào)用底層的東西，如可調(diào)用攝像頭實(shí)現(xiàn)視頻，而且視頻本身就嵌入在Flex應(yīng)用中，由Flex player直接播放

方便：可以用任何你熟悉的WEB編程平臺(tái)作為后臺(tái)數(shù)據(jù)訪問層，可以使用webservice、httpservice等等。

Html5優(yōu)勢(shì)凸顯

Flex有這么多優(yōu)勢(shì)，為什么Html5還能替代Flex成為時(shí)下IT產(chǎn)業(yè)津津樂道的話題？Html5作為Html4的升級(jí)版，卻絕非簡簡單單內(nèi)容的更新，如果說Html4混亂不清的標(biāo)簽語義讓每個(gè)讀寫程序的人苦不堪言，那么Html5就像一個(gè)修剪得整整齊齊的花園，每個(gè)標(biāo)簽都有其固定的位置、特定的語義，在特定的上下文中使用，再也不用像以前div套table再套div，你永遠(yuǎn)沒法一眼看出對(duì)應(yīng)關(guān)系，有的只是數(shù)不過來的

如果把Html5+Css3優(yōu)秀的界面效果比作是人換上了光鮮的衣著，那么WebSocket技術(shù)的推廣就是精神的升華。它代表巨大的進(jìn)步，真正意義上提供了全雙工的通信方式，在Web應(yīng)用中實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)傳輸和獲取，打破了傳統(tǒng)的頻繁“發(fā)出請(qǐng)求、響應(yīng)請(qǐng)求”的輪詢技術(shù)，這對(duì)需長連接的程序帶來了極大方便，如股票程序、在線IM、強(qiáng)交互性游戲等。在WebSocket之前，基于Ajax的輪詢技術(shù)“萬次連接，萬次請(qǐng)求”的連接模式造成了大量的資源浪費(fèi)和損耗，而WebSocket的“一次連接，任意通信”連接模式在傳輸數(shù)據(jù)中除了握手過程，幾乎沒有雜質(zhì)信號(hào)，無疑是通信模式上一次質(zhì)的飛躍。

但如同開篇所說，不要去盲目的屈從和跟風(fēng)，別人在用WebSocket，我就必須要用嗎？在某些特定情況下使用Ajax是有天然優(yōu)勢(shì)的，如新聞網(wǎng)站、博客、社交網(wǎng)站，它們往往交互性要求并不高，不是時(shí)刻都有日志或新聞，持續(xù)的、大量的長連接必然會(huì)對(duì)服務(wù)器造成很大壓力。

Flex曾引以為傲的便捷拖拽效果，Html5提供同樣花樣繁多的拖拽操作，只需draggable="true"即可；Flex內(nèi)置行為和過度效果、平滑的處理漸變效果，Html5+Css3同樣提供，代碼量還更少；Flex可方便地播放視頻和音頻，Html5也提供相關(guān)標(biāo)簽

Html5的出現(xiàn)就像一記重拳給Flex狠狠一擊：你有的我都有，而你不具備的我也提供！

Flex和Flash已漸漸失去市場(chǎng)

Flash曾主導(dǎo)網(wǎng)絡(luò)視頻，市場(chǎng)份額高達(dá)81%。Html5推出視頻和音頻后帶給它的沖擊不言而喻。很多人對(duì)Flash早已不滿，喬布斯就曾說“他們有潛力做些有趣的事情，但就是拒絕那樣去做……無論何時(shí)，只要是Mac電腦崩潰時(shí)，都更有可能是由于Flash的緣故，而不是與其無關(guān)?！眴滩妓顾曰蛟S過激，但不無道理。

瀏覽一些基于flash頁面的大型網(wǎng)站時(shí)，內(nèi)存直飚上百兆屢見不鮮，若電腦內(nèi)存稍低，打開的其他占用內(nèi)存的軟件過多或是Flash頁面的內(nèi)存釋放機(jī)制沒有處理好，都可能導(dǎo)致頁面崩潰、內(nèi)存泄露。flex編譯出的SWF文件過大是導(dǎo)致用戶體驗(yàn)變差的直接原因。著名的恐怖網(wǎng)頁游戲《Hotel626》就是如此：優(yōu)秀的畫面直追電影，但若你第一次運(yùn)行且沒有任何緩存，想加載完是一件很辛苦的事情——它太大了！我還見過一位群友為酒莊做了一個(gè)精美的純Flash網(wǎng)站，大量唯美圖片，第一眼看去誰都會(huì)喜歡上，但如果客戶的網(wǎng)速極慢或極不穩(wěn)定，那么打開這個(gè)網(wǎng)站至少要幾分鐘，沒人愿意這么做。

我們不缺少互聯(lián)網(wǎng)公司，但網(wǎng)速實(shí)在堪憂，即便服務(wù)商提供10M、20M甚至更多帶寬，但又有多少帶寬是我們能夠駕馭的？總之，我國的總體網(wǎng)絡(luò)速度仍處在較低的水平，這就制約了Flash用戶群體。

即使如此，Adobe公司仍舊稱“將繼續(xù)保持Flash Player代碼庫的現(xiàn)代化進(jìn)程，確保Flash的運(yùn)行環(huán)境(Runtime)在未來5至10年的時(shí)間內(nèi)滿足開發(fā)者的需求。”

為何它在將大量人力物力轉(zhuǎn)移至開發(fā)Html5后仍做出這樣的決定？在網(wǎng)上隨便一搜就能找到對(duì)Html5充滿希望的文帖，力挺Flex的人則寥寥無幾，難道不該立刻放棄Flex轉(zhuǎn)入Html5的懷抱么？就如同開篇所提的，我們要去想想為何要放棄，為何要改變，替代品是否有足夠的能力勝任？一個(gè)成熟技術(shù)被替代的原因只有兩個(gè)：其一是有一個(gè)更成熟、更穩(wěn)定、更優(yōu)秀的技術(shù)出現(xiàn)；其二是這個(gè)技術(shù)已經(jīng)跟不上時(shí)代所需。

替代Flex？Html5還沒準(zhǔn)備好

要滿足第一個(gè)條件，Html的兼容性從一開始就是個(gè)難題，不同的瀏覽器不同的顯示效果，有的瀏覽器干脆不支持顯示，刨除專為游戲或視頻做的瀏覽器，網(wǎng)上著名的瀏覽器多達(dá)10余種，誰也不愿意本來干凈的快速啟動(dòng)欄被若干個(gè)瀏覽器的快捷方式占據(jù)著。Html5致力于改變現(xiàn)狀，實(shí)現(xiàn)瀏覽器顯示和功能上的統(tǒng)一，豐富了標(biāo)注、嚴(yán)格規(guī)范了語義、增加了屬性，但即便做了如此多的努力，到目前為止，各大瀏覽器間也沒能做到完全統(tǒng)一。

首先是功能的支持。如Html5六種典型input元素date、month、week、time、datetime、datetime-local，Opera及Chrome瀏覽器支持前四種和最后者，F(xiàn)irefox則都不支持。使用Html5test檢測(cè)三者（Chrome34.0.1847.137m、Firefox29.0.1、Opera21.0.1432.67皆為當(dāng)前最新版本，低版本支持的會(huì)更少）對(duì)Html5的支持情況會(huì)發(fā)現(xiàn)：Chrome支持其中485個(gè)規(guī)范，Opera支持476個(gè)，而Firefox僅為447個(gè)，這說明同樣的代碼只能運(yùn)行在某一款瀏覽器上，甚至都不支持。對(duì)此IE官網(wǎng)的回答是：“現(xiàn)在我們所提供的支持都是非常安全穩(wěn)定的，今后也將優(yōu)先對(duì)那些在民眾那里獲得非常高的渴望度的功能進(jìn)行支持。不管什么功能一下子全部提供支持，或者說為了迎合企業(yè)用戶而特意對(duì)某些功能提供支持的話，這種支持是十分不安全、不穩(wěn)定的，所以我們不希望采取這種做法?！笨梢娭С諬tml5所有標(biāo)簽尚需不短的時(shí)間。

其次是顯示樣式和CSS上的不統(tǒng)一，Html5之所以被追捧，絕非僅依靠Html5本身，而是依靠Html5+CSS+javascript這個(gè)強(qiáng)勢(shì)的前端顯示組合。CSS3的標(biāo)準(zhǔn)寫法目前還不能被所有瀏覽器支持，許多瀏覽器需要加上自身特殊的前綴，例如線性漸變linear-gradient屬性在WebKit內(nèi)核瀏覽器里的寫法為-webkit-linear-gradient，在Opera的寫法為-o-linear-gradient，在Firefox的寫法為-moz-linear-gradient，而目前要想在指定的瀏覽器里正常顯示樣式就必須加入該瀏覽器特定的前綴才行。要實(shí)現(xiàn)一個(gè)效果并在2個(gè)或2個(gè)以上的瀏覽器里兼容，至少要寫兩次同樣的CSS代碼。各個(gè)瀏覽器對(duì)Html5標(biāo)簽的顯示樣式也并不統(tǒng)一，如：color類型的input標(biāo)簽在Chrome和Opera默認(rèn)顯示為接近于正方形的形狀，在Firefox里則被默認(rèn)顯示成長方形，更扁更寬。

再次是瀏覽器版本問題，盡管IE6瀏覽器在中國的市占率已從2010年的59.67%下降至2014年5月的28.26%，但中國IE6用戶量仍高居世界首位，拙劣的CSS樣式，支持javascript總是出現(xiàn)匪夷所思的問題，連Html4的支持都會(huì)出現(xiàn)問題的IE6又如何能支持Html5？IE官方明確表示只有IE8以上的版本才支持Html5，而Chrome、Opera和FireFox都需要使用最新的版本才能獲得優(yōu)秀的Html5體驗(yàn)，這就迫使用戶必須不斷升級(jí)瀏覽器，對(duì)那些無法聯(lián)網(wǎng)的計(jì)算機(jī)來說，這是一個(gè)棘手的問題，就算能夠無限制的連接網(wǎng)絡(luò)，又有多少用戶愿意頻繁地更新瀏覽器呢？用戶群體中存在的大量低版本瀏覽器是阻礙Html5打開市場(chǎng)缺口的又一個(gè)直接原因。

技術(shù)被描繪得前景再好，內(nèi)里功能再創(chuàng)新，也要有應(yīng)用支持、用戶認(rèn)可才行。相較高調(diào)發(fā)布，Html5后續(xù)市場(chǎng)化力度的疲乏使越來越多的人對(duì)它是否真正改變當(dāng)前互聯(lián)網(wǎng)技術(shù)的格局產(chǎn)生了質(zhì)疑，其中較有名的是“Html5 騙局論”，sk-flash網(wǎng)站在《Html5的無需插件騙局》文章中寫道：“HTML5在天下人面前撒下了彌天大謊：在目前世界絕大多數(shù)的電腦上要運(yùn)行HTML5程序，都必須安裝比插件更可怕，名字叫IE9/Firefox/Chrome的瀏覽器；如果說插件已足夠讓客戶/玩家聞風(fēng)喪膽，那么安裝瀏覽器不等同于自掘墳?zāi)?？”矛頭直指當(dāng)前“混亂不堪”的瀏覽器市場(chǎng)。cnBeta在《Html5只是個(gè)陷阱 Adobe本該堅(jiān)持》中質(zhì)疑它能否成功取得移動(dòng)端領(lǐng)袖地位：“現(xiàn)在整個(gè)移動(dòng)領(lǐng)域廣泛宣傳 HTML5 的兼容性，可能是個(gè)陷阱。為了成功，開發(fā)者需要把各個(gè)平臺(tái)區(qū)分開來對(duì)待。而在非 HTML5 時(shí)代，可能你建立的應(yīng)用只適用于最新最好的硬件平臺(tái)，沒錯(cuò)，一般用戶使用它的機(jī)會(huì)概率變小了，但每一個(gè)購買了新設(shè)備的人會(huì)偏向于使用它。你的應(yīng)用越能發(fā)揮新硬件平臺(tái)的優(yōu)勢(shì)，硬件和系統(tǒng)提供商就會(huì)越傾向于幫你宣傳應(yīng)用，這會(huì)給你帶來一些意想不到的效果。一旦你的應(yīng)用中一個(gè)新硬件平臺(tái)上獲得了成功，那么你就可以開始侵占其它硬件平臺(tái)的行動(dòng)了。而對(duì)于那些試圖一次性征服所有平臺(tái)的開發(fā)者，通常都找不到市場(chǎng)營銷合作伙伴，或者說，在一個(gè)所有人都不會(huì)輸?shù)臅r(shí)代，也很難有人贏。HTML5 殺不死移動(dòng)應(yīng)用?！?/p>

Html5絕非一場(chǎng)真騙局，只是需要被完善的太多了。一個(gè)視頻格式便讓眾多“義務(wù)”參與進(jìn)Html5規(guī)則制定的大公司爭得不可開交，畢竟有幾家公司是拋卻自身利益真正為其服務(wù)的呢？沒有爭議的是用戶依然可以使用Flash。作為先驅(qū)，YoTube率先在視頻播放加入了Html5，只是播放的鋸齒感實(shí)在太強(qiáng)烈，最終團(tuán)隊(duì)選擇了兼容Flash和Html5。這證明Flex在目前來看相比Html5還是有可取之處的，其優(yōu)勢(shì)在于大量的開發(fā)者、簡介清晰的開發(fā)和調(diào)試功能、眾多的控件類、高效的文檔處理能力以及Flash擁有大量的用戶。Html5屬于無需插件就能在瀏覽器中運(yùn)行，使用快捷小巧，支持不遜于Flex的視圖效果和控件類型，對(duì)數(shù)據(jù)和文檔的處理能強(qiáng)，圖文混排能力極強(qiáng)，編寫框架清晰，但低效的調(diào)試一直是Html系列的尷尬，盡管VS2010在處理javascript方面強(qiáng)大了很多，但仍不能有效檢測(cè)所有錯(cuò)誤。

不是替代，而是互補(bǔ)

套用OsChina.NET社區(qū)《淺談Flash/Flex/Html5技術(shù)選型》一文中的話：“HTML 5與Flex是兩種截然不同的技術(shù)解決方案。HTML 5的出現(xiàn)讓Flex更加專注某些方向和領(lǐng)域。所以，它們是互補(bǔ)的，而非替代。因此，‘替代一說并不準(zhǔn)確?！盕lex和Html5目前優(yōu)缺點(diǎn)都很明顯，在項(xiàng)目中配合使用是非常好的選擇，Html5優(yōu)秀的頁面布局可承擔(dān)頁面總體框架，強(qiáng)大的數(shù)據(jù)展示效果可以方便、清晰地展示各種數(shù)據(jù)，F(xiàn)lex則可幫助Html5完成視頻音頻的加載，數(shù)據(jù)統(tǒng)計(jì)中的柱狀圖、條形圖，并可以在頁面局部加載動(dòng)畫，這些都是豐富頁面的絕佳功能，而Flex所實(shí)現(xiàn)的功能并非網(wǎng)頁的全部，也并非網(wǎng)頁加載完成后最迫切展示給用戶的部分，所以可以讓用戶稍等一會(huì)，先去看Html5加載完成的主要內(nèi)容。這很有可能是Html5還未完善，但是已有大部分用戶接受并選擇它后，網(wǎng)頁最佳的展現(xiàn)方式。誰又敢保證未來不是Html5的天下呢？

結(jié)語

Html5會(huì)慢慢的完善并替代Flex，但事實(shí)證明為時(shí)尚早，F(xiàn)lex就如同夕陽依舊散發(fā)著它的光芒，不再耀眼但不可或缺，Html5也如朝陽般冉冉升起，也許終有一天Flex，F(xiàn)lash將消失在我們的生活中，現(xiàn)在人們還離不開Flex、Flash，卻向往著Html5。取二者的優(yōu)點(diǎn)兼而得之才是上上之選，雙贏永遠(yuǎn)是大家樂見并支持的。最后套用Adobe首席技術(shù)官Kevin Lynch的話：“我們將為HTML5開發(fā)工具，開發(fā)全球最好的工具。這無關(guān)HTML5與Flash的對(duì)抗，它們之間可以實(shí)現(xiàn)雙贏，最重要的是自由的web選擇權(quán)?！?/p>