BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

HTML5 VS. Flash&Flex? – 浅谈Flash/Flex/HTML 5技术选型

| 作者 王磊 关注 7 他的粉丝 发布于 2012年8月15日. 估计阅读时间: 8 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

在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系网站等。

注1:上文提到的Flash是指使用Flash Pro CS工具(IDE)生成的SWF,而非Flash Platform。

注2:Flash Player不支持IOS以及Android 4.1+系统。在2012年8月15日,Adobe将Flash Player从Google Play下架,并不在对其进行更新,但Adobe仍使用AIR的方式对智能系统进行Flash应用/游戏的支持。

注3:虽然Adobe提供了FTE(Flash Text Engine)与TLF(Text Layout Framework)用于图文混排,但是由于其开发的难度比较大,所以并不完全适合企业开发。

关于作者

王磊 | Kenshin (kenshin.wangl@gmail.com), Adobe Flex专家、国内第一本Flex图书《Flex第一步》作者、05年开始Flex至今,是国内第一批从事Flex的开发人员,曾任某公司前端技术总监,目前从事Flex顾问、咨询、架构、高端培训等相关工作。 新浪微博:http://weibo.com/23784148, Flex博客:http://www.k-zone.cn/zblog


感谢黄玲艳对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ)或者腾讯微博(@InfoQ)关注我们,并与我们的编辑和其他读者朋友交流。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

有点误人子弟 by 沙 俊星

Adobe都放弃Flash了,这个技术没有前途的

html5发展存疑 by z x

感觉未来移动设备上的程序开发越来越重要。而html5用于移动设备也不是很理想,还是原生应用比较好。

Re: 有点误人子弟 by 王 磊

请问你是如何得知Adobe已经放弃Flash的?

我真的不想吐槽 by zhang xiaofei

LZ真的用过这些技术做过大型项目吗?

Re: html5发展存疑 by 王 磊

恩,Hybrid APP目前看的确在效率上并不如Native APP,但随着手机硬件配置的提高,在以后肯定会出现效率相同的情况。

Re: html5发展存疑 by z x

不仅是效率问题,js相比其他高级语言很难维护,而且相对也复杂。

平等看待前端各种技术,取其所长,为己所用 by Fu Bin

这个话题虽然讨论很久了,但还是再说说也没坏处。尤其是对于当前正被客户逼着使用HTML5的PM和前端开发者来说,此文提供了非常客观有力的论点。

Re: 平等看待前端各种技术,取其所长,为己所用 by xiangning liao

确实是被逼死了……

Re: html5发展存疑 by 王 磊

的确如此,在大型、多人的H5项目上,目前难度还是太大,只有少数的互联网公司才玩得起...

Re: 平等看待前端各种技术,取其所长,为己所用 by 王 磊

我之前“被逼”给客户做过一个关于H5的技术选型,发现问题太多了,目前不太适合多人开发,尤其是后期的调试、update难度还不小。目前个人觉得H5可以在小型、单人、功能相对单一的项目上有这非常大的优势。

这种文章还在说来说去,呕心 by leu junlas

看到第一段:"Adobe体系中,Flash做不了的事情,Flex可以做到;" 这句话


后面我就一点看的欲望都没了。lz,你做过大项目吗?

Re: 这种文章还在说来说去,呕心 by 王 磊

既然文章都没有看全,我可以不用回复你的提问 :)

Re: 有点误人子弟 by jiqing ke

你要是掩耳,我们也没办法

Re: 有点误人子弟 by zhang xiaofei

放弃的是Flex,跟Flash不是一回事情。

Re: 有点误人子弟 by 王 磊

Adobe把Flex贡献给Apache基金会,就叫做“放弃Flex”吗?更何况,Adobe还在推AIR与Flash Builder,Flex依然在Apache孵化器中持续发展。
你可以了解下目前身边做Flex的人,有把项目完美移植到H5上面并获成功的例子吗?H5虽然不错,但是在未来2~3年内,在企业开发里面还是Flex的天下。这个例子就如同用H5做Game一样,出现的多,死掉的也多,真正拿出手的没有多少,也不是小公司可以玩的起的...

Re: 这种文章还在说来说去,呕心 by leu junlas

lz,请允许我言辞不妥。

