SlideShare a Scribd company logo
1 of 10
What is BackBone.js
• BackBone is a Javascript Framework
• Created by Jeremy Ashkenas in 2010, an author
of CoffeeScript
• It’s a layer above existing JavaScript DOM
manipulation libraries like jQuery, Zepto etc
BackBone.js Features
• Minimalistic
• Modular
• Perfect OOP design
• Over 100 available extensions:
https://github.com/documentcloud/backbone/wiki/Exte
nsions,-Plugins,-Resources
• Community
Main Concepts
• Model
• Collection
• View
• Router
• Events
Model
• Persist data
• Manipulate data
• Validate data
• Trigger an event on add, change data
• Create a new model by calling:
var SomeModel = Backbone.Model.extend({
defaults: {
SomeKey: ‘some value’
}
});
View
• Rendering logic
• Use template
• Act as controller
• Update model
• Create a new view by calling:
var SomeView = Backbone.View.extend({
initialize: function () {
// initialize content goes here
}
});
Model and View Binding
el : This is used to get the element of DOM
model : This is used to point/bind the view with model
Controller Collection
• It is a collection of models
• Manage ordered set of models
• Create a new collection by calling:
Router
• This is useful feature for JavaScript application which need URL routing.
• Router maps URL to actions
• Create a new collection by calling:
When URL matches with url-pattern it executes function actionFunction
Events
• Events is a module that can be mixed in to any object, giving the object the ability
to bind and trigger custom named events
• In the example below an event invokes a method/function in a view.

More Related Content

What's hot

BackboneJS Training - Giving Backbone to your applications
BackboneJS Training - Giving Backbone to your applicationsBackboneJS Training - Giving Backbone to your applications
BackboneJS Training - Giving Backbone to your applicationsJoseph Khan
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIMarcin Grzywaczewski
 
Javascript Myths and its Evolution
Javascript Myths and its  EvolutionJavascript Myths and its  Evolution
Javascript Myths and its EvolutionDeepu S Nath
 
Adobe AEM for Business Heads
Adobe AEM for Business HeadsAdobe AEM for Business Heads
Adobe AEM for Business HeadsYash Mody
 
The Mobile Development Landscape
The Mobile Development LandscapeThe Mobile Development Landscape
The Mobile Development LandscapeAmbert Ho
 
Intro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETIntro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETAlan Hecht
 
Alfresco Day Stockholm 2015 - Rapid UI Development
Alfresco Day Stockholm 2015 - Rapid UI DevelopmentAlfresco Day Stockholm 2015 - Rapid UI Development
Alfresco Day Stockholm 2015 - Rapid UI DevelopmentNicole Szigeti
 
Realtime web apps rails
Realtime web apps railsRealtime web apps rails
Realtime web apps railsAmbert Ho
 
Intro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptIntro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptAndrew Lovett-Barron
 
Backbonejs
BackbonejsBackbonejs
BackbonejsSam Lee
 
Introduction to Backbone.js
Introduction to Backbone.jsIntroduction to Backbone.js
Introduction to Backbone.jsPragnesh Vaghela
 
SpringPeople Introduction to MongoDB Administration
SpringPeople Introduction to MongoDB AdministrationSpringPeople Introduction to MongoDB Administration
SpringPeople Introduction to MongoDB AdministrationSpringPeople
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejsNick Lee
 
Backbone js in action
Backbone js in actionBackbone js in action
Backbone js in actionUsha Guduri
 
ASP.NET Scalability - VBUG London
ASP.NET Scalability - VBUG LondonASP.NET Scalability - VBUG London
ASP.NET Scalability - VBUG LondonPhil Pursglove
 

What's hot (20)

BackboneJS Training - Giving Backbone to your applications
BackboneJS Training - Giving Backbone to your applicationsBackboneJS Training - Giving Backbone to your applications
BackboneJS Training - Giving Backbone to your applications
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
 
Javascript Myths and its Evolution
Javascript Myths and its  EvolutionJavascript Myths and its  Evolution
Javascript Myths and its Evolution
 
