某软件公司拟为其客户开发一套基于Web的电子商务系统,该系统向终端用户提供在线购物功能。近期,项目组召开会议对以下两项需求进行了重点讨论:
(1)系统终端用户的界面呈现应提供丰富的多媒体信息,包括文本、图片、动画、视频及语音消息。
(2)系统上线后需应对大量客户端并发请求处理,商家促销活动时,并发用户数可能会达到20万的规模;系统预期用户呈明显地地域集中分布特征。
项目组在讨论实现需求(1)的技术方案时,首先确定了以下技术原则:
(a)应在开发阶段容易获得良好的协作开发环境支持;
(b)应考虑客户端浏览器的兼容性;
(c)应尽可能使系统具有良好的可维护性;
(d)应考虑公司开发人员的技术学习成本。
项目组就Flex与HTML5两种技术方案进行了论证,综合考虑上述技术原则要求,最终采用了基于Flex的技术方案,请结合需求(1)及上述技术原则,对比Flex与HTML5两种技术方案的优劣,说明采用基于Flex的技术方案的原因。
Flex的优势:大量控件支持、完整的企业化开发流程及工作流、多种框架可供选择。
Flex的劣势:生成的SWF过大、效率问题、较差的图文混排支持。
HTML 5的优势:真正意义上全平台支持、可以胜任后台,比Flex拥有更大、更全面、更活跃的社区。
HTML 5的劣势:缺乏良好的协作开发环境,缺乏完整的开发流程;要编写CSS与JavaScript,学习成本高;浏览器兼容问题、效率问题、保密性及安全性、AJAX跨域通讯等问题。
基于以上比较,在本案例中,由于HTML5缺乏良好的协作开发环境、学习成本高、各种浏览器不兼容,缺乏完整的开发流程,系统可维护性差。因此,选择基于Flex的方案。
Flex 已经淘汰了,熟悉的人不多,作为了解补充即可。
从四项原则映射比较:(a)协作环境——Flex 时代即有成熟的 IDE、可视化组件库与模块化打包流程,团队协作(UI/逻辑/资源)边界清晰;彼时 HTML5 工具链碎片化(构建、脚手架、调试与跨端适配方案多而杂),落地需要较大工程化投入。(b)兼容性——Flex 依赖统一运行时(Flash Player/AIR),多媒体控件/编解码一致性较好;而 HTML5 在不同浏览器对 Video/Audio 编解码、Canvas 性能、WebGL 支持度等差异显著,需大量降级与 Polyfill。(c)可维护性——Flex 的组件化、事件模型、数据绑定、皮肤机制相对统一,可维护性强;HTML5 需要在 JS 框架/状态管理/模块化/样式工程 等方面自建规范(当时),维护难度上升。(d)学习成本——Flex 面向企业开发提供控件化抽象,UI/媒体能力“开箱即用”;HTML5 要求工程师同时具备 HTML/CSS/JS 与浏览器兼容技能,且多媒体处理链条长、编码协议复杂,学习与踩坑成本更高。