2006 Adobe Systems Incorporated. All Rights Reserved. 1 MAX 2006 Flex Best Practices: Applying Design Patterns and Architecture Joe Berkovitz Chief Architect, Allurent Inc.

2006 Adobe Systems Incorporated. All Rights Reserved. 2 Resources and Updates  The latest version of this presentation and all sample code is available at:

2006 Adobe Systems Incorporated. All Rights Reserved. 3  25+ years developing user-facing software  Started in scientific data visualization and manipulation  Educational applications for K-6  ATG: the web application explosion  contributor to Java Server Faces  currently Chief Architect at Allurent, Inc. Background

2006 Adobe Systems Incorporated. All Rights Reserved. 4 Overview  Why use architecture and patterns?  What we want from a "well-built" Flex application  A specific example: ReviewTube  MVCS: A useful division of labor in the client  Dealing with asynchronous communication  Guidelines and tips for view construction  Principles and recipes

2006 Adobe Systems Incorporated. All Rights Reserved. 5 What Is Software Architecture?  Ideas that give “mental traction” on building, understanding  Broad solutions to large problems  Themes that shape solutions to many small problems  Breaking up a complex system into simpler ones with…  responsibilities  relationships  interactions  Generating and characterizing diverse approaches  Comparing their concrete strengths and weaknesses

2006 Adobe Systems Incorporated. All Rights Reserved. 6 What Are Design Patterns?  Design Patterns are “mini-architectures”  Unitary, easily named (Command, Session Façade…)  Applicable to small, recurring problem spaces  Templates of responsibilities, relationships and interactions  Complex problems often map to a combination of patterns

2006 Adobe Systems Incorporated. All Rights Reserved. 7 What's a Framework?  A framework instantiates an architecture and set of patterns  Concrete software package with classes, APIs, etc. (e.g. Flex, Cairngorm, JSF)  Further nails down scope and nature of solution  Specific responsibilities, relationships and interactions  Implies set of possibilities and constraints  Gives you pros and cons; do you need the pros?

2006 Adobe Systems Incorporated. All Rights Reserved. 8 What We'd Like in a Flex Application  Isolate presentation, state, actions, communication  Cope with unpredictability of UI design, remote server  Parallelize design, client coding, server coding  Respond instantly to user actions, provide good feedback  Handle cross-cutting concerns:  testability  logging  security  error handling

2006 Adobe Systems Incorporated. All Rights Reserved. 9 Flex Client  ReviewTube: a mashup between YouTube.com (a popular video publishing site) and a custom Comment Server  adds caption display synchronized with cue points in YouTube videos  YouTube provides metadata and media  custom Ruby on Rails server provides add-on caption data (and mirrors relevant metadata) Sample Flex Application YouTube Server Comment Server Media Service Comment Service Views Controller MetadataMediaCaptions XML / HTTP

2006 Adobe Systems Incorporated. All Rights Reserved. 10 Views Services Flex Client Architecture: Models, Views, Controllers, Services Media Service Comment Service Video Player Controller interface Video Browser Login, Search… Models Collection VideoInfo Comment populates references notifies communicates interacts Session interface

2006 Adobe Systems Incorporated. All Rights Reserved. 11 The Model: Representing State  Represents all client state as objects, collections, properties  All state changes dispatch events (and Bindable vars implicitly do this)  Does not refer to any non- Model application component Model notifies Collection VideoInfo Comment Session

2006 Adobe Systems Incorporated. All Rights Reserved. 12 The View: Presentation and Interaction  Presents application state (the Model) to the user  Encapsulates all user interface design  Responds to user interaction by invoking Controller operations  Responds to Model change notifications by updating itself  typically MXML plus some fraction of AS Views Video Browser Video Playback Login, Search… Model references notifies Controller interacts

2006 Adobe Systems Incorporated. All Rights Reserved. 13 The Controller: Exposing Actions, Invoking Services  Encapsulates all user-initiated actions in the application  Modifies Model as needed  Invokes Services as needed  Manages indirect view-to-view relationships  acts as Façade for:  miscellaneous application logic  progress and error reporting  confirmation, validation  security and authentication Views Services Controller Model interface

2006 Adobe Systems Incorporated. All Rights Reserved. 14 The Service Layer: Remote Operations and Logic  Encapsulates all communication with the outside world  Populates Model objects with remote data  Logical place for stubs early in development or as test harness  Caching and other performance enhancements can be easily added Services Video Service Comment Service interface Model populates communicates

