Slide 1

Slide 1 text

Templates and the single-page app of the future! Wednesday, March 7, 12

Slide 2

Slide 2 text

a sht histy Wednesday, March 7, 12

Slide 3

Slide 3 text

timeline ☞static content ☞“classic” asp, php, et al ☞decoupled server-side templates ☞ajax & dom manipulation ☞single-page apps and client-side templates Wednesday, March 7, 12

Slide 4

Slide 4 text

ye old templating Wednesday, March 7, 12

Slide 5

Slide 5 text

remember this: <% sub vbproc(num1,num2) response.write(num1*num2) end sub %>

Result: <%call vbproc(3,4)%>

Wednesday, March 7, 12

Slide 6

Slide 6 text

templates circa ajax server client server page ajax template template template template template template template template template ajax Wednesday, March 7, 12

Slide 7

Slide 7 text

templates post-ajax ☞rendering via dom manipulation ☞decoupled server-side ☞fallback for non-js clients ☞tied to request-response Wednesday, March 7, 12

Slide 8

Slide 8 text

templates post-ajax Wednesday, March 7, 12

Slide 9

Slide 9 text

yeah, but.. ☞too much dom manipulation makes a mess ☞it was really slow ☞lots of duplicate code ☞rendering coupled to user interaction Wednesday, March 7, 12

Slide 10

Slide 10 text

templates post-post-ajax Wednesday, March 7, 12

Slide 11

Slide 11 text

the contenders Wednesday, March 7, 12

Slide 12

Slide 12 text

verbose logic ☞can use pure data ☞mimics classic server-side templates ☞less parsing required ☞initial implementations pretty ugly ☞modern implementations among the fastest Wednesday, March 7, 12

Slide 13

Slide 13 text

logic-less ☞needs presentation-ready data ☞decouples presentation and code ☞easier for designers? ☞template is a dumb renderer ☞which is safer Wednesday, March 7, 12

Slide 14

Slide 14 text

remember this? <% sub vbproc(num1,num2) response.write(num1*num2) end sub %>

Result: <%call vbproc(3,4)%>

Wednesday, March 7, 12

Slide 15

Slide 15 text

what everyone’s so upset about

Result: <%= num1*num2 %>

Wednesday, March 7, 12

Slide 16

Slide 16 text

string concatenation ☞how it’s (mostly) done ☞fast ☞flexible ☞output not really reusable ☞have to search for individual elements Wednesday, March 7, 12

Slide 17

Slide 17 text

dom elements ☞not common ☞engines using html attributes may not return a dom ☞allows “data view” type control ☞references to elements and their relationships Wednesday, March 7, 12

Slide 18

Slide 18 text

non-template-tag format ☞most template engines don’t care about format ☞can be used for things besides html ☞some rely on html ☞some assume haml (or similar) Wednesday, March 7, 12

Slide 19

Slide 19 text

typical sitch ☞mustaches {{...}} ☞some logic (conditions, loops, partials) ☞pre-compilation for reuse ☞server- or client-side ☞string concatenation for speed ☞format agnostic Wednesday, March 7, 12

Slide 20

Slide 20 text

rendering vs. manipulation Wednesday, March 7, 12

Slide 21

Slide 21 text

simple template

Welcome back, {{username}}!

Your friends:

