plethoralabs / backbone-wordpress-theme

A stripped down example of a WordPress theme that utilizes Backbone.js

Welcome

This repository holds a WordPress theme that uses Backbone.js to deliver a single page application experience. This remarkably simple theme was created for demonstration purposes during a WP Sessions talk. The theme is very incomplete and is intended for use as an example of how to start and structure a WordPress theme with Backbone.js integration. Additionally, some notes from the session are below.

As part of this WP Session, I did a live demonstration that builds a basic theme into a functioning Backbone.js theme. I am including the steps that I followed for this code demonstration. If you add app-live-demo as a WordPress theme and follow the steps provided in live-demo.md, you will understand my logic in building this theme.

Backbone.js WordPress Themes (as of 26/Jan/2014)

• Tareq Hasan's Backbone.js Proof of Concept Theme (blog | github | demo)
  • Uses the JSON REST API plugin
  • Works for most views (e.g., pages, widget links, etc)
  • Requires a specific permalink structure
  • Uses hashbang based URLs
  • Plugin support? Don't know couldn't get it to work
• Emanuel Kluge's Backboned (v2) Theme (github | demo)
  • Works with normal WP URLs
  • Supports pages, posts, taxonomies
  • Uses require.js and supports it's own versions of the deps
  • Uses Mustache templates in the PHP; WordPress templating system is largely ignored
  • Works as a server side app and a client side app
  • Does not use the JSON REST API plugin
  • Does not support default permalink structure
  • Plugin compatibility issues
• O2 (site | WP API Team Demo)
  • Launching in the spring (maybe)
  • Not much info available, presently
• Collections (demo)
  • Custom JSON API implementation
  • Supports all of the default permalink structures
  • Attempts to support a lot of plugins
  • Works with different MS setups
  • Every URL is a potential starting point for the app
  • Uses the regular WordPress templating system

Challenges of a Backbone.js WordPress Theme

Adding a client side application on top of the WordPress server side application changes the assumptions of the software. Developers build WordPress and plugins with the assumption that every page view will be generated by the server. Loading pages via the client changes these assumptions and can present some issues.

Routing

• WordPress allows for any URL structure to be implemented
• Backbone.js asks you to define this structure and works best with a RESTful API, which WordPress does not support
• Using a "catchall" router helps to avoid this issue:

routes: {
	'*notFound' : 'go',
	''          : 'go'
},

• A discussion of this issue

Plugin support

• For proper plugin support, enqueues need to work, environments need to be set, and the front end needs to support this
• JSON API needs to mimic a full page load and front needs to alter this environment

<?php
ob_start();
wp_head();
ob_end_clean();

if ( have_posts() ) {
    while( have_posts() ) {
        the_post();
        
        // Get the data
    }
}

ob_start();
wp_footer();
ob_end_clean();

• A full discussion of this issue

A Backbone.js WordPress Theme Bill of Rights

1. The theme shall be held to the same standards as all other, non-Backbone.js themes.
2. The install process shall be the same as a standard WordPress theme.
3. The theme shall support permalink structures.
4. The theme shall make a strong effort to support common plugin scenarios.