Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Introduction to Backbone.js in WordPress
Brian Hogg
brianhogg.com | @brianhogg
WordCamp Ann Arbor 2015
brianhogg.com
Subtitle
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 ...
Who are you?
Why Backbone.js vs just jQuery?
▪ Events system
▪ Performance
▪ Leveraging the community
▪ Not re-inventing the wheel
▪ En...
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 ); // ...
Templates
var template = _.template("hello <%= name %>");
var html = template({ name: 'Brian' });
console.log( html ); // ...
wp.template
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 fo...
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...
Models Example
var Post = Backbone.Model.extend({
defaults: {
title: "",
post_status: "draft"
},
initialize: function() {
...
Listening for Changes
post.on("change:title", function(model) {
alert("Title changed to: " + model.get("title"));
});
this...
Views
▪ Used to turn a model into something you can see
▪ Always contains a DOM element (the el property) though it may no...
Bare Minimum to use Backbone
Group your events code together
var PostView = Backbone.View.extend({
events: {
"click .edit"...
wp.template
<script id="tmpl-bb-post" type="text/html">
{{{ data.title }}}
</script>
bbdemo.PostView = wp.Backbone.View.ex...
Collections
Ordered set of models
var Posts = Backbone.Collection.extend({
model: Post
});
var post1 = new Post({ title: "...
Populating Collection from Server
WP REST API[
{
id: 1,
title: {
rendered: "Hello, World"
}
},
{
id: 3,
title: {
rendered:...
Populating Collections from Server
var Posts = Backbone.Collection.extend({
model: Post,
url: bbdemo.url + '/posts'
});
va...
How Backbone Works With REST APIs
Out of the box, Backbone.js supports RESTful APIs through
Backbone.sync():
create → POST...
DEMO
Resources
WP API JavaScript Client
https://github.com/WP-API/client-js
Backbone Debugger for Chrome
https://chrome.google....
Introduction to Backbone.js in WordPress
Brian Hogg
brianhogg.com | @brianhogg
WordCamp Ann Arbor 2015
WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API
Upcoming SlideShare
Loading in …5
×

WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API

1,485 views

Published on

Introduction to Backbone.js and the WordPress specific wp.Backbone.View and the WP JSON REST API.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

WordCamp Ann Arbor 2015 Introduction to Backbone + WP REST API

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

×