一、背景综述
互联网应用(Rich Internet Application),即 RIA,它是集桌面应用程序的最佳用户界面功能与Web应用程序的普遍采用和快速、低成本部署以及互动多媒体通信的实时快捷于一体的新一代网络应用程序。
RIA 已经被不计其数的后端系统和技术应用,从商业到开源,从遗留系统到尖端应用,从复杂到简单,几乎无所不包。但是 RIA 真正的应用领域是客户端,在这个领域,根据团队目前的人员构成和知识结构,我们可以有两个选择:
ü Flash 平台(包括浏览器中的 Flash 播放器和 AIR 客户端应用)帮助定义了 RIA 应用空间,在很多场景和开发者中保持了先进的领先地位。
ü 近几年,随着 HTML5(这也暴露了之前没有充分利用 Web 浏览器的能力)的出现,特别是Web 浏览器自身也成为了适合 RIA 应用的开发平台,一般说到 HTML5,我们指的都是广泛意义上的HTML5 + CSS + JavaScript,其中 HTML 5是作为应用的骨架而存在的,展示给用户最基本的内容。CSS为 HTML 表示的内容提供易于用户阅读的样式。JavaScript 则为应用添加丰富的交互行为,为用户提供良好的使用体验。
二、技术对比:
之前我们团队一直致力于 Flex 应用程序的开发,现在正在进行 HTML 的项目,通过和以往经验的比对,两种技术的开发有很多不同之处,下面仅就其中几点加以描述:
- 开发环境
Flex 有良好开发环境和协作环境(IDE, 编译器,调试器,分析工具),在整个开发过程中,协作和调试非常容易
但是使用 HTML 和 JS,由于没有很好的协作环境,在Web 开发中,我们的调试过程相对 FLex 的调试过程,麻烦了很多,编译器不能捕获程序员的错误,所以我们要花更多的时间进行调试。比如我们可以在 Flash Builder For PHP 中,对 Flex 和 后台服务端 PHP 同时进行断点调试,但这对于 HTML来说,我们目前还没有找到合适的解决方案
- 2. 可维护性
Flex Spark 的巧妙设计,使得Flex 对 MVC 的支持大大改善,现在可以很轻松的将表现层和逻辑完全分离,在 HTML5 中,说的总是比做起来要容易一些,加上JS 目前对面向对象的支持并不完善,大多基于过程开发,而且暂时还没有很好的企业开发流程,在项目的维护成本上要比 Flex 高出很多
- 3. 浏览器兼容性
Flex 不需要考虑浏览器的兼容问题,一次开发可以用在各个浏览器和操作系统,但是 HTML5 不得不在这个问题上投入很多的精力,从基本的参数,如可靠性,能够适应不同屏幕大小和简化密度。实现这些功能,将至少在包括五个主流浏览器(IE, FireFox, Safari, Chrome, Opera)中测试通过才行,测试和开发人员将花费大部分时间在调试中。我们的开发过程遇到了很多这样的问题,比如用 JS 做的动态图表效果,在 Firefox 里面运行良好,但是在 IE 浏览器里,运行时很不流畅,甚至在低版本中看不到任何效果。
- 4. 体积大小
Flex 项目生成 swf , 打开网页时,需要从服务器加载,虽然 Flex 有完善的瘦身机制,但swf体积过大仍然是 Flex 的一大问题,基于 Flex 4.6 SDK,新建一个 WebApplication 项目,只放入一个 按钮,没有任何逻辑代码,就已经会生成 42KB 的SWF
- 5. 搜索引擎的支持
HTML5能更好地表达需要通过屏幕阅读器或搜索引擎访问的书面文字或数据, Flex 对于搜索引擎的优化不够,而且对于内容型 Web 应用的图文混排支持不够(开发较难)
- 6. 学习成本,人员构成
相对 FLex 开发,HTML 的 HTML + CSS3 + JavaScript 的开发模式所需要掌握的技术更多,学习成本较高,由于能够同时熟练掌握三门技术的人员相对较少,所以在人员招聘的要求上,会更高,经常只能招到只掌握其中一门技术的人员。在人员组成上,Flex 的人员其实更全能一些,甚至能一个人完成 1个HTML人员 + 1个CSS人员 +1个 JavaScript 人员可以完成的工作
三、技术特点
HTML 5与Flex是两种截然不同的技术解决方案。它们的目的是相辅相成。Flash 的工作经常是 HTML 无法完成的,HTML 5的出现让Flex更加专注某些方向和领域。所以,它们是互补的,而非替代。我们需要同时学习这两种技术,包括如何使用这两种技术解决那些单一技术无法解决的问题。
但是,我们仍可以从这些技术的特点出发,辨别你的应用程序适合采用哪种方案
- 1. Flex的特点:
优势:
• 完备的、可以媲美C/S架构(桌面软件)的大量控件支持。
• 与Flash及Adobe CS系列全线工具的完美结合。
• 完整的企业化开发流程及工作流(代码的编写、编译、调试、发布等)
• 多种框架可供选择,并支持高级特性,如:IoC、视图绑定、数据绑定实时更新等。
劣势:
• 生成的SWF过大。(虽有完善的“瘦身”方案,但仍比HTML方案大很多)
• 效率问题。(在某些情景下,比HTML 5的效率要差一些)
• 较差的图文混排支持。(无法媲美HTML 5的图文混排,这是Flash系的通病)
• 储备人员相对HTML来说还是太少。
- 2. 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依然存在浏览器兼容问题。
• 在大型HTML 5的项目中, Flex遇到的问题在HTML 5中依然存在(例如:效率问题),在此基础上还增加了浏览器兼容性、Ajax跨域通讯等新问题。
四、Flex 和 HTML5适用场景是怎样的呢?
HTML5的优势在于创新性的利用了浏览器自身的能力,而且有业界最富创新精神的苹果公司和谷歌的大力推进。Flex 的优势在于市场占有率,及其对游戏交互。视频和文档的处理能力。
具体项目中,技术选型没有既定的规律可循,它是由诸多因素决定的,例如:开发人员的技术知识结构是否胜任、项目的开发成本、开发人员构成、项目的开发周期、项目的属性等等。
以上仅代表个人观点,欢迎拍砖,欢迎探讨