JsRender Fundamentals: Templating for HTML5 Applications

This is a JsRender Fundamentals presentation I gave at the Spring 2012 DevConnections conference in Las Vegas. It covers some of the key topics you need to know to build web applications with JsRender. Learn how JsRender brings a new templating library to HTML5 development that has a code-less tag syntax, high performance, no dependency on jQuery nor a DOM, supports creating custom functions, and uses pure string-based rendering.

Transcript

1. @JOHN_PAPA
   @JOHN_PAPA
   

   View Slide

2. @JOHN_PAPA
   

   View Slide

3. @JOHN_PAPA
   

   View Slide

4. @JOHN_PAPA
   
   
   
   
   
   
   
   
   
   

   View Slide

5. @JOHN_PAPA
   var i = 1;
   $(movies).each(function () {
   var movie = this;
   $("#movieContainer").append(
   "" + i++ + ": " + movie.name + " ("
   + movie.releaseYear + ")");
   });
   

   View Slide

6. @JOHN_PAPA
   

   View Slide

7. @JOHN_PAPA
   

   View Slide

8. @JOHN_PAPA
   $("#myContainer").html(
   $("#movieTemplate").render(movies)
   );
   <br/><div>{{:name}}</div><br/><div>Year Released: {{:releaseYear}}</div><br/>
   
   

   View Slide

9. @JOHN_PAPA
   

   View Slide

10. @JOHN_PAPA
    Var tmplString = "{{:firstName}}";
    var myTmpl = $.templates(tmplString);
    htmlString = myTmpl.render(myData);
    $("#myDiv").html(htmlString);
    var htmlString = $("#myTmpl").render(myData);
    $("#myDiv").html(htmlString);
    

    View Slide

11. @JOHN_PAPA
    

    View Slide

12. @JOHN_PAPA
    {{for employees}}
    
    
    {{/for}}
    

    View Slide

13. @JOHN_PAPA
    

    View Slide

14. @JOHN_PAPA
    {{if expression1}} ... {{/if}}
    {{if expression1}}
    {{else expression2}}
    {{/if}}
    {{if val1 !== val2}} ... {{/if}}
    {{: (val1> val2) ? "this" : "that"}}
    

    View Slide

15. @JOHN_PAPA
    

    View Slide

16. @JOHN_PAPA
    
    
    
    
    
    
    

    View Slide

17. @JOHN_PAPA
    @JOHN_PAPA
    

    View Slide