Upload
cltru
View
3.188
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
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