Deconstructing FlexHow to build a rich, modular, scalable RIA (without going insane)

by Francis Lukesh, andCulture // 05-07-2009

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.

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

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

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?”

The basic parts of an RIA

• User Interface

• Application Logic

• Data

• Communication Protocol

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.

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.

Common Flex Myths

• It’s prescriptive

• It’s fast

• It’s easy

• It looks good

• It looks bad

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.

Challenges vs. conventional page-based web development.

• Asynchronous

• Compiled (vs. scripting environments like PHP)

• Requires (more) Resource Awareness

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.

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.

Model: The actual time

View: How the time is presented

2009:05:07 17:30:45

Controller: Actions that happen

User selects display mode

User sets time

Time is updated from

server

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.

MVC in Flex » Procedurally

• Decompose your interface by:

• Separating concerns

• Defining states

• Define Testable scenarios

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.

• Create the MXML components

• Skinning

• Adding interactivity

MVC in Flex » Practically » Creating the View

MVC in Flex » Practically » Creating the Model

• Storing and managing data

• Storing application state

• Interacting with data

• SOAP

• AMF

• JSON

• Custom XML structures

MVC in Flex » Practically » Creating the Controller

• How does the View interact with the user?

• How does the View interact with the data?

The need for frameworks becomes evident.

Available Frameworks

• HydraMVC

• PureMVC

• Cairngorm

• Model / Glue

• Swiz

• Mate

• Prana (now Swing)

• Parsley

MVC IoC

PureMVC Advantages:

• Language Agnostic

• Promotes writing encapsulated code

• Open and lightweight

• Very hands-on(no “PFM”)

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!

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.

Deconstructing a HydraMVC implementation

Simple HydraMVC component: Hydra Time Demo

Simple HydraMVC component: Hello World Demo

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.

Future of HydraMVC

• Inversion of Control implementation

• Plugins

• Debugging console via De MonsterDebugger

• Unit testing

• Documentation

Q&A