Flex体系架构剖析


2006 Adobe Systems Incorporated. All Rights Reserved. 1 Flex体系架构深度剖析 马鉴 zma@adobe.com 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. 数据管理 Web层编译器 RIA PDF创建 门户部署 Adobe® LiveCycle® Data Services ES Adobe Flex整个产品线 消息 RPC 服务 服务适配器 Proxy 服务 Blaze DS Adobe® Flex™ Builder™ 3 图表组件 高级数据网格 内存性能排查 Professional Edition Standard Edition 可视化布局 代码提示 调试器 皮肤和样式 自动化测试支持 命令行编译器 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 2008 Adobe Systems Incorporated. All Rights Reserved. MXML – 组件 2008 Adobe Systems Incorporated. All Rights Reserved. MXML – 对象实例 2008 Adobe Systems Incorporated. All Rights Reserved. MXML – 属性 2008 Adobe Systems Incorporated. All Rights Reserved. MXML – 事件 2008 Adobe Systems Incorporated. All Rights Reserved. MXML – 数据绑定 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/ 5000条记录 Flex AMF3总体效率排行No.1,总耗时1.6s XML E4X>Flex AMF3(0.4s)>Flex XML AS Dojo>Ajax HTML>Ajax SOAP>Ajax XML>Ajax JSON>Laszlo XML>Flex SOAP E4X>Flex SOAP AS>Flex 数据渲染时间消耗(5000条记录,由长到短): E4X>Dojo>Flex AMF3(0.1s)>Ajax HTML Flex SOAP AS>Ajax SOAP>Ajax XML>Laszlo XML>Flex XML AS>Ajax JSON>Flex SOAP E4X>Flex XML 数据解析时间消耗(5000条记录,由长到短): JSON>Flex AMF3(0.9s)>Ajax XML>Dojo Laszlo XML>Flex SOAP AS>Flex SOAP E4X>Ajax SOAP>Flex XML AS>Flex XML E4X>Ajax HTML>Ajax 数据传输时间消耗(5000条记录,由长到短): SOAP AS>Flex SOAP E4X>Flex AMF3(0.2s) Ajax HTML>Ajax XML>Laszlo XML>Flex XML AS>Flex XML E4X>Ajax JSON>Dojo>Ajax SOAP>Flex 服务器执行时间消耗(5000条记录,由长到短): BlazeDS服务– 基于AMF3的高效数据传输架构 Adobe Systems Incorporated. All Rights Reserved. 2008 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内置事件模型复杂化 .  框架过于依赖全局单例模式 .  Service Locator和Delegates比较臃肿 .  没有针对Views的解决方案 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开发无特 殊优势 .  过于强调理论,实践开发周期变长 .  CASTING太过复杂 .  Debugging调试过于困难 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内置事件模型 .  不会限制开发者使用单独响应来处理每个事件 .  使用更加直观和简单 .  文档和示例众多 .  Models,Views就是常规类定义,不需要继承 .  Events就是系统内置Event类的子类 .  不足 .  仅仅是针对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 (中文) 4 9 2008 Adobe Systems Incorporated. All Rights Reserved.

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 15 金币 [ 分享pdf获得金币 ] 1 人已下载

下载pdf

pdf贡献者

imwgq

贡献于2011-02-28

下载需要 15 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf