wordcamp ann arbor 2015 introduction to backbone + wp rest api
TRANSCRIPT
![Page 1: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/1.jpg)
Introduction to Backbone.js in WordPress
Brian Hoggbrianhogg.com | @brianhogg
WordCamp Ann Arbor 2015
![Page 2: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/2.jpg)
brianhogg.com
Subtitle
![Page 3: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/3.jpg)
Section Divider Title LayoutSubtitle
![Page 4: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/4.jpg)
Event Calendar Newsletter
https://wordpress.org/plugins/event-calendar-newsletter/
![Page 5: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/5.jpg)
Agenda▪ Why Backbone.js▪ Basics of Backbone.js / Underscore.js▪ Example plugin using wp.template, wp.Backbone.View and WP JSON
REST API v2
![Page 6: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/6.jpg)
Who are you?
![Page 7: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/7.jpg)
Why Backbone.js vs just jQuery?▪ Events system▪ Performance▪ Leveraging the community▪ Not re-inventing the wheel▪ Enforces some structure on your JavaScript code
![Page 8: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/8.jpg)
Backbone.js has an MV* structureUses jQuery but only hard requirement is Underscore.js
![Page 9: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/9.jpg)
What is Underscore.js?Utility functions with _
_.each, _.template, Lots more: http://documentcloud.github.io/underscore/
![Page 10: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/10.jpg)
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>"
![Page 11: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/11.jpg)
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>"
![Page 12: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/12.jpg)
wp.template
![Page 13: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/13.jpg)
wp.template
hello {{ name }}
<strong>{{{ value }}}</strong>
hello <%= name %>
<strong><%- value %></strong>
![Page 14: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/14.jpg)
wp.template
<# if ( some_condition ) { #>some output
<# } #>
![Page 15: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/15.jpg)
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
![Page 16: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/16.jpg)
Backbone / Underscore
Included in WordPress since 3.5
The "backbone" of the media manager, revisions UI
![Page 17: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/17.jpg)
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.”
![Page 18: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/18.jpg)
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
![Page 19: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/19.jpg)
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:
![Page 20: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/20.jpg)
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
![Page 21: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/21.jpg)
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' });
![Page 22: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/22.jpg)
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();
}});
![Page 23: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/23.jpg)
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 ]);
![Page 24: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/24.jpg)
Populating Collection from ServerWP REST API
[{
id: 1,title: {
rendered: "Hello, World"}
},{
id: 3,title: {
rendered: "Ann Arbor is amazing"}
},]</script>
![Page 25: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/25.jpg)
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
![Page 26: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/26.jpg)
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
![Page 27: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/27.jpg)
![Page 28: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/28.jpg)
DEMO
![Page 29: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/29.jpg)
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
![Page 30: WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API](https://reader035.vdocument.in/reader035/viewer/2022081414/58a4ba121a28ab2d688b5d67/html5/thumbnails/30.jpg)
Introduction to Backbone.js in WordPress
Brian Hoggbrianhogg.com | @brianhogg
WordCamp Ann Arbor 2015