Adobe Flex体系架构深度剖析

2006 Adobe Systems Incorporated. All Rights Reserved.

Flex体系架构深度剖析

马鉴

[email protected] Platform Technology Evangelist

Blog: www.7yue.com


企业应用进化之路

用户体验

枯燥

丰富

进化

1960s & 1970s 主机架构绿色屏幕时代

1980s & 1990s

客户端/服务器

图形化用户界面



用户体验

枯燥

丰富

进化


1980s & 1990s

客户端/服务器


1990s & 2000s

浏览器

Web/App Middleware



用户体验

枯燥

丰富 RIA Web Services & App Connectors

2000s & Future

SOA

丰富互联网应用

服务互联网桌面应用


1980s & 1990s

客户端/服务器


1990s & 2000s

Web 浏览器

Web/App 中间件服务器


Flash Platform & Flex 产品体系架构


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


针对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


Flex UI + SOA = SOC

•  数据模型 •  服务 •  消息 •  持久性 •  跨操作系统 •  简洁的模式

资源层数据库、外部系统、现存资源

集成层连接数据和现存系统

Front End

Back End 业务层连接业务对象

•  缺乏 SOA连接能力 •  限于数据的请求/相应模式 •  依赖运行环境和操作系统 •  混乱的编程模式 •  基于“页面”的访问模型

SOA / ESA

•  数据模型 •  服务 •  消息 •  持久性 •  跨操作系统 •  简洁的模式

表现层 ASP, JSP, Servlets, 及其他UI元素

Client Tier 浏览器, Applets, 和胖客户端 SOC

Services Oriented Client


Flex体系架构划分

产品� 工具及服务� 应用开发�


Adobe Flex 产品架构

Command-line 编译

MXML and ActionScript 3.0

框架和类库

Adobe®

Flex™ 3 SDK

Open source Flex SDK


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


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>


MXML – 组件



MXML – 对象实例



MXML – 属性



MXML – 事件



MXML – 数据绑定



Flex核心-基于AVM2的编译器及Flash Player


Flash Player 一些内部机制 2种渲染模式

  Retained模式   高端模式，AS3是Retained Mode

  能够成为跨越Adobe产品功能的标准

  分离渲染本身和功能依赖要求，如GPU，Cell等

  能够分离处理的类型，如video,audio

  在渲染计算中以表面特征出现（Surfaces）

  BitmapData,Filters,cacheAsBitmap都是表面特征

  Bitmap本身会被独立保留

  解决了渲染模式中的不连续性

  体系庞大

  难于维护和保持兼容性


Flash Player 一些内部机制 2种渲染模式

  Immediate模式   底层模式

  灵活   易于维护及保持兼容

  缺点   绑定了功能到底层语言与硬件驱动

  结论   Pixel Bender使用Immediate模式   GPU加速使用Immediate模式

  分离为表象的部分使用Immediate模式   Bitmap和其他"lls填充为Retained模式

  AS3是Retained模式   两者混合可以优化Binary下的Retained效率


Flash Player 一些内部机制时间轴增强


单线程还是多线程？

  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，加入多线程支持


Flex核心– 编译器架构


Flex核心 – MXML文档容器


Flex 应用背后

  应用依赖性

  背景：Application 容器 + 单一Label构成HelloWorld

  Binary Size

  使用FlashCS4，Binary Size:   116KB

  使用AS3+Compiler:   8KB


基于Flex frameworks的决策

  优点   利于项目部署   利于整合开发框架   良好的结构及代码规范   利于提高测试效率   模块化

  何时使用   UI Forms及UI interaction复杂时   团队开发   计划采用成熟开发框架和模式时   开发大规模应用时   与成熟中间件及其他业务系统整合时

  缺点   代码量大   Binary Code Size相对较大(有优化办法）

  组件样式定制化程度比Flash创作低

  何时不用   个人程序项目   创意网站   追求最小尺寸交互动画效果文件   纯粹的展示应用，无动态数据交互时


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


Flex应用设计工作流及数据服务剖析


Flex 应用 - SAP example


2) initial design

3) development

4) design tweaks