Adobe AEM for Business Heads
Adobe AEM for Business HeadsAdobe AEM for Business Heads
Adobe AEM for Business Heads
 
The Mobile Development Landscape
The Mobile Development LandscapeThe Mobile Development Landscape
The Mobile Development Landscape
 
Intro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETIntro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NET
 
Alfresco Day Stockholm 2015 - Rapid UI Development
Alfresco Day Stockholm 2015 - Rapid UI DevelopmentAlfresco Day Stockholm 2015 - Rapid UI Development
Alfresco Day Stockholm 2015 - Rapid UI Development
 
Realtime web apps rails
Realtime web apps railsRealtime web apps rails
Realtime web apps rails
 
Single page App
Single page AppSingle page App
Single page App
 
Angularjs Basics
Angularjs BasicsAngularjs Basics
Angularjs Basics
 
Why XAF and XPO?
Why XAF and XPO?Why XAF and XPO?
Why XAF and XPO?
 
Azure Serverless Conf
Azure Serverless ConfAzure Serverless Conf
Azure Serverless Conf
 
How to ease the learning curve
How to ease the learning curveHow to ease the learning curve
How to ease the learning curve
 
Intro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate JavascriptIntro to BackboneJS + Intermediate Javascript
Intro to BackboneJS + Intermediate Javascript
 
Backbonejs
BackbonejsBackbonejs
Backbonejs
 
Introduction to Backbone.js
Introduction to Backbone.jsIntroduction to Backbone.js
Introduction to Backbone.js
 
SpringPeople Introduction to MongoDB Administration
SpringPeople Introduction to MongoDB AdministrationSpringPeople Introduction to MongoDB Administration
SpringPeople Introduction to MongoDB Administration
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejs
 
Backbone js in action
Backbone js in actionBackbone js in action
Backbone js in action
 
ASP.NET Scalability - VBUG London
ASP.NET Scalability - VBUG LondonASP.NET Scalability - VBUG London
ASP.NET Scalability - VBUG London
 

Similar to Backbonejs

Apache Cayenne for WO Devs
Apache Cayenne for WO DevsApache Cayenne for WO Devs
Apache Cayenne for WO DevsWO Community
 
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
 
Backbone JS for mobile apps
Backbone JS for mobile appsBackbone JS for mobile apps
Backbone JS for mobile appsIvano Malavolta
 
ZZ BC#7 asp.net mvc practice and guideline by NineMvp
ZZ BC#7 asp.net mvc practice and guideline by NineMvpZZ BC#7 asp.net mvc practice and guideline by NineMvp
ZZ BC#7 asp.net mvc practice and guideline by NineMvpChalermpon Areepong
 
Back to the 90s' - Revenge of the static website
Back to the 90s' - Revenge of the static websiteBack to the 90s' - Revenge of the static website
Back to the 90s' - Revenge of the static websiteYves Goeleven
 
Valentine with Angular js - Introduction
Valentine with Angular js - IntroductionValentine with Angular js - Introduction
Valentine with Angular js - IntroductionSenthil Kumar
 
Improving Your Selenium WebDriver Tests - Belgium testing days_2016
Improving Your Selenium WebDriver Tests - Belgium testing days_2016Improving Your Selenium WebDriver Tests - Belgium testing days_2016
Improving Your Selenium WebDriver Tests - Belgium testing days_2016Roy de Kleijn
 
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
 
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
 
SoCal Code Camp 2011 - ASP.NET 4.5
SoCal Code Camp 2011 - ASP.NET 4.5SoCal Code Camp 2011 - ASP.NET 4.5
SoCal Code Camp 2011 - ASP.NET 4.5Jon Galloway
 
Web Components v1
Web Components v1Web Components v1
Web Components v1Mike Wilcox
 
Sitecore MVC: Converting Web Forms sublayouts
Sitecore MVC: Converting Web Forms sublayoutsSitecore MVC: Converting Web Forms sublayouts
Sitecore MVC: Converting Web Forms sublayoutsnonlinear creations
 
