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.

Dropdown navigation system was written in such a way so that it can fetch navigational data from database after implementation of proper access control.

And after 2 years the navigation data are huge (over 5 level deep with so many children). And as a result for each request and response phase it has to re render all the elements dynamically and thus slowing down page rendering process.

We had very few option at this point of the project life cycle. We were caching the menu tree at server-side (session) but no other option to cache the rendering process.

We were looking for some technique to cache the rendering process ( DOM creation) in rendering the response phase except using frame based navigation. But for a Dropdown navigation system we have developed non-frame based navigation.

So options may be Flash based menu or Ajax call to server. Flash option was not a good solution because anyway we had to re-render the thing on every page refresh.

So the option remains is Ajax. But we were not in a position to take the risk of changing server side code and for security reason unable to introduce DWR for enabling Ajax.

So finally an old trick paid off. Frame is there as “top bar” for other notification system and so.

So I have started exploring the code and found that after first rendering menu code is generating elements which is cacheable (container.innerHTML) but the problem is when you attach events dynamically to an object it is not going to have any foot-print in your rendered DOM.

So we have just cached the DOM tree in the top frame and used it next time onwards with few “dynamic event attachment” codes with it.

    if(!top.topFrame.menubarcache.length){ // check for first time rendering from server            }else {         createMenuBarAndChildrenContainer(); // create the containers        var obj1= document.getElementById(''s1'');         var obj2= document.getElementById(''menuChildren'');                 obj1 = top.topFrame.menubarcache; // storing from cache        obj2 = top.topFrame.menuchildrencache; //stroing from cache        attachevents(obj1); // attach events dynamicaaly        attachevents(obj2); // attach events dynamicaaly    }