Jinja2, Backbone.js and progressive improvement

Question

I have a working site based on the Google App Engine (Python + Jinja2 template engine). I would like to start redesigning it as a one-page application using Backbone.js and Underscore.js. The goal is to use a progressive improvement strategy.

The site will still be displayed using the backend on the first visit. And then, if the browser supports JavaScript, Backbone.js will prevail.

I decided to do this for two reasons. First, all the links that I already have will remain intact, and secondly, the Google indexing bot will be able to bypass the content of the site.

I have two problems with this approach:

• I need to have two templates for almost everything on my site, one on the backend (Jinja2) and one on the interface (Underscore.js). I was wondering what are the best practices in such cases? Is there anything you can offer to avoid having two templates for everything?

• How to download frontend templates for using Backbone.js + Underscore.js? I can load them all into the original request or request them asynchronously when needed.

I appreciate any thoughts! Thanks.

Some resources:

http://ricostacruz.com/backbone-patterns/

This description describes how to bind Backbone.js to existing HTML: http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement- with-backbone-js /

Answer 1

So I recently (this year) experienced a similar situation. I will let you know the head of time that No. 1 is an incredibly difficult thing. Keep in mind that you will not only have to duplicate your templates, but also all the business logic surrounding your site. For example, let's say you allow users to add comments to a specific page. Using the method described by you, you will have to have a comment template on the server side and on the client side, as well as duplicate the logic needed to add / delete / edit the comment both on the client and on the server (before placing users with and without javascript). Duplicating templates is easy with Jinja2 function blocks, but duplicating logic is where it gets interesting. I tried to do just that, and a few months later finished rewriting.

Therefore, the advice I give you is the idea that you can support both javascript and non-javascript users. Make your site one way or another. I personally chose the javascript route itself. This gives you two options. Create a one-page application or create an application that heavily uses javascript for functionality, but makes everything server-side. There are probably a number of other options, but these are the two most popular that I have seen. I went with the second option. So what I am doing is initial loading of the page is done by the server. Backbone.js then consumes each element and derives models and views from them. This is mainly done using data attributes. So, for example, to create a comment view, I would have such an element:

 <div class="comment" data-id="1" data-body="You Suck"></div> 

Then I would use the specified comment and create the following model from it:

 var CommentModel = Backbone.Model.extend(); var comment_el = $('.comment'); var comment_model = new CommentModel($(comment_el).data()); 

Finally, I would like to return to this created model, which will then add functionality to the site:

 var CommentView = Backbone.View.extend({ initialize: function() {}, edit: function() {}, delete: function() {} }); var comment_view = new CommentView({ model: comment_model }); 

Then you may ask: "What if I need to reorient something, do not I need templates on the client side?" Nope. Client-side templates are a fairly new thing. I personally try to avoid them, because I don’t think we are still there, and I always felt that single-page applications are not sensitive enough for my tastes. I am sure that there are many people who disagree with me, but this is the position that I took with my most recent project. Therefore, saying that I do everything on the server and send the html to the client in the form of JSON, which I then insert into the DOM. So I have a ton of api endpoints that return JSON in my Backbone.js code. This is what currently works for me, but this problem is mostly situational usually. You should really see what your needs are. For this, I pretty much based my current system on what Twitter ultimately decided to do after trying the entire single-page application. You can read about it here .