Become a Full Stack Web Developer (.NET) - Thisiswali
Become a Full Stack Web Developer (.NET) - ThisiswaliBecome a Full Stack Web Developer (.NET) - Thisiswali
Become a Full Stack Web Developer (.NET) - Thisiswalithisiswali
 

Similar to Backbonejs (20)

Apache Cayenne for WO Devs
Apache Cayenne for WO DevsApache Cayenne for WO Devs
Apache Cayenne for WO Devs
 
BackboneJS
BackboneJSBackboneJS
BackboneJS
 
Angular js
Angular jsAngular js
Angular js
 
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
 
Backbone JS for mobile apps
Backbone JS for mobile appsBackbone JS for mobile apps
Backbone JS for mobile apps
 
ZZ BC#7 asp.net mvc practice and guideline by NineMvp
ZZ BC#7 asp.net mvc practice and guideline by NineMvpZZ BC#7 asp.net mvc practice and guideline by NineMvp
ZZ BC#7 asp.net mvc practice and guideline by NineMvp
 
Angular js
Angular jsAngular js
Angular js
 
[2015/2016] Backbone JS
[2015/2016] Backbone JS[2015/2016] Backbone JS
[2015/2016] Backbone JS
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
Back to the 90s' - Revenge of the static website
Back to the 90s' - Revenge of the static websiteBack to the 90s' - Revenge of the static website
Back to the 90s' - Revenge of the static website
 
Valentine with Angular js - Introduction
Valentine with Angular js - IntroductionValentine with Angular js - Introduction
Valentine with Angular js - Introduction
 
Improving Your Selenium WebDriver Tests - Belgium testing days_2016
Improving Your Selenium WebDriver Tests - Belgium testing days_2016Improving Your Selenium WebDriver Tests - Belgium testing days_2016
Improving Your Selenium WebDriver Tests - Belgium testing days_2016
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
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
 
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!
 
SoCal Code Camp 2011 - ASP.NET 4.5
SoCal Code Camp 2011 - ASP.NET 4.5SoCal Code Camp 2011 - ASP.NET 4.5
SoCal Code Camp 2011 - ASP.NET 4.5
 
Web Components v1
Web Components v1Web Components v1
Web Components v1
 
Sitecore MVC: Converting Web Forms sublayouts
Sitecore MVC: Converting Web Forms sublayoutsSitecore MVC: Converting Web Forms sublayouts
Sitecore MVC: Converting Web Forms sublayouts
 
Become a Full Stack Web Developer (.NET) - Thisiswali
Become a Full Stack Web Developer (.NET) - ThisiswaliBecome a Full Stack Web Developer (.NET) - Thisiswali
Become a Full Stack Web Developer (.NET) - Thisiswali
 

Recently uploaded

Implementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureImplementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureDinusha Kumarasiri
 
chapter--4-software-project-planning.ppt
chapter--4-software-project-planning.pptchapter--4-software-project-planning.ppt
chapter--4-software-project-planning.pptkotipi9215
 
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...MyIntelliSource, Inc.
 
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer DataAdobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer DataBradBedford3
 
EY_Graph Database Powered Sustainability
EY_Graph Database Powered SustainabilityEY_Graph Database Powered Sustainability
EY_Graph Database Powered SustainabilityNeo4j
 
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...Christina Lin
 
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...soniya singh
 
Intelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmIntelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmSujith Sukumaran
 
What are the features of Vehicle Tracking System?
What are the features of Vehicle Tracking System?What are the features of Vehicle Tracking System?
What are the features of Vehicle Tracking System?Watsoo Telematics
 
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样umasea
 
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptxKnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptxTier1 app
 
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...gurkirankumar98700
 
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideBuilding Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideChristina Lin
 
The Evolution of Karaoke From Analog to App.pdf
The Evolution of Karaoke From Analog to App.pdfThe Evolution of Karaoke From Analog to App.pdf
The Evolution of Karaoke From Analog to App.pdfPower Karaoke
 
