Stephen's dev blog

jQuery create a client-side MVC

Posted on: 28 August, 2008

A while ago a colleague suggested to me the idea of having a client-side MVC (Model View Controller) framework. At first I didn’t like the idea. I have always thought that all client-side code should be seen as one layer, one collection of files that all act as one set of functionality. Whether that be AJAX calls or general functions etc etc.

Then I began to think about it. We already know that a client-side MVC is possible, but I can now see why it would be useful. But it wouldn’t be the traditional MVC architecture, it would really only be VC, the view and controller layers. And that’s all it can ever really be. Javascript can never directly access the model in a web application environment.

I decided that a VC client-side system would still be useful and I’m probably going to develop one for future use. I haven’t got round to doing this yet but these are my ideas.

Firstly, looking at a few of our sites, I could quickly see that there were many javascript files being loaded per page as they were needed. The number of files could range from 5 to 10 or even more. So we need a way of dynamically loading javascript files onto the page as and when they are needed, on the fly. I initially thought that it wasn’t possible to dynamically load javascript files from within a javascript page but I Googled around a bit and when I found the solution it was painfully obvious: you simply load more tags in the section of the HTML.

So with that in mind, lets create a simple front controller. What does it need to do? It needs to have some basic configuration for the MVC; where the root of the files are etc. It needs to have the aforementioned function to load external javascript files into the current page. It needs to have an initialisation function which kicks the MVC off:

mvc.init.js
/**
* client MVC initialiser
*/

/**
* wheres are the MVC files?
*
* @access public
* @var string
*/
var MVCRoot = '/js/';

/**
* initialise the controller
*/
$(document).ready(function()
{
loadJS('mvc.controller');
Controller.init();
});

/**
* load an external js file by appending
* script tag as child to <head> section
*
* @var fileName name of file to load
* @return bool true on success, false on no fileName given
*/
function loadJS(fileName = null)
{
if (fileName != null)
{
$('<script type="text/javascript" src="'+MVCRoot+fileName+'.js"></script>').appendTo('head');
return true;
}
else
{
return false;
}
}

Ok most of that should make sense. The loadJS() function is fairly straight forward, it simply builds a HTML <script> tag for the new javascript file and appends it to the <head> tag of the HTML. The $(document).ready function then uses this function to ‘include’ the main controller file (which will be /js/mvc.controller.js according to the current config). Now that the init function can call methods of the Controller class it calls the main controller’s initialisation method.

As an initial idea, the main controller could start off looking like this:

mvc.controller.js
/**
* client main controller
*/

var Controller =
{
/**
* holds the current page's type
* used for loading required js files etc
*
* @var string
* @access protected
*/
var _pageType : null,

/**
* main controller init function
* gets current page type
* includes required js files
*/
var init : function()
{
loadJS('mvc.controller.ajax');
Controller._getPageType();

/**
* logic to include required files dependent on page
* type etc etc
*/
...
}

/**
* returns the page type for current URI
*
* @return void
*/
var _getPageType : function()
{
var currentURI = window.location;
Controller._pageType = ControllerAjax.getPageType(currentURI);
}
}

Again this is mostly basic stuff and it definitely hasn’t been tested but I think the general idea is in the right direction. I think now that I can visualise how to seperate out javascript objects more clearly I can see how this would benefit a javascript heavy web site/application.

Even though web frameworks have been gaining more and more popularity over recent years I hadn’t thought of applying the same methodical approach to client side coding until my colleague suggested this idea. I think if you think about it and you’re thinking like I was, you can quickly warm to the idea as I have. Almost every day you can read a new article about how in development, we need to be separating out our different types of logic and our layers. Javascript is of course just another language, so why should it not get the same treatment? 🙂

Advertisements

2 Responses to "jQuery create a client-side MVC"

[…] 17, 2008 I wrote a while ago about creating a client side MVC system in […]

[…] on Sat 27-12-2008 Two Random Things I learned this Week Saved by Trueneutral on Sun 21-12-2008 jQuery create a client-side MVC Saved by kgl on Wed 17-12-2008 The Patent System is a Hashtable without a Hash Function Saved by […]

Comments are closed.


  • Patrick: I changed my code, but now I have another problem: Fatal error: Call to a member function isAvailable() on a non-object in /var/www/vhost/web/shopA
  • Stephen Gray: Hi Patrick, That first error is my fault. I had the method name for the refund() method as void() as I had copied the code from the other method!
  • Patrick: Hi Stephen, thanks for sharing your knowledge about creating a custom payment module. I need an extension for magento to handle a credit card payme

Categories

%d bloggers like this: