# Backbone.js — Lightweight MVC Framework for JavaScript Applications

> A minimal JavaScript framework that provides models with key-value binding, collections, views with declarative event handling, and RESTful JSON sync — giving structure to web applications.

## Install

Save in your project root:

# Backbone.js — Lightweight MVC Framework for JavaScript Applications

## Quick Use
```bash
npm install backbone underscore
# In your code:
# import Backbone from 'backbone';
# const Todo = Backbone.Model.extend({ defaults: { title: '', done: false } });
# const todo = new Todo({ title: 'Learn Backbone' });
```

## Introduction
Backbone.js was one of the first JavaScript frameworks to bring structure to client-side applications. It provides a minimal set of primitives — Models, Collections, Views, and a Router — that let developers organize code around data and events without imposing a heavy abstraction layer.

## What Backbone.js Does
- Provides Models with get/set attributes, validation, and change events
- Groups models into Collections with sort, filter, and iteration methods
- Connects Views to DOM elements with declarative event binding
- Syncs data with a RESTful backend via a configurable `Backbone.sync` method
- Includes a Router for mapping URL fragments to application state

## Architecture Overview
Backbone.js follows a loosely coupled MVC pattern. Models hold data and business logic, firing change events when attributes are modified. Collections are ordered sets of models with array-like methods powered by Underscore.js (or Lodash). Views listen to model/collection events and re-render DOM fragments. The Router maps URL hash fragments to handler functions. All communication flows through events, keeping components decoupled.

## Self-Hosting & Configuration
- Install via npm or include the CDN script along with Underscore.js (or Lodash)
- Override `Backbone.sync` to customize how models communicate with your API
- Use `Backbone.ajax` to swap in a custom HTTP library if jQuery is not present
- Configure the Router with `Backbone.history.start({ pushState: true })` for clean URLs
- Integrate with modern build tools by importing Backbone as an ES module

## Key Features
- Minimal footprint — about 8 KB minified and gzipped
- Event-driven architecture with `on`, `off`, `listenTo`, and `trigger`
- RESTful persistence with convention-over-configuration URL mapping
- Interoperable with any templating engine (Underscore templates, Handlebars, etc.)
- No opinions on rendering — works with direct DOM manipulation or virtual DOM libraries

## Comparison with Similar Tools
- **React** — component-based with virtual DOM; far more opinionated about rendering
- **Vue.js** — reactive data binding with templates; more batteries-included than Backbone
- **Angular** — full-featured framework with dependency injection; much larger scope
- **Marionette.js** — extension of Backbone adding structured views, regions, and app lifecycle
- **Ember.js** — convention-heavy framework that was a contemporary of Backbone; more opinionated

## FAQ
**Q: Is Backbone.js still relevant?**
A: For new projects, modern frameworks are preferred. However, many existing applications still run on Backbone, and its patterns influenced later frameworks.

**Q: Does Backbone.js require jQuery?**
A: Backbone.View uses jQuery (or a compatible library like Zepto) for DOM manipulation, but the Model, Collection, and Router layers work without it.

**Q: Can I use Backbone with TypeScript?**
A: Yes. Community-maintained type definitions are available via DefinitelyTyped.

**Q: What is the difference between Backbone and Marionette?**
A: Marionette builds on top of Backbone, adding structured view management, application lifecycle hooks, and region-based layout management that Backbone leaves to the developer.

## Sources
- https://github.com/jashkenas/backbone
- https://backbonejs.org/

---
Source: https://tokrepo.com/en/workflows/6c86c879-41cf-11f1-9bc6-00163e2b0d79
Author: AI Open Source