Quickly Build Faceted Search with ElasticSearch and Backbone.js

I’ve been working with ElasticSearch off and on for the past year, and recently I’ve done a lot of work using Backbone.js to build interactive elements for web pages. Time to combine them together into a modular library: es-backbone.js.

Faceted search is one of the more powerful aspects of ElasticSearch. For es-backbone I was inspired by Karel Minarik’s very cool data visualization example. Initially I started from his implementation, then veered away from Protovis to use jQuery Flot for the charting when I realized my Javascript graphics abilities were not up to making use of Protovis. Flot makes it very fast to build and customize charts.

But managing all the data that comes back with your faceted search results, displaying it for the user, and allowing them to interact with the data and filter it further is also a bit of a headache. Using Backbone to keep a model of the current query the user is doing and another model of the search results helps keep the data well-organized and easy to update. By creating highly modular Backbone Views I can quickly customize a search page depending on what fields the data contains and how we want to display it.

I don’t have any public ElasticSearch data for a good demo, so a screenshot will have to do:

Each part of the page is a separate Backbone View, which allows you to customize the page very quickly based on what data you have. Think that pie chart of authors is too busy, replacing it with a list of the top sites (similar to the tags list) is only a few lines of code. Currently the library has Views for displaying facets as:

  • A pie chart of terms or ranges
  • A list of terms (with counts and percentages)
  • A timeline of dates (which auto switches scales between months, weeks, and days )

All of these views will re-filter your results when you click on the pie/chart/list so you can drill down into your search results. And I used Select2.js in tagging mode to make it easy to add and remove filters. I think the interaction is pretty cool, and wish I had some live public data to show it off on.

The library definitely allows new sites to be built very fast. Once the data is indexed, you can build a site in less than an hour (my last one took 35 min). I’ve released it on github in the hopes that others will find it useful (patches welcome). I’ve included a simple example which you can grep through for “TODO” to find the parts you need to edit to customize for your own application.

Previous Post
Next Post
Leave a comment

4 Comments

  1. dadoonet

     /  August 20, 2012

    That’s great. Thanks for sharing it.

    Like

    Reply
  2. which

     /  December 19, 2012

    Very useful, Good work thanks

    Like

    Reply
  3. Was this a frontend app? If so how did you go about securing elasticsearch in a real world enviroment?

    Like

    Reply
    • Greg

       /  March 31, 2014

      We are currently only using it on an internal network, but we do whitelist on the server side to limit which indices and doc types can be accessed. Also we filter which fields can be returned as results.

      For a real world public API you’d probably also want to limit the types queries the user can do. For instance, query_string queries can fail really easily (though this interface does currently use them). And you wouldn’t want to allow faceting on fields that have many terms in them.

      Like

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: