SlideShare ist ein Scribd-Unternehmen logo
1 von 49
Downloaden Sie, um offline zu lesen
Gran Sasso Science Institute
Ivano Malavolta
Backbone JS
Roadmap
•  Why Backbone
•  Events
•  Models
•  Collections
•  Views
•  Routers
•  Summary
Why Backbone
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 	
  <	
  
Why Backbone

Backbone gives you
 STRUCTURE
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
Why Backbone

From the Backbone website...
manipulate 
the DOM
lists 
of models
represent 
data
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
Who is using Backbone?
Roadmap
•  Why Backbone
•  Events
•  Models
•  Collections
•  Views
•  Routers
•  Summary
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
Events


Basically, each object can:
•  listen to events
•  trigger events
Events
Two types of events:





you define your own types of event
built-in
custom
Events API
object will react to the “alert” event

(the “off” function detaches the event)
event parameters
the “alert” event is
fired
Events API
Events methods:
on


object.on(event, callback, [context])
off


object.off([event], [callback], [context])
once


object.once(event, callback, [context])
trigger


object.trigger(event, [*args])

listenTo

object.listenTo(other, event, callback)
stopListening

object.stopListening([other], [event], [callback]) 
listenToOnce

object.listenToOnce(other, event, callback)
Events summary
Roadmap
•  Why Backbone
•  Events
•  Models
•  Collections
•  Views
•  Routers
•  Summary
Models

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
MVC: Notify their observers about
state using the Observer pattern
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
Example of model
custom method
g an attribute
event fired when
“color” changes
custom method
invocation
Model constructor 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
Example
http://goo.gl/UOahsP
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
Sync signature
sync(method,	
  model,	
  [options])	
  
method

the CRUD method ("create“, "read“, "update", or "delete")
model

the model (or collection) to be synced
options 

success and error callbacks, and all other jQuery request options

example of overriden sync:
http://bit.ly/KWdxNN
Sync returns a jQuery XMLHttpRequest (jqXHR) object
It implements the Promise
interface
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
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
Models summary
Roadmap
•  Why Backbone
•  Events
•  Models
•  Collections
•  Views
•  Routers
•  Summary
Collections
Collections are ordered sets of models

You can: 
•  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
Any event that is triggered on a model in a collection
will also be triggered on the collection directly
MVC: Notify their observers
about state using the Observer
pattern (same as models)
Collection example
http://goo.gl/UOahsP
Collections summary
Roadmap
•  Why Backbone
•  Events
•  Models
•  Collections
•  Views
•  Routers
•  Summary
Views
Views represent and manage the visible parts of your application

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
MVC: observe models, and update
itself according to the state of the
models + manage user inputs (it’s a
controller, to this sense)
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>
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
View example
http://goo.gl/UOahsP
Interaction with the user
Events map
“event_name selector”: callback
Events callbacks
Views summary
Roadmap
•  Why Backbone
•  Events
•  Models
•  Collections
•  Views
•  Routers
•  Summary
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
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
Routing
routes map
routing
functions
History
History serves as a global router to
1.  handle hashchange events
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	
  
Technically, it uses the HTML5
History API to listen to to its job

For older browsers, it uses URL hash
fragments as fallback
Router summary
Roadmap
•  Why Backbone
•  Events
•  Models
•  Collections
•  Views
•  Routers
•  Summary
Classical workflow
1.  You dig into JSON objects
2.  Look up elements in the DOM
3.  Update the HTML by hand
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
Is Backbone real MVC?

Let’s look at the description of the Model-View-Presenter pattern on Wikipedia:

an interface defining the data to be displayed or otherwise acted upon in the user interface

passive interface that displays data (the model) and routes user commands (events) to the
presenter to act upon that data

acts upon the model and the view. It retrieves data from repositories (the model), and formats it
for display in the view
Model
View
Presenter
References
http://backbonejs.org
+ 39 380 70 21 600
Contact
Ivano Malavolta | 
Gran Sasso Science Institute

iivanoo
ivano.malavolta@univaq.it
www.ivanomalavolta.com

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

HTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile appsHTML5 & CSS3 refresher for mobile apps
HTML5 & CSS3 refresher for mobile apps
 
Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet...
Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet...Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet...
Building rich Single Page Applications (SPAs) for desktop, mobile, and tablet...
 
C# Advanced L09-HTML5+ASP
C# Advanced L09-HTML5+ASPC# Advanced L09-HTML5+ASP
C# Advanced L09-HTML5+ASP
 
