Gran Sasso Science Institute
Ivano Malavolta
Handlebars
& Require JS
Roadmap
•  Introduction
•  Require JS
•  Handlebars
•  Conclusions
I implemented all best practices and advices in this
pr...
Some technical advices from a real project...
Some technical advices from a real project...
Some technical advices from a real project...
Some technical advices from a real project...
Some technical advices from a real project...
How you structure your applications
MVC framework for
giving structure
File and module loader
for code modularization
Temp...
How you structure your applications
Roadmap
•  Introduction
•  Require JS
•  Handlebars
•  Conclusions
Require JS
•  Why Require JS
•  Using modules
•  Defining modules
•  Configuring Require JS
Why Require JS

We are building apps, not website

We need well-specified and isolated JS files/modules

Code complexity gro...
What we want to avoid






uncontrolled scripts
poor control flow understanding
Require JS
RequireJS is a JavaScript file and module loader
Using a modular script loader like Require JS will improve the ...
The module pattern
A JavaScript code module is some JavaScript code located in a registered location (e.g., a function)

A...
Module example

Technically, it is simply a function that executes immediately
Module VS script files






A module is different from a traditional script file in that it defines a well-scoped object tha...
Require JS
•  Why Require JS
•  Using modules
•  Defining modules
•  Configuring Require JS
Using modules
main.js is the entry point of the app
The main HTML:
The main JS file:
Using modules
This function is called when all dependencies are loaded

