Embed Size (px)
Citation preview
WordPress + Backbone.js
Portland WP Dev Meetup - June 10, 2013
Wednesday, May 29, 13
Agenda
What’s Backbone.js?
What does it bring to the table?
Overview of the Framework
“Current Comments” Example Plugin Walkthru
Things We’ve Learned So Far
Wednesday, May 29, 13
What is Backbone.js?
A lightweight JavaScript framework that can provide structure for your JavaScript - making development and maintenance more efficient
Wednesday, May 29, 13
What does it bring to the table?
structure
encapsulation, separation of concerns
event driven behavior (rendering, etc.)
appification of a page ( sync, pushState, etc.)
Wednesday, May 29, 13
Overview of Backbone.js
Data is abstracted into Models
Multiple Models may be collected into Collections
Models and Collections are inserted into the DOM via Views
Models and Collections are mapped to server side resources
Wednesday, May 29, 13
Moar
Views can leverage underscore or other templating systems to render
Views can listen to change events on attributes in the model to decide when / how much to re-render
Hooking up clicks is straightforward
Views can listen to add / remove events on Collections to add / remove Views for Models
Wednesday, May 29, 13
{ name: ‘Lisa’,email: [email protected] }
<li><a href=”mailto:[email protected]”>Lisa</a>
</li>
Model View
Wednesday, May 29, 13
<ul>
</ul>
{ name: ‘Bob’,email: [email protected] }
<li><a href=”mailto:[email protected]”>Bob</a>
</li>
Collection View
{ name: ‘Lisa’,email: [email protected] }
<li><a href=”mailto:[email protected]”>Lisa</a>
</li>
{ name: ‘Jack’,email: [email protected] }
<li><a href=”mailto:[email protected]”>Jack</a>
</li>
Wednesday, May 29, 13
Potential WP Uses
Display new posts on home page without reloading the entire page
Display new comments on posts while you’re looking at it and writing your own
Showing who else is looking at the page while you are
Leverage the Jetpack JSON API for data
Wednesday, May 29, 13
Example Plugin
http://wordpress.org/plugins/current-comments
Requires WP 3.5 as a minimum
Wednesday, May 29, 13
Wednesday, May 29, 13
Things We’ve Learned So Far
Be aware of your target version. WordPress 3.5 includes Backbone 0.9.2, which lacks some interesting features (like add merge) which are in Backbone 1.0
Watch out for sharing by reference - if your models or views use defaults
Don’t put View attributes (e.g. “show_comments”) in Models
Wednesday, May 29, 13
Moar
Use the Collection’s View addOne to achieve nesting of things like comment trees (and an intermediate view)
Define templates in filterable PHP to make your plugin / theme more extensible
Use content filter to pack bootstrap data for each page/post/comment
Wednesday, May 29, 13
Moar
Use the Jetpack JSON API, or write an admin-ajax endpoint and customize .sync
Watch out for render() : views are not necessarily in the DOM in render() - a containing view might still need to append it
Event busses are magical and support loose coupling
Wednesday, May 29, 13
Questions?
Wednesday, May 29, 13
