Using Templates to Achieve Awesomer Architecture

using templates to achieve

AWESOMER
architecture

Sunday, October 17, 2010

hi!
Garann “it’s like Karen with a G” Means

HTML, CSS, JS at Gerson Lehrman Group

Austin, TX

garann.com / garann@gmail.com / @garannm


ask me how i reduced 12k
lines of js to 4k


get that now
http://github.com/jquery/jquery-tmpl


alternatives?


dom manipulation
var container = $(“div.band-info”);
container.append(“h2”);
container.find(“h2”).html(band.bandName);
$.each(band.members,function() {
var span = container.append(“span”)
.addClass(“band-member”);
span.html(this.name+“ - “+this.instrument);
});
if (band.single) {
var link = container.append(“a”)
.attr(“href”,band.single.url);
link
.text(‘Download “‘+band.single.title+‘“‘);
}


hidden element “templates”
var container = $(“div.band-info”);
container.find(“h2”).html(band.bandName);
var link = container.find(“a”);
link.before(‘<span class=”band-member”>’ +
this.name + ‘ - ‘ + this.instrument + ‘</
span>’);
});
if (band.single) {
link.attr(“href”,band.single.url);
link.text(band.single.title);
} else {
link.hide();
}

ps: still dom manipulation

concatenation
var html = new Array();
html.push(‘<div class=”band-info”><h2>’);
html.push(band.bandName + ‘</h2>’);
html.push(‘<span class=”band-member”>’);
html.push(this.name + ‘ - ‘);
html.push(this.instrument + ‘</span>’);
});
if (band.single) {
html.push(‘<a href=”’ + band.single.url);
html.push(‘”>Download “‘);
html.push(band.single.title + ‘”</a>’);
}
html.push(‘</div>’);
document.append(html.join(“”));


what about just returning
html from an xhr?
send the same data over and over

have to dig properties out of DOM

building HTML server-side is annoying


that’s not an architecture
#thatsaproblem


an AWESOMER architecture:
separates the presentation from the data

abstracts views into reusable components

markup changes in one place

flexibility to treat big and small views differently

where you need it when you need it


pros and cons

no templates templates

performance

minimize dom manipulation

maintainability

lazy loading

what a template looks like
<script type=”text/html”>
<div class=”band-info”>
<h2>${bandName}</h2>
{{each members}}
<span class=”band-member”>
${$value.name} - ${$value.instrument}
</span>
{{/each}}
{{if single}}
<a href=”${single.url}”>
Download “${single.title}”</a>
{{/if}}
</div>
</script>


exciting syntax!


properties
${bandName} is the world’s greatest band.

Everyone loves {{= bandName}}.


expressions
${bandName} has ${fans.length} fans

${bandName} has ${fans.length}
fan${fans.length == 1 ? ‘’ : ‘s’}

${myApp.pluralize(‘fan’)}


if / else
{{if fans.length}}

${myApp.pluralize(‘fan’)}

{{else}}

You’ve probably never heard of ${bandName}.
They’re really obscure.

{{/if}}


each
{{each members}}

${$value.name} plays the ${$value.instrument}
like a GOD.

You heard me. ${this.name} practically
invented the ${this.instrument}.

{{/each}}


