Backbone Views in WordPress by Mark Jaquith

Notes from the talk given at the 2014 WordCamp conference in San Francisco by Mark Jaquith

Official description:

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

BackboneMy notes:

  • 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
  • QA:
    • 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

Post Media Link

Gabor Por