Lately, I decided to do an Ajax application and so I had to learn Javascript. To make my life easier, I decided to use the JQuery framework. I have chosen JQuery over Prototype because I heard many good things about JQuery, and the API documentation was (and still is) more intuitive.

Of course, my first attempt ended in a total mess. The result looked more like spaghetti than code ;-) That’s when I recalled an article (in German) about a Javascript MVC framework called Jamal, developed by Timo Derstappen. From the Jamal website:

The MVC concept is easy to adopt for javascript

• Controller: Interaction with the user interface (events)
• Model: Business Logic and AJAX calls
• View: DOM, CSS modifications

That makes sense. So I had a closer look at Jamal. It looked nice, but it bothered me that you would have to use a CSS class “jamal” in the HTML code to make it work. So I wrote my own implementation called “jscake” which avoids that. You can find the first version in the downloads section.

Let’s create a simple “Hello world” example with jscake. Our example (CakePHP) view will contain a link and a div to show the messages:

<a href="">click</a>
<div id="messages"></div>

First we create our model. All models are in the “$m” namespace (please correct me if that is the wrong term), which is a shortcut for “jscake.models”. So our model is called “$m.Example”. The model contains one function to return the text which should be displayed:

// app/webroot/js/models/example.js
$m.Example = {

    getText: function() {
        return "hello world";
    }
};

The view is similar to the model, it contains only one function, too. In the function the element with the id “messages” is located and the text appended to that element. Similar to the models the views are in the “$v” namespace.

// app/webroot/js/views/examples.js
$v.Examples = {

    showMessage: function(message) {
        $('#messages').append(message);
    }
};

Last, but not least, we have to create the controller. The index function is automatically called when the JQuery ready event occurs. In this function we simply say that when someone clicks on the link, the other function of the controller (sayHelloWorld) should be executed.

//app/webroot/js/controllers/examples_controller.js
$c.ExamplesController = {

    index: function() {
        $('a').click(this.sayHelloWorld);
    },

    sayHelloWorld: function() {
        $v.Examples.showMessage($m.Example.getText());

        return false;
    }
};

To make our example work we have to include all needed Javascript files in our view, with CakePHP 1.2 it looks like:

<?php $javascript->link(array('jquery-1.1.2', 'jscake', 'controllers/examples_controller',
'models/example', 'views/examples', 'start'), false); ?>
<a href="">click</a>
<div id="messages"></div>

Have fun with jscake! Feedback is welcome :)

$this->MyModel->query('Here comes the SQL statement');

Sure, following the Cake conventions this is a valid usage of query(), as the function is public. But it introduces database-related code to the controller, which is a violation of the MVC pattern.

I think a cleaner solution is to move the SQL statement to the model. So the snippet from above can be refactored to:

// in the model
function doSomething() {
    $this->query('Here comes the SQL statement');
}

// in the controller
$this->MyModel->doSomething();

Ok, this solution needs more code, but it comes with some additional advantages:

• it is easier to test
• it is more readable (at least if you give the function a better name than I did)
• the query can be re-used without copy & paste in other actions/controllers

What do you think about this approach?

CakePHP is very promising, the only problem – really, I don’t know if it is a problem – is: the development process is very slow.

Hm, I cannot say if the development process is slow compared with other frameworks, but what I see is that there is a steady progress. What do you think?