1. Deconstructing Flex
How to build a rich, modular, scalable RIA (without going insane)
by Francis Lukesh, andCulture // 05-07-2009

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. 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. 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. 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. The basic parts of an RIA
• User Interface
• Application Logic
• Data
• Communication Protocol

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. 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. Common Flex Myths
• It’s prescriptive
• It’s fast
• It’s easy
• It looks good
• It looks bad

11. 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.

12. Challenges vs. conventional page-
based web development.
• Asynchronous
• Compiled (vs. scripting environments like PHP)
• Requires (more) Resource Awareness

13. 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.

14. 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.

15. 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

16. 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.

17. MVC in Flex » Procedurally
• Decompose your interface by:
• Separating concerns
• Defining states
• Define Testable scenarios

18. 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.

19. MVC in Flex » Practically » Creating the View
• Create the MXML components
• Skinning
• Adding interactivity

20. MVC in Flex » Practically » Creating the Model
• Storing and managing data
• Storing application state
• Interacting with data
• SOAP
• AMF
• JSON
• Custom XML structures

21. MVC in Flex » Practically » Creating the Controller
• How does the View interact with the user?
• How does the View interact with the data?

22. The need for frameworks becomes evident.

23. Available Frameworks
MVC IoC
• HydraMVC • Swiz
• PureMVC • Mate
• Cairngorm • Prana (now Swing)
• Model / Glue • Parsley

24. PureMVC Advantages:
• Language Agnostic
• Promotes writing
encapsulated code
• Open and lightweight
• Very hands-on
(no “PFM”)

25. 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!

26. 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.

27. Deconstructing a HydraMVC implementation

28. Simple HydraMVC component: Hydra Time Demo

29. Simple HydraMVC component: Hello World Demo

30. 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.

31. Future of HydraMVC
• Inversion of Control implementation
• Plugins
• Debugging console via De MonsterDebugger
• Unit testing
• Documentation

32. Q&A