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.

Transcript

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

   View Slide

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

   View Slide

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
   

   View Slide

4. ye old templating
   Wednesday, March 7, 12
   

   View Slide

5. remember this:
   
   
   <%
   sub vbproc(num1,num2)
   response.write(num1*num2)
   end sub
   %>
   
   
   Result: <%call vbproc(3,4)%>
   
   
   Wednesday, March 7, 12
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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

    View Slide

11. the contenders
    Wednesday, March 7, 12
    

    View Slide

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
    

    View Slide

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
    

    View Slide

14. remember this?
    
    
    <%
    sub vbproc(num1,num2)
    response.write(num1*num2)
    end sub
    %>
    
    
    Result: <%call vbproc(3,4)%>
    
    
    Wednesday, March 7, 12
    

    View Slide

15. what everyone’s so upset
    about
    
    
    
    
    Result: <%= num1*num2 %>
    
    
    Wednesday, March 7, 12
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

20. rendering vs.
    manipulation
    Wednesday, March 7, 12
    

    View Slide

21. simple template
    Welcome back, {{username}}!
    Your friends:
    
    {{#friends}}
    {{name}}
    {{#if online}}
    online
    {{/if}}
    {{/friends}}
    
    Wednesday, March 7, 12
    

    View Slide

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

    View Slide

23. rendered
    Welcome back, tmplM4st3r!
    Your friends:
    
    1337tmpls
    online
    hbars4lyfe
    online
    belieber42
    
    Wednesday, March 7, 12
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

29. But what if..
    Welcome back, {{username}}!
    Your friends:
    
    {{#friends}}
    
    {{> friend }}
    
    {{/friends}}
    
    Wednesday, March 7, 12
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

33. client-side
    architectures
    Wednesday, March 7, 12
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

39. node.js
    Wednesday, March 7, 12
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

45. full-stack templates
    Wednesday, March 7, 12
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

49. works for handlebars tho?
    Wednesday, March 7, 12
    

    View Slide

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
    

    View Slide

51. thanks!
    Wednesday, March 7, 12
    

    View Slide

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
    

    View Slide