nested template
<script type=”text/html” id=”footer-tmpl”>
Comments:
{{tmpl(comments) “#comment-tmpl”}}
</script>

<script type=”text/html” id=”comment-tmpl”>
<div class="comment">
<span class="commentor">
${commentor} said:</span>
<p>${text}</p>
<span class="timestamp">on
${timestamp.toLocaleDateString()}</span>
</div>
</script>


compiled template
<script type=”text/html” id=”footer-tmpl”>
Comments:
{{tmpl(comments) “commentTempl”}}
</script>

<script type=”text/html” id=”comment-tmpl”>
<div class=”comment”>
<span>${commentor} said:</span>
<p>${text}</p>
<span>on ${timestamp.toDateString()}</span>
</div>
</script>

<script type=”text/javascript”>
$(“#comment-tmpl”).template(“commentTempl”);
</script>

other tags
{{! this is a comment}}

{{html thingThatShouldntBeEscaped}}

{{wrap "#otherTmpl”}}
<div class=”thing”>One</div>
<div class=”otherThing”>Two</div>
{{/wrap}}


this
main template: refer to properties directly

$item, $item.data, $data

{{each}}: $value

nested template: parent’s data or whatever you
passed in


how do they work?


rendering
$.tmpl(“comments”,data.comments).appendTo
(“#container”);

$(“#comment-tmpl”).tmpl
(data.comments).appendTo(“#container”);

$(document).html($(“#justsayin”).tmpl(data));


$.tmpl
String immediately parsed and evaluated

Tags translated to expressions

Return a jQuery object


compiling
$.template(“veryShortTmpl”,”<b>${name}</b>”);

$(“#stuff-tmpl”).template(“wickedCoolTmpl”);


$.template
Parse the template but don’t populate

Template engine saves in a big ol’ list

Rendering with data like calling a function


get and set
var t = $(“div.comment:last”).tmplItem();

var lastId = t.data.id;

t.tmpl = $.template(“new-tmpl”);
t.update();


$.tmplItem
tmplItem has additional functions and properties

nodes, parent, html, nest, wrap

Functions remain available to object in DOM


event handling


weak
$(“#some-tmpl”).tmpl(data).appendTo(“#thing”);

$(“a.childOfThing”).click(function(e) {
e.preventDefault();
doMoreStuff();
});


awesome
use live() for events on multiple pages

or for things that change containers

// in some function

// wherever
$(“a.childOfThing”).live(“click”,function(e) {
e.preventDefault();
doMoreStuff();
});


AWESOMER!
use delegate() for events on one page

or always in the same container

// in some function

// wherever
$(“#thing”).delegate(
“a.childOfThing”,“click”,function(e) {
e.preventDefault();
doMoreStuff();
});


when the only tool you
have is a hammer..
oh wait you have CSS


awesome

$(“#childOfThing”).tmplItem().tmpl =
$(“#state-two-tmpl”).template();


AWESOMER!
use CSS where possible - it’s faster!


$(“#childOfThing”)
.removeClass(“stateOne”)
.addClass(“stateTwo”);


css is better for..
errors

small number of elements being shown/hidden

elements with plugins attached

input areas that may have unsubmitted user data


fast, good, cheap:
pick two and a half


faster-ish templates
break up the family

separate pattern templates from interface templates

Always Be Compiling

templates = functions


stop sending html


pagination
myApp.container = $(“#stuffContainer”);

$(“a.showMore”).click(function() {

$.get(“/moreStuff”,function(items) {

$(“#item-tmpl”)
.tmpl(items)
.appendTo(myApp.container);

});

});


polling for new data
window.setTimeout(checkForStuff, 30000);

function checkForStuff() {
$.get(“/moreStuff”,function(items) {
if (items.length) {
var d = {l: items.length, d: items };
$(“#load-new-btn-tmpl”).tmpl(d)
.prependTo(myApp.container);
}
window.setTimeout(checkForStuff, 30000);
});
}
$(“#loadNewBtn”).live(“click”,function(e) {
$(this).tmplItem().tmpl =
$.template(“new-tmpl”);
});

inline edit
$(“#anEditButton”).live(“click”,function() {
$(“#thisGuysParent”)
.tmplItem()
.tmpl = $(“#edit-mode-tmpl”).template();
});


yo dawg we heard you like
plugins


weak
$.fn.myPlugin = function(options) {
this.html(‘<div class=”’ + options.class +
’”>’ + options.content + ‘<a href=”#”>’ +
options.buttonLabel + ‘</a></div>’);
...
return this;
}


AWESOMER!
$.fn.myPlugin = function(options) {
this.html($.tmpl(“myTemplate”,options));
...
return this;
}


weak
$.fn.myPlugin.update = function(newOpts) {
this.html(‘<div class=”’ + newOpts.class +
’”>’ + newOpts.content + ‘<a href=”#”>’ +
newOpts.buttonLabel + ‘</a></div>’);
...
}


AWESOMER!
$.fn.myPlugin.update = function(newOpts) {
this.tmplItem().data = newOpts;
...
}


AWESOMER plugins
No more DOM manipulation

Don’t have to require a template engine *

Sexy updates and redraws


where do templates come
from?


in your javascript
var myTemplate = ‘<div class="band-info"><img
src="/images/${photo}" alt="${bandName}" /
><h2>${bandName}</h2>{{each members}}
! ! ! ! <span class="band-member">
! ! ! ! ! ${this.name} - ${this.instrument}
! ! ! ! </span>
! ! ! {{/each}}</div>’;

$.tmpl(myTemplate,data).appendTo(container);

eeeeek.

in your html
<script type=”text/html” id=”my-tmpl”>
<div class="band-info">
<img src="/images/${photo}"
alt="${bandName}" />
<h2>${bandName}</h2>
{{each members}}
! ! ! ! <span class="band-member">
! ! ! ! ! ${this.name} - ${this.instrument}
! ! ! ! </span>
! ! ! {{/each}}
</div>
</script>

$(“#my-tmpl”).tmpl(data).appendTo(container);


external files
if ($.template("commentTmpl").length) {
updateComment(comment);
} else {
$.get("comment-tmpl.js", function(response) {
$.template("commentTmpl",response);
updateComment(comment);
});
}

function updateComment(comment) {
// rendering happens here
}

hint: ftw

use external files if you enjoy:
Having your templates cached

Only loading code once it’s needed

Better code organization

Using your client-side templates for server-side
rendering


little external templates
put lots of little strings in one file

like a constants file

e.g. internationalization

small patterns available everywhere


what about clients without
js?


noscripts
srsly?

clientside templates on the serverside


two-fer-one


#newtwitter’s doing it

node.js is doing it

takes a little doing
have to write a backend parser

may limit native functions like length()

unless your backend is JS

custom functions pretty much out

unless your backend is JS

even truthy and falsey may be a problem DEMO NAO PLZ

now you’re just showing off.


does this template engine
come in green?


micro-templates

mustache

jTemplates

check out:
jQuery templates: github.com/jquery/jquery-tmpl/

documentation: http://api.jquery.com/
(scroll to the very bottom)

jQuery templates for node.js:
github.com/kof/node-jqtpl

jQuery templates for .NET:
github.com/awhatley/jquery-tmpl.net

photo credit: http://www.flickr.com/photos/ennuiislife/


i appreciate ya!

keep in touch: @garannm / garann@gmail.com
demo code: github.com/garann/templates-example

Using Templates to Achieve Awesomer Architecture

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (19)

Similar to Using Templates to Achieve Awesomer Architecture

Similar to Using Templates to Achieve Awesomer Architecture (20)

Recently uploaded

Recently uploaded (20)

Using Templates to Achieve Awesomer Architecture