---
title: "Introduction to Backbone.js"
description: "In this article, I’m explaining about Backbone.js."
author: "Anonymous User"
published: 2014-10-14
updated: 2019-09-07
canonical: https://www.mindstick.com/articles/1514/introduction-to-backbone-js
category: "single page app"
tags: ["javascript", "single page app"]
reading_time: 3 minutes
---
# Introduction to Backbone.js
In this article, I’m explaining about Backbone.js.\
in my previous post i'll discuss about Hashtable and dicitionary if you want to learn about hashtable read my previous post Hashtable And Dictionary in C#
A Single-Page Application (SPA), also known as Single-Page Interface (SPI), is a [web application](https://www.mindstick.com/articles/13069/progressive-web-application-pwas-all-you-need-to-know-about) or web site that fits on a single web page with the goal of providing a more fluid [user experience](https://www.mindstick.com/articles/12731/the-importance-of-feedback-to-the-user-experience) similar to a [desktop application](https://www.mindstick.com/forum/23041/i-want-to-devlop-a-desktop-application-in-dot-net-like-aura-reader-for-astrologer).
Backbone.js is a lightweight JavaScript library that adds structure to your client-side code. Developers commonly use libraries like Backbone.js to create single-page applications (SPAs). SPAs are [web applications](https://www.mindstick.com/blog/302483/full-stack-development-the-complete-guide-to-building-modern-web-applications) that load into the browser and then react to [data changes](https://www.mindstick.com/forum/161559/how-can-you-track-data-changes-over-time-without-using-change-data-capture-cdc) on the [client side](https://www.mindstick.com/forum/160418/what-are-the-best-practices-for-securely-storing-bearer-tokens-on-the-client-side) without requiring complete page refreshes from the server.
## Model:
A Model in backbone consists of the connected data for the web application. It also contains the connection among the data. It contains the interactive data.
## View:
The view is the [user interface](https://www.mindstick.com/blog/302016/what-is-user-interface-and-what-are-its-benefits) but in backbone it is not only the view but also a controller for connecting the model to the data interaction.
## Collection:
Collections are the set of models, we create the collection by extending the Backbone.Collection. [While creating](https://www.mindstick.com/forum/23125/something-happened-while-creating-a-switch-windows-phone-8-emulator-error) the collection we want to pass the property that specifies the specific model that the collection will hold.
## Step 1:
Open [visual Studio](https://www.mindstick.com/articles/12378/visual-studio-for-mac-is-out-of-beta-preview-now-officially-available) >> File >> New >> Website >> Select Asp.NET Empty Website >> Give the project Name >> Click “OK” 
## Step 2:
Now add html page
## Step 3:
Now Download these three files and add these files in your html page
## Step 4:
Now add this code in your html file
```
```
Now execute the your html file it display the like this
\
Now enter emailid and password and click login before signup then will through the [error message](https://www.mindstick.com/forum/23174/error-message-the-page-you-are-requesting-cannot-be-served-because-of-the-extension-configuration) like this
\
Now enter emailid and password and click Signup then it display message like this
\
Now we can login.
\
in my next post i'll introduced about SignalR
---
Original Source: https://www.mindstick.com/articles/1514/introduction-to-backbone-js
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.