{{#friends}} {{name}} {{#if online}} online {{/if}} {{/friends}}

Wednesday, March 7, 12

Slide 22

Slide 22 text

data var userObj = { username: “tmplM4st3r”, friends: [ { name: “1337tmpls”, online: true }, { name: “hbars4lyfe”, online: true }, { name: “belieber42”, online: false } ] }; Wednesday, March 7, 12

Slide 23

Slide 23 text

rendered

Welcome back, tmplM4st3r!

Your friends:

1337tmpls online hbars4lyfe online belieber42

Wednesday, March 7, 12

Slide 24

Slide 24 text

loading ☞most template engines will accept any string ☞script tag with non-rendered type ☞external file loaded via ajax or a loader ☞string concatenated into js during build ☞more fragile Wednesday, March 7, 12

Slide 25

Slide 25 text

loading & compiling var $container, myTmpl, userObj; $.get( “templates/user.tmpl”, function( tmpl ) { myTmpl = Handlebars.compile( tmpl ); $container.html( myTmpl( userObj ) ); }, “text” ); Wednesday, March 7, 12

Slide 26

Slide 26 text

loading & compiling function renderUser( cb ) { if ( myTmpl ) { cb(); return; } $.get( “templates/user.tmpl”, function( tmpl ) { myTmpl = Handlebars.compile( tmpl ); cb(); }, “text” ); } renderUser( function() { $container.html( myTmpl( userObj ) ); }); Wednesday, March 7, 12

Slide 27

Slide 27 text

uh oh.. socket.on( “friendOffline”, function( friend ) { var friends = userObj.friends; $.each( friends, function( i, f ) { if ( friend.name === f.name ) { f.online = friend.online; } }); renderUser( function() { $container.html( myTmpl( userObj ) ); }); }); Wednesday, March 7, 12

Slide 28

Slide 28 text

alternatively socket.on( “friendOffline”, function( friend ) { $( “a[data-name=” + friend.name + “]” ) .next( “span” ) .remove(); }); Wednesday, March 7, 12

Slide 29

Slide 29 text

But what if..

Welcome back, {{username}}!

Your friends:

{{/friends}} Wednesday, March 7, 12

Slide 30

Slide 30 text

defining a partial Handlebars.registerPartial( ‘friend’, ‘{{name}}’ + ‘{{#if online}}’ + ‘online’ + ‘{{/if}}’ ); var friendTmpl = “{{> friend }}”; Wednesday, March 7, 12

Slide 31

Slide 31 text

and so! socket.on( “friendOffline”, function( friend ) { $( “div[data-name=” + friend.name + “]” ) .html( friendTmpl( friend ) ); }); Wednesday, March 7, 12

Slide 32

Slide 32 text

composition choices ☞how much dom manipulation is needed? ☞how likely is re-rendering? ☞how difficult is it to find the child element? Wednesday, March 7, 12

Slide 33

Slide 33 text

client-side architectures Wednesday, March 7, 12

Slide 34

Slide 34 text

mvc ☞view and template often synonymous ☞in practice, need a view-model ☞controller determines when to render ☞need non-mvc concepts ☞rendering container ☞event handlers Wednesday, March 7, 12

Slide 35

Slide 35 text

a “view” ☞the template ☞its container/rendering target ☞view-model/transformation logic ☞event handling? ☞actually a bunch of stuff Wednesday, March 7, 12

Slide 36

Slide 36 text

abstracted rendering ☞a complete view should only need to be told when to render ☞everything may not be a complete view ☞e.g. partials ☞everything may not map perfectly to a model Wednesday, March 7, 12

Slide 37

Slide 37 text

templates filling in gaps ☞non-application parts of the page ☞pieces of proper models ☞non-data input structures (e.g. confirmation) ☞sub-views within proper views Wednesday, March 7, 12

Slide 38

Slide 38 text

templates without mvc ☞decoupled from data models ☞context passed in ☞probably pub/sub ☞agnostic templates may be easier to share Wednesday, March 7, 12

Slide 39

Slide 39 text

node.js Wednesday, March 7, 12

Slide 40

Slide 40 text

not dissimilar from client Wednesday, March 7, 12

Slide 41

Slide 41 text

server-side uses ☞initial load ☞full-page rendering ☞server-side compilation (hogan.js) ☞rendered html snippets Wednesday, March 7, 12

Slide 42

Slide 42 text

dumb views ☞server-side mvc is different ☞more models ☞more controllers ☞less views ☞view is single-use ☞user interaction not relevant Wednesday, March 7, 12

Slide 43

Slide 43 text

presentation logic ☞still needed for rendering ☞does this belong on the server? ☞is it necessary? ☞can it be shared? ☞isomorphic view-models and validation Wednesday, March 7, 12

Slide 44

Slide 44 text

type of template matters ☞may be better for haml et al ☞server-side dom pointless ☞except for scraping/crawling ☞performance matters less ☞but are you only using templates on the server? Wednesday, March 7, 12

Slide 45

Slide 45 text

full-stack templates Wednesday, March 7, 12

Slide 46

Slide 46 text

the good stuff ☞use the template for initial load ☞reuse it to render new data ☞same template for: ☞server-side controller (url) ☞client-side controller (location.hash) Wednesday, March 7, 12

Slide 47

Slide 47 text

shared access ☞easiest to use same loader ☞commonjs is pretty.. common ☞no need to create two versions Wednesday, March 7, 12

Slide 48

Slide 48 text

managing partials ☞can be difficult depending on template engine ☞argues for larger templates ☞namespaces work differently ☞scope unreliable Wednesday, March 7, 12

Slide 49

Slide 49 text

works for handlebars tho? Wednesday, March 7, 12

Slide 50

Slide 50 text

full-stack frameworks ☞reuse the framework, reuse the templates ☞not there yet ☞but people are working on it ☞make smart template choices ☞you’ll thank me later Wednesday, March 7, 12

Slide 51

Slide 51 text

thanks! Wednesday, March 7, 12

Slide 52

Slide 52 text

credits ☞ http://www.flickr.com/photos/ndayla/5531142284/ ☞ http://www.flickr.com/photos/ndayla/5559712259 ☞ http://www.flickr.com/photos/10567940@N05/2692285853/ ☞ http://www.flickr.com/photos/reebob/3294745178/ ☞ http://www.flickr.com/photos/jeckcrow/4407422983/ ☞ http://www.flickr.com/photos/legends2k/5410967229/ Wednesday, March 7, 12