Visual Designer

1) comps + vignettes Developer

(Flash Catalyst)

Design Production

采用何种工作流完成Flex应用？


更具革命性质的工作流- Flash Catalyst

图形图像设计师

前端交互设计师

程序开发者

应用架构师


面向UI架构和设计师的工作方式


Demo


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


BlazeDS 客户端架构


BlazeDS 服务器端架构


Flex with Java via XML (RESTful / SOAP)

Web Service

客户端

App Server

XML

(RESTful / SOAP)


Flex with Java via Flash Remoting

BlazeDS

Spring Bean

客户端

J2EE Server

POJO

EJB

Other

Endpoint

AMF


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


RIA架构下不同远程数据服务性能比较

Census Project: http://www.jamesward.com/census/ http://!exapps.cvs.sourceforge.net/!exapps/census/


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


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项目开发盲目选择框架损失更大


Flex 开发框架 - Cairngorm

  http://opensource.adobe.com/wiki/display/cairngorm/

  特点   最成熟，最知名的Flex开发框架   micro-architecture，有一系列的design

patterns集合

  很大程度上借鉴了Java开发框架   专注于响应用户交互，封装服务器交互逻辑，管理客户端状态和UI状态

  基于Cairngorm框架的Flex项目结构   ModleLocator

  ServiceLocator   封装的业务逻辑   FrontController类

  优点   开发者社区的支持力度

  从Java开发框架借鉴而来的成熟实践策略   适合大型的Flex项目   适合团队开发，由于具备出色的架构理论支持和任务分发机制

  不足   代码冗余

  Flex内置事件模型复杂化   框架过于依赖全局单例模式


Flex 开发框架 - PureMVC

  http://puremvc.org/   特点

  有中文最佳实践文档

  非针对Flex的框架   专注于MVC模式

  Model,View,Controller也是单例   还有第四个单例叫做Façade，用来实现各层的通讯和public方法访问

  基于PureMVC框架创建的Flex项目结构   与Cairngorm类似   将项目分成几个不同的packages

  通过扩展框架类来实现类的操作   通过额外的Façade类来作为应用入口

  优点   结构非常清晰

  开发者社区支持充分   适合团队开发使用

  不足   依赖于单例模式   不专注于Flex，对于MXML开发无特殊优势

  过于强调理论，实践开发周期变长


Flex 开发框架 - Mate

  http://mate.asfusion.com/   特点

  基于标签和事件驱动的框架

  完全基于MXML实现   事件驱动专注于更容易的定义谁来响应事件

  “别给我电话，我会打给你”的依赖注册实现

  基于Mate创建的Flex项目结构   必须拥有一个或多个事件   必须有一个MXML文件称为event map

  event map mxml文件定义想侦听的事件和如何响应该事件

  可以拥有多个event map文件

  当把需要的数据提供给类或者注入类时，对象被构造。对象不需要获取数据，而是把需要的数据传给对象

  优点   松散耦合的依赖注入实现方式

  组件不依赖于全局单例模式   更加容易充当独立agents完成操作   不需要开发者一直使用Flex内置事件模型

  不会限制开发者使用单独响应来处理每个事件

  使用更加直观和简单   文档和示例众多

  不足   仅仅是针对MXML   不适合于将所有工作都使用AS类来完成开发人员

  不规范团队开发应用的方式，需要团队自行定义

  不能使用LiveCycle DataServices


Flex 开发框架 - Swiz

  http://code.google.com/p/swizframework/

  特点   IoC与DI模式

 简化事件侦听处理

 异步远程调用

 集中强调对于Java模式的利用

  基于Swiz创建Flex的结构   首先告知Swiz框架应用组件结构

  核心为集中工厂模式

  提供依赖管理，通过定制的metatag原标签Autowire

  优点  易于使用

 不强迫改变项目文件结构

 基于metadata的IoC和DI方式

 最大程度使用Flex内置事件处理机制

  不足  同Mate类似，也不定义项目结构，需要开发团队自行定义

 由于使用自定义元数据标签，编译过程可能需要使用别的框架从来不曾用到的参数


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


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
