Flex London, Feb 2010



Application Frameworks
The Good, the Bad & the Ugly

          Richard Lord

         Technical A...
Application Frameworks

       Cairngorm
       PureMVC
         Mate
         Swiz
        Parsley
       RobotLegs
Coming Up
Model-View-Controller

Managing Dependencies

   Managing Events

 Presentation Patterns

What is Cairngorm 3?

...
Model-View-Controller

Model                View




        Controller
Managing Dependencies
                     Model
                                               View
         Model


Mode...
Cairngorm uses global singletons
        Model Singleton
                                                    View
Model   ...
Cairngorm uses a Singleton

Model is a Singleton
  class ModelLocator implements IModelLocator {
    public static functio...
PureMVC uses a registry
                   Model
                                                  View

        Model


M...
Accessing the model in Pure MVC

Model is a registry of proxies
  class UserProxy extends Proxy implements IProxy {
    pu...
Others use dependency injection
                   Model
                                                 View

        Mo...
Accessing the model in Mate
Injection rules are defined in EventMaps
  <mx:Script>
   modelManager = new ModelManager();
  ...
Accessing the model in Swiz

Injection rules are defined in BeanLoaders
  <BeanLoader>
   <User id="user"/>
  </BeanLoader>...
Accessing the model in RobotLegs

Injection rules are defined in a context
  class MyAppContext {
    override public funct...
Accessing the model in Parsley

Injection rules are defined in a configuration object
  <mx:Object>
   <User id="user"/>    ...
Managing Dependencies


        Singleton

         Registry

   Dependency Injection
Handling Events

Model                     View




            Controller
Event Bus
                              View     View   View




                          Event Bus




Controller   Cont...
Using a single event dispatcher
                               View      View   View




                              Eve...
Using a single event dispatcher

View
  var loginEvent:LoginEvent = new LoginEvent(LoginEvent.LOGIN);
  loginEvent.usernam...
View-Controller in Cairngorm
                                extends CairngormEvent
View
  var loginEvent:LoginEvent = new...
View-Controller in Pure MVC

View                                                  Notifications are
  var loginData:LoginD...
View-Controller in RobotLegs
View
 var loginEvent:LoginEvent = new LoginEvent(LoginEvent.LOGIN);
 loginEvent.username = us...
View-Controller in Parsley
                                                 Central dispatcher will
View                  ...
View-Controller in Parsley II
                                                Central dispatcher will
View                ...
Using the display list
      Add listeners here
                                            System Manager



            ...
View-Controller in Swiz

View
  var loginEvent:LoginEvent = new LoginEvent(LoginEvent.LOGIN, true);
  loginEvent.username ...
View-Controller in Mate

View
 var loginEvent:LoginEvent = new LoginEvent(LoginEvent.LOGIN, true);
 loginEvent.username = ...
Mate has local event maps
   Main event map
                                     System Manager



                     Ap...
Event Bus


    Single Event Dispatcher
(may have multiple with access method)



           Display List
  (may use local...
Presentation Patterns

                        View     View
Model
                        logic   display




           ...
Code Behind
View Display
  <LoginCanvas>
   <VBox>
    <TextInput id="username"/>
    <TextInput id="password"/>
    <Butt...
Presentation Model
View Display
  <Canvas>
   <LoginPresentationModel id="pm"/>
   <VBox>
    <TextInput id="username"/>
 ...
Supervising Controller
View Display
  <Canvas>
   <VBox>
    <TextInput id="username"/>
    <TextInput id="password"/>
   ...
Passive View
View Display
  <Canvas>
   <VBox>
    <TextInput id="username"/>
    <TextInput id="password"/>
    <Button i...
Presentation Patterns


      Code Behind

   Presentation Model

  Supervising Controller

       Passive View        Pur...
Setting up the mediator
Pure MVC
 facade.registerMediator( new LoginMediator( loginView ) );


                   Logic   ...
So what is Cairngorm 3?




 Cairngorm 3 == Parsley 2.2
Summary and Opinion

      Cairngorm
      PureMVC
        Mate
        Swiz
       Parsley
      RobotLegs
Framework or Toolkit

MVC Framework      Toolkit

  Cairngorm         Swiz
  PureMVC          Parsley
    Mate          Ro...
Platforms


Flash & Flex     Flex only

PureMVC         Cairngorm
 Parsley          Mate
RobotLegs          Swiz
Modular features

        Yes                  No

PureMVC (multicore)       Cairngorm
       Mate           PureMVC (stan...
Community involvement

Corporate                            Community

Cairngorm                                Robotlegs
...
History and evolution
Generation 1.0   Cairngorm   Out of date


                 PureMVC
Generation 1.5                 M...
This is me



  www.richardlord.net

twitter.com/Richard_Lord
Upcoming SlideShare
Loading in...5
×

Application Frameworks - The Good, The Bad & The Ugly

14,274

Published on

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.

Published in: Technology
2 Comments
28 Likes
Statistics
Notes
No Downloads
Views
Total Views
14,274
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
0
Comments
2
Likes
28
Embeds 0
No embeds

No notes for slide

Transcript of "Application Frameworks - The Good, The Bad & The Ugly"

  1. 1. Flex London, Feb 2010 Application Frameworks The Good, the Bad & the Ugly Richard Lord Technical Architect BrightTALK www.brighttalk.com
  2. 2. Application Frameworks Cairngorm PureMVC Mate Swiz Parsley RobotLegs
  3. 3. Coming Up Model-View-Controller Managing Dependencies Managing Events Presentation Patterns What is Cairngorm 3? Some measured opinion
  4. 4. Model-View-Controller Model View Controller
  5. 5. Managing Dependencies Model View Model Model View View Controller Controller Controller
  6. 6. Cairngorm uses global singletons Model Singleton View Model Model Model View View Controller Controller Controller
  7. 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. 8. PureMVC uses a registry Model View Model Model View Model Registry View Controller Controller Controller
  9. 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. 10. Others use dependency injection Model View Model Model Dependency View Injection Container View Controller Controller Controller
  11. 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. 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. 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. 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. 15. Managing Dependencies Singleton Registry Dependency Injection
  16. 16. Handling Events Model View Controller
  17. 17. Event Bus View View View Event Bus Controller Controller Controller
  18. 18. Using a single event dispatcher View View View Event Dispatcher Controller Controller Controller
  19. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 29. Event Bus Single Event Dispatcher (may have multiple with access method) Display List (may use localised event handling)
  30. 30. Presentation Patterns View View Model logic display Controller
  31. 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. 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. 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. 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. 35. Presentation Patterns Code Behind Presentation Model Supervising Controller Passive View PureMVC & Robotlegs Mediators
  36. 36. Setting up the mediator Pure MVC facade.registerMediator( new LoginMediator( loginView ) ); Logic Display RobotLegs mediatorMap.mapView( LoginView, LoginMediator ); Display Logic
  37. 37. So what is Cairngorm 3? Cairngorm 3 == Parsley 2.2
  38. 38. Summary and Opinion Cairngorm PureMVC Mate Swiz Parsley RobotLegs
  39. 39. Framework or Toolkit MVC Framework Toolkit Cairngorm Swiz PureMVC Parsley Mate RobotLegs
  40. 40. Platforms Flash & Flex Flex only PureMVC Cairngorm Parsley Mate RobotLegs Swiz
  41. 41. Modular features Yes No PureMVC (multicore) Cairngorm Mate PureMVC (standard) Parsley RobotLegs Swiz
  42. 42. Community involvement Corporate Community Cairngorm Robotlegs Parsley Swiz Mate PureMVC
  43. 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. 44. This is me www.richardlord.net twitter.com/Richard_Lord

×