Backbone.

js

Overview of backbone.js
Prepared by:

Stephen Frias
&
Nouie Boy Frias
• BackboneJS is a lightweight JavaScript library that allows to develop and structure the
client side applications that run in a web browser. It offers MVC framework which
abstracts data into models, DOM into views and bind these two using events.

• History − BackboneJS was developed by Jeremy Ashkenas and was initially released on
October 13th, 2010.

• When to use Backbone

• Consider you are creating an application with numerous lines of code using JavaScript or
jQuery. In this application, if you add or replace DOM elements to the application or make
some requests or show animation in the application or add more number of lines to your
code, then your application might become complicated.
• If you want a better design with less code, then it is better to use the BackboneJS library
that provides good functionality, is well organized and in a structured manner for
developing your application.
• BackboneJS communicates via events; this ensures that you do not mess up the
application. Your code will be cleaner, nicer and easy to maintain.
• Features
• The following are a list of features of BackboneJS :

• -BackboneJS allows developing of applications and the frontend in a much easier way by
using JavaScript functions.

• -BackboneJS provides various building blocks such as models, views, events, routers and
collections for assembling the client side web applications.

• -When a model changes, it automatically updates the HTML of your application.

• -BackboneJS is a simple library that helps in separating business and user interface logic.
• -It is free and open source library and contains over 100 available extensions.

• -It acts like a backbone for your project and helps to organize your code.

• -It manages the data model which includes the user data and displays that data at the
server side with the same format written at the client side.

• -BackboneJS has a soft dependency with jQuery and a hard dependency with
Underscore.js.

• -It allows to create client side web applications or mobile applications in a wellstructured
and an organized format.
• The BackboneJS gives a structure to the web applications that allows
to separate business logic and user interface logic. In this chapter, we
are going to discuss the architectural style of the BackboneJS
application for implementing user interfaces. The following diagram
shows the architecture of BackboneJS :
The architecture of BackboneJS contains the
following modules :
HTTP Request
Router
View
Events
Model
Collection
Data Source
Setting backbone.js
environment setup
Prepared by:
Demar Pahid
• BackboneJS is very easy to setup and work. This chapter will discuss
the download and setup of the BackboneJS Library.

BackboneJS can be used in the following two ways −

• Downloading UI library from its official website.
• Downloading UI library from CDNs.
Downloading the UI library from its official website
When you open the link http://backbonejs.org/, you will get to see a
screenshot as shown below −
As you can see, there are three options for download of this library −

Development Version − Right click on this button and save as and you get
the full source JavaScript library.

Production Version − Right click on this button and save as and you get the
Backbone-min.js library file which is packed and gzipped.

Edge Version − Right click on this button and save as and you get an
unreleased version, i.e., development is going on; hence you need to use it
at your own risk.
Dependencies

BackboneJS depends on the following JavaScript files −

Underscore.js − This is the only hard dependency which needs to be

included.
jQuery.js − Include this file for RESTful persistence, history support via
Backbone.Router and DOM manipulation with Backbone.View.
json2.js − Include this file for older Internet Explorer support.
Download UI Library from CDNs

• A CDN or Content Delivery Network is a network of servers designed

to serve files to users. If you use a CDN link in your web page, it
moves the responsibility of hosting files from your own servers to a
series of external ones. This also offers an advantage that if the visitor
to your webpage has already downloaded a copy of BackboneJS from
the same CDN, it won't have to be re-downloaded.
• As said above, BackboneJS has a dependency of the following
JavaScript −
• jQuery
• Underscore
 “BACKBONE.JS
VIEWS”

Prepared By:
Mark Jed Neis
&
James Lloyd Eag;le Montejo
Backbone.js Views

• The backbone.js Views specify how your data looks like. They
represent model’s data to the users. they can be used with any
Javascript template library. They handle users input events, bind
events and methods, render model and collection and interact with
users.
 Index Method Description

1. extend It is used to extend the backbone.view class to create a

custom vieew class.
2. initialize It is used to instantiate the view by using new keyword.
3. el It define which element to be used as the view
reference.
4. $el It represents the jQuery object for the view’s element.
5. setElement It specifies existing DOM element to a different DOM
element.
6. attributes They can used as DOM element aattributes on the view
class.
7. $(jQuery) It is used as selector that contains $function and runs
queries within the view elements.
8. template While rendering the view, template creates reusable
copies of markup and provides access to instance data.
9. render It contains the logic for rendering a template.
10. REMOVE It is used a view from the dom