您不觉得"Adobe体系中,Flash做不了的事情,Flex可以做到;",您这句话说错了吗?

我觉得是"Adobe体系中,Flex做不了的事情,Flash可以做到;"。

文章我是看完了,觉得很有道理。

Re: 这种文章还在说来说去,呕心 by 王 磊

恩,暂且不说H5。
原本Flex诞生意义在于:作为Flash在RIA领域一个空白的补足。因此“Flash做不了的事情,Flex可以做到;”这句话没有任何问题。当然,你说的也对。所以,严格意义来说Flash与Flex并没有谁做不了、谁能做的了的事情,只有是否适合的问题。
因此,这句话也可以改为“Flash无法胜任的事情,Flex可以,反之亦然;”

各有所长 by nethaoke nethaoke

我做的erp系统 在桌面浏览器端 我用flex ,在手机端我用jquery mobile ,flex和html5各有所长吧 不存在什么代替不代替的,虽然adobe现在不继续开发flex了 但是有开源组织的支持 本身flex也已经很成熟。他们本身的原来也差不多,1个div 我放个flex group,圆角 页 区域 效果的都是这些东东都差不多 当然这只是我在做信息系统上的一些理解,当然如果你要做个门户网站 大量的图文混排 肯定是html强

Re: 各有所长 by 王 磊

是的,这也是我写本文的原因,其实,简单的说,没什么好争论的,物尽其用而已 :)

Re: 这种文章还在说来说去,呕心 by junhui zhang

不知道你所说的大项目是多大的项目,我想问问adobe已经有flash了为什么会出flex,你知道flex和flash的区别在哪吗?

Re: 这种文章还在说来说去,呕心了 by leu junlas

你的问题就好像在问,已经有了javascript,为什么还会有jQuery。。

有没有。。

我只知道flex是基于flash之上的一个框架。归根结底底层还是flash在本真的语言:AS3.

Re: 这种文章还在说来说去,呕心了 by leu junlas

哎,其实这类文章已经反反复复被说了很多次了。这篇文章只是lz 按照自己的观点、特色又阐述了一遍。

好吧,我是来凑热闹的。我只会flash,不会flex,不会H5。

这种问题其实挺好 by nethaoke nethaoke

有的人认为自己很牛 什么都懂 不屑一顾的去看这些问题 其实经常说说这些问题 我们就可以知道某个语言的利和弊 每个人都不是圣人 对事物的理解都不会一样 通过讨论 我们至少可以知道一些问题 发现一些问题

Re: 有点误人子弟 by zhou sakura

移动平台还是远离flex吧,flex mobile组件库的bug实在太多了,IPAD1、IPAD2、IPAD3上跑起来都不同!

移动平台还是远离flex吧 by zhou sakura

移动平台还是远离flex吧,flex mobile组件库的bug实在太多了,IPAD1、IPAD2、IPAD3上跑起来都不同!

此文诚为作者的肺腑之言,其中——“HTML5易学难精”这点倒是颇为同意。 by 张 鑫

此文诚为作者的肺腑之言,其中——“HTML5易学难精”这点倒是颇为同意。

还真有人以为Apple弃用Flash是为了支持HTML5? by 冯 希顺

还真有人以为Apple弃用Flash是为了支持HTML5?那不过是乔帮主又一个谋天大谎而已,Apple为啥弃用Flash?还不是因为运行在Flash容器中的代码完全不受Apple控制?去看看AppStore的审查规范就知道了,iOS平台下一切限制都是为了让Apple可以充分控制果粉手中苹果设备,Flash这种让Apple无法发泄控制欲的技术是必须要被禁止的。

Re: html5发展存疑 by Z HM

硬件配置提高了,html5的确会更流畅,但是……难道只有html5才会跟着硬件配置的提高而提高了?其他的就是原地踏步?

Re: html5发展存疑 by Z HM

深有感触啊,维护JS是个很头痛的问题。

Re: 有点误人子弟 by Z HM

ipad3是何神器?哥只知道new ipad

Re: 有点误人子弟 by chen jianhui

赞同,大型企业级项目用flex就够费劲的,目前用H5更够呛

Re: html5发展存疑 by chen jianhui

Re: 移动平台还是远离flex吧 by 王 磊

Flex在Mobile端的确有一些问题,但没有你说的这么严重。另外,你说的“跑不起来”也这个说法也不严谨,希望不要让新手产生任何误会。导致“跑不起来”的原因太多,不单单只是Flex的问题,例如代码问题等等。另外,如果将要实现的APP与系统整合度比较高的话,Flex相对没有OBJC合适,反之也是一样,甚至你可以考虑使用Hybrid APP方案(PhoneGap)。最后,使用Flex生成的ipa与Native方方案在效率上并没有太大的差别 :)

居然,居然现在还在讨论这个话题。 by l nj

RT

Re: 还真有人以为Apple弃用Flash是为了支持HTML5? by yang myarth

在mac下运行使用flash的程序(比如视频播放)一段时间就知道为什么弃用flash了。

还行 by dylan he

flex至少目前在网页游戏、电信级的拓扑、设备展示,还是很不错的。比如网页游戏,目前HTML5无法满足。

Re: 还真有人以为Apple弃用Flash是为了支持HTML5? by long zhao

在mac下运行使用flash的程序(比如视频播放)一段时间就知道为什么弃用flash了。

android下好像还不错。 mac播放有啥问题?能具体点么,

关于swf和html体积的问题 by CHEN FUZHEN

“生成的SWF过大。(虽有完善的“瘦身”方案,但仍比HTML方案大很多)”
这个有失准确了,一个空的swf可以做到1k不到,游戏一般是flash cs或者纯as3 project了。
flex是大了不少,不过记住flex项目多是面向企业的,体积不是主要的问题。
何况Flex也可以通过RSL减小体积。
至于HTML+JS+图片 要做到多大都可以了!
相同的UI,实际上swf的体积远比html+js+图片小的。

Adobe只不过放弃了移动平台的Flash Web Player而已,Adobe Air依然活着。
HTML5要推广,尤其是在中国,还需要好多年吧。
PC平台,Flash再风光个3,5年应该是没问题的。
会JS的,AS3很好上手!
做AS3项目比JS项目开发效率高很多,
找AS3熟手也比找JS熟手容易许多...

Re: 关于swf和html体积的问题 by 王 磊

“一个空的swf可以做到1k不到”我个人觉得这种比较意义不大。另外,我说的“瘦身”方案指的就是Module + RSL。不过,Apache时代的Flex是没有有效的RSL可用的,这点不得不说是个遗憾...
HTML+JS+图片与flex + ui + 图片的大小比较,我觉得没有太大的可比性。毕竟各自可以有不同的实现方案,如html方案可以用CSS Sprite方式等;flex方案可以用swf(嵌入图片方式)等等。flex生成的swf相对臃肿的主要原因也在于flex framework,虽然有RSL方案,但是原因我之前说了 :)
当然,后半段内容我是非常赞成的,不过关于从业者的密度比较来说,我仍旧持之前的观点,其一:我自己深有体会;其二:从编程语言排行榜的比较来说,JS要遥遥领先与AS,也能说明这个问题。当然如果想找具有架构思想的开发者来说,我觉得似乎不相上下...

JS上手容易,但是开发效率比AS低许多 by CHEN FUZHEN

JS之所以在程序语言排行榜上名列前茅,主要还是归功于网页的普及。并且JS上手是非常容易的,AS3也是JS的同胞兄弟,都是基于ECMAScript的了,会JS的,上手AS3也是轻而易举的事情。但是JS要成为高手确实要比AS难许多了,并且开发效率也要比AS3低许多,另外就是多浏览器平台的兼容性问题,Flash开发几乎可以不用考虑HTML/CSS所遇到的兼容性问题了。Adobe放弃了移动平台的Flash更准确点说应该是放弃了移动平台上的网页版Flash Player,实际上移动平台上的HTML5普及要远远高过PC平台,这样Flash在移动平台就没有明显的优势,不过别忘了Adobe AIR依然在Android和ios上活的很好。至于PC平台,Flash的视频,3D等等技术则是远远走在H5的前面,Firefox和Chrome不会排斥插件技术,IE更是不会了,所以PC平台的Flash还是会风光好多年。
记住,Adobe并没有放弃Flash,只是放弃了移动平台的网页版Flash播放器而已。

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

40 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT