Codeigniter Clone In jQuery

[eluser]Alex Lawford[/eluser]
Hi all, my first post here. I regularly use Codeigniter for my PHP development but recently I've been doing more and more web app stuff where everything is done in the browser. Such is my love for Codeigniter, I decided to (more-or-less) clone it in javascript/ jQuery.

This is just the bare-bones. It enables you to organise stuff in the normal MVC pattern... But there aren't loads of libraries etc. (although of course it is compatible with any existing jQuery plugins).

Anyway, I thought I'd share it with you guys here for a bit of peer review. It works pretty well for me, but I haven't yet tested it that thoroughly. Any ideas and feedback would be appreciated! It's licensed under MIT so obviously feel free to use it in your own projects etc.

It doesn't have a name yet, so if anyone has a good idea let me know...

jquery codeigniter mvc.. (40k zipped)

[eluser]titoneo[/eluser]
I like your idea!

I thought about this long ago but never got to express it. I think the idea was at least possible to overload the server and the truth is that this will remove the html rendering and the data transmission is greatly reduced, I suppose you would think the same

I had a look at the code and it lacks a lot in the template. It is normal if this is your first version but I think this would be strong and good point, I know that CodeIgniter can not help you in this section.

So I found some interesting sources on templates in [removed]

http://www.west-wind.com/weblog/posts/509108.aspx

http://plugins.jquery.com/project/jquerytemplate

http://beebole.com/pure/


The following point is security. The downside of making the templates in JavaScript is that you post the code to everyone, including the private parts could be accessed, may not disclose private information but show how it works. So I think the templates should pass through the controller (codeigniter controller in the server) and then send to the client like a cached view. Perhaps it would be appropriate to group some templates in one file in order to reduce server requests.

Another thing about your implementation. You have removed some of the server load, fine! Then supposedly the application should go faster but .. a moderately large application you would have to divide your templates (if you want to be well organized code). In this case, if you need to load a screen for about 6 templates and receive data ... it takes some time. How will handle this?

Great job!

[eluser]Alex Lawford[/eluser]
Hi,

Thanks for the feedback!

I realize that the templating isn't specially powerful right now, but could I ask what it doesn't do that you that you would like to see it able to? Thanks for the links on that.

RE: security what I tend to do at the moment is have the 'model' side of the MVC very light from a javascript point of view, and then have that interfacing with PHP so only stuff relevant to the current user can be seen by them, and in a way I'm happy with. It's basically as you suggested. Clearly in most cases not everything can be javascript, for the reasons you outlined. I don't think any other implementation of this idea that I've come across (which are all much more complex.. jQuery MVC for eg.) have a solution for that.

3rd point: I suppose this is down to coding style. Do you mean that you tend to use multiple views in generating a single 'page'? This would, as you say, result in lots of server requests. One possible solution would be simple server side stitching together of those multiple views eg:

view1.html
view2.html
view3.html

But we request view_combined.php which just includes()s views 1, 2 and 3. Any other ideas?

Thanks!

[eluser]titoneo[/eluser]
Yes, combining views is a good solution!

When I said security I only referred to protect views templates with a controller, evidently the Model is in the server and you only can access it with ajax request and receive json data. And, as you say, the model in the client will be for caching data, for example

Now, what I want to say about templates is there will be many cases where it is necessary to iterate over a list of data using the same template block. For example if you build a blog, each post is displayed on the main screen is the same block of the template but with different data. For that, you need some more that only replace 'keywords' by 'datawords'. That is why I have suggested links.

I think that the microtemplating proposed by John Resig is lightweight and powerful to start with:

http://ejohn.org/blog/javascript-micro-templating/

Another solution that occurred to me is to create views in pure javascript code, views can be simple javascript functions that would build elements of the DOM, this is more tedious to code templates, but the big advantage is that you can load multiple views (javascript files) simultaneously because you can do something like this:

Code:

var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", "view1.js")

And you will know when are they loaded including a callback the end of file by convention (eg: isloaded_view("view1")).
So you can do the ajax request for data at the same time.

Well, you have to decide how do this, if you create a new version posted here let me know!

Regards!

[eluser]Alex Lawford[/eluser]
Right, I understand.. Completely agree

My templating is actually somewhat based on that John Resig link.

I wrote a function that achieved exactly what you mention but I didn't think I should include it in the core .js file. Maybe I'll make it a packaged 'helper'. Now let me just go find it....

Incidentally, any view will only be called once; afterwards it is cached.

Appreciate your interest!

[eluser]Alex Lawford[/eluser]
Hi, would this achieve what you were after do you think?

Code:

// example... an array of objects
var people = [{ name : john, age : 24 }, { name : alice, age : 31 }, { name : sam, age : 44 }];

view_looper(people, function(string){
    alert(string);
});

function view_looper(ob_array, callback)
{
    output = new Array();
    $.each(ob_array, function(key, val){
        load.view("my_view", val, true, function(string){
            // this ensures it is in the correct order which is not guaranteed given the
            // asynch nature of the load.view function
            output[key] = string;
            // last time
            if(val === (ob_array.length - 1) )
            {
                output = output.join("");
                callback(output);
            }
        }
    });
}

Then if "my_view.html" looked liked this:

Code:

<dl>
<dt>Name:</dt>
<dd>[name]</dd>
<dt>Age:</dt>
<dd>[age]</dd>
</dl>

The following would be returned:

Code:

<dl>
<dt>Name:</dt>
<dd>John</dd>
<dt>Age:</dt>
<dd>24</dd>
</dl>
<dl>
<dt>Name:</dt>
<dd>Alice</dd>
<dt>Age:</dt>
<dd>31</dd>
</dl>
<dl>
<dt>Name:</dt>
<dd>Sam</dd>
<dt>Age:</dt>
<dd>44</dd>
</dl>

[eluser]titoneo[/eluser]
Good!

I think that you want is receive 'combined views' in a single .html file (as discussed above), caching them and, in the other hand, request the data in json format to merge with templates at the end, right?

The problem I guess is that you will need some aditional logic to combine them or group them to create the view pages. Then, where do you place this logic? in the controller?

I think the controller can manage the action views in the client side with events (because this scenario is a bit different compared to the MVC pattern in the server) but no the build process of the view, makes sense? Maybe compare json hierarchy with html template hierarchy

Maybe, this need something like 'view_handler' (directives) with javascript code to handle them when the hierarchy isn't enough and where have to place it in the DOM (some times it's not necessary create a full view, only a piece).

This resource can inspire you:

http://beebole.com/pure/demos/

This is my vision of this, but I can be wrong, give me your point of view!

Regards!

[eluser]newkiwi[/eluser]
Hi Alan

Have you looked at dual sided templating?

http://ajaxpatterns.org/Browser-Side_Templating

http://softwareas.com/dual-side-templating

http://beebole.com/pure/

THe problem with having client side JS (e.g. in newer html5 offline modes) is sharing the template generation with PHP in a single process rather than maintaining 2 sets of templates

I am looking at running a web app in offline mode but of course the client must generate the forms, views etc that PHP does (for appropriate client side allowable functions of course).

I would be interested in any solutions that bridge CI + jQuery server and client side.

e.g. I was thinking of some standardization of the CI views + data [linked to origination from classes/modesl) => with a port to JS view + json/js data structures (tht link to both server and client side data sources)

This is completely different way to code of course,

Feedback appreciated