Last week, along with a few other developers from Automattic, I attended the BackboneConf 2013 at the Microsoft NERD center organized by the fine folks at Bocoup. The enjoyable two-day conference provided me with a better sense of the bigger javascript trends and gave me a bunch of practical tidbits.

The big theme was modules and how to best structure code so that dependencies are minimized, concerns are well separated, and unit testing is easier. With the inclusion of modules in ECMAScript 6 and the maturation of nodejs and AMD/UMD/CommonJS, modules are ready for prime time. Now I just need to figure out the best way to incorporate modules into WordPress, which already has a file-based javascript dependency management system.

Tidbits

1. Underscore has lots of super elegant bits that I should take remember to use:

   // Set default key/value pairs if not included in the passed object (options)
   options = options || {};
   _.defaults(options, {
     showFollows: true,
     showLikes: true
   });
   // take certain options and copy the properties to the destination object (in this case this)
   _.extend(this, _.pick(options, methodArray));
   

2. Use an event bus and postMessage() to simplify messaging between parent document and iframe with embedded Backbone App.See http://benvinegar.github.io/backbone-at-disqus-talk/#/42
3. Use requestanimationframe() and _.debounce() to avoid blocking the UI when doing expensive looping operations by chunking the work.
4. Even when using Backbone, it can be very useful to store visual state in the DOM through using classes. It seems obvious in retrospect, but when in a Model-View-Whatever state-of-mind, it is easy to forget to take advantage of the DOM to store view state. This is especially useful for changing the visibility of certain child views in a collection view.
5. Q seemed to be the preferred library for promises.
6. Mocha, chai, and sinon seemed to be the preferred set of tools for writing javascript unit tests.
7. Use promises to fetch data, templates, and any other dependencies in parallel when building up a page in a single-page app to improve the load time of pages.
8. FastClick is a neat library for improving the responsiveness of click events on mobile if you don’t have any double-click events.
9. IndexDB allows a client side app to store much more data than local storage

Slides

• http://benvinegar.github.io/backbone-at-disqus-talk/
• https://speakerdeck.com/backbonerails/little-opinions-big-possibilities-the-tools-and-patterns-for-building-large-scale-backbone-applications
• https://speakerdeck.com/landau/test-driven-backbone-development
• http://bobholt.me/bbconf-bos-2013
• https://speakerdeck.com/mwunsch/the-geologic-time-scale-of-gilt-dot-coms-view-layer
• http://kristoferjoseph.com/Building-Reflow-BackboneConf-2013/
• http://tbranyen.com/talks/growing-up-with-backbone
• http://johnkpaul.github.io/presentations/backboneconf/2013/toasty-plugins/
• http://slid.es/pamelafox/js-ui-library-design
• http://benvinegar.github.io/csp-talk-2013
• https://github.com/asakusuma/backboneconf-deck-2013