These slides are from a presentation at Flex London User Group on 16 February 2010. With so many application frameworks available which should you choose? Cairngorm? PureMVC? Mate? Swiz? Parsley? Robotlegs? Or should you roll your own? Which frameworks require you to write the most code? Which provide the easiest refactoring? Which features make frameworks flexible and which make them brittle? Which make them easy to use and which make them hard? Richard presents an overview of how the different frameworks are architected and looks at their good and bad features. He looks at the core architecture of each, how they handle dependencies and events and the different philosophies that drive each forward. If you’'re interested in architecture, frameworks, or design patterns, this will be of interest to you. If you need to choose a framework for a project, or you want to know more about the framework you are using, this will be essential viewing.

1. Flex London, Feb 2010
Application Frameworks
The Good, the Bad & the Ugly
Richard Lord
Technical Architect
BrightTALK
www.brighttalk.com

2. Application Frameworks
Cairngorm
PureMVC
Mate
Swiz
Parsley
RobotLegs

3. Coming Up
Model-View-Controller
Managing Dependencies
Managing Events
Presentation Patterns
What is Cairngorm 3?
Some measured opinion

4. Model-View-Controller
Model View
Controller

5. Managing Dependencies
Model
View
Model
Model
View
View
Controller Controller Controller

6. Cairngorm uses global singletons
Model Singleton
View
Model Model Model
View
View
Controller Controller Controller

7. Cairngorm uses a Singleton
Model is a Singleton
class ModelLocator implements IModelLocator {
public static function getInstance():ModelLocator {
...
}
[Bindable]
public var user:User;
}
View / Controller access that Singleton
var user:User = ModelLocator.getInstance().user;

8. PureMVC uses a registry
Model
View
Model
Model
View
Model Registry
View
Controller Controller Controller

9. Accessing the model in Pure MVC
Model is a registry of proxies
class UserProxy extends Proxy implements IProxy {
public function get user():User {
...
} Add object to registry
}
facade.registerProxy( new UserProxy() );
View / Controller fetch proxies from the registry
var userProxy:UserProxy = facade.retrieveProxy( "UserProxy" )
as UserProxy;
var user:User = userProxy.user;
Fetch object from registry

10. Others use dependency injection
Model
View
Model
Model Dependency View
Injection
Container
View
Controller Controller Controller

11. Accessing the model in Mate
Injection rules are defined in EventMaps
<mx:Script>
modelManager = new ModelManager();
modelManager.user = new User(); The Model is one or
</mx:Script> more regular objects
<Injectors target="{ProfileView}">
<PropertyInjector source="{ModelManager}" sourceKey="user"
targetKey="user"/>
</Injectors>
Define injection rules
Properties are injected into the view
public class ProfileView {
public var user:User; This will be set by
//...
}
the DI container

12. Accessing the model in Swiz
Injection rules are defined in BeanLoaders
<BeanLoader>
<User id="user"/>
</BeanLoader> Regular object
defined in MXML
BeanLoaders are instatiated in your application
<SwizConfig beanLoaders="{[MyBeans]}">
Objects specify their requirements
[Autowire]
public var user:User; And injected into
other objects

13. Accessing the model in RobotLegs
Injection rules are defined in a context
class MyAppContext {
override public function startup():void {
injector.mapSingleton( User );
}
Injection rules are
} defined in the context
Context is instatiated in your application
<MyAppContext contextView="{this}">
Objects specify their requirements
[Inject]
public var user:User; And injected into
other objects

14. Accessing the model in Parsley
Injection rules are defined in a configuration object
<mx:Object>
<User id="user"/> Model objects
</mx:Object> are created in a config
object
Configuration object is instatiated in your application
<ContextBuilder config="{MyAppConfig}">
Objects specify their requirements
[Inject]
public var user:User; And injected into
other objects

15. Managing Dependencies
Singleton
Registry
Dependency Injection

16. Handling Events
Model View
Controller

17. Event Bus
View View View
Event Bus
Controller Controller Controller

18. Using a single event dispatcher
View View View
Event
Dispatcher
Controller Controller Controller

19. Using a single event dispatcher
View
var loginEvent:LoginEvent = new LoginEvent(LoginEvent.LOGIN);
loginEvent.username = username.text;
loginEvent.password = password.text;
singleEventDispatcher.dispatchEvent( loginEvent );
Controller
singleEventDispatcher.addEventListener( LoginEvent.LOGIN,
loginHandler )

20. View-Controller in Cairngorm
extends CairngormEvent
View
var loginEvent:LoginEvent = new LoginEvent( LoginEvent.LOGIN );
loginEvent.username = username.text;
loginEvent.password = password.text;
loginEvent.dispatchEvent();
Front Controller
addCommand( LoginEvent.LOGIN, LoginCommand );
Command
public class LoginCommand extends Command {
public function execute( event:Event ):void {
var loginEvent:LoginEvent = event as LoginEvent;
...
}
}

21. View-Controller in Pure MVC
View Notifications are
var loginData:LoginData = new LoginData(); like Events
loginData.username = username.text;
loginData.password = password.text;
sendNotification( NotificationNames.LOGIN, loginData );
Controller
registerCommand( NotificationNames.LOGIN, LoginCommand );
Command
public class LoginCommand extends SimpleCommand {
public function execute( note:INotification ):void {
var loginData: LoginData = note.getBody() as LoginData;
...
}
}