Fast mobile web apps
Fast mobile web appsFast mobile web apps
Fast mobile web apps
 
Angular - Chapter 4 - Data and Event Handling
 Angular - Chapter 4 - Data and Event Handling Angular - Chapter 4 - Data and Event Handling
Angular - Chapter 4 - Data and Event Handling
 
Angular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP ServicesAngular - Chapter 7 - HTTP Services
Angular - Chapter 7 - HTTP Services
 
Ajax
AjaxAjax
Ajax
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
jQuery - Chapter 3 - Effects
jQuery - Chapter 3 - Effects  jQuery - Chapter 3 - Effects
jQuery - Chapter 3 - Effects
 
Spring 3.x - Spring MVC - Advanced topics
Spring 3.x - Spring MVC - Advanced topicsSpring 3.x - Spring MVC - Advanced topics
Spring 3.x - Spring MVC - Advanced topics
 
Jasig Rubyon Rails
Jasig Rubyon RailsJasig Rubyon Rails
Jasig Rubyon Rails
 
Introduction to Spring MVC
Introduction to Spring MVCIntroduction to Spring MVC
Introduction to Spring MVC
 
An Introduction to Ruby on Rails
An Introduction to Ruby on RailsAn Introduction to Ruby on Rails
An Introduction to Ruby on Rails
 
Jqueryppt (1)
Jqueryppt (1)Jqueryppt (1)
Jqueryppt (1)
 
Spring MVC Basics
Spring MVC BasicsSpring MVC Basics
Spring MVC Basics
 
Spring MVC Architecture Tutorial
Spring MVC Architecture TutorialSpring MVC Architecture Tutorial
Spring MVC Architecture Tutorial
 
Jsp & Ajax
Jsp & AjaxJsp & Ajax
Jsp & Ajax
 
Angular js for Beginnners
Angular js for BeginnnersAngular js for Beginnners
Angular js for Beginnners
 
Spring MVC 3.0 Framework
Spring MVC 3.0 FrameworkSpring MVC 3.0 Framework
Spring MVC 3.0 Framework
 
Intro lift
Intro liftIntro lift
Intro lift
 

Ähnlich wie Backbone.js

Developing maintainable Cordova applications
Developing maintainable Cordova applicationsDeveloping maintainable Cordova applications
Developing maintainable Cordova applicationsIvano Malavolta
 
MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!Roberto Messora
 
Viking academy backbone.js
Viking academy  backbone.jsViking academy  backbone.js
Viking academy backbone.jsBert Wijnants
 
Knockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockoutKnockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockoutAndoni Arroyo
 
ASP.NET MVC 5 - EF 6 - VS2015
ASP.NET MVC 5 - EF 6 - VS2015ASP.NET MVC 5 - EF 6 - VS2015
ASP.NET MVC 5 - EF 6 - VS2015Hossein Zahed
 
Backbone.js
Backbone.jsBackbone.js
Backbone.jsVO Tho
 
Raybiztech Guide To Backbone Javascript Library
Raybiztech Guide To Backbone Javascript LibraryRaybiztech Guide To Backbone Javascript Library
Raybiztech Guide To Backbone Javascript Libraryray biztech
 
Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013Thomas Robbins
 
Backbonejs
BackbonejsBackbonejs
BackbonejsSam Lee
 
Introduction to Backbone.js for Rails developers
Introduction to Backbone.js for Rails developersIntroduction to Backbone.js for Rails developers
Introduction to Backbone.js for Rails developersAoteaStudios
 
MVC & SQL_In_1_Hour
MVC & SQL_In_1_HourMVC & SQL_In_1_Hour
MVC & SQL_In_1_HourDilip Patel
 
Comparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAsComparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAsJennifer Estrada
 
Backbonification for dummies - Arrrrug 10/1/2012
Backbonification for dummies - Arrrrug 10/1/2012Backbonification for dummies - Arrrrug 10/1/2012
Backbonification for dummies - Arrrrug 10/1/2012Dimitri de Putte
 
Apache Cayenne for WO Devs
Apache Cayenne for WO DevsApache Cayenne for WO Devs
Apache Cayenne for WO DevsWO Community
 

Ähnlich wie Backbone.js (20)

Developing maintainable Cordova applications
Developing maintainable Cordova applicationsDeveloping maintainable Cordova applications
Developing maintainable Cordova applications
 
MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!
 
Viking academy backbone.js
Viking academy  backbone.jsViking academy  backbone.js
Viking academy backbone.js
 
Knockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockoutKnockout implementing mvvm in java script with knockout
Knockout implementing mvvm in java script with knockout
 
ASP.NET MVC 5 - EF 6 - VS2015
ASP.NET MVC 5 - EF 6 - VS2015ASP.NET MVC 5 - EF 6 - VS2015
ASP.NET MVC 5 - EF 6 - VS2015
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
MVC Framework
MVC FrameworkMVC Framework
MVC Framework
 
Show Some Spine!
Show Some Spine!Show Some Spine!
Show Some Spine!
 
MVC 6 Introduction
MVC 6 IntroductionMVC 6 Introduction
MVC 6 Introduction
 
Raybiztech Guide To Backbone Javascript Library
Raybiztech Guide To Backbone Javascript LibraryRaybiztech Guide To Backbone Javascript Library
Raybiztech Guide To Backbone Javascript Library
 
Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013
 
Backbonejs
BackbonejsBackbonejs
Backbonejs
 
Introduction to Backbone.js for Rails developers
Introduction to Backbone.js for Rails developersIntroduction to Backbone.js for Rails developers
Introduction to Backbone.js for Rails developers
 
MVC
MVCMVC
MVC
 
MVC & SQL_In_1_Hour
MVC & SQL_In_1_HourMVC & SQL_In_1_Hour
MVC & SQL_In_1_Hour
 
Comparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAsComparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAs
 
Asp.net,mvc
Asp.net,mvcAsp.net,mvc
Asp.net,mvc
 
Backbonification for dummies - Arrrrug 10/1/2012
Backbonification for dummies - Arrrrug 10/1/2012Backbonification for dummies - Arrrrug 10/1/2012
Backbonification for dummies - Arrrrug 10/1/2012
 
Apache Cayenne for WO Devs
Apache Cayenne for WO DevsApache Cayenne for WO Devs
Apache Cayenne for WO Devs
 
Angular js
Angular jsAngular js
Angular js
 

Mehr von Ivano Malavolta

Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...
Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...
Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...Ivano Malavolta
 
The Green Lab - Research cocktail @Vrije Universiteit Amsterdam (October 2020)
The Green Lab - Research cocktail  @Vrije Universiteit Amsterdam (October 2020)The Green Lab - Research cocktail  @Vrije Universiteit Amsterdam (October 2020)
The Green Lab - Research cocktail @Vrije Universiteit Amsterdam (October 2020)Ivano Malavolta
 
Software sustainability and Green IT
Software sustainability and Green ITSoftware sustainability and Green IT
Software sustainability and Green ITIvano Malavolta
 
Navigation-aware and Personalized Prefetching of Network Requests in Android ...
Navigation-aware and Personalized Prefetching of Network Requests in Android ...Navigation-aware and Personalized Prefetching of Network Requests in Android ...
Navigation-aware and Personalized Prefetching of Network Requests in Android ...Ivano Malavolta
 
How Maintainability Issues of Android Apps Evolve [ICSME 2018]
How Maintainability Issues of Android Apps Evolve [ICSME 2018]How Maintainability Issues of Android Apps Evolve [ICSME 2018]
How Maintainability Issues of Android Apps Evolve [ICSME 2018]Ivano Malavolta
 
