写点什么

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

  • 2012-08-14
  • 本文字数:2476 字

    阅读完需:约 8 分钟

在 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 )关注我们,并与我们的编辑和其他读者朋友交流。

2012-08-14 00:0012122

评论

发布
暂无评论
发现更多内容

为什么聪明的程序员会写出糟糕的代码

实力程序员

☕【JVM 技术探索】Class字节码指令操作介绍(上)

洛神灬殇

Java JVM Class字节码 6月日更

重仓AI人才培养,打造产业落地升级护城河

百度大脑

人工智能

从单体系统到微服务

escray

学习 极客时间 朱赟的技术管理课 6月日更

「终!」☕️【Java技术之旅】带你进入String类的易错点和底层本质分析!

洛神灬殇

Java 字符串 字符串常量池 6月日更

【布道API】API设计应该了解的HTTP方法和特性

devpoint

RESTful HTTP协议 6月日更

泰山版震撼来袭!阿里巴巴2021年Java程序员面试指导小册已开源

Java架构师迁哥

Dokcer Compose部署Nebula Graph配置文件

阿呆

配置信息

和12岁小同志搞创客开发:如何选择合适的控制器?

不脱发的程序猿

DIY 创客开发 如何选择合适的控制器?

可视化及时把控营运状况,助力管理效率提升80%

一只数据鲸鱼

数据可视化 智慧城市 智慧园区 三维可视化 智慧楼宇

四面阿里巴巴如愿拿到offer定级P7,为此我筹备了半年

Java架构师迁哥

深入了解一些字符串函数,内存函数(c语言)

小写丶H

c 字符串函数

ONES CTO 冯斌 | 大型团队敏捷项目管理实践与思考

万事ONES

项目管理 研发管理 团队协作 ONES 研发工具

WorkPlus私有化「数智融合」移动平台

BeeWorks

助力碳中和,EMQ与SAP共同构建绿色IoT解决方案

EMQ映云科技

开源 5G 碳中和 SAP 碳达峰

相约厦门!HarmonyOS Connect伙伴峰会将于6月17日举办

科技汇

【FlinkSQL】Flink SQL Query 语法(二)

Alex🐒

flink FlinkSQL flink1.13

Hadoop Committer如何炼成?爱奇艺新晋核心贡献人给出了这份攻略!

爱奇艺技术产品团队

hadoop 开源 程序员 Apache社区

我不服!这开源项目居然才888个星!?

why技术

Java

Python接口自动化之request请求封装

行者AI

接口 测试 自动化测试 封装

2021年,最新Java硬核技能微服务、虚拟机、高并发,掌握轻松拿大厂offer

Java架构师迁哥

硬核!阿里自爆虐心万字面试手册,Github上获赞89.7K

Java架构师迁哥

机器学习入门:多变量线性回归

华为云开发者联盟

机器学习 多变量线性回归

云小课 | 华为云KYON之私网NAT网关

华为云开发者联盟

网关 华为云 KYON企业级云网络 私网NAT网关 重叠组网

和12岁小同志搞创客开发:拿到一款控制器,要怎么分析?

不脱发的程序猿

DIY 创客开发 怎么分析控制器?

从理论到实战只需七天!阿里P10撰写的Spring全家桶有多全面?

Java架构追梦

Java 阿里巴巴 架构 springboot SpringCloud

Electron 开发音视频

anyRTC开发者

Java 音视频 WebRTC Electron RTC

优秀的开发者每天都在做什么?

学神来啦

程序员 码农 编码 经验分享

奇亚矿机分币系统搭建,Bzz云算力挖矿系统

一文带你,彻底了解,零拷贝Zero-Copy技术

奔着腾讯去

c++ Linux 缓存 零拷贝 Linux服务器开发

java异常分类和处理机制

加百利

Java 后端 异常 6月日更

HTML5 VS. Flash&Flex? – 浅谈Flash/Flex/HTML 5技术选型_HTML5_王磊_InfoQ精选文章