2006 Adobe Systems Incorporated. All Rights Reserved. 15 Code Break!  Let's look at a simple Model/View/Controller interaction

2006 Adobe Systems Incorporated. All Rights Reserved. 16 Interactions: Model, View, Controller, Service Video Browser gesture User initiates gesture, searching for videos by tag

2006 Adobe Systems Incorporated. All Rights Reserved. 17 Interactions: Model, View, Controller, Service Controller Video Browser getVideosByTag() View asks Controller to get the videos

2006 Adobe Systems Incorporated. All Rights Reserved. 18 Interactions: Model, View, Controller, Service Comment Service Controller interface Video Browser getVideosByTag() loadVideos(model) Controller uses Service to load videos into a model

2006 Adobe Systems Incorporated. All Rights Reserved. 19 Interactions: Model, View, Controller, Service Comment Service Controller interface Video Browser model getVideosByTag() loadVideos(model) Eager Model Creation: Controller returns model (still empty) to View

2006 Adobe Systems Incorporated. All Rights Reserved. 20 Model Interactions: Model, View, Controller, Service Comment Service Controller interface Video Browser dataProvider model getVideosByTag() loadVideos(model) Collection View binds Model as its dataProvider, listening for change events

2006 Adobe Systems Incorporated. All Rights Reserved. 21 Model Interactions: Model, View, Controller, Service Comment Service Controller interface Video Browser … server results dataProvider Collection VideoInfo communicates Service processes server response, populates model

2006 Adobe Systems Incorporated. All Rights Reserved. 22 Model Interactions: Model, View, Controller, Service Comment Service Controller interface Video Browser … dataProvider binding changes Collection VideoInfo updates Model emits event notifications, triggering View updates

2006 Adobe Systems Incorporated. All Rights Reserved. 23 MVCS In Summary  Model: semantic data only  View: interaction and presentation only  Controller: actions, mediation, cross-cutting concerns  Services: communication only

2006 Adobe Systems Incorporated. All Rights Reserved. 24 Approaches to Model Implementation  Value Object Classes:  vehicle for uniform data representation in client  All properties should be Bindable  All collections should implement ICollectionView or IList  Data only, no behavior allowed!  Ease of consumption by Views should usually drive design  Make data binding convenient!!!  Not identical to server representation  Minimize rearrangement of server data structures

2006 Adobe Systems Incorporated. All Rights Reserved. 25 The Asynchronous Tango: Services and Operations  Many operations require similar handling in the Controller:  they don't complete immediately  when complete, the results are used to populate Model objects  need status, progress, error reporting  Command pattern: Controller works with Operation objects which expose a uniform interface for completion, status, error handling, etc.  Factory pattern: Service can act as factory for Operations returned to caller; the Service properties (e.g. host URL, protocol, etc.) apply to all its Operations  Composite pattern: Operations can be composed into a higher-level CompoundOperation that executes its children in sequence

2006 Adobe Systems Incorporated. All Rights Reserved. 26 Interactions: Controller, Service, Operation Comment Service Controller interface loadVideos(model) Collection

2006 Adobe Systems Incorporated. All Rights Reserved. 27 Interactions: Controller, Service, Operation Comment Service Controller interface IOperation Video Query Operation new VideoQueryOperation(model) loadVideos(model) Collection videos

2006 Adobe Systems Incorporated. All Rights Reserved. 28 Interactions: Controller, Service, Operation Comment Service Controller interface command loadVideos(model) IOperation Video Query Operation Collection videos

2006 Adobe Systems Incorporated. All Rights Reserved. 29 Interactions: Controller, Service, Operation Comment Service Controller interface loadVideos(model) Collection videos execute() IOperation Video Query Operation

2006 Adobe Systems Incorporated. All Rights Reserved. 30 Interactions: Controller, Service, Operation Comment Service Controller interface status events loadVideos(model) videos XML/HTTP request and response server results Status Views activity status and progress … VideoInfo IOperation Video Query Operation Collection execute()

2006 Adobe Systems Incorporated. All Rights Reserved. 31 Interactions: Controller, Service, Operation Comment Service Controller interface completion event loadVideos(model) videos … VideoInfo IOperation Video Query Operation Collection execute()

