Successfully reported this slideshow.

Introduction to MVC in Flex and HydraMVC


Published on

Published in: Technology
  • Be the first to comment

Introduction to MVC in Flex and HydraMVC

  1. 1. Deconstructing Flex How to build a rich, modular, scalable RIA (without going insane) by Francis Lukesh, andCulture // 05-07-2009
  2. 2. What is an application? • An application is a recursive concert of purpose, design, and science. • Purpose: Product of a conversation between the Client and the Designer • Design: Product of a conversation between the Designer and Architect • Science: Product of a conversation between Architect and Engineer • Architecture is design; engineering is how to achieve that design.
  3. 3. What is an application? » Designer • The Designer answers the question of Purpose: “What does this component need to do?” • Success: “The component effortlessly and pleasantly fulfills its purpose.”
  4. 4. What is an application? » Architect • The Architect answers the question of Design: “What is the best way to structure classes, data, and interface to achieve this purpose?” • Success: “The code and data facilitate the interaction specified by the Designer, while finding the correct balance of scalability and performance.”
  5. 5. What is an application? » Engineer • The Engineer answers the question of Science: “What synthesis of patterns, invention, and innovation make the most logical sense to implement?” • Success: “Can it be developed quickly? Does it work? Can it be maintained easily? Does it perform well? Does it scale well? Does it change well?”
  6. 6. The basic parts of an RIA • User Interface • Application Logic • Data • Communication Protocol
  7. 7. The basic parts of an RIA • Architecture and engineering must be applied to each component as well as the overall application at each level of the development process.
  8. 8. Why should I care? • Managers: Understand how Flex and Flash interact in the context of the entire application. • Designers: Understand what happens behind the UI, and learn to think in 4D. • Developers: Knowledge is power.
  9. 9. Common Flex Myths • It’s prescriptive • It’s fast • It’s easy • It looks good • It looks bad
  10. 10. What is the Flex SDK? • A set of Actionscript classes built for the Flash runtime. • A compiler that takes structured MXML and creates corresponding Actionscript. • NOT an application framework.
  11. 11. Challenges vs. conventional page- based web development. • Asynchronous • Compiled (vs. scripting environments like PHP) • Requires (more) Resource Awareness
  12. 12. Closing the Gap • Implement frameworks that allow you to separate concerns. • Implement any additional patterns that solve a known isolatable concern. • Recognize opportunity for invention and innovation.
  13. 13. What is MVC? • MVC is a way of structuring three common fundamental concerns, Model, View, and Controller • It is not strictly a “design pattern”, as its implementation varies; it is a principle of software design. • Can be applied throughout the application in various ways. • The moment an application becomes more complex to the developer than a logical assembly of components, it’s time to refactor.
  14. 14. Model: The actual time 2009:05:07 17:30:45 View: How the time is presented Controller: Actions that happen User selects User sets time display mode Time is updated from server
  15. 15. MVC in Flex • Ultimately, Flex is a view layer tool, and connects a user to the application. • A Flex application is a composition of simple views. • Restated: The moment a Flex application becomes more complex to the developer than logical assembly of simple views, it’s time to refactor.
  16. 16. MVC in Flex » Procedurally • Decompose your interface by: • Separating concerns • Defining states • Define Testable scenarios
  17. 17. MVC in Flex » Procedurally • Define the actors by asking: • What does this triad need to do? • What is my view? • What actions can the user take? • How does the view need to respond to changes in its data? • Where does the component store its data? • Translate into an MVC implementation.
  18. 18. MVC in Flex » Practically » Creating the View • Create the MXML components • Skinning • Adding interactivity
  19. 19. MVC in Flex » Practically » Creating the Model • Storing and managing data • Storing application state • Interacting with data • SOAP • AMF • JSON • Custom XML structures
  20. 20. MVC in Flex » Practically » Creating the Controller • How does the View interact with the user? • How does the View interact with the data?
  21. 21. The need for frameworks becomes evident.
  22. 22. Available Frameworks MVC IoC • HydraMVC • Swiz • PureMVC • Mate • Cairngorm • Prana (now Swing) • Model / Glue • Parsley
  23. 23. PureMVC Advantages: • Language Agnostic • Promotes writing encapsulated code • Open and lightweight • Very hands-on (no “PFM”)
  24. 24. PureMVC Disadvantages: • Mission of product requires no leveraging of Flex-specific functionality (only AS3-ported patterns, i.e. Notifier) • Extremely verbose • Difficult to debug • No magic at all!
  25. 25. Introducing HydraMVC • A rewrite of PureMVC (MultiCore) • The mission of Hydra is to extend beyond an MVC to an end-to-end, prescriptive development methodology for Flex.
  26. 26. Deconstructing a HydraMVC implementation
  27. 27. Simple HydraMVC component: Hydra Time Demo
  28. 28. Simple HydraMVC component: Hello World Demo
  29. 29. Simple HydraMVC component: FlexGrowl • Define the basic view • Define interactions and name them as Notifications • Create proxies that maintain the state and store the data for the view • Create controller commands that wire up application logic • Add interactivity for the mediator • Profit! ...from encapsulated components.
  30. 30. Future of HydraMVC • Inversion of Control implementation • Plugins • Debugging console via De MonsterDebugger • Unit testing • Documentation
  31. 31. Q&A