11. delegateEvents It binids elements to the specific DOM

elements with callbacks methods to
handle events.

12. undelegateEvents It is used to remove delegate events

from the view.
 BACK BONE.JS
EVENTS

Report of :
JOHN ADRIAN D. MANTUA
&
LOUISE ALBERT ROFLO
S.No.Events & Description
1
"add"(model, collection, options)
It used when a model is added to the collection.
2
"remove"(model, collection, options)
It removes a model from the collection.
3
"reset"(collection, options)
It is used to reset the collection content.
4
"sort"(collection, options)
It is used when a collection needs to resorted.
5
"change"(model, options)
It is used when changes are to be made to a model's attributes.
6
"change:[attribute]"(model, value, options)
It is used when there is an update in an attribute.
7.
"destroy"(model, collection, options)
It fires when the model is destroyed.
8
"request"(model_or_collection, xhr, options)
It is used when a model or a collection starts requesting to the server.
9
"sync"(model_or_collection, resp, options)
It is used when a model or a collection is synced successfully with the server.
10
"error"(model_or_collection, resp, options)
It activates when there is an error in requesting to the server.
11
"invalid"(model, error, options)
When there is a fail in model validation, it returns invalid.
12
"route:[name]"(params)
When there is a specific route match, this event can be used.
13
"route"(route,params)
It is used when there is a match with any route.
14
"route"(router, route, params)
It is used by history when there is a match with any route.
15
"all" It fires for all the triggered events by the passing event name as the first argument.
 Backbone.JS - Model

John Vincent Montejo

and
Aljalim Indanan
• Models contain dynamic data and its logic. Logic such as conversions,
validations, computed properties and access control fall under the
Model category. As it contains all the application data, a model is also
called as the heart of JavaScript application.
The following table lists down all the methods which you can
use to manipulate the BackboneJS-Model −

• Methods & Description

• 1 extend
• It extends the backbone.Model class while creating your own backbone Model.
• 2 initialize
• When a model instance is created, the class's constructor gets called and it is
invoked by defining the initialize function when the model is created.
• 3 get
• It gets the value of an attribute on the model.
• 4 set
• It sets the value of an attribute in the model.
• 5 escape
• It is like the get function, but returns the HTML-escaped version of a model's
attribute.
•6 has
• Returns true, if attribute value defined with non-null value or non-
undefined value.
•7 unset
• It removes an attribute from a backbone model.
•8 clear
• Removes all attributes, including id attribute from a backbone model.
•9 id
• It uniquely identifies the model entity, that might be manually set when
a model is created or populated or when a model is saved on the server.
• 10 idAttribute
• Defines a model's unique identifier which contains the name of the
member of the class which will be used as id.
• 11 cid
• It is an auto generated client id by Backbone which uniquely
identifies the model on the client.
• 12 attributes
• Attributes defines property of a model.
• 13 changed
• Changes all the attributes that have changed after setting the
attributes using the set() method.
• 14 defaults
• Sets a default value to a model, that means if the user doesn't
specify any data, the model won't fall with an empty property.
• 15 toJSON
• Returns a copy of the attributes as an object for JSON
stringification.
• 16 sync
• It is used to communicate with the server and to represent the state of a
model.
• 17 fetch
• Accept the data from the server by delegating sync() method in the
model.
• 18 save
• Saves the data of the model by delegating to sync() method which reads
and saves the model every time when a Backbone calls it.
• 19 destroy
• Destroys or removes the model from the server by using the
Backbone.sync method which delegates the HTTP "delete" request.
• 20 validate
• If the input is invalid, it returns a specified error message or if the input
is valid, it doesn't specify anything and simply displays the result.
• 21 validationError
• It displays the validation error, if the validation fails or after the
invalid event is triggered.
• 22 isValid
• It checks the model state by using the validate() method and also
checks validations for each attribute.
• 23 url
• It is used for the instance of the model and returns the url to where
the model's resource is located.
• 24 urlRoot
• Enables the url function by using the model id to generate the URL.
• 25 parse
• Returns the model's data by passing through the response object
and represents the data in the JSON format.
UNDERSCORE METHODS
• 26 clone
• It is used to create a deep copy of a model or to copy one model object to another
object.
• 27 hasChanged
• Returns true, if the attribute gets changed since the last set.
• 28 isNew
• Determines whether the model is a new or an existing one.
• 29 changedAttributes
• It returns the model's attributes that have changed since the last set or else becomes
false, if there are no attributes.
• 30 previous
• It determines the previous value of the changed attribute.
• 31 previousAttributes
• Returns the state of the all the attributes prior to the last change event.
• _.keys(object)
• It is used to access the object's enumerable properties.
• _.values(object)
• It is used to get values of object's properties.
• _.pairs(object)
• It describes the object's properties in terms of key value pairs.
• _.invert(object)
• It returns the copy of object, in which keys have become the values
and vice versa.
• _.pick(object, *keys)
• It returns the copy of object and indicates which keys to pick up.
• _.omit(object, *keys)
• It returns the copy of object and indicates which keys to omit.
COLLECTIONS
• MARK FLORES
• ALJIE NABLE

