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 / [email protected] / @garannm


mailto:[email protected]


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


get that nowhttp://github.com/jquery/jquery-tmpl


http://github.com/jquery/jquery-tmpl

http://github.com/jquery/jquery-tmpl

alternatives?


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+‘“‘);

}

dom manipulation


var html = new Array();html.push(‘<div class=”band-info”><h2>’);html.push(band.bandName + ‘</h2>’);$.each(band.members,function() {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(“”));

concatenation


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 templatesSunday, October 17, 2010

performanceSunday, October 17, 2010

DRYSunday, October 17, 2010

minimize dom manipulationSunday, October 17, 2010

maintainabilitySunday, October 17, 2010

lazy loadingSunday, October 17, 2010

exciting syntax!


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

Everyone loves {{= bandName}}.

properties


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

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

${bandName} has ${fans.length} ${myApp.pluralize(‘fan’)}

expressions


{{if fans.length}}

${bandName} has ${fans.length}${myApp.pluralize(‘fan’)}

{{else}}

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

{{/if}}

if / else


{{each members}}

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

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

{{/each}}

each


other tags{{! this is a comment}}

{{html thingThatShouldntBeEscaped}}

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

{{/wrap}}


thismain 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?


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

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

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

rendering


$.tmplString immediately parsed and evaluated

Tags translated to expressions

Return a jQuery object


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

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

compiling


$.templateParse the template but don’t populate

Template engine saves in a big ol’ list

Rendering with data like calling a function


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

var lastId = t.data.id;

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

get and set


$.tmplItemtmplItem has additional functions and properties

nodes, parent, html, nest, wrap

Functions remain available to object in DOM


event handling


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

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

});

weak


// in some function$(“#some-tmpl”).tmpl(data).appendTo(“#thing”);

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

});

awesomeuse live() for events on multiple pages

or for things that change containers


// in some function$(“#some-tmpl”).tmpl(data).appendTo(“#thing”);

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

});

AWESOMER!use delegate() for events on one page

or always in the same container


when the only tool you have is a hammer..

oh wait you have CSS



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

awesome



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

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


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 templatesbreak up the family

separate pattern templates from interface templates

Always Be Compiling

templates = functions


stop sending html


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

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

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

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

});

});

pagination


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

});

inline edit


yo dawg we heard you like plugins


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

...return this;

}

weak


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

}

AWESOMER!


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

}

weak


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

}

AWESOMER!


AWESOMER pluginsNo more DOM manipulation

Don’t have to require a template engine *

Sexy updates and redraws


where do templates come from?


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);

in your javascript

eeeeek.Sunday, October 17, 2010

if ($.template("commentTmpl").length) {updateComment(comment);

} else {$.get("comment-tmpl.js", function(response) {

$.template("commentTmpl",response);updateComment(comment);

});}

function updateComment(comment) {// rendering happens here

}

external files

hint: ftwSunday, October 17, 2010

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 templatesput lots of little strings in one file

like a constants file

e.g. internationalization

small patterns available everywhere


what about clients without js?


noscriptssrsly?

clientside templates on the serverside


two-fer-one


#newtwitter’s doing itSunday, October 17, 2010

node.js is doing itSunday, October 17, 2010

takes a little doinghave 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

now you’re just showing off.

DEMO NAO PLZ


does this template engine come in green?


micro-templatesSunday, October 17, 2010

mustacheSunday, October 17, 2010

jTemplatesSunday, October 17, 2010

pureSunday, October 17, 2010

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/


http://github.com/jquery/jquery-tmpl/

http://github.com/jquery/jquery-tmpl/

http://api.jquery.com

http://api.jquery.com

http://github.com/kof/node-jqtpl

http://github.com/kof/node-jqtpl

http://github.com/awhatley/jquery-tmpl.net

http://github.com/awhatley/jquery-tmpl.net

i appreciate ya!

keep in touch: @garannm / [email protected] code: github.com/garann/templates-example




http://github.com/garann/templates-example

http://github.com/garann/templates-example

Using Templates to Achieve Awesomer Architecture

Technology

Transcript of Using Templates to Achieve Awesomer Architecture