Handlebars and Require.js
-
Upload
ivano-malavolta -
Category
Technology
-
view
1.464 -
download
0
description
Transcript of Handlebars and Require.js
![Page 1: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/1.jpg)
Gran Sasso Science Institute
Ivano Malavolta
Handlebars & Require JS
![Page 2: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/2.jpg)
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
![Page 3: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/3.jpg)
Some technical advices from a real project...
![Page 4: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/4.jpg)
Some technical advices from a real project...
![Page 5: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/5.jpg)
Some technical advices from a real project...
![Page 6: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/6.jpg)
Some technical advices from a real project...
![Page 7: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/7.jpg)
Some technical advices from a real project...
![Page 8: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/8.jpg)
How you structure your applications
MVC framework for giving structure
File and module loader for code modularization
Templating engine for separation of concerns
![Page 9: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/9.jpg)
How you structure your applications
![Page 10: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/10.jpg)
Roadmap
• Introduction
• Require JS
• Handlebars
• Conclusions
![Page 11: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/11.jpg)
Require JS
• Why Require JS
• Using modules
• Defining modules
• Configuring Require JS
![Page 12: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/12.jpg)
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
![Page 13: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/13.jpg)
What we want to avoid
uncontrolled scripts
poor control flow understanding
![Page 14: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/14.jpg)
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
![Page 15: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/15.jpg)
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
![Page 16: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/16.jpg)
Module example
Technically, it is simply a function that executes immediately
![Page 17: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/17.jpg)
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
![Page 18: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/18.jpg)
Require JS
• Why Require JS
• Using modules
• Defining modules
• Configuring Require JS
![Page 19: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/19.jpg)
Using modules
main.js is the entry point of the app
The main HTML:
![Page 20: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/20.jpg)
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
![Page 21: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/21.jpg)
Require JS
• Why Require JS
• Using modules
• Defining modules
• Configuring Require JS
![Page 22: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/22.jpg)
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
![Page 23: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/23.jpg)
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
![Page 24: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/24.jpg)
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
![Page 25: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/25.jpg)
Require JS
• Why Require JS
• Using modules
• Defining modules
• Configuring Require JS
![Page 26: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/26.jpg)
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.
![Page 27: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/27.jpg)
Configuring Require JS
Shims for older frameworks
paths to used frameworks
Dependent module usage
![Page 28: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/28.jpg)
Roadmap
• Introduction
• Require JS
• Handlebars
• Conclusions
![Page 29: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/29.jpg)
Handlebars
• Why Handlebars
• Handlebars basics
• Usage with Backbone and Require JS
![Page 30: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/30.jpg)
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...
![Page 31: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/31.jpg)
Handlebars
• Why Handlebars
• Handlebars basics
• Usage with Backbone and Require JS
![Page 32: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/32.jpg)
Example of template
A handlebars expression is
{{ something }}
![Page 33: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/33.jpg)
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 }}}
![Page 34: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/34.jpg)
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
![Page 35: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/35.jpg)
1. create the template
Templates are defined within a <script> tag or in external files
![Page 36: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/36.jpg)
2. compile the template
Handlebars.compile is used to compile a template
Compiling = obtaining a JS object representing the template
![Page 37: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/37.jpg)
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
![Page 38: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/38.jpg)
4. obtain the final HTML fragment
You have to execute a template with a context in order to get its corresponding HTML code
![Page 39: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/39.jpg)
Expressions
The simplest expression is a simple identifier
This expression means "look up the username property in the current context"
![Page 40: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/40.jpg)
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"
![Page 41: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/41.jpg)
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
![Page 42: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/42.jpg)
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
![Page 43: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/43.jpg)
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>
![Page 44: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/44.jpg)
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>
![Page 45: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/45.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}} </div>
{ title: "My first post!", author: undefined } }
<div class="entry“> <h1>My first post!</h1> <h2>Unknown author</h2> </div>
![Page 46: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/46.jpg)
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
![Page 47: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/47.jpg)
Handlebars
• Why Handlebars
• Handlebars basics
• Usage with Backbone and Require JS
![Page 48: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/48.jpg)
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
![Page 49: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/49.jpg)
Example
Dependency to template HTML file
It contains a string
Compiled template
Execution of the template
![Page 50: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/50.jpg)
References
http://backbonejs.org http://requirejs.org
http://handlebarsjs.com https://github.com/iivanoo/cordovaboilerplate
![Page 51: Handlebars and Require.js](https://reader033.fdocuments.net/reader033/viewer/2022042714/554af34eb4c9059f798b4be9/html5/thumbnails/51.jpg)
+ 39 380 70 21 600 Contact
Ivano Malavolta | Gran Sasso Science Institute
iivanoo
www.ivanomalavolta.com