Best Practice of RIAs Architecture - RIA MVCWeb technologyPresented by Jie GaoEngineering and Computer Science

Academic Year 2011

Agenda

• Traditional Web MVC• RIA MVC• Service-Side Transformation• Current RIA MVC Frameworks• Conclusion

Comparison with traditional Web MVC(1)

Server-side MVC1) User → Controller → View → User

2) User → Controller → Model → View

→ User

Advantage:• Very userful when application client-side capabilities requirements are poorDisadvantage:• Cannot update part of a View• Increase bandwidth usage• Cause the server to be busy

Comparison with traditional Web MVC(2)

Mixed client-side and server-side MVC1) User → Controller (Client) → View (Client)

→User2) User → Controller (Client) →

Controller(Server) →View (Server) → View (Client) →User

3) User → Controller (Client) → Controller(Server) → Model → View (Server) → View(Client) → User

(1)

(2)

The second mixed MVC is widely used.• Increase more client-side capabilities• Decrease bandwidth usage and the server overriding• Form validations and conditions are processed at client-side• Able to use AJAX• Able to use a RIA plug-in at client-side for avoiding multi-version problems

Comparison with traditional Web MVC(3)

The architectural shift from server-side web MVC towards RIA represented by Struts and still the world of Server-side MVC

It is not problem free:

• Computation for tasks requiring access to the server-side MVC are slow• Difficult to program and maintain client-side Model (necessary to deploy

different code per client platform like browser, OS, other devices)• Over-heading on communication among MVC design elements

RIA MVC

1)User → Controller → View → User2) User → Controller → Model (Client ) → View→ User3) User → Controller → Model (Client) → Model (Server) → View → User

Advantage:• The page is sent once and quick response to the user• Updating the model at client minimizes the bandwidth usage• Communication of Models between client and server sides is able to asynchronous

and transparent to the user(client-side model take the decision)• Take full advantage of the processing capabilities and resources at client-side• Update part of the View at client-side easierDeficiency:• Remain the problem of multiple client-side platforms

Plug-ins may solve this situation extending browsers capabilities

Service-Side Implicationin RIAs(best practice)

• turn the server into an generic API• provide RESTful web-services• open up the application for other clients• Enable:

– Development of other GUIs– Integration with other tools– Scriptability and automation– Easier to develop clients with different capabilities(different

clients that use the same server services)

Current RIA MVC Frameworks

http://www.flickr.com/photos/joost-ijmuiden/

Current RIA MVC Frameworks

browser-based Solutions

• JavaScriptMVC• DOJO• SproutCore(HTML5)• PureMVC framework for Javascript• CorMVC• Jamal(Ruby on Rails style)

• And many more…

flash-based Solutions

• PureMVC framework for AS3• Cairgorm micro-architecture• Mate• FlexMVCS(make PureMVC more

suitable for Flex)• Swiz(uses dependency injection)• servebox• Soma(SomaMVC)

• And many more…

Current RIA MVC Frameworks -javaScriptMVC(1)There are only 4 things you will ever do with JavaScript! JMVC breaks these

down into the Model-View-Controller architecture.• Respond to events -> Controller($.Controller)• Get data and manipulate services (Ajax) -> Model Static

functions($.Model)• Wrap service data with domain specific information -> Model Prototype

functions(e.g. attr, bind)• Update the page -> Controller and View

Current RIA MVC Frameworks -javaScriptMVC(2)Strength:• Enhance code quality, performance, and maintainability• Locally separate javascript files• Library interdependence->light enough to change to another libraries such

as jQuery or Prototype• Testing->Provide browser-based and command-line approach to perform

unit/functional test to facilitate the UI test• Error handling->Plenty of plugins support in firefox to check errors(e.g.

typing error or grammar)It is about how to build an application

Weakness:• based on jQuery, maybe some issues evoked by jQuery • Not suitable for small applications

Current RIA MVC Frameworks -PureMVC(1)

PureMVC provides the model, view, and controller just as expected but hides them behind a global Facade layer with mediators and proxies to manipulate them

Current RIA MVC Frameworks -PureMVC(2)

Benefits:• can be used for 11 kinds of language(e.g.

c#,java,javascript,python,as2/as3)• Avoid platform dependencies• Pattern-based(implemented in any OOP env and easy to understand)• Facade class provides a single collaborator for communication with the

core framework• Loosely-coupled framework(e.g. publish/subscribe style notifications)• Well-documented

However,• PureMVC does not leverage native Flex features(e.g. event delegation

model, Flex binding)• PureMVC is not tied to Flex or even ActionScript

Current RIA MVC Frameworks -Cairngorm(1)

Model:• Stored in

singleton ModelLocator

View(mxml):• All data is pulled

from model via binding

Controller:• Tie Events and

Commands together in Controller class

• Conduit between user events and model changes

Current RIA MVC Frameworks -Cairngorm(2)Benefits:• Leverage the underlying Flex frameworks(e.g. central event dispatcher and

business delegates)• Well-supported and active community of developers• Borrow plenty of proven strategies from JAVA development worlds• Easier for medium to large teams of software engineers• Easier to deliver large scale, mission-critical RIAs

Weakness:• work it with a lot of classes(e.g. each event maps to a command)• Relative long learn curve• Complicate the built-in Flex event model and cause some limitations• Heavily reliance on global singletons making modularization and unit

testing difficult

Conclusion

A general guidelines to choose a RIA MVC framework:• Help build complex applications faster• Support team development• Support code reuse• Support maintainability and extensibility• Short learn curve• Well-document support

On the basis of:• Business requirement• Target platform• Experience of the development group

Reference• Morales-Chaparro, R.; Linaje, M.; Preciado, J. C.; Sánchez-Figueroa F. “MVC Web

design patterns and Rich Internet Applications.” Actas del IV Taller en Sistemas Hipermedia Colaborativos y Adaptativos, asociado a JISBD’2007. Zaragoza, September 2007.

• Y. Fain, V, Rasputnis and A. Tartakovsky, Enterprise Development with Flex: Best Practices for Flex

• Jupiter IT - JavaScriptMVC Training and Support • Futurescale, Inc. PureMVC framework, 2011. http://puremvc.org/ • Cairngorm Docs• Borrowed contents from Calin lepure’s slide