Handlebars & Require JS
0 likes924 views
The document outlines a roadmap for using RequireJS and Handlebars in building modular JavaScript applications, emphasizing the importance of separating concerns between logic and presentation. It discusses how to structure applications using an MVC framework, the advantages of using RequireJS for module loading, and the benefits of Handlebars for templating. It includes practical technical advice and examples for effective implementation of these tools in real projects.
![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>](https://image.slidesharecdn.com/l1requirehandlebars-150525154945-lva1-app6891/85/Handlebars-Require-JS-44-320.jpg)
![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>](https://image.slidesharecdn.com/l1requirehandlebars-150525154945-lva1-app6891/85/Handlebars-Require-JS-45-320.jpg)
Handlebars & Require JS
- 1. Gran Sasso Science Institute Ivano Malavolta Handlebars & Require JS
- 2. Roadmap • Introduction • Require JS • Handlebars • Conclusions
- 3. Some technical advices from a real project...
- 4. Some technical advices from a real project...
- 5. Some technical advices from a real project...
- 6. Some technical advices from a real project...
- 7. Some technical advices from a real project...
- 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. How you structure your applications
- 10. Roadmap • Introduction • Require JS • Handlebars • Conclusions
- 11. Require JS • Why Require JS • Using modules • Defining modules • Configuring Require JS
- 12. Why Require JS We are building apps, not websites 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. What we want to avoid uncontrolled scripts poor control flow understanding
- 14. RequireJS RequireJS is a JavaScript file and module loader Using a modular script loader like RequireJS 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. 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. Module example Technically, it is simply a function that executes immediately
- 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. Require JS • Why Require JS • Using modules • Defining modules • Configuring Require JS
- 19. Using modules main.js is the entry point of the app The main HTML:
- 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. Require JS • Why Require JS • Using modules • Defining modules • Configuring Require JS
- 22. Module without dependencies Always one module per file 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. 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. 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 67
- 25. Require JS • Why Require JS • Using modules • Defining modules • Configuring Require JS
- 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. Configuring Require JS Shims for older frameworks paths to used frameworks Dependent module usage
- 28. Roadmap • Introduction • Require JS • Handlebars • Conclusions
- 29. Handlebars • Why Handlebars • Handlebars basics • Usage with Backbone and Require JS
- 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. Handlebars • Why Handlebars • Handlebars basics • Usage with Backbone and Require JS
- 32. Example of template A handlebars expression is {{ something }}
- 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. 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. 1. create the template Templates are defined within a <script> tag or in external files
- 36. 2. compile the template Handlebars.compile is used to compile a template Compiling = obtaining a JS function representing the template
- 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 placeholders to be populated
- 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. Expressions The simplest expression is a simple identifier This expression means "look up the username property in the current context"
- 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 of the user"
- 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. 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. 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. 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. 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. 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. Handlebars • Why Handlebars • Handlebars basics • Usage with Backbone and Require JS
- 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. Example Dependency to template HTML file It contains a string Compiled template Execution of the template
- 51. Contact Ivano Malavolta | Gran Sasso Science Institute iivanoo [email protected] www.ivanomalavolta.com