Slides of a talk of a seminars series I gave at WebRatio in January 2014.
I implemented many best practices and advices in this presentation in a generic app template available here: https://github.com/iivanoo/cordovaboilerplate
3. Introduction
We are building apps, not web sites
If your code is not structured:
•
it is extremely easy that your web app becomes a
big mess of HTML + CSS + JavaScript
•
maintaining each part of your app asks for a
deep analysis of ALL its aspects (logic, presentation, etc.)
•
you may waste a whole day due to a missing <
4. What we want to avoid
Imagine yourself trying to change
•
•
how a movie should be rendered in your app
the REST API providing info about movies
10. How I structure my applications
MVC framework for
giving structure
File and module loader
for code modularization
Templating engine for
separation of concerns
Disclaimer
this is MY way to structure apps, you can follow yours
15. Why Backbone
Additionally, Backbone provides also features for:
sync
for managing how to persist models (default is via REST)
events
for managing how data and control are exchanged within your app
router
for managing the interaction flow among views
18. Events
Any object communicates with other objects via events
It gives the object the ability to bind and trigger custom named events
It is extremely useful for exchanging data and control among objects
25. Models
MVC: Notify their observers about
state using the Observer pattern
Models represent your data
Each model represents a data type in your app, together with the logic surrounding it, like:
•
•
•
•
•
persistence
conversions
validation
computed properties
access control
26. Models
You extend Backbone.Model with your domain-specific methods, and Model provides a basic set of
functionality for managing changes, like:
•
•
•
•
getter and setter
id
constructor
REST-based persistence
27. Example of model
custom method
an attribute
event fired when
“color” changes
custom method
invocation
28. Model constructore and attributes
initialize()
it is triggered every time you create a new instance of a model
it works also for collections and views
it can take a JS object for setting also attributes
get() & set()
they are used to set and retrieve the value of certain attributes
defaults
a property named 'defaults' in your model declaration
30. Model persistence
Backbone.sync
is the function that Backbone calls every time it attempts to read or save a model
By default, it uses Ajax to make a REST-ish request to a server
Resources represented
as JSON strings
31. Sync signature
sync(method, model, [options])
method
the CRUD method ("create“, "read“, "update", or "delete")
model
the model (or collection) to be synced
example of overriden sync:
http://bit.ly/KWdxNN
options
success and error callbacks, and all other jQuery request options
Sync returns a jQuery XMLHttpRequest (jqXHR) object
It implements the Promise
interface
32. Sync usage
Normally you will not use the sync method directly, you will do it implicitly when you call one of these
methods
Model
•
•
•
fetch: gets the most up-to-date values of the model instance
save: persists the model instance
destroy: deletes the model instance
Collection
•
•
fetch: gets all the models of the collection from the server
create: creates a model, saves it to the server and adds it to the collection
33. Overriding sync
You can override it in order to use a different persistence strategy, such as:
•
•
•
WebSockets
Local Storage
WebSQL
Backbone.sync is the default global function that all models use unless the models have a sync method
specifically set
36. Collections
MVC: Notify their observers about
state using the Observer pattern
(same as models)
Collections are ordered sets of models
You can:
•
•
•
•
Any event that is triggered on a model in a collection will
also be triggered on the collection directly
bind change events to be notified when any model in the collection has been modified
listen for add and remove events
fetch the collection from the server (or other persistence layers)
find models or filter collections themeselves
The model attribute of a collection represents the kind of model that can be stored in it
40. Views
Views represent and manage the visible parts of your application
MVC: observe models, and update
itself according to the state of the
models + manage user inputs (it’s a
controller, to this sense)
They are also used to
•
•
listen to interaction events
and react accordingly
views can be rendered at any time, and inserted into the DOM
you get high-performance UI rendering
with as few reflows and repaints as possible
41. Interaction with the DOM
All views refer to a DOM element at all times, even if they are already in the page or not
this.el is a reference to the DOM element, it is created from:
tagName
for example body, ul, span, img
className
class name of some element within the DOM
id
id of an element within the DOM
If none of them is specified,
this.el is an empty <div>
42. Rendering the view
The render() method is used to update the this.el element with the new HTML
The default implementation of render() is a no-op
you have to override it to update this.el with your HTML code
Backbone is agnostic with respect to your code in render(), however...
you are STRONGLY encouraged to use a
Javascript templating library here
47. The router
Backbone.Router provides methods for routing client-side pages,
and connecting them to actions and events
At a minimum, a router is composed of two main parts:
routes
an hash that pairs routes to actions
actions
JS functions triggered when certain routes are navigated
48. Routing
Every router contains an hash that maps routes to functions on your router
URLs fragments can also contain dynamic data via Backbone-specific URL parts:
parameter (:param)
match a single URL component between slashes
splat (*fragment)
match any number of URL components
50. History
History serves as a global router to
1. handle hashchange events
Technically, it uses the HTML5 History
API to listen to to its job
For older browsers, it uses URL hash
fragments as fallback
2. match the appropriate route
3. trigger callbacks
You should never access it directly, you just need call Backbone.history.start() to begin
monitoring hashchange events, and dispatching routes in your app
Call Backbone.history.navigate(ROUTE_NAME, {trigger: true}); to activate a specific route
of the router
53. Classical workflow
1. You dig into JSON objects
2. Look up elements in the DOM
3. Update the HTML by hand
54. Backbone-based workflow
•
You organize your interface into logical views backed by models
•
Each view can be updated independently when the model changes,
without having to redraw the page
You can bind your view‘s render()
function to the model‘s "change”
event
now everywhere that model
data is displayed in the UI, it is
always immediately up to date
55. Is Backbone real MVC?
Let’s look at the description of the Model-View-Presenter pattern on Wikipedia:
Model
an interface defining the data to be displayed or otherwise acted upon in the user interface
View
passive interface that displays data (the model) and routes user commands (events) to the
presenter to act upon that data
Presenter
acts upon the model and the view. It retrieves data from repositories (the model), and formats it
for display in the view
58. 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
59. What we want to avoid
uncontrolled scripts
poor control flow understanding
60. Require JS
JavaScript and module loader
RequireJS is a JavaScript file 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
61. 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
63. Module VS script files
VS
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
66. Using modules
Required modules
The main JS file:
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
References to
required modules
68. Module without dependencies
Always one module per files
the simplest module can be a plain
collection of name/value pairs
module with initialization
Setup code
Public variables
The returned element can be any valid JS element
By convention I always return an object representing the module
69. Module with dependencies
Dependent module reference
Dependency
definition
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
Dependent module usage
70. 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
1
4
3
jQuery
Backbone
MovieModel
5
MoviesCollection
2
7
SpinJS
main.js
6
MoviesView
72. 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.
76. Why Handlebars
separate logic from from logic
We want to separate presentationpresentation
TRANSLATE TO: we don’t want to put any HTML element into JavaScript code
Imagine yourself trying to change how a movie should be rendered in
your app...
79. 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 }}}
80. 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
81. 1. create the template
Templates are defined within a <script> tag or in external files
82. 2. compile the template
Handlebars.compile is used to compile a template
Compiling = obtaining a JS object representing the template
83. 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
84. 4. obtain the final HTML fragment
You have to execute a template with a context in order to get its corresponding HTML code
86. 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"
87. 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
88. 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
89. Built-in helpers
with
It shifts the context for a section of a template
{ title: "My first post!",
author: { firstName: “Ivano", lastName: “Malavolta" }
}
<div class="entry“>
<h1>{{title}}</h1>
{{#with author}}
<h2>By {{firstName}} {{lastName}}</h2>
{{/with}}
</div>
<div class="entry“>
<h1>My first post!</h1>
<h2>By Ivano Malavolta</h2>
</div>
90. Built-in helpers
Inside the block, you can use
this
to reference the element being iterated
each
To iterate over a list
{ people: [ “Ivano", “Andrea", “Paolo" ] }
<ul class="people_list">
{{#each people}}
<li>{{this}}</li>
{{/each}}
</ul>
<ul class="people_list">
<li>Ivano</li>
<li>Andrea</li>
<li>Paolo</li>
</ul>
91. Built-in helpers
The unless helper is the inverse of if
If / Else
It renders the block if its argument is not equal to false, undefined, null, []
{ title: "My first post!",
author: undefined }
}
<div class="entry“>
<h1>{{title}}</h1>
{{#if author}}
<h2>By {{firstName}} {{lastName}}</h2>
{{#else}}
<h2>Unknown author</h1>
{{/if}}
<div class="entry“>
<h1>My first post!</h1>
<h2>Unknown author</h2>
</div>
92. 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
94. 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