Monday, November 28, 2011

Obviel.js: Object, View, Element Javascript lib

I just saw the posts by Martijn Faassen related to Obviel, I was quite busy this past month that I did not notice them, and due to my mail filters I also didn't notice I was added into the obviel googlegroup. (Sorry Martijn >.<)

Anyway, a year ago until a few months back, I was working with Martijn for his client project. It was a pleasure working with him and I learnt quite a lot from him. In the project, we utilize a pattern to allow us to write dynamic site using javascript for the frontend, and JSON at the backend. The server controls what would be displayed in the frontend by returning JSON objects with a specific iface (short for interface). Obviel was then born out from it.

For example, a simple hello world app.

$(document).ready(function(){
    $('#main').render('http://path/to/app.json')
})

Where app.json is :

{
   iface: 'print',
   message: 'Hello world'
}

And the obviel view defined as :

obviel.view({
    iface: 'print',
    render: function () {
        this.el.append('<div>' + this.obj.message + '</div>');
    }
})

What Obviel will do is, it will load the JSON, and load the view of the iface of the JSON (in this case, 'print'), and render the view with the data provided by the JSON file (in this case, append the message into #main wrapped in div). Quite cool eh?

Theoretically, you can also use it with WebSocket Push, and have the server fully control what to display in the browser by pushing JSON object. I haven't actually give it a try, but will do when I find the chance, and not feeling lazy. If you want to try it, go ahead, and probably use this radiate socketIO server I wrote 2 months back. It might also be possible to have a view which output Obviel objects for Plone content type, and combine with Diazo, to create a full JS UI for Plone, but those are stuff to poke at when totally not busy.

For more reading, check out Martijn's posts in his blog here http://faassen.n--tree.net/blog/view/weblog/2011/11/02/0 and read up the documentation at the Obviel site: http://www.obviel.org/en/0.-0/index.html
Post a Comment