AI实践哪家强?来 AICon, 解锁技术前沿,探寻产业新机! 了解详情
写点什么

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:0012379

评论

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

互操作性和去信任化的两难困境,到底需要治标还是治本?

CECBC

Vue进阶(七十九):应用 postMessage 实现父子跨域通信

No Silver Bullet

Vue 跨域 7月日更 跨域通信

浪潮云说丨如何对多云进行统一运营

云计算

大数据获取客户系统软件开发源码

获客I3O6O643Z97

大数据

Python OpenCV 图像的双线性插值算法,全网最细致的算法说明

梦想橡皮擦

Python 7月日更

Pandas高级教程之:自定义选项

程序那些事

Python 数据挖掘 数据分析 pandas 程序那些事

flutter开发工具,细数Android开发者的艰辛历程

欢喜学安卓

android 程序员 面试 移动开发

JAVA语言异步非阻塞设计模式(应用篇)

有道技术团队

后端 网易有道

Camtasia入门技巧之视频剪辑

淋雨

视频剪辑 Camtasia 录屏软件

Rust从0到1-面向对象编程-Trait 对象

rust oop 面向对象编程 Trait Objects Trait 对象

深度分享|金融行业模型管理效能提升的规划与思考

索信达控股

大数据 金融科技 金融 风险管理 营销管理

架构实战营模块2课后作业

hello

架构实战营

痛苦调优10小时,我把 Spark 脚本运行时间从15小时缩短到12分钟!

小拍Piper

scala spark 计算机 spark-shell spark-env

Vue进阶(九十五):addEventListener() 监听事件

No Silver Bullet

Vue 事件监听 7月日更

Go语言:参数传递中,值、引用及指针之间的区别

微客鸟窝

Go 语言

鉴释陈新中:源代码安全在物联网时代的重要性

鉴释

物联网 源代码

鉴释首席运营官赵科林:质量第一思维模式

鉴释

代码 安全编码

图计算之开局女朋友跑了

Zhuan

图算法 图计算 networkX GraphScope

BSC币安智能链挖矿模式开发

获客I3O6O643Z97

分布式存储 币安智能链

网络攻防学习笔记 Day82

穿过生命散发芬芳

网络攻防 7月日更

PancakeSwap交易所市值管理机器人开发

Geek_23f0c3

市值管理机器人开发 PancakeSwap交易所 交易所机器人

数字经济时代下,区块链如何助力数字产业发展?

旺链科技

区块链 分布式存储 数字经济

关于单元测试的那些事儿,Mockito 都能帮你解决

华为云开发者联盟

测试 Mockito Mock Java 开发 模拟测试框架

从京东零售云走出来的3D数字人正在触动未来的互动世界

音视频的这些功能你知道吗?

anyRTC开发者

音视频 屏幕共享 智能降噪

支持60+数据传输链路,华为云DRS链路商用大盘点

华为云开发者联盟

华为云 DRS

华为云MVP程云:知识化转型,最终要赋能一线

华为云开发者联盟

人工智能 自然语言处理 机器学习 华为云 智能问答机器人

大数据精准营销APP系统开发源码搭建

获客I3O6O643Z97

大数据 抖音霸屏

handler内存泄露,已成功拿下字节、腾讯、脉脉offer

欢喜学安卓

android 程序员 面试 移动开发

小程序开发教程,2021Android开发现状分析

欢喜学安卓

android 程序员 面试 移动开发

回帖送大奖 『和AI在一起』

百度大脑

人工智能 活动 大奖

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