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
- 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
Recent Comments