If a required module calls define(...
Require JS
•  Why Require JS
•  Using modules
•  Defining modules
•  Configuring Require JS
Module without dependencies
 Always one module per files 
Public variables
Setup code
the simplest module can be a plain
co...
Module with dependencies
Dependency 
definition
Dependent module reference
Dependent module
usage
This function is called w...
Require JS under the hoods...
1.  loads each dependency as a script tag, using head.appendChild() and waits for all depend...
Require JS
•  Why Require JS
•  Using modules
•  Defining modules
•  Configuring Require JS
Configuring Require JS
Require refers to a global configuration options

It allows developers to:
•  set the paths to all us...
Configuring Require JS
Shims for older
frameworks
paths to used frameworks
Dependent module
usage
Roadmap
•  Introduction
•  Require JS
•  Handlebars
•  Conclusions
Handlebars
•  Why Handlebars
•  Handlebars basics
•  Usage with Backbone and Require JS
Why Handlebars
We want to separate presentation from logic
TRANSLATE TO: we don’t want to put any HTML element into JavaSc...
Handlebars
•  Why Handlebars
•  Handlebars basics
•  Usage with Backbone and Require JS
Example of template
A handlebars expression is 

{{ something  }}
Escape values
Handlebars HTML-escapes all the values returned by an {{expression}}

If you don't want Handlebars to escape...
Populate your template
The recurrent process of obtaining a populated template is the following:

1.  create the template ...
1. create the template

Templates are defined within a <script>	
  tag or in external files
2. compile the template
	
  
Handlebars.compile is used to compile a template




Compiling = obtaining a JS object repres...
3. create a context for the template
	
  
A context is a Javascript object used to populate a template






Here the keys...
4. obtain the final HTML fragment
	
  
You have to execute a template with a context in order to get its corresponding HTML...
Expressions
	
  
The simplest expression is a simple identifier





This expression means 
"look up the username  property...
Expressions with paths
Handlebars expressions can also be dot-separated paths






This expression means 

"look up the u...
Helpers
Helpers are Javascript functions that return HTML code









You should return a Handlebars SafeString if you d...
Calling helpers
A Handlebars helper call is a simple identifier, followed by zero or more parameters

Each parameter is a H...
Built-in helpers


It shifts the context for a section of a template
with
<div	
  class="entry“>	
  
<h1>{{title}}</h1>	
 ...
Built-in helpers


To iterate over a list
each
Inside the block, you can use 
this 
to reference the element being iterate...
Built-in helpers


It renders the block if its argument is not equal to false,	
  undefined,	
  null,	
  []	
  
If / Else
...
handlebars summary
Each Template can contain Expressions and Helpers operating on them

The main helpers are: 
•  with	
  ...
Handlebars
•  Why Handlebars
•  Handlebars basics
•  Usage with Backbone and Require JS
Usage with Backbone and Require JS
Templates can be seen as special modules


So we can have the following:

•  a separate...
Example
Dependency to template HTML file
It contains a string 
Compiled template
Execution of the template
References
http://backbonejs.org
http://requirejs.org
http://handlebarsjs.com
https://github.com/iivanoo/cordovaboilerplat...
+ 39 380 70 21 600
Contact
Ivano Malavolta |
Gran Sasso Science Institute
iivanoo
ivano.malavolta@univaq.it
www.ivanomalav...
Upcoming SlideShare
Loading in...5
×

Handlebars and Require.js

1,882

Published on

Introduction
Require JS
Handlebars

This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.

http://www.ivanomalavolta.com

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,882
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
74
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Handlebars and Require.js

  1. 1. Gran Sasso Science Institute Ivano Malavolta Handlebars & Require JS
  2. 2. Roadmap •  Introduction •  Require JS •  Handlebars •  Conclusions I implemented all best practices and advices in this presentation in a generic app template available here: https://github.com/iivanoo/cordovaboilerplate
  3. 3. Some technical advices from a real project...
  4. 4. Some technical advices from a real project...
  5. 5. Some technical advices from a real project...
  6. 6. Some technical advices from a real project...
  7. 7. Some technical advices from a real project...
  8. 8. How you structure your applications MVC framework for giving structure File and module loader for code modularization Templating engine for separation of concerns
  9. 9. How you structure your applications
  10. 10. Roadmap •  Introduction •  Require JS •  Handlebars •  Conclusions
  11. 11. Require JS •  Why Require JS •  Using modules •  Defining modules •  Configuring Require JS
  12. 12. Why Require JS We are building apps, not website We need well-specified and isolated JS files/modules Code complexity grows as the app gets bigger à we need some sort of #include/import/require   à ability to load nested dependencies
  13. 13. What we want to avoid uncontrolled scripts poor control flow understanding
  14. 14. Require JS RequireJS is a JavaScript file and module loader Using a modular script loader like Require JS will improve the modularity of your code à  speed in implementing changes à  better undestanding of the code Require JS allows modules to be loaded as fast as possible, even out of order, but evaluated in the correct dependency order Built on the Module Pattern JavaScript file and module loader
  15. 15. The module pattern A JavaScript code module is some JavaScript code located in a registered location (e.g., a function) All of the code that runs inside the function lives in a closure, which provides •  privacy •  state throughout the lifetime of the module
  16. 16. Module example Technically, it is simply a function that executes immediately
  17. 17. Module VS script files A module is different from a traditional script file in that it defines a well-scoped object that avoids polluting the global namespace à its retained objects can be deleted by the GC It can explicitly list its dependencies and get a handle on those dependencies without needing to refer to global objects, but instead receive the dependencies as arguments to the function that defines the module VS
  18. 18. Require JS •  Why Require JS •  Using modules •  Defining modules •  Configuring Require JS
  19. 19. Using modules main.js is the entry point of the app The main HTML:
  20. 20. The main JS file: Using modules This function is called when all dependencies are loaded If a required module calls define(), then this function is not fired until its dependencies have been loaded Required modules References to required modules
  21. 21. Require JS •  Why Require JS •  Using modules •  Defining modules •  Configuring Require JS
  22. 22. Module without dependencies Always one module per files Public variables Setup code the simplest module can be a plain collection of name/value pairs module with initialization The returned element can be any valid JS element By convention I always return an object representing the module
  23. 23. Module with dependencies Dependency definition Dependent module reference Dependent module usage This function is called when zepto.js is loaded. If zepto.js calls define(), then this function is not fired until also zepto’s dependencies have loaded
  24. 24. Require JS under the hoods... 1.  loads each dependency as a script tag, using head.appendChild() and waits for all dependencies to load 2.  computes the right order in which to call the functions that define the modules 3.  calls the module definition functions of each dependency in the right order main.js jQuery Backbone SpinJS MoviesCollection MovieModel MoviesView 1 2 3 4 5 6 7
  25. 25. Require JS •  Why Require JS •  Using modules •  Defining modules •  Configuring Require JS
  26. 26. Configuring Require JS Require refers to a global configuration options It allows developers to: •  set the paths to all used frameworks in one place •  use older frameworks as modules (shim) •  define configuration params for the modules •  etc.
  27. 27. Configuring Require JS Shims for older frameworks paths to used frameworks Dependent module usage
  28. 28. Roadmap •  Introduction •  Require JS •  Handlebars •  Conclusions
  29. 29. Handlebars •  Why Handlebars •  Handlebars basics •  Usage with Backbone and Require JS
  30. 30. Why Handlebars We want to separate presentation from logic TRANSLATE TO: we don’t want to put any HTML element into JavaScript code separate logic from presentation Imagine yourself trying to change how a movie should be rendered in your app...
  31. 31. Handlebars •  Why Handlebars •  Handlebars basics •  Usage with Backbone and Require JS
  32. 32. Example of template A handlebars expression is {{ something  }}
  33. 33. Escape values Handlebars HTML-escapes all the values returned by an {{expression}} If you don't want Handlebars to escape a value, use the "triple-stash“ à {{{ expression }}}
  34. 34. Populate your template The recurrent process of obtaining a populated template is the following: 1.  create the template T with its placeholders {{ - }} 2.  compile the template into a JavaScript function t 3.  create a context CT containing the actual values for placeholders 4.  run the compiled template t(CT) to obtain the final HTML fragment
  35. 35. 1. create the template Templates are defined within a <script>  tag or in external files
  36. 36. 2. compile the template   Handlebars.compile is used to compile a template Compiling = obtaining a JS object representing the template
  37. 37. 3. create a context for the template   A context is a Javascript object used to populate a template Here the keys of the object must match with the name of the placeholder to be populated
  38. 38. 4. obtain the final HTML fragment   You have to execute a template with a context in order to get its corresponding HTML code
  39. 39. Expressions   The simplest expression is a simple identifier This expression means "look up the username  property in the current context"
  40. 40. Expressions with paths Handlebars expressions can also be dot-separated paths This expression means "look up the user property in the current context, then look up the username property in the result"
  41. 41. Helpers Helpers are Javascript functions that return HTML code You should return a Handlebars SafeString if you don't want it to be escaped by default
  42. 42. Calling helpers A Handlebars helper call is a simple identifier, followed by zero or more parameters Each parameter is a Handlebars expression es. {{  test  user  }}   In this case, test is the name of the Handlebars helper, and user is a parameter to the helper
  43. 43. Built-in helpers It shifts the context for a section of a template with <div  class="entry“>   <h1>{{title}}</h1>   {{#with  author}}    <h2>By  {{firstName}}  {{lastName}}</h2>   {{/with}}   </div>     {  title:  "My  first  post!",          author:  {  firstName:  “Ivano",  lastName:  “Malavolta"  }   }     <div  class="entry“>   <h1>My  first  post!</h1>   <h2>By  Ivano  Malavolta</h2>   </div>    
  44. 44. Built-in helpers To iterate over a list each Inside the block, you can use this to reference the element being iterated <ul  class="people_list">      {{#each  people}}        <li>{{this}}</li>      {{/each}}    </ul>     {  people:  [  “Ivano",  “Andrea",  “Paolo"  ]  }     <ul  class="people_list">        <li>Ivano</li>      <li>Andrea</li>      <li>Paolo</li>   </ul>    
  45. 45. Built-in helpers It renders the block if its argument is not equal to false,  undefined,  null,  []   If / Else The unless helper is the inverse of if <div  class="entry“>   <h1>{{title}}</h1>   {{#if  author}}    <h2>By  {{firstName}}  {{lastName}}</h2>   {{#else}}    <h2>Unknown  author</h1>     {{/if}}   {  title:  "My  first  post!",          author:  undefined  }   }     <div  class="entry“>   <h1>My  first  post!</h1>   <h2>Unknown  author</h2>   </div>    
  46. 46. handlebars summary Each Template can contain Expressions and Helpers operating on them The main helpers are: •  with   •  each   •  if  /  else  /unless   You can define your own Helpers that operate on expressions, they return HTML code A template can be (pre)-compiled and must be executed with a context in order to return the final HTML fragment
  47. 47. Handlebars •  Why Handlebars •  Handlebars basics •  Usage with Backbone and Require JS
  48. 48. Usage with Backbone and Require JS Templates can be seen as special modules So we can have the following: •  a separate HTML file for each template •  a Backbone view can have a dependency to each template •  the template can be executed by using a JSON object of the Backbone model as context
  49. 49. Example Dependency to template HTML file It contains a string Compiled template Execution of the template
  50. 50. References http://backbonejs.org http://requirejs.org http://handlebarsjs.com https://github.com/iivanoo/cordovaboilerplate
  51. 51. + 39 380 70 21 600 Contact Ivano Malavolta | Gran Sasso Science Institute iivanoo ivano.malavolta@univaq.it www.ivanomalavolta.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×