I'm surprised that no JS template engines ever implement binding. It seems like everybody just ports some server-side ideas, even though there's a lot more that is possible client-side. Why do I need to rerender the entire template when my data changes?
Sproutcore2 is an example of this, but it's pitched as a full framework rather than a binding aware template engine.
I agree, just rendering is a server-side notion that obviously can work on the client-side, but I don't think is ideal.
Web 1.0/server-side templates had to render and sling strings of HTML around because that's all you could do (Rails's RJS was a cool Web 1.5 hack in that regard).
But once you're on the client-side, and have state, I think binding/mutating the DOM in-place is better than trying to explicitly maintain all the state needed to re-render-from-a-string-on-change all the time. And having a template engine/view layer that supports as a first-class notion is a good thing.
I used to (naively) think all JS template engines worked that way (merely re-rendering), but as the other comment says, Knockout at least does not, and I'm sure there are others that don't as well; I'm not an expert on all (or any) of them.
I wrote up some of this render vs. binding differences in a post describing my port of the todomvc sample app to my backbone-ish GWT framework:
(Not that GWT is a terribly popular technology in these circles, and it's not perfect, but I enjoy it.)
Another interesting assertion I make is that selectors are another Web 1.0/1.5 hack that can go away now that we have state and aren't forced into "the server gave us a huge blob of HTML, now do stuff with it!". IMHO of course.
This is the approach that we took with the Derby framework (http://derbyjs.com/): we use a template engine that parses Mustache-like templates and infers bindings at the same time. You don't have to write any additional bindings declarations, and everything updates in realtime among different windows and users as well.
I've looked at Derby and it seems like a fantastic idea. I was considering giving it a shot for my next side project, but I'm a little confused as to whether it supports any form of persistence or not?
I see you have an open issue on github (https://github.com/codeparty/derby/issues/9) about initial persistence with MongoDB which is still marked "open", but the documentation implies it's already working?
Yeah, I love knockout. And honestly with version 2, they've implemented native templates, which basically means you can write your templates in HTML instead of strings (gasp!). I much prefer this concept. Templates in strings never made sense to me when we already have a DOM to take advantage of, but only recently have I seen some of the great work out there to make this possible, like this, Lift's CSS selector transforms (http://simply.liftweb.net/index-7.10.html ), Nodejitsu's weld (https://github.com/hij1nx/weld ), etc.
Comments
I'm surprised that no JS template engines ever implement binding. It seems like everybody just ports some server-side ideas, even though there's a lot more that is possible client-side. Why do I need to rerender the entire template when my data changes?
Sproutcore2 is an example of this, but it's pitched as a full framework rather than a binding aware template engine.
I agree, just rendering is a server-side notion that obviously can work on the client-side, but I don't think is ideal.
Web 1.0/server-side templates had to render and sling strings of HTML around because that's all you could do (Rails's RJS was a cool Web 1.5 hack in that regard).
But once you're on the client-side, and have state, I think binding/mutating the DOM in-place is better than trying to explicitly maintain all the state needed to re-render-from-a-string-on-change all the time. And having a template engine/view layer that supports as a first-class notion is a good thing.
I used to (naively) think all JS template engines worked that way (merely re-rendering), but as the other comment says, Knockout at least does not, and I'm sure there are others that don't as well; I'm not an expert on all (or any) of them.
I wrote up some of this render vs. binding differences in a post describing my port of the todomvc sample app to my backbone-ish GWT framework:
http://draconianoverlord.com/2011/12/10/todomvc-in-gwt-mpv.h...
(Not that GWT is a terribly popular technology in these circles, and it's not perfect, but I enjoy it.)
Another interesting assertion I make is that selectors are another Web 1.0/1.5 hack that can go away now that we have state and aren't forced into "the server gave us a huge blob of HTML, now do stuff with it!". IMHO of course.
I have to think of the difference between rendering and assembly.
This is the approach that we took with the Derby framework (http://derbyjs.com/): we use a template engine that parses Mustache-like templates and infers bindings at the same time. You don't have to write any additional bindings declarations, and everything updates in realtime among different windows and users as well.
I've looked at Derby and it seems like a fantastic idea. I was considering giving it a shot for my next side project, but I'm a little confused as to whether it supports any form of persistence or not?
I see you have an open issue on github (https://github.com/codeparty/derby/issues/9) about initial persistence with MongoDB which is still marked "open", but the documentation implies it's already working?
Assuming I understand your use case correctly, I think Knockout is what you're looking for:
http://knockoutjs.com/
I used it a fair bit last year and quite enjoyed it.
Yeah, I love knockout. And honestly with version 2, they've implemented native templates, which basically means you can write your templates in HTML instead of strings (gasp!). I much prefer this concept. Templates in strings never made sense to me when we already have a DOM to take advantage of, but only recently have I seen some of the great work out there to make this possible, like this, Lift's CSS selector transforms (http://simply.liftweb.net/index-7.10.html ), Nodejitsu's weld (https://github.com/hij1nx/weld ), etc.
You should really check out AngularJS.
Does binding and a LOT more.
http://angularjs.org/
Very fast and well documented.
You should check out http://www.batmanjs.org