Learning underscore.js

Playing with underscore.js this weekend to take a crack at solving one of the workflow challenges with the site Science home page.

There are two news feeds on the home page, Daily News and Careers. The Careers feed is pre-generated on the back end using a house templating application. The Daily News feed is constructed from a Google Feed API and the markup is generated in JavaScript.

This is suboptimal for a couple of reasons. First, any changes to the markup must be made in both the JavaScript on the client side and in the house templates on the back end. To fix this we can use underscore.js's template function to define the template once. Deploying changes to the template could be done much more quickly, although it's questionable how helpful this would be since the templates aren't changed often.

Second, since the Careers data is not separated from its presentation, making reuse challenging. Considering the number of places on the site we use headline-type data, it would be nice if we could define a "headline" data format, and then any Science publication (Careers, News, the three journals) would only need to be responsible for publishing a data feed (in JSON) while underscore.js handles the templates.

In fact, with a little bit of meta-data in the feed, we could use underscore.js's collection functions to highlight headlines depending on what type of article a visitor was reading.

Adopting underscore.js to solve this particular problem may not gain us benefits to offset the development costs, but it's interesting to play with new ideas. It's hard to tell when one of them might take off.