Backbone Views in WordPress by Mark Jaquith
Notes from the talk given at the 2014 WordCamp conference in San Francisco by Mark Jaquith
Backbone is the foundation of several recent user-facing features in WordPress. This talk will explore how to leverage WordPress’ powerful Backbone view management tools to craft maintainable, modular UI for your plugin or theme
- Historically WP is PHP and JS.
- Over time JS became essential
- Browser-Server-PHP-Server-Browser – slow and disconnected
- More and more it is happening in the browser. We get immediate feedback. People are using mobile, native applications.
- The web is not dead, but we need to up our game. Click and waiting for a minute is not acceptable.
- (Js code scrolling on a TV show as missile launch code. Emebressing)
- Backbone is a simple library to handle views
- It gets your truth out of the DOM.
- 3 main concepts: Models, Collections (multiple models), Views (in charge of rendering the collection)
- Views are tricky.
- Plugin idea of “showdown” series of types of things competing against each other for public approval.
- Hierarchy of multiple competition, multiple competitors and zero or more votes
- This means nested views. One giant view of loops through data. It doesn’t scale, inelegant, at re-rendering you have to do the whole thing.
- Option to smaller views: subview managers
- wp.backbone.view extends the Backbone view object to support views: minimum viable solution to the problem. Tenth of the size of marionett.
- How to use it:
- 1. Create a main view
- 2. Create Subviews
- 3. Add the subviews to the main view
- 4. Init, Render, Inject into the DOM, Ready
- You can call set, pass it on a single view or set of views
- You get a ‘get’ function
- And a handy ‘first’ function
- Templating: stick with the WP conventions, using underscore templates with certain markup
- Communicating between views: something in one view needs to affect something in another view. Don’t do it through views. You can do it through this.views.parent
- DOM events are great, but for nesting views you have to be careful
- Demo: showdown.jaquith.me code at github.com
- This is used for post-revision in WP core
- Also used at gifdrop.com
- Choosing backbone over angular, because it is simple and doesn’t force me to a specific way of thinking.
- SEO approach: write a basic PHP version that loops through it.
- He learned Backbone through “code school” site
- Backbonejs.org has an awesome annotated source