Examples

Runnable, copy-paste code for the ideas explained across the rest of the site.

Every example here is a small, complete program you can run locally, paired with the explainer it demonstrates. They use Backbone.js 1.6.0 and plain browser APIs, with no build step. Read an example to see a concept in working code, then follow the link back to the deeper explanation. Start with the Backbone core and work toward application patterns, rendering, and realtime.

Backbone core, in working code

• Backbone Router Example A three-route single page app with a URL parameter, plus how to run and extend it.
• Backbone Model Example Defaults, change events, validation, and saving to a REST API as JSON.
• Backbone View Example Render from a template, auto re-render on model change, and handle DOM events.
• Backbone Collection Example Fetch records, add and remove models, and keep them sorted with a comparator.

Application patterns

• SPA Routing Example A layout region, swappable views, and proper view disposal to avoid leaks.
• State Management Example A central store with subscribe and update, and multiple readers from one source.
• Event-Driven UI Example An event bus that lets independent components coordinate without direct references.

Rendering and performance

• Rendering Example Build a large list in a document fragment to avoid repeated reflow, with timings.
• Browser Rendering Example Reproduce layout thrashing, then fix it by batching DOM reads and writes.

SEO and realtime

• JavaScript SEO Example Update title, meta, canonical, and structured data per route to stay crawlable.
• Realtime UI Example A WebSocket live feed: connect, render messages as they arrive, and reconnect.

Explore related learning