Say hi to frontal

On and off for the past few months i’ve been playing with an idea for a lightweight JavaScript framework. I hate to use the term ‘framework’ but i can’t think of a better way to describe it. Perhaps this is a terrible approach to JavaScript development but it’s been fun to experiment.

It’s built to complement the MVC pattern on the server side. Put simply it can be used to attach code to file and folder paths. Rather than try to explain in clumsy words, here’s some sample code:

/* SIMPLE RULE */
$frn('/things', function(){
    //Execute this for all paths starting with '/things'
 
});
 
/* MATCH ON TWO FOLDER LEVELS */
$frn('/things/view', function(){
    //Execute this for all paths starting with '/things/view'
 
});
 
/* NESTED MATCH */
$frn('/things', function(){
    //Execute this for all paths starting with '/things'
 
    $frn('/view', function(){
        //Execute this for all paths starting with '/things/view'
 
  });
});
 
/* MULTIPLE MATCHES */
$frn('/stuff /things', function(){
    //Execute this for all paths starting with '/stuff' or '/things'
 
});
 
/* RegExp MATCH */
$frn(/.*\.js$/, function(){
    //Execute this for all files with a '.js' extension.
 
});
 
/* MULTIPLE RULES */
$frn([
    ['/some', function(){}],
    ['/things', functions(){}]
]);

The rules above will be executed immediately. This might not always be desirable. As such there’s a way to queue up rules and execute them later.

$frn.queue('xhr')
    .add(/.*\.js$/, function(){
        //Execute this later
    })
    .done();
 
$frn.dispatch('xhr');

This could be useful for handling Ajaxy requests. .dispatch() could be fired inside a callback.

$(window).ajaxSuccess(function(r, xhr, s){
    $frn.location(s.url).dispatch('xhr');
});

As a convenience an arbitrary JavaScript object can be passed directly into the rule function. This could be useful for handling JSON.

$frn.queue('json')
    .add(/.*\.json$/, function(data){
        //Yay! we got some JSON
        alert(data.prop);
    })
    .done();
 
$frn.location('/getsome.json');
 
$(window).ajaxSuccess(function(r, xhr, s){
    $frn.location(s.url).data(r.responseText.parseJSON())
        .dispatch('json');
});

It’s all up on github. Feedback is welcome.

Tagged ,

Make a trackback.

2 Responses to “Say hi to frontal”

  1. Ciaran McNulty says:
    March 24, 2010 at 10:57 pm

    This looks really interesting.

    It’s easy in a MVC scenario for individula Views to add scripts to the page’s HEAD but the end result is typically a plethora of tags – I love how this approach allows a single JS to contain functionality that’s used across a whole slew of pages.

    I’d be curious to see it integrated into one of the MVC frameworks (ZF?) in the sense of integrating with their routing rules.

  2. carl says:
    March 25, 2010 at 12:51 am

    @Ciaran i’m so glad you get it.

Leave a Reply