WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API
-
Upload
brian-hogg -
Category
Technology
-
view
1.238 -
download
0
Transcript of WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API
Introduction to Backbone.js in WordPress
Brian Hoggbrianhogg.com | @brianhogg
WordCamp Ann Arbor 2015
brianhogg.com
Subtitle
Section Divider Title LayoutSubtitle
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
Who are you?
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* structureUses jQuery but only hard requirement is Underscore.js
What is Underscore.js?Utility functions with _
_.each, _.template, Lots more: http://documentcloud.github.io/underscore/
Templatesvar 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>"
Templatesvar 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
wp.template
hello {{ name }}
<strong>{{{ value }}}</strong>
hello <%= name %>
<strong><%- value %></strong>
wp.template
<# if ( some_condition ) { #>some output
<# } #>
Lots of AlternativesEmber.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 Examplevar 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, worldvar 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 BackboneGroup 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 modelsvar 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 ServerWP 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 /collectionread → GET /collection[/id]update → PUT /collection/idpatch → PATCH /collection/iddelete → DELETE /collection/id
DEMO
ResourcesWP API JavaScript Clienthttps://github.com/WP-API/client-js
Backbone Debugger for Chromehttps://chrome.google.com/webstore/detail/backbone-debugger/bhljhndlimiafopmmhjlgfpnnchjjbhd?hl=en
Example wp.Backbone.View pluginhttps://github.com/markjaquith/Showdown
Code / Slideshttps://github.com/brianhogghttp://www.slideshare.net/bhogg
Introduction to Backbone.js in WordPress
Brian Hoggbrianhogg.com | @brianhogg
WordCamp Ann Arbor 2015