In general when ever we talk about MVC we think about software engineering and design patterns which ease the life for a software developers. But MVC is not only a a design pattern for software engineering,  MVC is also a recommended pattern for HCI/Usability suggested by Jan Borchers in his book “A Pattern Approach to Interaction Design” .

Why we need it?

In today’s world of software development usability and interaction design considerations are inevitable. We all know about the buzz “Enterprise 2.0” ( I will be posting some of my ideas on this very soon) and we just not think of an enterprise application without lots of big and really long forms. As web has become a ‘de facto’ standard for new breed of software’s in anyway we need to put a lot of client side validations(a hefty line of codes) and usability and UI tweaking for web forms.

Yes I can understand, no body wants to be remembered of those nightmares, but it is inevitable in any way. So please consider using a MVC here even for this forces of software designing.

We have ‘views’ as forms, we have ‘models’ and business/validation logic  and if we could glue-in the ‘controller’ we are done to solve our puzzle by using MVC in javascripts.

Going more into the frameworks available as of today is out of the scope of this article but I would like to put more in this subject when ever I get some more time to provide my readers a working samples to use and evaluate. For the time being the list of best(according to me) javascript MVC frameworks available for use.

SproutCore

SproutCore is an open-source platform for building fast rich cloud applications on the web.  Specifically, the tools we develop are suitable for building large-scale applications that scale to many millions of users across many different devices.

PureMVC framework for Javascript

PureMVC is a lightweight framework for creating applications based upon the classic Model-View-Controller design meta-pattern.
This free, open-source framework is implemented in ActionScript 2 and 3, Java, Javascript and a number of other popular programming languages. This allows development on a wide variety of platforms.

CorMVC

CorMVC stands for: Client-Only-Required Model-View-Controller, the application architecture held completely separate from server-side technologies. Ideal for single page application.

JavascriptMVC Javascript MVC framework based on JQuery.

JavaScriptMVC is an open-source framework containing the best ideas in enterprise JavaScript development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.

Jamal

Jamal is a set of conventions and small javascript libraries to achieve a complete separation of html, css and javascript in your web application. Jamal is built on jQuery and inspired by MVC frameworks like Ruby on Rails, CakePHP and its derivatives.

Oh. yes client’s budget no problem provide him a low cost server side development budget with PHP. Yes it is true now you can. Go for GWTPHP the framework may be for your next RIA project. Check it out.

What is GWTPHP?

GwtPHP is a framework for both client and server part.  In GwtPHP you don’t need to hack JavaScript, work with modern, object oriented languages JAVA and UI framework from google GWT.

User intefrace (client) is programmed in Java, then compiled by Google Web Toolkit (GWT) to browser-dependent JavaScript.

Server part uses PHP 5 – the most used web scripting language today.

Keep an eye on this framework.

Is wow the understatement??

Get more details of this concept car at http://automotto.com

In normal Struts application we generally use DispatchAction to make our web app and life easy. In general struts controller gets a request and delegates it to corresponding action/dispatchAction subclasses. Depending on the method name parameter our target method gets invoked and after processing of some business/domain objects finally forwards a mapping(configured in struts-config.xml) towards the view tier and a JSP gets rendered in our thin client as a response.

Now when we think of Ajax in this kind of application model, we can consider two types of implementation of Ajax: Partial Page Rendering and Partial Response update.

Problem: A form based application has too many fields to be filled in by the user but majority of the fields or group of fields are optional and it takes time to render those fields and thus the entire page.

JSP Solution: Break the optional fields and mandatory fields in two separate groups. And Break the JSP page in two and use JSP:INCLUDE to save some jsp rendering time. You can save approximately 5-7% of your loading time.

Ajax Solution  Have a different method in your DispatchAction for example renderOptionFields(…….)

And return a different forward mapping and in turn return a different JSP but a partial one which render only the optional fields.

And in that partial JSP page you just only include your necessary TLDs and render all the struts html tags with name attribute mentioned.

And now in your main JSP have a button called option fields having a javascript function call to render the option fields.

Including prototype.js is obvious and have the code as follows:

        <input type="button" value="Optional Fields" onClick="renderOptionalFields()"/>    <div id="optionalFieldsContainer"></div>    

<script>function  renderOptionalFields(){	var url ="/appcontext/yourDispatch.action?method=   renderOptionFields";	var params ="";	var updatePage = new Ajax.Updater(''optionalFieldsContainer'',url,		{			method:''get'',			parameters:params,			onFailure:reportError		}	);}function reportError(request) {	alert("Error Updaing Page");}</script>

Inspired by Ruby on Rails a new java based framework for Ajaxified Web based application development framework that’s can turn your heads with some cool features:

• Roma it’’s totally based on POJO (Plain Old Java Objects)
• True Object Oriented vision in all aspects: from the model to the view and to the repository/database

• Encourage the use of the Domain Driven Model (DDD) approach: let’’s think to the Domain: the other things are secondary Aspects
• It works with Conventions ala Ruby On Rails: much less code to write and maintain and more uniformity in projects
• Applications are fully portable across frameworks since the application is developed using POJOs. For example you can switch between JDO and EJB3 PersistenceAspect without changing code unless you use directly the aspect implementation (see below)
• Allow to makes things dirty: you can use directly the target framework taking the full advantage of the implementation power
• You can use the already developed Modules (CRUD, User&Profiles, etc.) and extend their if you need
• The skill requested to build application can be lower than required for modern Java Web Applications: minor cost of development
• Roma is based on Spring Framework as IoC container, but you can use another one if you want.
• The supported frameworks and tools are continuously update on Modules page.

