Backbone.js And WordPress Resources

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)

Use Case: A Project Management System using WordPress & Backbone
(not a lot of technical/code details)

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

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)

UDPATES 22 November

Added new video presentation links to Adam White’s backbone presentations
Added Postlistr repo link
Added link to Editr, the first commercial theme on themeforest that is using backbone.js
Added a link to wp-js-hooks, a lightweight, js based filter/hooks library similar to the php based on in WP.
Added a use case write up about a project management system using backbone.js and WordPress

UPDATES 22 December

Added new tutorials from Theme Foundry with interesting details about their backbone.js powered theme
Added a link to AppPresser, a new tool for creating mobile Apps using WordPress.
Added a link to a book called ‘WordPress Web Application Development’

UPDATES 17 Januari 2014

Added tutorials by Alan Greenblatt
Added link to a WordPress session covering Backbone.js and WordPressAdded link to EngineThemes’s backbone.js powered app themes
Added link to Backboned v2, a free backbone.js oriented theme on github

UPDATES 18 April 2014

Added example plugin showing how to create a backbone.js powered shortcode for TinyMCE
Added hello backbone.js which is a simple tutorial for backbone that uses backbone 1.1.0 (A lot of other tutorials and links cover older versions of backbone)
Added link to an upcoming WordCamp session (takes place in May in the Netherlands)

UPDATES 19 June 2014

Added a great session (video) by Zack Tollman called WordPress Themeing with Backbone.js
Added an introductionary talk about WordPres, Backbone and Web Apps by Jesper Bylund
Added slides to a dutch talk by Luc Princen, called “WordPress Applicaties”

UPDATES 11 July 2014

Added two new books to the general backbone resources section

UPDATES 19 August 2014

Added _s_backbone, a starter theme that utilizes backbone.js

12 comments

  1. SachinG says:

    Many thanks for great resources and specifically for those updates.  You saved my time wandering over internet with those helpful links and tips.

    Cheers 🙂

  2. Paul says:

    Thanks for the great collection of resources, been playing with backbone on and off for a while and I’m really excited about the possibilities of combining WP and backbone. Cheers.

    • Peter Knight says:

      Thanks for letting me know Brian, I look forward to that event! I’ll be updating this page and sending out a new newsletter soon.

Leave a Reply

Your email address will not be published. Required fields are marked *