淺談 Flash/Flex/HTML5 技術選型

在HTML5發布以前，RIA領域的技術解決方案一直相都是各展所長，并無爭議。Adobe體系中，Flash做不了的事情，Flex可以做到；.Net系決策者在選用RIA解決方案時，Silverlight是不二之選。

曾經我對Flex的迷戀到了欲罷不能的地步，與我有相同想法的人亦不在少數，Flex也大有“一統江湖”的趨勢。然而，隨著HTML 5橫空出世，Flex“易主”，Silverlight被“雪藏”，RIA領域的技術解決方案開始變得撲朔迷離。

HTML 5無疑是“明日之星”，蘋果公司前CEO喬布斯對它贊賞有加，絕大多數智能手機瀏覽器均支持HTML 5，基于HTML 5的網站也如雨后春筍般出現。這些似乎預示著HTML 5時代來臨，人們試圖讓決策者相信，Flash/Flex時代已經過去了，HTML 5才是RIA領域的最佳解決方案。然而，事實果真如此嗎？ 我曾經見過一個項目，原計劃使用Flex做為前端解決方案，由于當時HTML 5“盛行”，最終決策者決定棄用Flex而轉投HTML 5。 接下來會發生什么呢？

• 由于HTML 5的瀏覽器兼容性問題，導致需求設計階段的很多功能都需要推倒重做。
• 在實現過程中，不僅要寫HTML 5標簽，還要寫CSS與JavaScript，對于項目來說，增加了人員構成，項目的開發成本也隨之增加。
• HTML項目可以方便獲取源碼，因此需要增強保密性及安全性設計。
• 在插件的編寫、框架的選擇上，其難度也要遠遠大于Flex。

從上述情況可見，HTML 5也存在劣勢，并不完美。同樣，我也可以列舉出諸多例子來體現HTML 5的優勢。那么，“真相”到底是什么？

真相只有一個：

HTML 5與Flex是兩種截然不同的技術解決方案。HTML 5的出現讓Flex更加專注某些方向和領域。所以，它們是互補的，而非替代。因此，“替代”一說并不準確。

雖然，上述例子只是小概率事件。但概率小，不代表不發生，不代表不典型。所以，在這里我想跟大家談一下Flash、Flex、HTML 5的技術選型。

首先明確一個觀點：技術選型沒有既定的規律可循，它是由諸多因素決定的，例如：開發人員的技術知識結構是否勝任、項目的開發成本、開發人員構成、項目的開發周期、項目的屬性等等。

但是，我們仍可以從這些技術的特點出發，辨別你的應用程序適合采用哪種方案！

Flash的特點：

• 優勢：

  • 借助時間線（Time Line）和Action Script 3.0可以方便地制作出任意效果動畫。
  • 完備的開發工具。（Flash Pro CS系列開發工具）
  • 完備的工作流。（Adobe CS系列全線工具均可以導入到Flash并可二次編輯）

• 劣勢：

  • Flash Player不支持iOS。
  • Flash Player不支持Android 4.1+。（Android 4.0以下系統均可支持）

Flex的特點：

• 優勢：
  • 完備的、可以媲美C/S架構（桌面軟件）的大量控件支持。
  • 與Flash及Adobe CS系列全線工具的完美結合。
  • 完整的企業化開發流程及工作流（代碼的編寫、編譯、調試、發布等）
  • 多種框架可供選擇，并支持高級特性，如：IoC、視圖綁定、數據綁定實時更新等。
• 劣勢：
  • 生成的SWF過大。（雖有完善的“瘦身”方案，但仍比HTML方案大很多）
  • 效率問題。（在某些情景下，比HTML 5的效率要差一些）
  • 較差的圖文混排支持。（無法媲美HTML 5的圖文混排，這是Flash系的通病）
  • 儲備人員相對HTML來說還是太少。

HTML 5的特點：

• 優勢：
  • 完備的技術人員儲備。（前端開發人員的數量完全可以跟Java、.Net程序員媲美）
  • 借助HTML 5的諸多新特性，在某些層面完全可以取代Flash技術。（Flash屬于Plug-in方式，而HTML則是瀏覽器原生支持）
  • 不遜色于Flex的大量控件。（Bootstrap、基于jQuery的控件比比皆是）
  • 真正意義上全平臺支持。
  • 借助Node.js可以勝任后臺（前/后臺通吃）；借助Coffee Script，可以媲美Ruby/Python的語法糖衣。
  • 比Flex擁有更大、更全面、更活躍的社區。
• 劣勢：
  • 作為企業開發，不具有媲美Flex的工作流及開發流程。
  • 作為游戲開發，在支持3D及運行效率方面，不如Flash Stage3D。
  • 編寫HTML 5的應用程序，很大程度上還要編寫CSS與JavaScript，對初學者來說，學習曲線較Flex高一些。
  • HTML 5依然存在瀏覽器兼容問題。（隨著W3C與WHATWG的分裂，估計這種情況會被進一步加深）
  • 在大型HTML 5的項目中，Flex遇到的問題在HTML 5中依然存在（例如：效率問題），在此基礎上還增加了瀏覽器兼容性、Ajax跨域通訊等新問題。

下面的表格，描述了這三者在一些關鍵點的比較：（圖1）

下圖使用區分法，來辨別應用程序的技術選項方案：（圖2）

下面的表格從“項目屬性”角度來比較這三者之間的優劣性：（圖3）

總結：

• Flash：
  • 適合強交互、強效果、少數據展示、少圖文混排、偏展示/工具屬性的應用程序。例如：Flash交互廣告展示、頁游（Flash Game）等。
• Flex：
  • 適合較強交互、適當效果、多數據展示、少圖文混排、偏工具屬性的應用程序。例如：圖片在線修改、企業內部系統、ERP系統、金融系統等。
• HTML 5：
  • 適合較強交互、適當效果、多數據展示、多圖文混排、偏應用屬性的應用程序。例如：Google系網站、各種傳統意義的網站、SNS系網站等。

via InfoQ