Javascript MVC Framework with Google Gears ORM 0
Okay i know, i haven’t posted much in this blog. But in the last week with the release of Google Gears i came up with some ideas.
Jamal is a set of conventions and small javascript libraries to archieve a complete separation of html, css and javascript in your web application. Jamal is built on jQuery and inspired by MVC frameworks like Ruby on Rails, CakePHP and its derivatives.
The MVC concept:
- Controller: Interaction with the user interface (events)
- Model: Business Logic and AJAX calls
- View: DOM, CSS modifications
Google Gears just crys for a MVC Framework! It would be perfect to integrate Google Gears into Jamal.
After some research i found Google Gears Orm. The code looks pretty cool. So the idea is : integrate it into Jamal!
Model:
1 2 3 4 5 6 | $m.Client = { table: { firstname : jamal.Fields.String({maxLength:70}), lastname : jamal.Fields.String({maxLength:70}), } }; |
Controller:
1 2 3 4 5 6 7 8 9 | $c.Clients = { index: function() { $v.Clients.showList($m.Client.select()); $('#save').bind('click',function(){ $m.Client.insert([$('#firstname').val(),$('#lastname').val()]); $v.Clients.showList($m.Client.select()); }); } }; |
View:
1 2 3 4 5 6 7 8 | $v.Clients = { showList : function(array) { $('#clients-list').empty(); for(i = 0;i < array.length;i++) { $('#clients-list').append('<li>'+array[i].firstname+' '+array[i].lastname+'</li>') } } } |
looks pretty cool eh? 
Demo: http://dev.floriansweb.com/upload/sandbox/jamal/
Sourcecode Download: http://dev.floriansweb.com/upload/jamal_mvc_orm.zip
But i got some more ideas: real offline/online support need data synchronizations!
1 2 3 4 5 6 7 8 9 | $m.Client = { externalData: '/ajax/clients/findAll', syncEngine: '/ajax/clients/sync', table: { firstname : jamal.Fields.String({maxLength:70}), lastname : jamal.Fields.String({maxLength:70}), }, }; |
$m.Client.externalData could also be ‘index.php?model=client&action=getAll’. Its the method on the server which get all the server data and encode it into JSON. I get it with JQuerys $.getJSON. It should look like this:
1 | $m.Client.download(); |
Synchronizations:
First time you start the Application you need to download all the data from the server. Every insert,update,delete,select goes to the local DB. Every time you call insert,update,delete from a model the jamal.History.log(action,model,id) method creates a log entry.
1 | jamal.History.log("new","client",5) |
Action is the action - new, updated or deleted , model is the Model - client, user etc.. and ID is the affected rowid.
After the log the sync method is called. The Sync Method sends via ajax all the changed data / log entries to $m.Client.syncEngine. The syncEngine on server should manage now the synchronizations with replaying the log. If it fails - timeout - the jamal online status is set to false. If the request is successful the jamal online status is set to true and all log entries will be deleted.
To sum up:
Scenario: The user is offline and goes back online after 2 inserts :
1 2 3 4 5 | $m.Client.insert(["test1","test1"]); // new log entry "new","client",lastInsertRowId $m.Client.sync(); // fail - status : offline //User goes online $m.Client.insert(["test2","test2"]); // new log entry "new","client",lastInsertRowId $m.Client.sync(); // success - status online - delete log entries! |
Okay thats for now! I hope you understood my idea. I’m trying to implement it right now.
I’m very thankful for every feedback.
Thanks!
Today i tried 
I played a bit with the nice effects of mootools. Its really fun!
I had the idea from the last WWDC keynote where Steve Jobs presented the new Mac OS X “Leopard”. One feature of 