22. View-Controller in RobotLegs
View
var loginEvent:LoginEvent = new LoginEvent(LoginEvent.LOGIN);
loginEvent.username = username.text;
loginEvent.password = password.text; Reference to
eventDispatcher.dispatchEvent( loginEvent ); central dispatcher is
injected
Context
commandMap.mapEvent( LoginCommand, LoginEvent.LOGIN );
Command
public class LoginCommand extends Command {
[Inject]
public var event:LoginEvent;
public function execute():void {
...
}
}

23. View-Controller in Parsley
Central dispatcher will
View redispatch this event
[Event(name="login",type="LoginEvent")]
[ManagedEvents("login")]
var loginEvent:LoginEvent = new LoginEvent(LoginEvent.LOGIN);
loginEvent.username = username.text;
loginEvent.password = password.text;
dispatchEvent( loginEvent );
Configuration
<DynamicCommand type="" selector="login"/>
Command
public class LoginCommand {
public function execute( event:LoginEvent ):void {
...
}
}

24. View-Controller in Parsley II
Central dispatcher will
View redispatch this event
[Event(name="login",type="LoginEvent")]
[ManagedEvents("login")]
var loginEvent:LoginEvent = new LoginEvent(LoginEvent.LOGIN);
loginEvent.username = username.text;
loginEvent.password = password.text;
dispatchEvent( loginEvent );
The method
Controller handles this event
[MessageHandler(selector="login")]
public function loginHandler( event:LoginEvent ):void {
...
}

25. Using the display list
Add listeners here
System Manager
Application Pop-up
Display Object Display Object Module
Display Object Display Object Display Object
Display Object Display Object Display Object

26. View-Controller in Swiz
View
var loginEvent:LoginEvent = new LoginEvent(LoginEvent.LOGIN, true);
loginEvent.username = username.text;
loginEvent.password = password.text;
dispatchEvent( loginEvent );
Bubbling
Event
Controller
[Mediate(event="LoginEvent.LOGIN")]
public function loginHandler( event:LoginEvent ):void {
...
}

27. View-Controller in Mate
View
var loginEvent:LoginEvent = new LoginEvent(LoginEvent.LOGIN, true);
loginEvent.username = username.text;
loginEvent.password = password.text;
dispatchEvent( loginEvent );
Bubbling
Event
Event Map
<EventHandlers type="{LoginEvent.LOGIN}">
...
</EventHandlers>

28. Mate has local event maps
Main event map
System Manager
Application Pop-up
Display Object Display Object Module
Local event map
Display Object Display Object Display Object
Display Object Display Object Display Object

29. Event Bus
Single Event Dispatcher
(may have multiple with access method)
Display List
(may use localised event handling)

30. Presentation Patterns
View View
Model
logic display
Controller

31. Code Behind
View Display
<LoginCanvas>
<VBox>
<TextInput id="username"/>
<TextInput id="password"/>
<Button click="sendLogin( username.text, password.text )"/>
</VBox>
</LoginCanvas>
View Logic
class LoginCanvas extends Canvas {
public function sendLogin( username, password ) {
....
}
}

32. Presentation Model
View Display
<Canvas>
<LoginPresentationModel id="pm"/>
<VBox>
<TextInput id="username"/>
<TextInput id="password"/>
<Button click="pm.sendLogin( username.text, password.text )"/>
</VBox>
</Canvas>
View Logic
class LoginPresentationModel {
public function sendLogin( username, password ) {
....
}
}

33. Supervising Controller
View Display
<Canvas>
<VBox>
<TextInput id="username"/>
<TextInput id="password"/>
<Button click="dispatchEvent( new LoginEvent(
LoginEvent.LOGIN, username.text, password.text ) )"/>
</VBox>
</Canvas>
View Logic
class LoginController {
public function LoginController( display:LoginDisplay ) {
display.addEventListener( LoginEvent.LOGIN, sendLogin );
}
private function sendLogin( event:LoginEvent ) {
....
}
}

34. Passive View
View Display
<Canvas>
<VBox>
<TextInput id="username"/>
<TextInput id="password"/>
<Button id="loginBtn"/>
</VBox>
</Canvas>
View Logic
class LoginController {
public function LoginController( display:LoginDisplay ) {
display.loginBtn.addEventListener( MouseEvent.click, sendLogin );
}
private function sendLogin( event:MouseEvent ) {
....
}
}

35. Presentation Patterns
Code Behind
Presentation Model
Supervising Controller
Passive View PureMVC &
Robotlegs
Mediators

36. Setting up the mediator
Pure MVC
facade.registerMediator( new LoginMediator( loginView ) );
Logic Display
RobotLegs
mediatorMap.mapView( LoginView, LoginMediator );
Display Logic

37. So what is Cairngorm 3?
Cairngorm 3 == Parsley 2.2

38. Summary and Opinion
Cairngorm
PureMVC
Mate
Swiz
Parsley
RobotLegs

39. Framework or Toolkit
MVC Framework Toolkit
Cairngorm Swiz
PureMVC Parsley
Mate RobotLegs

40. Platforms
Flash & Flex Flex only
PureMVC Cairngorm
Parsley Mate
RobotLegs Swiz

41. Modular features
Yes No
PureMVC (multicore) Cairngorm
Mate PureMVC (standard)
Parsley
RobotLegs
Swiz

42. Community involvement
Corporate Community
Cairngorm Robotlegs
Parsley Swiz
Mate
PureMVC

43. History and evolution
Generation 1.0 Cairngorm Out of date
PureMVC
Generation 1.5 Mature
Mate
Swiz
Generation 2.0 Parsley Cutting edge
RobotLegs

44. This is me
www.richardlord.net
twitter.com/Richard_Lord