Backbone is a very popular lightweight javascript framework which greatly simplifies and structures complex javascript in websites and especially (web) applications. A lot of high performance websites now rely on backbone.js and underscore.js (a dependency of Backbone), from single page web apps to websites that have a lot of client side functionality. WordPress is becoming increasingly javascript-centric so it’s only natural that WordPress developers are starting to look at backbone to make developing rich javascript functionality in their WordPress projects easier. Since 3.5 WordPress ships with backbone and underscore so the presence of backbone in WordPress projects is bound to grow.
At the time of writing backbone and WordPress are a pretty new combination and there aren’t a whole lot of resources to be had yet. Backbone takes some getting used to, especially if you only have only used javascript and jquery for lightweight functionality in projects. As I’m only digging into backbone myself, I decided to start aggregate the best resources so I can speed up my own learning. I hope you find it useful too.
General Backbone Resources
Connected to the Backbone (Video Tutorial by Jeffrey Way at Tutsplus)
(Full tutorial requires Tutsplus premium at 18$/month)
Anatomy of Backbone.js – course on Codeschool
(codeschool offers its courses for a subscription of 25$/month)
Learn Backbone.js Completely (free)
Extensive resource, which takes about 30 hours to run through fully
Developing Backbone.js Applications
This is Addy Osmani’s book (available in print too)
A Curated List of Backbone.js resources
Provided by Mike Schinkel
Hello Backbone.js
An easy introductionary step by step tutorial to backbone.js (v 1.1.0) by Artur Adib
Building Backbone Plugins
A go-to book for intermediary and advanced developers using Backbone.js.
Full Stack Web Development with Backbone.js
A freshly published book on Backbone.js which, unlike some of the other books, covers the newer version of Backbone (1.1+).
WordPress & Backbone Tutorials
Tutorials by Shane Osbourne on WP Tuts
Using Backbone within the Admin (frontend)
Using Backbone within the Admin (backend)
Alex Bachuck shares a concise backbone.js tutorial:
Displaying recent posts with backbone.js in WordPress
Theme Foundry shares how they implemented Backbone.js in their Collections theme:
Backbone.js and Collections: Structure
Backbone.js and Collections: Routers
Backbone.js and Collections: Plugin compatibility
Rakhitha Nimesh Ratnayake wrote a book that has a chapter on Backbone.js:
WordPress Web Application Development
Alan Greenblatt of Adobe fame published a 3 part post series about Web apps involving backbone.js and also shared a webcast about this too:
Modern Web App Design with WordPress
Building a REST interface with WordPress
Building Data-Driven Web Applications with WordPress
Video (1hr 4min): Building Data Driven Single Page Web Applications with WordPress
Write a backbone.js powered shortcode
How to make a TinyMCE view in WordPress
Video (1hr 53min) WordPress Theming with Backbone.js with Zack Tollman
Study these examples in the wild
PostListr – an example of what you can do with backbone.js and WP api’s by K.Adam White
The WordPress Media Uploader utilizes backbone since version 3.5
The notifcations system on WordPress.com
WP Posts to Posts plugin by Scribu
WP Ultimate Search, a backbone.js powered plugin
WisP: a Backbone.js client for the Thermal WordPress Api
Current Comments: Example plugin for using Backbone.js with WordPress
Collections – A Backbone Powered theme by Theme Foundry
o2, a WordPress app/theme/plugin evolving out of the p2 theme
(interesting details: slides and presentation about o2 by Lebens)
Editr – the first themeforest theme using backbone.js? (link to demo page via affiliate link or normal link )
Backboned v2 is a backbone.js powered WP theme available on github created by the German front end dev Emanuel Kluge
EngineThemes have developed 3 commercial WordPress apps/themes called JobEngine, ForumEngine and ClassifiedsEngine that leverage backbone.js
Talks about WordPress and Backbone.js
Building Apps with Backbone.js and WordPress (WordCamp Chicago 28-30 June 2013)
From Adam White’s presentation
- Video Presentation
(as yet unavailable) - Slides
- Github example
Developer: WordPress Loves Backbone JS (Portland WordPress meetup on 10 June 2013)
Evolving your JavaScript with BackBone.js(slides) . (also by Adam White from WordCamp Providence 2013), video available now on WordPress.tv.
WP Sessions: WordPress and Backbone.js is a (purchasable) webcast lead by K. Adam White, Carl Danley and Zack Tollman that aired 25 January 2014.
WordPress Applicaties met Backbone.js (dutch) [slides (nl)]There was a session on backbone.js apps in a dutch WordCamp in May 2014, given in dutch.
WordPress and BackBone – The Dawn of Web Apps. An introductionary type talk giving a window into the possibilities of using backbone and WP for web apps.
Tools for Backbone.js powered WordPress projects
A starting point for single page apps on WordPress using backbone and the json api plugin: WordPressSinglePage
Backbone Debugger – a chrome extension that let’s you see your views, models, collections and routers in realtime using Chrome Dev tools.
JSON api for WordPress – a plugin providing a full JSON Api for WordPress that will eventually merge with WordPress core.
WP-JS-Hooks – A very useful events manager similar to WordPress’ internal hooks and filters on the php side of things. May land in core!
AppPresser – Build iOS/Android Apps using WordPress. This new set of tools let’s you easily leverage PhoneGap’s power and turns any WordPress installation into a application that can tap into native mobile features such as a geolocation, microphone and camera.
_s_backbone – Backbone.js meets underscores, a starter theme that takes advantage of the JSON rest api (core included WP 4.0+).
Other learning
It’s worth going through some other courses before digging into Backbone, especially if your javascript skills are light. Underscore.js is worth learning in depth before going head first into backbone. Getting up to scratch with general javascript and jquery is highly recommended too.
Updates
I’ll be updating this page as more WordPress specific resources become available. If you sign up through this link I’ll send an email when the page is updated.
UPDATES 27 March 2013:
Over at WordPress.org a thread was started about creating new documentation for using Backbone.js and Underscore.js in WordPress projects. Official documentation should thus be on its way, that is great news!
UPDATES 17 April 2013:
Added WP Ultimate Search to the plugin examples and WordPressSinglePage which is a starting point for single page apps built on WordPress.
UPDATES 6 June 2013:
Added a few talks: There’s an upcoming WordCamp presentation at WordCamp Chicago about building Backbone.js apps with WordPress and a Portland meetup presentation with a few Automattic guys.
Added two plugins; an example backbone.js WordPress plugin and a client for the Thermal Api (a cool json api for WordPress)
UPDATES 3 July:
Added Adam White’s presentation slides and github example from WordCamp Chicago
UPDATES 15 July:
Added Mike Schinkel’s curated list of backbone.js resources
Added Backbone Debugger Chrome Extension
UPDATES 6 August:
Added Theme Foundry’s Backbone powered WordPress Theme called Collections. Looks really good btw.
UPDATES 13 September:
Added Theme Foundry backbone.js blog series Added JSON REST api plugin by Ryan McCue
Added link to the forthcoming o2 theme (backbone.js powered evolution of the p2 theme)