introduction to mvc in flex and hydramvc
DESCRIPTION
TRANSCRIPT
![Page 1: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/1.jpg)
Deconstructing FlexHow to build a rich, modular, scalable RIA (without going insane)
by Francis Lukesh, andCulture // 05-07-2009
![Page 2: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/2.jpg)
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.
![Page 3: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/3.jpg)
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.”
![Page 4: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/4.jpg)
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.”
![Page 5: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/5.jpg)
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?”
![Page 6: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/6.jpg)
The basic parts of an RIA
• User Interface
• Application Logic
• Data
• Communication Protocol
![Page 7: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/7.jpg)
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.
![Page 8: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/8.jpg)
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.
![Page 9: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/9.jpg)
Common Flex Myths
• It’s prescriptive
• It’s fast
• It’s easy
• It looks good
• It looks bad
![Page 10: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/10.jpg)
![Page 11: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/11.jpg)
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.
![Page 12: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/12.jpg)
Challenges vs. conventional page-based web development.
• Asynchronous
• Compiled (vs. scripting environments like PHP)
• Requires (more) Resource Awareness
![Page 13: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/13.jpg)
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.
![Page 14: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/14.jpg)
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.
![Page 15: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/15.jpg)
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
![Page 16: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/16.jpg)
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.
![Page 17: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/17.jpg)
MVC in Flex » Procedurally
• Decompose your interface by:
• Separating concerns
• Defining states
• Define Testable scenarios
![Page 18: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/18.jpg)
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.
![Page 19: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/19.jpg)
• Create the MXML components
• Skinning
• Adding interactivity
MVC in Flex » Practically » Creating the View
![Page 20: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/20.jpg)
MVC in Flex » Practically » Creating the Model
• Storing and managing data
• Storing application state
• Interacting with data
• SOAP
• AMF
• JSON
• Custom XML structures
![Page 21: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/21.jpg)
MVC in Flex » Practically » Creating the Controller
• How does the View interact with the user?
• How does the View interact with the data?
![Page 22: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/22.jpg)
The need for frameworks becomes evident.
![Page 23: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/23.jpg)
Available Frameworks
• HydraMVC
• PureMVC
• Cairngorm
• Model / Glue
• Swiz
• Mate
• Prana (now Swing)
• Parsley
MVC IoC
![Page 24: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/24.jpg)
PureMVC Advantages:
• Language Agnostic
• Promotes writing encapsulated code
• Open and lightweight
• Very hands-on(no “PFM”)
![Page 25: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/25.jpg)
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!
![Page 26: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/26.jpg)
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.
![Page 27: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/27.jpg)
Deconstructing a HydraMVC implementation
![Page 28: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/28.jpg)
Simple HydraMVC component: Hydra Time Demo
![Page 29: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/29.jpg)
Simple HydraMVC component: Hello World Demo
![Page 30: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/30.jpg)
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.
![Page 31: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/31.jpg)
Future of HydraMVC
• Inversion of Control implementation
• Plugins
• Debugging console via De MonsterDebugger
• Unit testing
• Documentation
![Page 32: Introduction to MVC in Flex and HydraMVC](https://reader034.vdocuments.us/reader034/viewer/2022042601/54635fe7b1af9f86228b552e/html5/thumbnails/32.jpg)
Q&A