Your SlideShare is downloading. ×
0
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Introduction to MVC in Flex and HydraMVC
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to MVC in Flex and HydraMVC

1,531

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,531
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
47
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 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. Challenges vs. conventional page- based web development. • Asynchronous • Compiled (vs. scripting environments like PHP) • Requires (more) Resource Awareness
  • 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. 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. 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. 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. MVC in Flex » Procedurally • Decompose your interface by: • Separating concerns • Defining states • Define Testable scenarios
  • 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. MVC in Flex » Practically » Creating the View • Create the MXML components • Skinning • Adding interactivity
  • 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. MVC in Flex » Practically » Creating the Controller • How does the View interact with the user? • How does the View interact with the data?
  • 21. The need for frameworks becomes evident.
  • 22. Available Frameworks MVC IoC • HydraMVC • Swiz • PureMVC • Mate • Cairngorm • Prana (now Swing) • Model / Glue • Parsley
  • 23. PureMVC Advantages: • Language Agnostic • Promotes writing encapsulated code • Open and lightweight • Very hands-on (no “PFM”)
  • 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. 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. Deconstructing a HydraMVC implementation
  • 27. Simple HydraMVC component: Hydra Time Demo
  • 28. Simple HydraMVC component: Hello World Demo
  • 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. Future of HydraMVC • Inversion of Control implementation • Plugins • Debugging console via De MonsterDebugger • Unit testing • Documentation
  • 31. Q&A

×