templates and the single-page app of the future

templates and the single-page app of the future

Introduction to templates, how we got to here, and the role of JavaScript templating in client-side, server-side, and full-stack applications and frameworks.

76f795cabbf80024b1024517c67f0bcf?s=128

Garann Means

March 07, 2012
Tweet

Transcript

  1. Templates and the single-page app of the future! Wednesday, March

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

  3. 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
  4. ye old templating Wednesday, March 7, 12

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

    %> </head> <body> <p>Result: <%call vbproc(3,4)%></p> </body> </html> Wednesday, March 7, 12
  6. templates circa ajax server client server page ajax template template

    template template template template template template template ajax Wednesday, March 7, 12
  7. templates post-ajax ☞rendering via dom manipulation ☞decoupled server-side ☞fallback for

    non-js clients ☞tied to request-response Wednesday, March 7, 12
  8. templates post-ajax Wednesday, March 7, 12

  9. 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
  10. templates post-post-ajax Wednesday, March 7, 12

  11. the contenders Wednesday, March 7, 12

  12. 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
  13. 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
  14. remember this? <html> <head> <% sub vbproc(num1,num2) response.write(num1*num2) end sub

    %> </head> <body> <p>Result: <%call vbproc(3,4)%></p> </body> </html> Wednesday, March 7, 12
  15. what everyone’s so upset about <html> <head> </head> <body> <p>Result:

    <%= num1*num2 %></p> </body> </html> Wednesday, March 7, 12
  16. string concatenation ☞how it’s (mostly) done ☞fast ☞flexible ☞output not

    really reusable ☞have to search for individual elements Wednesday, March 7, 12
  17. 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
  18. 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
  19. 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
  20. rendering vs. manipulation Wednesday, March 7, 12

  21. simple template <h1>Welcome back, {{username}}!</h1> <h2>Your friends:</h2> <p> {{#friends}} <a

    href=”/user/{{name}}”>{{name}}</a> {{#if online}} <span class=”online”>online</span> {{/if}} {{/friends}} </p> Wednesday, March 7, 12
  22. data var userObj = { username: “tmplM4st3r”, friends: [ {

    name: “1337tmpls”, online: true }, { name: “hbars4lyfe”, online: true }, { name: “belieber42”, online: false } ] }; Wednesday, March 7, 12
  23. rendered <h1>Welcome back, tmplM4st3r!</h1> <h2>Your friends:</h2> <p> <a href=”/user/1337tmpls”>1337tmpls</a> <span

    class=”online”>online</span> <a href=”/user/hbars4lyfe”>hbars4lyfe</a> <span class=”online”>online</span> <a href=”/user/belieber42”>belieber42</a> </p> Wednesday, March 7, 12
  24. 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
  25. 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
  26. 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
  27. 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
  28. alternatively socket.on( “friendOffline”, function( friend ) { $( “a[data-name=” +

    friend.name + “]” ) .next( “span” ) .remove(); }); Wednesday, March 7, 12
  29. But what if.. <h1>Welcome back, {{username}}!</h1> <h2>Your friends:</h2> <p> {{#friends}}

    <div data-name=”{{name}}”> {{> friend }} </div> {{/friends}} </p> Wednesday, March 7, 12
  30. defining a partial Handlebars.registerPartial( ‘friend’, ‘<a href=”/user/{{name}}”>{{name}}</a>’ + ‘{{#if online}}’

    + ‘<span class=”online”>online</span>’ + ‘{{/if}}’ ); var friendTmpl = “{{> friend }}”; Wednesday, March 7, 12
  31. and so! socket.on( “friendOffline”, function( friend ) { $( “div[data-name=”

    + friend.name + “]” ) .html( friendTmpl( friend ) ); }); Wednesday, March 7, 12
  32. 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
  33. client-side architectures Wednesday, March 7, 12

  34. 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
  35. a “view” ☞the template ☞its container/rendering target ☞view-model/transformation logic ☞event

    handling? ☞actually a bunch of stuff Wednesday, March 7, 12
  36. 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
  37. 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
  38. templates without mvc ☞decoupled from data models ☞context passed in

    ☞probably pub/sub ☞agnostic templates may be easier to share Wednesday, March 7, 12
  39. node.js Wednesday, March 7, 12

  40. not dissimilar from client Wednesday, March 7, 12

  41. server-side uses ☞initial load ☞full-page rendering ☞server-side compilation (hogan.js) ☞rendered

    html snippets Wednesday, March 7, 12
  42. 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
  43. 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
  44. 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
  45. full-stack templates Wednesday, March 7, 12

  46. 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
  47. shared access ☞easiest to use same loader ☞commonjs is pretty..

    common ☞no need to create two versions Wednesday, March 7, 12
  48. managing partials ☞can be difficult depending on template engine ☞argues

    for larger templates ☞namespaces work differently ☞scope unreliable Wednesday, March 7, 12
  49. works for handlebars tho? Wednesday, March 7, 12

  50. 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
  51. thanks! Wednesday, March 7, 12

  52. 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