Client-side rendering using mustache.js

 BHASHKAR SHARMA01 Oct' 11

About me

Core Team Member at MobStac

Working on mobile web for 1.5 years

Love front-end development and studying User Experience

B. Tech. from College Of Engineering Roorkee

TouchSite

The Classical web

ServerClient

nth request

ServerClient

(n+1)th request

template

datapage

page

template

data

Load page

Load page

The AJAX web

ServerClient

nth request

ServerClient

(n+1)th request

template

datapage

markup

template

data

Load page

Add markup to page

Rendering on the server

markuptemplate data

Rendering on the client

markuptemplate data

server

server server client

The client-rendered web

ServerClient

nth request

ServerClient

(n+1)th request

template dataRender,

Add markup to page

template

datapageLoad page

JQuery Mobile

• Fixed page layout• Request full page, break it down and load it via AJAX (counter-

intuitive)• Too much overhead overriding default behavior

Enter mustache.js

 

Why mustache

• High performance• Available in multiple languages• Similar to django templates

Ruby, JavaScript, Python, Erlang, PHP, Perl, Objective-C, Java, .NET, Android, C++, Go, Lua, ooc, ActionScript, ColdFusion, Scala, Clojure, Fantom, CoffeeScript, D, and node.js

{

Benefits of client-side rendering

• Data independent of layout• Unified data API• Can cache responses• Save server cycles• Save bandwidth

server

tablet foneBrowser

same data

Websites AND native apps

A mustache template<div>

This will {{action}} once.

<ul>

{{#repeat}}

<li>The count is {{count}} and the word is {{word}}.</li>

{{/repeat}}

</ul>

{{#blank}}

This would not be displayed.

{{/blank}}

</div>

Data

{

“action” : “print”,

“repeat” : [

{ “count” : “1”, “word” : “Apple” },

{ “count” : “2”, “word” : “Gravity” },

{ “count” : “3”, “word” : “Newton” }

]

}

Rendered template

<div>

This will print once.

<ul>

<li>The count is 1 and the word is Apple.</li>

<li>The count is 2 and the word is Gravity.</li>

<li>The count is 3 and the word is Newton.</li>

</ul>

</div>

DEMO

Code Examples

def getTemplateJson(request):

template_json = {

'contents' : getTemplate('ajax_contents.html'),

'article' : getTemplate('ajax_article.html')

}

return HttpResponseJSON(simplejson.dumps(template_json))

Code Examples

def articleView(request, article_id):

article = get_object_or_404(Article, pk=article_id)

return HttpResponseJSON(simplejson.dumps(article, ensure_ascii=False, cls=CustomJSONEncoder))

The Future

• Allow readers to customize layout by picking themes or repositioning elements

• Make elements more interactive• Use client-side rendering for mobile phones

(based on device capability)

(Python with mustache)

My handle is @bhashkarsharma and I'm not a terrorist geekSpeed-Post: bhashkar@mobstac.com

Thank You!

We are looking for code buddhas to join our team