Project Based Learning (A.I).pptx detail explanation
Project Based Learning (A.I).pptx detail explanationProject Based Learning (A.I).pptx detail explanation
Project Based Learning (A.I).pptx detail explanationkaushalgiri8080
 
Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Andreas Granig
 
Engage Usergroup 2024 - The Good The Bad_The Ugly
Engage Usergroup 2024 - The Good The Bad_The UglyEngage Usergroup 2024 - The Good The Bad_The Ugly
Engage Usergroup 2024 - The Good The Bad_The UglyFrank van der Linden
 
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackCloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackVICTOR MAESTRE RAMIREZ
 
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdfThe Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdfkalichargn70th171
 

Recently uploaded (20)

Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Call Girls In Mukherjee Nagar 📱  9999965857  🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...Call Girls In Mukherjee Nagar 📱  9999965857  🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
 
Implementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with AzureImplementing Zero Trust strategy with Azure
Implementing Zero Trust strategy with Azure
 
chapter--4-software-project-planning.ppt
chapter--4-software-project-planning.pptchapter--4-software-project-planning.ppt
chapter--4-software-project-planning.ppt
 
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
 
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer DataAdobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
 
EY_Graph Database Powered Sustainability
EY_Graph Database Powered SustainabilityEY_Graph Database Powered Sustainability
EY_Graph Database Powered Sustainability
 
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
 
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
Russian Call Girls in Karol Bagh Aasnvi ➡️ 8264348440 💋📞 Independent Escort S...
 
Intelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalmIntelligent Home Wi-Fi Solutions | ThinkPalm
Intelligent Home Wi-Fi Solutions | ThinkPalm
 
What are the features of Vehicle Tracking System?
What are the features of Vehicle Tracking System?What are the features of Vehicle Tracking System?
What are the features of Vehicle Tracking System?
 
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
 
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptxKnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
 
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
 
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideBuilding Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
 
The Evolution of Karaoke From Analog to App.pdf
The Evolution of Karaoke From Analog to App.pdfThe Evolution of Karaoke From Analog to App.pdf
The Evolution of Karaoke From Analog to App.pdf
 
Project Based Learning (A.I).pptx detail explanation
Project Based Learning (A.I).pptx detail explanationProject Based Learning (A.I).pptx detail explanation
Project Based Learning (A.I).pptx detail explanation
 
Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024
 
Engage Usergroup 2024 - The Good The Bad_The Ugly
Engage Usergroup 2024 - The Good The Bad_The UglyEngage Usergroup 2024 - The Good The Bad_The Ugly
Engage Usergroup 2024 - The Good The Bad_The Ugly
 
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackCloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStack
 
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdfThe Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
 

Backbonejs

  • 1.
  • 2. What is BackBone.js • BackBone is a Javascript Framework • Created by Jeremy Ashkenas in 2010, an author of CoffeeScript • It’s a layer above existing JavaScript DOM manipulation libraries like jQuery, Zepto etc
  • 3. BackBone.js Features • Minimalistic • Modular • Perfect OOP design • Over 100 available extensions: https://github.com/documentcloud/backbone/wiki/Exte nsions,-Plugins,-Resources • Community
  • 4. Main Concepts • Model • Collection • View • Router • Events
  • 5. Model • Persist data • Manipulate data • Validate data • Trigger an event on add, change data • Create a new model by calling: var SomeModel = Backbone.Model.extend({ defaults: { SomeKey: ‘some value’ } });
  • 6. View • Rendering logic • Use template • Act as controller • Update model • Create a new view by calling: var SomeView = Backbone.View.extend({ initialize: function () { // initialize content goes here } });
  • 7. Model and View Binding el : This is used to get the element of DOM model : This is used to point/bind the view with model
  • 8. Controller Collection • It is a collection of models • Manage ordered set of models • Create a new collection by calling:
  • 9. Router • This is useful feature for JavaScript application which need URL routing. • Router maps URL to actions • Create a new collection by calling: When URL matches with url-pattern it executes function actionFunction
  • 10. Events • Events is a module that can be mixed in to any object, giving the object the ability to bind and trigger custom named events • In the example below an event invokes a method/function in a view.