MVC for HTML ?

Today I Stumbled Upon a great piece of lecture given by Jason Seifer from the Rails Envy group about Unobtrusive Javascript. The piece of video was a great insight on how to write apps which are purely MVC. Now the question is how does this have MVC ?

The terminologies according to Wikipedia

• Modal - The domain-specific representation of the information on which the application operates
• View - Renders the model into a form suitable for interaction, typically a user interface element.
• Controller - Processes and responds to events, typically user actions, and may invoke changes on the model.

Writing HTML is a piece of cake. Its not a problem for most of the developers ( they even refrain from it accusing it to be trivial). But writing HTML which is flexible is the tough part. There are 3 parts to a web page as Jason points out.

• Content
• Presentation
• Behavior

The Content is the HTML stuff (stuff you write ) which is orderly (may be a tree fashion ie parent/child). The Presentation is the styling stuff acting on those HTML stuff. The Behavior where HTML tags (parts) are assigned stuff to do on certain actions. For a page to be consistent, these components must be as separable as possible (as it is with MVC).

The comparison with Model/View/Controller is kind of wayward here. I would have it called Media/View/Controller for the better. The Media being the Cascading Style Sheets which hold the Presentation, the View being the HTML which acts as the Content and the Controller being the Javascripts which acts as the Behavior.

People have widely adopted the CSS style of coding ie. having the presentation separated and put into files that could be included in the HTML file. This accounts for better structure and traceability. If I were to change the font, I know the centralized and only place to change it. I won't want to change all the 'style' attributes of the tags in my HTML files. Of course the developer would have to understand how bad IE sucks when he tries to implement all those CSS hacks (necessary hacks) to make the page look the same in IE. But after the ACID test results (which Firefox WILL pass !!), I suppose developers will have a better time in the future.

Now I have not seen the same effort go into creating the Javascript files. Developers still write native Javascript using the attributes (events) and they end up in replicating code and making the HTML page obtrusive and ugly. Having all the code base in simple 'js' files allows the programmer re usability of code which results in what Jason states as 'Unobtrusive Javascript'. I personally have been using the excellent Prototype Javascript library for all my projects (including Workstreamr) and the results have been great.

A typical situation when the Javascript becomes obtrusive is when you add javascripts to events like click. Say we are content with the code being 'obtrusive'. With Firefox (the best browser in the world) it works fine. No memory leaks, nothing. But with IE this has the famous memory leak problem. If we were to have a site which has say one page and all the content being loaded in an Ajaxy way, then we will have problems with this. This code wont Garbage Collect unless you navigate away from the page (or refresh). Why use this primitive technique when prototype provides elegant event handling functionalities ?

What I would rather do is attach an id with the element ( say a span/div) and then use the event attaching functionality provided by Prototype. This may be implemented in a main js file accordingly (as per your requirements) and the call may happen from inside the page called (say an AJAX call ?). Using the OOP structure of Javascript is also a great add on. As a developer I felt so happy when I tried to use those concepts in my Javacript files. So the main Javascript file may have a Class which defines your application and routines inside the Object created will have the methods used in the application ( like a status update on the side of the app ?).

References :
Rails Envy
MVC
Ruby On Rails

This is the movie. I hope Jason won't mind this knowledge sharing !!