Isomorphic JavaScript Templates

gistfile1.md

I am in the process of building an isomorphic JavaScript framework and I need some help deciding between two options for our templates.

I have two different strategies I am trying to choose between. I have both working and functionally either will be fine, but thing in particular I am trying to think about now is which one would be easier to grok and more accepted by developers/contractors we hire or community members we get to help out on open source pieces.

Note: both options using our jeff.js templating lib which is essentially JavaScript/JSON instead of HTML.

Option 1 - Node Style

The basic idea here is to have Node functions that are used to either bind data on the server side or generate HTML for the client side. For ex:

repeat(model.questions, function (question) {
  return div({ class: 'blah'}, question.title);
})

Which would generate this on the server:

<div class="blah">something 1</div>
<div class="blah">something else 2</div>
<div class="blah">one more thing 3</div>

Or this on the client:

<div class="blah" ng-repeat="question in questions">{{ question.title }}</div>

The way this works is that essentially the server side runtime and client side build process have different implementations of the repeat() function.

Option 2 - Angular Style

We can actually use the Angular Style witin our jeff.js templates like this:

div({ 'ng-repeat': 'question in questions' }, '{{ question.title }}')

which will generate the exact same HTML on the server and client as Option 1 above. For the client generation, the code is very simple since the markup is a match to the final client HTML. For the server, the jeff.js template engine has rendering handlers for all Angular tags that are binding in nature (i.e. ng-repeat, ng-bind, ng-show, etc.) and the server values are dynamically injected through a series of JavaScript evals. So, sort of cool...but sort of evil as well ;)

Interesting, I had been playing around for a while with a similar idea to number #2 using a modified version of jade, but it became hairy very quickly.

It started out as a set of syntax helpers for angular and jade static sites, and then turned into a way to dynamically bootstrap initial http requests into the page.

The biggest issues I ran into were:

1. Maintaining feature parity/consistency with the client side angular templates. (Something that would probably be easier with #1)
2. Not wanting to maintain two versions of controllers/services etc. (angular.ui.router was a particular pain).
3. Rendering data heavy pages where I want to limit the number of watch statements.

If you can get #2 to work well, then that would be my vote.