• In a JavaScript. A Set is a collection of unique elements that can be of

any type. Set is also an ordered collection of elements, which means
that elements will be retrieved in the same order that they were
inserted in. A Set in JavaScript behaves the same way as a
mathematical set
• In JavaScript, objects are used to store multiple values as a complex data
structure.

• An object is created with curly braces {…} and a list of properties. A

property is a key-value pair where the key must be a string and the value
can be of any type.

• On the other hand, arrays are an ordered collection that can hold data of
any type. In JavaScript, arrays are created with square brackets [...] and
allow duplicate elements.
• Until ES6 (ECMAScript 2015), JavaScript objects and arrays were the
most important data structures to handle collections of data. The
developer community didn't have many choices outside of that. Even so,
a combination of objects and arrays was able to handle data in many
scenarios.

• However, there were a few shortcomings,

• Object keys can only be of type string.

• Objects don't maintain the order of the elements inserted into them.
• Objects lack some useful methods, which makes them difficult to use in
some situations. For example, you can't compute the size (length) of an
object easily. Also, enumerating an object is not that straightforward.

• Arrays are collections of elements that allow duplicates. Supporting arrays

that only have distinct elements requires extra logic and code.
Routing in Javascript
Prepared by:
Wilfredo Gabucan Jr.
Breen Cullen Saladaga
• Introduction
• Originally web applications consisted in interconnected html documents
that one could navigate through links between them. Every time a user
clicked a link on a website a new document would be generated in the
server and sent back to the browser to be rendered in their screen.
• Around the year 2005 the term Single-Page Application (SPA) became
popular. Said term encompassed a new way or architecting websites to
make them behave more like desktop applications: snappy, with graphical
animations and smooth transitions between links.
• This was achieved by taking advantage of javascript, html & css,
as new APIs became available to give the browser more native-
like capabilities.
• SPAs are based on a single document model. This means that
web applications’ lifespan happens on a single html page, along
with the transitions between the different views. But since links
no longer imply the fetching and generation of a new document,
how are those transitions modelled? they are achieved by using
a router.
 WHAT IS JAVASCRIPT ROUTER?

• A Javascript router is a key component in most frontend frameworks.

It is the piece of software in charge to organize the states of the
application, switching between different views. For example, the
router will render the login screen initially, and when the login is
successfull it will perform the transition to the user’s welcome
screen.
HOW IT WORKS?
• A Javascript router is a key component in most frontend frameworks.
It is the piece of software in charge to organize the states of the
application, switching between different views. For example, the
router will render the login screen initially, and when the login is
successfull it will perform the transition to the user’s welcome screen.
• Templates are just one way of describing the DOM that will be generated
when the transition from one route to the other is completed. The whole
javascript application will live in a div element.

• For the templates we match a template name with a function that will
generate javascript elements and append the resulting DOM to the div
where the application lives. This functionality in a real router would be taken
over by the templating engine. For the routes, we just do the mapping
between a route path and the corresponding template.

• What is left is to have the logic to detect changes in the URL and resolve
them to render the template. To do so, listen for the load & hashchange
events. The former fires then a document is loaded, and the latter when the
URL hash changes.