2006 Adobe Systems Incorporated. All Rights Reserved. 32 Sample Controller Code from Controller.as: public function getAllVideos():ICollectionView { var data:ArrayCollection = new ArrayCollection(); performOperation(commentService.loadAllVideos(data)); return dataProvider; } public function logout():void { performOperation(commentService.logout()); } public function performOperation(op:Operation):void { showStatusText(op.displayName); op.addEventListener(Event.COMPLETE, operationComplete); op.addEventListener(ErrorEvent.ERROR, operationFailed); }

2006 Adobe Systems Incorporated. All Rights Reserved. 33 Sample Service Code CommentService.as: public function loadAllVideos (dataProvider:ArrayCollection):Operation { return VideoQueryOperation.allVideos(this, dataProvider); } VideoQueryOperation.as: public var videos:ArrayCollection; public static function allVideos // static factory method (s:CommentService, dp:ArrayCollection): void { var c:VideoQueryOperation = new VideoQueryOperation (service.urlPrefix + "/all"); c.videos = dataProvider; return c; }

2006 Adobe Systems Incorporated. All Rights Reserved. 34 Approaches to View Implementation: The Fundamentals  If you don't code to enable reuse, it won't happen!  Set child properties to communicate "inward". Avoid using functions; you can't use data bindings with them  Dispatch events or set Bindable properties to communicate "outward" (code example: VideoTimeStrip )  Components shouldn't know what type container they go in  Containers shouldn't know what's inside their children  Temptation: MXML id-based properties are always public!  Refactor ruthlessly

2006 Adobe Systems Incorporated. All Rights Reserved. 35 Approaches to View Implementation Use inheritance to separate view logic (ActionScript) from layout and styling (MXML)  Examples: LoginPopup, RegistrationPopup  Superclass in ActionScript; specifies common properties and function definitions  Superclass public var x:Component may be overridden in subclass by.

2006 Adobe Systems Incorporated. All Rights Reserved. 36 Approaches to View Implementation Childless MXML components A "childless" MXML superclass can customize superclass properties and be used as a component itself in some other MXML file (with optional children). For example, SmallCanvas.mxml might contain simply: Some other component can then use:

2006 Adobe Systems Incorporated. All Rights Reserved. 37 Cool Binding Patterns If you want a property change to have some kind of side effect in your component, bind to a setter function that does the work. example: YouTubeVideoDisplay requests URL when video property changes You can bind a function of a Bindable: You can bind an expression with multiple Bindable inputs; it will be reapplied if any input changes. Factor out expressions like that, by binding to a local Bindable: [Bindable] var registrationOK:Boolean;

2006 Adobe Systems Incorporated. All Rights Reserved. 38 Miscellaneous Tips Never assume properties will be set in a well-defined order  Bindings can fire in an unpredictable, indeterminate sequence  Example: CommentCaption 's treatment of comment, videoOffset All event handling functions should be private Isolate style/skin knowledge: always prefer styleName to explicit styles

2006 Adobe Systems Incorporated. All Rights Reserved. 39 The Cairngorm Framework  It's well conceived and executed  Many people like it  It handles many of the issues discussed here  Some differences: usage of Command, Responder, Locator patterns  Semi-aligned with concepts in J2EE Core Patterns  Strong reliance on event broadcasting for user actions

2006 Adobe Systems Incorporated. All Rights Reserved. 40 Avoiding The Dark Side  Preconceived vs. emergent approaches  Force-fitting problems to patterns: “If I have a hammer, this must be a nail”  Using patterns needlessly: “That looks like a nail, I must need a hammer”  Satisfy key needs, not possible needs  Abstraction costs time: use it at obvious “hinge points”

2006 Adobe Systems Incorporated. All Rights Reserved. 41 Do you need something specialized and simple….

2006 Adobe Systems Incorporated. All Rights Reserved. 42 Or something more general, but tricky to maintain?

2006 Adobe Systems Incorporated. All Rights Reserved. 43 The Land of Many Right Answers  There's always more than one way to do something  Business and politics do influence technical approaches, like it or not  Patterns and practices in the end are a tool to meet one's real-world needs

2006 Adobe Systems Incorporated. All Rights Reserved. 44 Resources  Sample code, updates to presentation can be found at:

2006 Adobe Systems Incorporated. All Rights Reserved. 45