What's the best way to convert server side HTML into a Javascript MVC on page load?

Question

I'm trying to build a quick and dirty Javascript library that makes it really easy to work with initial server generated HTML pages and then performing further actions in Javascript.

My issue is that most Javascript MVC solutions out there, both frameworks and patterns, rely on separating the data from the HTML that is returned by a server. The argument here is that this works better for building and structuring a full web app.

However, they slow down page load and make it so search engines and other non-Javascript clients can't use your site.

Rather than figuring out a way of running JS on the server side to pre-generate the page, I'd like to instead make JS read the DOM on page load and create its initial object state off of this.

I'm using Django and my plan is to make templates that work in both Jinja and a slightly modified version of Handlebars.

This way I can render templates with the same code on server side and in JS. The only part I'm missing here is how to make it so that the JS can build it's object representation off of the DOM on page load.

Here's what I'm thinking right now for templates:

<div class="post" js-model="post.id" js-value="{{ id }}">
    <div class="post-header">
        <span js-model="post.author.username" js-value="{{ author.username }}">
            {{ author.username }}
        </span>
        <img src="{{ author.avatar }}" js-model="post.author.avatar" js-value="{{ author-avatar }}">
    </div>
    <p js-model="post.content" js-value="{{ content }}">
        {{ content }}
    </p>
    <div js-model="post.date" js-value="{{ date }}" class="post-footer">
        {{ date }}
    </div>
</div>

My Javascript would then read this and generate its internal representation of this object.

I might be way over thinking this and could be better off just doing something with Angular, but I would like to get some feedback on this to see what others think.

Answer 1

There's certainly a lot of thought going along those lines these days.

The AirBnB folks came up with Rendr

And Artsy came up with Ezel

Neither are mature and both could benefit from more minds contributing.

Also, it's probably no coincidence that both use Backbone and Node. Using a framework like Angular or Ember might be prohibitively difficult on the server compared to Backbone. And if you're going to render in JS on the server, it makes more sense to use a JS server.