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

My 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