2006 Adobe Systems Incorporated. All Rights Reserved.
Flex体系架构深度剖析
马鉴
[email protected] Platform Technology Evangelist
Blog: www.7yue.com
2008 Adobe Systems Incorporated. All Rights Reserved.
企业应用进化之路
用户体验
枯燥
丰富
进化
1960s & 1970s 主机架构 绿色屏幕时代
1980s & 1990s
客户端/服务器
图形化 用户界面
2008 Adobe Systems Incorporated. All Rights Reserved.
企业应用进化之路
用户体验
枯燥
丰富
进化
1960s & 1970s 主机架构 绿色屏幕时代
1980s & 1990s
客户端/服务器
图形化 用户界面
1990s & 2000s
浏览器
Web/App Middleware
2008 Adobe Systems Incorporated. All Rights Reserved.
企业应用进化之路
用户体验
枯燥
丰富 RIA Web Services & App Connectors
2000s & Future
SOA
丰富互联网应用
服务互联网 桌面应用
1960s & 1970s 主机架构 绿色屏幕时代
1980s & 1990s
客户端/服务器
图形化 用户界面
1990s & 2000s
Web 浏览器
Web/App 中间件服务器
2008 Adobe Systems Incorporated. All Rights Reserved.
Flash Platform & Flex 产品体系架构
2008 Adobe Systems Incorporated. All Rights Reserved.
Adobe Flash 平台技术家族
视频 内容 应用
设计开发工具集合
Adobe Flash CS4 Professional
Adobe Flash Catalyst
Adobe Flex Builder
框架 客户端 服务器端
Data Services Adobe AIR™
Adobe Flash® Player
Adobe Flex®
Adobe Flash Media Server family
2008 Adobe Systems Incorporated. All Rights Reserved.
针对RIA的Adobe技术整体架构
Creative Suite
Flex Builder
Eclipse
Notepad
LiveCycle Designer
Resource Tier EIS Databases Directories ECM Repository
Message Queues
Other Systems
Printing & Scanning
Client Application Tier
Design & Development Tools
Adobe Web Services
Other Web Services
Flickr.com eBay API Yahoo! API Google API
HTML Flash PDF
Browsers Flash Player
Reader Devices Flash Lite
Reader LE
Applications Adobe Third-party
Service Tier
Remote Domains Local Domain
Application Servers
LiveCycle ColdFusion
HTTP Service
Other Services
Flash Media Server
Flash Cast
HTTP/S, Sockets, AMF, RTMP, SOAP, WS*, REST, …
Frameworks Third-party Flex Framework
AIR
2008 Adobe Systems Incorporated. All Rights Reserved.
Flex UI + SOA = SOC
• 数据模型 • 服务 • 消息 • 持久性 • 跨操作系统 • 简洁的模式
资源层 数据库、外部系统、现存资源
集成层 连接数据和现存系统
Front End
Back End 业务层 连接业务对象
• 缺乏 SOA连接能力 • 限于数据的请求/相应模式 • 依赖运行环境和操作系统 • 混乱的编程模式 • 基于“页面”的访问模型
SOA / ESA
• 数据模型 • 服务 • 消息 • 持久性 • 跨操作系统 • 简洁的模式
表现层 ASP, JSP, Servlets, 及其他UI元素
Client Tier 浏览器, Applets, 和胖客户端 SOC
Services Oriented Client
2008 Adobe Systems Incorporated. All Rights Reserved.
Flex体系架构划分
产品� 工具及服务� 应用开发�
2008 Adobe Systems Incorporated. All Rights Reserved.
Adobe Flex 产品架构
Command-line 编译
MXML and ActionScript 3.0
框架和类库
Adobe®
Flex™ 3 SDK
Open source Flex SDK
2008 Adobe Systems Incorporated. All Rights Reserved.
Flex 3 Open Source
Flex 3开源 SDK源文件基于MPL开源许可,包括framework, compiler, debugger
公开的bug系统(基于JIRA ),路线图及每日构建下载
opensource.adobe.com/!ex
三种形式 Free Adobe Flex SDK
Open Flex SDK
Flex UI Component
AIR SDK
Open Flex SDK
Compiler+Frameworks
Flex SDK add-ons for Open Flex SDK
UI Component
AIR SDK
2008 Adobe Systems Incorporated. All Rights Reserved.
Flex核心 - MXML
<mx:Application> <mx:WebService id=“ws” wsdl=“catalog.wsdl”/> <mx:Button label=“Get Data” click=“ws.getProducts()”/> <mx:DataGrid dataProvider=“{ws.getProducts.result}”/> <mx:LineChart dataProvider=“{ws.getProducts.result}”/> </mx:Application>
2008 Adobe Systems Incorporated. All Rights Reserved.
MXML – 组件
<mx:Application> <mx:WebService id=“ws” wsdl=“catalog.wsdl”/> <mx:Button label=“Get Data” click=“ws.getProducts()”/> <mx:DataGrid dataProvider=“{ws.getProducts.result}”/> <mx:LineChart dataProvider=“{ws.getProducts.result}”/> </mx:Application>
2008 Adobe Systems Incorporated. All Rights Reserved.
MXML – 对象实例
<mx:Application> <mx:WebService id=“ws” wsdl=“catalog.wsdl”/> <mx:Button label=“Get Data” click=“ws.getProducts()”/> <mx:DataGrid dataProvider=“{ws.getProducts.result}”/> <mx:LineChart dataProvider=“{ws.getProducts.result}”/> </mx:Application>
2008 Adobe Systems Incorporated. All Rights Reserved.
MXML – 属性
<mx:Application> <mx:WebService id=“ws” wsdl=“catalog.wsdl”/> <mx:Button label=“Get Data” click=“ws.getProducts()”/> <mx:DataGrid dataProvider=“{ws.getProducts.result}”/> <mx:LineChart dataProvider=“{ws.getProducts.result}”/> </mx:Application>
2008 Adobe Systems Incorporated. All Rights Reserved.
MXML – 事件
<mx:Application> <mx:WebService id=“ws” wsdl=“catalog.wsdl”/> <mx:Button label=“Get Data” click=“ws.getProducts()”/> <mx:DataGrid dataProvider=“{ws.getProducts.result}”/> <mx:LineChart dataProvider=“{ws.getProducts.result}”/> </mx:Application>
2008 Adobe Systems Incorporated. All Rights Reserved.
MXML – 数据绑定
<mx:Application> <mx:WebService id=“ws” wsdl=“catalog.wsdl”/> <mx:Button label=“Get Data” click=“ws.getProducts()”/> <mx:DataGrid dataProvider=“{ws.getProducts.result}”/> <mx:LineChart dataProvider=“{ws.getProducts.result}”/> </mx:Application>
2008 Adobe Systems Incorporated. All Rights Reserved.
Flex核心-基于AVM2的编译器及Flash Player
2008 Adobe Systems Incorporated. All Rights Reserved.
Flash Player 一些内部机制 2种渲染模式
Retained模式 高端模式,AS3是Retained Mode
能够成为跨越Adobe产品功能的标准
分离渲染本身和功能依赖要求,如GPU,Cell等
能够分离处理的类型,如video,audio
在渲染计算中以表面特征出现(Surfaces)
BitmapData,Filters,cacheAsBitmap都是表面特征
Bitmap本身会被独立保留
解决了渲染模式中的不连续性
体系庞大
难于维护和保持兼容性
2008 Adobe Systems Incorporated. All Rights Reserved.
Flash Player 一些内部机制 2种渲染模式
Immediate模式 底层模式
灵活 易于维护及保持兼容
缺点 绑定了功能到底层语言与硬件驱动
结论 Pixel Bender使用Immediate模式 GPU加速使用Immediate模式
分离为表象的部分使用Immediate模式 Bitmap和其他"lls填充为Retained模式
AS3是Retained模式 两者混合可以优化Binary下的Retained效率
2008 Adobe Systems Incorporated. All Rights Reserved.
Flash Player 一些内部机制 时间轴增强
2008 Adobe Systems Incorporated. All Rights Reserved.
单线程还是多线程?
AS3 Execution Model 是单线程 不要误会单线程
单线程是一个本质现象
原有开发人员的担忧 当UI的绘制计算量极大时 当位图处理运算极大时 当Video渲染计算量极大时(比如HD Vide)
AS3逻辑的执行将会不顺畅
现在 Flash Player 10中AS3 Runtime Execution与图形渲染是在同一线程 网络,Socket监听在一个分离的独立线程
两个线程都封闭,不可外部访问 真正的多线程是使用Pixel Bender Shaders处理滤镜,与AVM线程分离
开发人员使用Green Thread的伪线程理论,例如Thread Library http://www.libspark.org/htdocs/as3/thread-"les/document/
未来 FP11或12,加入多线程支持
2008 Adobe Systems Incorporated. All Rights Reserved.
Flex核心– 编译器架构
2008 Adobe Systems Incorporated. All Rights Reserved.
Flex核心 – MXML文档容器
2008 Adobe Systems Incorporated. All Rights Reserved.
Flex 应用背后
应用依赖性
背景:Application 容器 + 单一Label构成HelloWorld
Binary Size
使用FlashCS4,Binary Size: 116KB
使用AS3+Compiler: 8KB
2008 Adobe Systems Incorporated. All Rights Reserved.
基于Flex frameworks的决策
优点 利于项目部署 利于整合开发框架 良好的结构及代码规范 利于提高测试效率 模块化
何时使用 UI Forms及UI interaction复杂时 团队开发 计划采用成熟开发框架和模式时 开发大规模应用时 与成熟中间件及其他业务系统整合时
缺点 代码量大 Binary Code Size相对较大(有优化办法)
组件样式定制化程度比Flash创作低
何时不用 个人程序项目 创意网站 追求最小尺寸交互动画效果文件 纯粹的展示应用,无动态数据交互时
2008 Adobe Systems Incorporated. All Rights Reserved.
Flex如何在浏览器中工作
编译
SOAP HTTP/S AMF/S RTMP/S
Web 服务器
现存系统和架构
J2EE Application Server
LC Data Services XML/HTTP REST SOAP Web Services
浏览器
Flash Player
Flex Builder IDE
Flex SDK
Flex 类库
MXML ActionScript
Debuggers
2008 Adobe Systems Incorporated. All Rights Reserved.
Flex应用设计工作流及数据服务剖析
2008 Adobe Systems Incorporated. All Rights Reserved.
Flex 应用 - SAP example
2008 Adobe Systems Incorporated. All Rights Reserved.
2) initial design
3) development
4) design tweaks
Visual Designer
1) comps + vignettes Developer
(Flash Catalyst)
Design Production
采用何种工作流完成Flex应用?
2008 Adobe Systems Incorporated. All Rights Reserved.
更具革命性质的工作流- Flash Catalyst
图形图像设计师
前端交互设计师
程序开发者
应用架构师
2008 Adobe Systems Incorporated. All Rights Reserved.
面向UI架构和设计师的工作方式
2008 Adobe Systems Incorporated. All Rights Reserved.
Demo
2008 Adobe Systems Incorporated. All Rights Reserved.
Flex数据服务 – BlazeDS 架构
• 功能 • 更容易的连接现有中间件逻辑和Flex 前端UI
• 更高的数据传输性能
• 基于HTTP之上的实时数据推送
• 扩展消息机制的发布/订阅功能
• 基于Action Message Format (AMF3) 2进制数据协议规范
BlazeDS 是Adobe基于LGPL v3开源协议贡献给开源社区的一个基于HTTP消息传输的Flash/Flex Remtoing数据服务包
BlazeDS
Data Management
RPC Services
Messaging
Service Adapters
Data Synchronization
Off-line Applications
Data Paging
Web Service
HTTP Service
Remote Object Service
Publish & Subscribe
Collaboration
Real Time Data Push
Proxy Service
Web-tier Compiler
Portal Deployment
RIA-PDF Generation
LiveCycle
SQL
Hibernate
ColdFusion
JMS
Java
Custom…
LiveCycle Data Services ES
2008 Adobe Systems Incorporated. All Rights Reserved.
BlazeDS 客户端架构
2008 Adobe Systems Incorporated. All Rights Reserved.
BlazeDS 服务器端架构
2007 Adobe Systems Incorporated. All Rights Reserved.
Flex with Java via XML (RESTful / SOAP)
Web Service
客户端
App Server
XML
(RESTful / SOAP)
2007 Adobe Systems Incorporated. All Rights Reserved.
Flex with Java via Flash Remoting
BlazeDS
Spring Bean
客户端
J2EE Server
POJO
EJB
Other
Endpoint
AMF
2007 Adobe Systems Incorporated. All Rights Reserved.
Flex with Java via BlazeDS Messaging
Message Service
BlazeDS
Adapter Y
Adapter X
Messaging System Y
Messaging System X
Endpoint JMS
Provider JMS Adapter
Publisher Subscriber
RTMP AMF HTTP
J2EE Server
2008 Adobe Systems Incorporated. All Rights Reserved.
RIA架构下不同远程数据服务性能比较
Census Project: http://www.jamesward.com/census/ http://!exapps.cvs.sourceforge.net/!exapps/census/
2008 Adobe Systems Incorporated. All Rights Reserved.
BlazeDS服务– 基于AMF3的高效数据传输架构
服务器执行时间消耗(5000条记录,由长到短):Ajax HTML>Ajax XML>Laszlo XML>Flex XML AS>Flex XML E4X>Ajax JSON>Dojo>Ajax SOAP>Flex SOAP AS>Flex SOAP E4X>Flex AMF3(0.2s) 数据传输时间消耗(5000条记录,由长到短):Laszlo XML>Flex SOAP AS>Flex SOAP E4X>Ajax SOAP>Flex XML AS>Flex XML E4X>Ajax HTML>Ajax JSON>Flex AMF3(0.9s)>Ajax XML>Dojo 数据解析时间消耗(5000条记录,由长到短):�Flex SOAP AS>Ajax SOAP>Ajax XML>Laszlo XML>Flex XML AS>Ajax JSON>Flex SOAP E4X>Flex XML E4X>Dojo>Flex AMF3(0.1s)>Ajax HTML 数据渲染时间消耗(5000条记录,由长到短):�Dojo>Ajax HTML>Ajax SOAP>Ajax XML>Ajax JSON>Laszlo XML>Flex SOAP E4X>Flex SOAP AS>Flex XML E4X>Flex AMF3(0.4s)>Flex XML AS
5000条记录 Flex AMF3总体效率排行No.1,总耗时1.6s
2008 Adobe Systems Incorporated. All Rights Reserved.
Flex 开发框架分析
现有成熟常用的Flex框架 Cairngorm (Adobe Open Source) - MVC framework
PureMVC (Open Source) - MVC framework
Mate (Open Source) - tag-based, event-driven
Swiz (Open Source) - Metadata-based Dependency Injection
Spring ActionScript (Open Source) – IOC Framework
更多信息 http://www.infoq.com/news/2008/01/!ex-mvc
个人观点 没有最完美的framework,只有最合适的framework
Flex项目开发不使用框架会有损失,Flex项目开发盲目选择框架损失更大
2008 Adobe Systems Incorporated. All Rights Reserved.
Flex 开发框架 - Cairngorm
http://opensource.adobe.com/wiki/display/cairngorm/
特点 最成熟,最知名的Flex开发框架 micro-architecture,有一系列的design
patterns集合
很大程度上借鉴了Java开发框架 专注于响应用户交互,封装服务器交互逻辑,管理客户端状态和UI状态
基于Cairngorm框架的Flex项目结构 ModleLocator
ServiceLocator 封装的业务逻辑 FrontController类
优点 开发者社区的支持力度
从Java开发框架借鉴而来的成熟实践策略 适合大型的Flex项目 适合团队开发,由于具备出色的架构理论支持和任务分发机制
不足 代码冗余
Flex内置事件模型复杂化 框架过于依赖全局单例模式
2008 Adobe Systems Incorporated. All Rights Reserved.
Flex 开发框架 - PureMVC
http://puremvc.org/ 特点
有中文最佳实践文档
非针对Flex的框架 专注于MVC模式
Model,View,Controller也是单例 还有第四个单例叫做Façade,用来实现各层的通讯和public方法访问
基于PureMVC框架创建的Flex项目结构 与Cairngorm类似 将项目分成几个不同的packages
通过扩展框架类来实现类的操作 通过额外的Façade类来作为应用入口
优点 结构非常清晰
开发者社区支持充分 适合团队开发使用
不足 依赖于单例模式 不专注于Flex,对于MXML开发无特殊优势
过于强调理论,实践开发周期变长
2008 Adobe Systems Incorporated. All Rights Reserved.
Flex 开发框架 - Mate
http://mate.asfusion.com/ 特点
基于标签和事件驱动的框架
完全基于MXML实现 事件驱动专注于更容易的定义谁来响应事件
“别给我电话,我会打给你”的依赖注册实现
基于Mate创建的Flex项目结构 必须拥有一个或多个事件 必须有一个MXML文件称为event map
event map mxml文件定义想侦听的事件和如何响应该事件
可以拥有多个event map文件
当把需要的数据提供给类或者注入类时,对象被构造。对象不需要获取数据,而是把需要的数据传给对象
优点 松散耦合的依赖注入实现方式
组件不依赖于全局单例模式 更加容易充当独立agents完成操作 不需要开发者一直使用Flex内置事件模型
不会限制开发者使用单独响应来处理每个事件
使用更加直观和简单 文档和示例众多
不足 仅仅是针对MXML 不适合于将所有工作都使用AS类来完成开发人员
不规范团队开发应用的方式,需要团队自行定义
不能使用LiveCycle DataServices
2008 Adobe Systems Incorporated. All Rights Reserved.
Flex 开发框架 - Swiz
http://code.google.com/p/swizframework/
特点 IoC与DI模式
简化事件侦听处理
异步远程调用
集中强调对于Java模式的利用
基于Swiz创建Flex的结构 首先告知Swiz框架应用组件结构
核心为集中工厂模式
提供依赖管理,通过定制的metatag原标签Autowire
优点 易于使用
不强迫改变项目文件结构
基于metadata的IoC和DI方式
最大程度使用Flex内置事件处理机制
不足 同Mate类似,也不定义项目结构,需要开发团队自行定义
由于使用自定义元数据标签,编译过程可能需要使用别的框架从来不曾用到的参数
2008 Adobe Systems Incorporated. All Rights Reserved.
Flex 开发框架 – Spring ActionScript
http://www.pranaframework.org/ 特点
as3之上的IoC容器
可以特别使用在Flex上 扩展Cairngorm和PureMVC
提供基于MVC的架构和实现方式 基于Java Spring框架 特别专注于BlazeDS和remoting
messaging交互逻辑
基于Spring AS框架的Flex项目结构 数据对象定义在外部XML中
运行时加载 通过容器管理依赖注入 设置method-invocation方法浇铸元素预处理MethodInvokingFactory对象的实例
针对服务,操作和命名提供一些接口和抽象基础类
优点 兼容Cairngorm
兼容PureMVC 特别有远程服务和消息方法定制,无需改动services-con"g.xml或者messaging-con"g.xml
重用性强
易于测试 支持文档齐全
不足 应用程序加载时间变长 无法更轻量的处理Logging,开发团队应该在Spring AS之外实现logging
2008 Adobe Systems Incorporated. All Rights Reserved.
Where to go next?
www.adobe.com/devnet
www.!ex.org
www.adobe.com/opensource
www.insideRIA.com
www.actionscript3.cn (中文)
www.riameeting.cn (中文)
www.infoq.com/cn (中文)
48
2008 Adobe Systems Incorporated. All Rights Reserved.
Top Related