You can have the pleasure of Ajax web front-end with the help of Echo framework and if you are too much conservative and do not want to break out your tie with JSP you can do that too with this framework.

It’s worth checking this framework before going for any other RAD framework in J2EE space.

When implementing Ajax based RUI in enterprise app there are very few options to choose from;

• Developing RIA from scratch
• Plumping various RUI widgets available from open source community
• FLEX (Flash Plug-in dependent) need FA-Bridge
• Open Laszlo Flash based RICH UI (XUL based like Flex)

Developing from scratch makes no sense at all. Because time required developing various widgets it takes too much of time to deliver an enterprise ready version of it. Then an entire framework of Ajax engine makes no sense when too many well-tested versions are available (Dojo, prototype, DWR etc).

Readily available RUI widgets are available from various open source projects like YUI, Scriptaculous etc. But yes, you have to tweak here and there to develop your desired one.

Flex has many advantages over other two options. Because you get support from ADOBE itself, have large community and more of all you get a well tested IDE which is definitely a plus.

Flex has a Licensing cost which you have to consider beforehand like Backbase which has a readily available struts compatible tag-libraries which is rich enough to meet the enterprise requirements.

Open Laszlo is another good option to explore, it is an open source solution having two way supports, single declarative UI with flash or JS based RUI.

But again before starts with any of the options we should define the scope and analyze the expectation of the user, and accordingly go with best possible options available.

Struts and Ajax how to?

Struts itself has absolutely nothing in this area up to 1.2.x, Struts 2 is coming up in big way with the in built features of Ajax. (Webworks2.x).

Prior to Struts 2 you have to re-align your existing server side code base according to your plan of providing RUI solution. And in doing this DWR , dojo, scriptaculous can become very helpful if you are implementing JS based RUI. In case of Flex you probably have to re-align your server side code a little bit more. Though there are some open source helper toolkits available.

Flex and Js based solution both are surprisingly easy to integrate with struts. Both are Servlet based solution.

In JS based solution Struts Tiles can plays a major role in shortening your development time.

Ajaxanywhere Tag-library and Ajax-display tag can be very helpful, and there are some other open source tag-libraries to explore.

Resources

http://ajaxtags.sourceforge.net/
http://ajaxanywhere.sourceforge.net/
http://javawebparts.sourceforge.net
http://www.getahead.ltd.uk/dwr/
http://www.nextapp.com/products/echo2/
http://sweetdev-ria.ideotechnologies.com/sweetdev-ria-gettingStarted-1.1-RC3//
http://dojotoolkit.org/
http://flex.org
http://www.openlaszlo.org/
http://labs.macromedia.com/wiki/index.php/Flex_Framework:FABridge
http://prototype.conio.net/
http://www.openrico.org/
http://script.aculo.us/
http://karaszewski.com/tools/ajaxlib/

For enterprise builders Ajax solved many problem of responsiveness of UI but problem of overall development methodologies using Ajax still remains with lot of contradictions and conflicts among the developers. When using Ajax in an Enterprise Application main problem faced by the developers are where to start and how to start. The major problem faced by the enterprise developers and architect in implementing Ajax based UI solutions in existing application.

No software solution is beyond the scope of SDLC actually, but in general found missing when implementing Ajax based solutions in an enterprise app. Ajax by nature has some tremendous side effects if practiced unethically (from SDLC perspective) and by overuse.

Where is the Silver bullet?

In Ajax oriented solutions there is no silver bullet till date. Ajax is not a technology it’s more of a technique. And the success of Ajax oriented approach depends upon the proper study of requirements. If you take wrong move at beginning you tend to suffer in later stage of your development cycle.

There is no short cut at all in development of Ajax oriented Rich UI based presentation layer development, it’s a full blown development cycle. Yes there are many toolkit, utilities, tag-libraries to help you develop Rich UI which is Ajax based but development effort of front end, server side code and architecture re-aligning is always be there to be estimated.

Where to start?

As I mentioned before, prior to know where to start and how start better you should know what to do first and your user expectations you are going to meet. Define the scope of Ajax based UI and usability options you are going to provide to your end-users.

But again to remind you that there is no silver bullet which can provide you hassle free Rich UI development in a minutes/hours for enterprise app. It needs extensive planning; architecting and testing that age-old mantra for developing Aax based Rich UI for enterprise app.

In Ajax based approach there are two pattern in development; Dom Manipulation and Partial Updation. Stuts2(Webworks2+) promised to provide some inbuilt features for both of them. But as of now in struts, up to 1.2.9 (I have evaluated up to this version of1.2.x) there are no Ajax materials to help.

So depending on the pattern you are going to use in your enterprise app you have to decide and design accordingly to develop your RUI.

To help your development of Ajax RUI you can use DWR, Dojo toolkit and SCRIPTACULOUS (All based upon prototype lib), Yahoo UI library is good enough to get some readymade widgets out of the box. But you are the person who will be the king of your Ajax app because of your customized need of your very own RUI.

Do not hesitate to take help from ajaxpattern.org for taking right design decision to negate the future disasters as I mentioned earlier.

If you have framed the scope of your UI enhancement try using Ajaxanywhere tag-library, it is really a good one and can shorten your development time in very effective way. Using pre-build Ajax tag-library can really reduce the development efforts, and there are so many to do so. Check out the resource section for that.

Check the first part of this article here