Collaborative Model-Driven Software Engineering: a Classification Framework a...
Collaborative Model-Driven Software Engineering: a Classification Framework a...Collaborative Model-Driven Software Engineering: a Classification Framework a...
Collaborative Model-Driven Software Engineering: a Classification Framework a...Ivano Malavolta
 
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...Ivano Malavolta
 
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...Modeling objects interaction via UML sequence diagrams [Software Design] [Com...
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...Ivano Malavolta
 
Modeling behaviour via UML state machines [Software Design] [Computer Science...
Modeling behaviour via UML state machines [Software Design] [Computer Science...Modeling behaviour via UML state machines [Software Design] [Computer Science...
Modeling behaviour via UML state machines [Software Design] [Computer Science...Ivano Malavolta
 
Object-oriented design patterns in UML [Software Design] [Computer Science] [...
Object-oriented design patterns in UML [Software Design] [Computer Science] [...Object-oriented design patterns in UML [Software Design] [Computer Science] [...
Object-oriented design patterns in UML [Software Design] [Computer Science] [...Ivano Malavolta
 
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...Ivano Malavolta
 
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...Requirements engineering with UML [Software Design] [Computer Science] [Vrije...
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...Ivano Malavolta
 
Modeling and abstraction, software development process [Software Design] [Com...
Modeling and abstraction, software development process [Software Design] [Com...Modeling and abstraction, software development process [Software Design] [Com...
Modeling and abstraction, software development process [Software Design] [Com...Ivano Malavolta
 
[2017/2018] Agile development
[2017/2018] Agile development[2017/2018] Agile development
[2017/2018] Agile developmentIvano Malavolta
 
Reconstructing microservice-based architectures
Reconstructing microservice-based architecturesReconstructing microservice-based architectures
Reconstructing microservice-based architecturesIvano Malavolta
 
[2017/2018] AADL - Architecture Analysis and Design Language
[2017/2018] AADL - Architecture Analysis and Design Language[2017/2018] AADL - Architecture Analysis and Design Language
[2017/2018] AADL - Architecture Analysis and Design LanguageIvano Malavolta
 
[2017/2018] Architectural languages
[2017/2018] Architectural languages[2017/2018] Architectural languages
[2017/2018] Architectural languagesIvano Malavolta
 
[2017/2018] Introduction to Software Architecture
[2017/2018] Introduction to Software Architecture[2017/2018] Introduction to Software Architecture
[2017/2018] Introduction to Software ArchitectureIvano Malavolta
 
[2017/2018] RESEARCH in software engineering
[2017/2018] RESEARCH in software engineering[2017/2018] RESEARCH in software engineering
[2017/2018] RESEARCH in software engineeringIvano Malavolta
 

Mehr von Ivano Malavolta (20)

Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...
Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...
Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...
 
The H2020 experience
The H2020 experienceThe H2020 experience
The H2020 experience
 
The Green Lab - Research cocktail @Vrije Universiteit Amsterdam (October 2020)
The Green Lab - Research cocktail  @Vrije Universiteit Amsterdam (October 2020)The Green Lab - Research cocktail  @Vrije Universiteit Amsterdam (October 2020)
The Green Lab - Research cocktail @Vrije Universiteit Amsterdam (October 2020)
 
Software sustainability and Green IT
Software sustainability and Green ITSoftware sustainability and Green IT
Software sustainability and Green IT
 
Navigation-aware and Personalized Prefetching of Network Requests in Android ...
Navigation-aware and Personalized Prefetching of Network Requests in Android ...Navigation-aware and Personalized Prefetching of Network Requests in Android ...
Navigation-aware and Personalized Prefetching of Network Requests in Android ...
 
How Maintainability Issues of Android Apps Evolve [ICSME 2018]
How Maintainability Issues of Android Apps Evolve [ICSME 2018]How Maintainability Issues of Android Apps Evolve [ICSME 2018]
How Maintainability Issues of Android Apps Evolve [ICSME 2018]
 
Collaborative Model-Driven Software Engineering: a Classification Framework a...
Collaborative Model-Driven Software Engineering: a Classification Framework a...Collaborative Model-Driven Software Engineering: a Classification Framework a...
Collaborative Model-Driven Software Engineering: a Classification Framework a...
 
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...
 
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...Modeling objects interaction via UML sequence diagrams [Software Design] [Com...
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...
 
Modeling behaviour via UML state machines [Software Design] [Computer Science...
Modeling behaviour via UML state machines [Software Design] [Computer Science...Modeling behaviour via UML state machines [Software Design] [Computer Science...
Modeling behaviour via UML state machines [Software Design] [Computer Science...
 
Object-oriented design patterns in UML [Software Design] [Computer Science] [...
Object-oriented design patterns in UML [Software Design] [Computer Science] [...Object-oriented design patterns in UML [Software Design] [Computer Science] [...
Object-oriented design patterns in UML [Software Design] [Computer Science] [...
 
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...
 
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...Requirements engineering with UML [Software Design] [Computer Science] [Vrije...
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...
 
Modeling and abstraction, software development process [Software Design] [Com...
Modeling and abstraction, software development process [Software Design] [Com...Modeling and abstraction, software development process [Software Design] [Com...
Modeling and abstraction, software development process [Software Design] [Com...
 
[2017/2018] Agile development
[2017/2018] Agile development[2017/2018] Agile development
[2017/2018] Agile development
 
Reconstructing microservice-based architectures
Reconstructing microservice-based architecturesReconstructing microservice-based architectures
Reconstructing microservice-based architectures
 
[2017/2018] AADL - Architecture Analysis and Design Language
[2017/2018] AADL - Architecture Analysis and Design Language[2017/2018] AADL - Architecture Analysis and Design Language
[2017/2018] AADL - Architecture Analysis and Design Language
 
[2017/2018] Architectural languages
[2017/2018] Architectural languages[2017/2018] Architectural languages
[2017/2018] Architectural languages
 
[2017/2018] Introduction to Software Architecture
[2017/2018] Introduction to Software Architecture[2017/2018] Introduction to Software Architecture
[2017/2018] Introduction to Software Architecture
 
[2017/2018] RESEARCH in software engineering
[2017/2018] RESEARCH in software engineering[2017/2018] RESEARCH in software engineering
[2017/2018] RESEARCH in software engineering
 

Kürzlich hochgeladen

20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 

Kürzlich hochgeladen (20)

20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 

Backbone.js

  • 1. Gran Sasso Science Institute Ivano Malavolta Backbone JS
  • 2. Roadmap •  Why Backbone •  Events •  Models •  Collections •  Views •  Routers •  Summary
  • 3. Why Backbone 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  <  
  • 5. 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
  • 6. Why Backbone From the Backbone website... manipulate the DOM lists of models represent data
  • 7. 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
  • 8. Who is using Backbone?
  • 9. Roadmap •  Why Backbone •  Events •  Models •  Collections •  Views •  Routers •  Summary
  • 10. 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
  • 11. Events Basically, each object can: •  listen to events •  trigger events
  • 12. Events Two types of events: you define your own types of event built-in custom
  • 13. Events API object will react to the “alert” event (the “off” function detaches the event) event parameters the “alert” event is fired
  • 14. Events API Events methods: on object.on(event, callback, [context]) off object.off([event], [callback], [context]) once object.once(event, callback, [context]) trigger object.trigger(event, [*args]) listenTo object.listenTo(other, event, callback) stopListening object.stopListening([other], [event], [callback]) listenToOnce object.listenToOnce(other, event, callback)
  • 16. Roadmap •  Why Backbone •  Events •  Models •  Collections •  Views •  Routers •  Summary
  • 17. Models 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 MVC: Notify their observers about state using the Observer pattern
  • 18. 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
  • 19. Example of model custom method g an attribute event fired when “color” changes custom method invocation
  • 20. Model constructor 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
  • 22. 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
  • 23. Sync signature sync(method,  model,  [options])   method the CRUD method ("create“, "read“, "update", or "delete") model the model (or collection) to be synced options success and error callbacks, and all other jQuery request options example of overriden sync: http://bit.ly/KWdxNN Sync returns a jQuery XMLHttpRequest (jqXHR) object It implements the Promise interface
  • 24. 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
  • 25. 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
  • 27. Roadmap •  Why Backbone •  Events •  Models •  Collections •  Views •  Routers •  Summary
  • 28. Collections Collections are ordered sets of models You can: •  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 Any event that is triggered on a model in a collection will also be triggered on the collection directly MVC: Notify their observers about state using the Observer pattern (same as models)
  • 31. Roadmap •  Why Backbone •  Events •  Models •  Collections •  Views •  Routers •  Summary
  • 32. Views Views represent and manage the visible parts of your application 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 MVC: observe models, and update itself according to the state of the models + manage user inputs (it’s a controller, to this sense)
  • 33. 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>
  • 34. 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
  • 36. Interaction with the user Events map “event_name selector”: callback Events callbacks
  • 38. Roadmap •  Why Backbone •  Events •  Models •  Collections •  Views •  Routers •  Summary
  • 39. 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
  • 40. 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
  • 42. History History serves as a global router to 1.  handle hashchange events 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   Technically, it uses the HTML5 History API to listen to to its job For older browsers, it uses URL hash fragments as fallback
  • 44. Roadmap •  Why Backbone •  Events •  Models •  Collections •  Views •  Routers •  Summary
  • 45. Classical workflow 1.  You dig into JSON objects 2.  Look up elements in the DOM 3.  Update the HTML by hand
  • 46. 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
  • 47. Is Backbone real MVC? Let’s look at the description of the Model-View-Presenter pattern on Wikipedia: an interface defining the data to be displayed or otherwise acted upon in the user interface passive interface that displays data (the model) and routes user commands (events) to the presenter to act upon that data acts upon the model and the view. It retrieves data from repositories (the model), and formats it for display in the view Model View Presenter
  • 49. + 39 380 70 21 600 Contact Ivano Malavolta | Gran Sasso Science Institute iivanoo ivano.malavolta@univaq.it www.ivanomalavolta.com