WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API

Introduction to Backbone.js in WordPress
Brian Hogg
brianhogg.com | @brianhogg
WordCamp Ann Arbor 2015

Section Divider Title Layout
Subtitle

Event Calendar Newsletter
https://wordpress.org/plugins/event-calendar-newsletter/

Agenda
▪ Why Backbone.js
▪ Basics of Backbone.js / Underscore.js
▪ Example plugin using wp.template, wp.Backbone.View and WP JSON REST
API v2

Why Backbone.js vs just jQuery?
▪ Events system
▪ Performance
▪ Leveraging the community
▪ Not re-inventing the wheel
▪ Enforces some structure on your JavaScript code

Backbone.js has an MV* structure
Uses jQuery but only hard requirement is Underscore.js

What is Underscore.js?
Utility functions with _
_.each, _.template, Lots more: http://documentcloud.github.io/underscore/

Templates
var template = _.template("hello <%= name %>");
var html = template({ name: 'Brian' });
console.log( html ); // "hello Brian"
var template = _.template("<strong><%- value %></strong>");
var html = template({ value: '<script>' });
console.log( html ); // "<strong><script></strong>"

Templates
var template = _.template("hello <%= name %>");
var html = template({ name: 'Brian' });
console.log( html ); // "hello Brian”
var template = _.template("<strong><%- value %></strong>");
var html = template({ value: '<script>' });
console.log( html ); // "<strong><script></strong>"

wp.template
hello {{ name }}
<strong>{{{ value }}}</strong>
hello <%= name %>
<strong><%- value %></strong>

wp.template
<# if ( some_condition ) { #>
some output
<# } #>

Lots of Alternatives
Ember.JS, Angular.JS, ...
Multiple ways of doing similar things. Even in Backbone.JS:
“It's common for folks just getting started to treat the examples listed on
this page as some sort of gospel truth. In fact, Backbone.js is intended to
be fairly agnostic about many common patterns in client-side code.”
http://backbonejs.org/#FAQ-tim-toady

Backbone / Underscore
Included in WordPress since 3.5
The "backbone" of the media manager, revisions UI

Models
“Models are the heart of any JavaScript application,
containing the interactive data as well as a large part
of the logic surrounding it: conversions, validations,
computed properties, and access control. You extend
Backbone.Model with your domain-specific methods,
and Model provides a basic set of functionality for
managing changes.”

Models Example
var Post = Backbone.Model.extend({
defaults: {
title: "",
post_status: "draft"
},
initialize: function() {
console.log("creating a post");
}
});
var post = new Post({ title: "Hello, world", post_status: "draft" });
var title = post.get("title"); // Hello, world
var post_status = post.get("post_status"); // draft

Listening for Changes
post.on("change:title", function(model) {
alert("Title changed to: " + model.get("title"));
});
this.on("change:title", this.titleChanged)
or in the initialize function of a model with:

Views
▪ Used to turn a model into something you can see
▪ Always contains a DOM element (the el property) though it may not have been
added to the viewable page yet

Bare Minimum to use Backbone
Group your events code together
var PostView = Backbone.View.extend({
events: {
"click .edit": "editPost",
"change .post_status": "statusChanged"
},
editPost: function(event) {
// ...
},
statusChanged: function(event) {
// ...
}
});
var postView = new PostView({ el: '#my-form' });

wp.template
<script id="tmpl-bb-post" type="text/html">
{{{ data.title }}}
</script>
bbdemo.PostView = wp.Backbone.View.extend({
template: wp.template(‘bb-post'),
prepare: function() {
return this.model.toJSON();
}
});

Collections
Ordered set of models
var Posts = Backbone.Collection.extend({
model: Post
});
var post1 = new Post({ title: "Hello, world" });
var post2 = new Post({ title: "Sample page" });
var myPosts = new Posts([ post1, post2 ]);

Populating Collection from Server
WP REST API[
{
id: 1,
title: {
rendered: "Hello, World"
}
},
{
id: 3,
title: {
rendered: "Ann Arbor is amazing"
}
},
]
</script>

Populating Collections from Server
var Posts = Backbone.Collection.extend({
model: Post,
url: bbdemo.url + '/posts'
});
var postsCollection = new Posts();
postsCollection.fetch();
If not a RESTful format, would need to override functions like fetch, sync and parse

How Backbone Works With REST APIs
Out of the box, Backbone.js supports RESTful APIs through
Backbone.sync():
create → POST /collection
read → GET /collection[/id]
update → PUT /collection/id
patch → PATCH /collection/id
delete → DELETE /collection/id

WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API

Resources
WP API JavaScript Client
https://github.com/WP-API/client-js
Backbone Debugger for Chrome
https://chrome.google.com/webstore/detail/backbone-debugger/bhljhndlimiafopmmhjlg
Example wp.Backbone.View plugin
https://github.com/markjaquith/Showdown
Code / Slides
https://github.com/brianhogg
http://www.slideshare.net/bhogg

WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API

Related slideshows

More Related Content

WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API

Editor's Notes