Instant EOL Image Search

Instant-EOL is a micro web application that allows visitors to search for images on the Encyclopedia of Life.

It has one single purpose: fast and convenient image searching and browsing.

Behind the scenes

This web application is an experiment with the following JavaScript libraries:

• Zepto, for DOM manipulation. Zepto is a light-weight (as well as API-compatible) alternative to jQuery.
• Backbone, for organizing JavaScript code. Backbone is a library that encourages developers to separate code into models, views, and controllers. It also plays nicely with RESTful web services.
• handlebars.js, for templating. Handlebars.js is a syntax-compatible superset of Mustache. Of all the templating libraries, this was my favorite implementation.

The rest of the application is written with:

• Sinatra
• Haml and Scss
• Dalli

Overview

I'm planning to document several parts of the application. Review the current progress.

Dependencies

• ruby-1.9.2-p180
• RVM
• bundler
• memcached

Running the code locally

The repository also contains the necessary Bundler and RVM resources to get setup with minimal effort.

git clone git://github.com/mchung/instant-eol.git
cd instant-eol

At this point, RVM will launch the .rvmrc wizard. If you decide to accept the .rvmrc configuration, RVM will create the following gemset:

rvm --create 1.9.2-p180@instant-eol

Now you can setup the dependencies by running the following command:

bundle install

Note: If you previously decided not to accept the .rvmrc configuration, then Bundler will install gems into your default rubygems location.

To launch the web server and memcached, run the following command:

foreman start

Alternatively, you can launch the servers separately by running the following command in two different shells.

shotgun --server=thin --port=5000 config.ru

memcached -vvv

Learn you some Backbone

• Building a single page app with Backbone.js, underscore.js and jQuery. A good introduction to Backbone.
• A Backbone.js Tutorial with Rails (Part 1) and Part 2. The two articles that most influenced the organization and structure of Instant-EOL.
• Annotated source code for todos.js, an example Backbone app.
• FireCamp, another Sinatra/Backbone.js demo app.
• The Backbone Store, a demo app. Check out the well-organized code in store.js.
• Backbone Mobile, a demo app. Great looking CoffeeScript code.
• The mother of all Backbone resources. On Quora.
• A simple Backbone app.
• Misadventure, a demo app built on faux, a library for building Single Page Interface (or "SPI" applications with Backbone). Make sure to read Misadventure Code Review, a series of blog posts walking through the source code. (Instant-EOL does not use faux.)
• Introduction to Handlebars.js.