GistBox is a web-based application built for developers to curate a library of code snippets. The app was written with Backbone.js on the frontend, Ruby on Rails on the backend and deployed on Heroku. It uses GitHub's API for authentication and for storing personal code snippets.
Programming is, at its essence, an exercise in applying existing code patterns to new situations. Most of the time, this involves just thinking for a moment. But once in a while, we remember only a small part of the solution and need to do a bit of digging to retrieve the whole thing. All professional developers keep these patterns in the form of code snippets somewhere. They could be in text files, in Google Docs or on Evernote.
When I started GistBox, I was personally struggling to organize this library of code snippets. GitHub's Gist provided a decent mechanism for sharing snippets. However, it was not organized in a form that made the act of retrieving information fast and simple. I also needed something more personal, that was tailored to use by an individual or a small team.
I looked at the systems out there which helped to organize large quantities of atomic information. Apps like Spotify, which featured playlists that could stretch into hundreds of tracks, was structured around discovery, but at the expense of curation. Evernote, which was (and still is) the most popular app for storing and retrieving personal notes, tried to be a single repository of everything worth capturing but didn't do much to accommodate the use case of storing code. My main form of inspiration came by way of one app which, while having nothing to do with software development, worked well for retrieving small "snippets" of information.
The heart of Gmail's retrieval system is its labels. For every email which meant anything to me, I would label it. For instance, whenever I got a flight or car rental confirmation, I would label it with "Trips". Once I arrived at the destination, it was easy to just open up the "Trips" label and scan through the most recent emails to find the relevant information.
The ease of organizing and retrieving emails through Gmail's label system meant that it provided a convenient starting point for my own design. Just as with Gmail, GistBox's labels could be created, edited, deleted and rearranged. They were also color-coded, which provided convenient visual indicators for users as they scanned long lists of code snippets.
Beyond its labels, GistBox's design still needed an interface for the fast retrieval of code snippets. I wanted to accommodate two primary use cases: (1) browsing for content by some set of criteria and (2) searching for snippets by description or file content.
GistBox's split-view design allows for users to operate at the right level of detail for the task at hand. At the top level, there are filters and labels on the entire library. One level down is basic information and metadata about each gist. This gives users the ability to scan the list to browse for content. When a gist is selected, its full content, including all code, is shown in the largest panel.
This hierarchical layout sets up a familiar left-to-right, general-to-specific design pattern and allows a developer to drill down with increasing levels of specificity. This accommodates the case of a dev remembering only vague details about a pattern and using a combination of labels and search to whittle down the possibilities until he finds what he needs. The layout was designed to support a common pattern of mental information retrieval.
Once personal code snippets had been out in the wild for several months, I turned my attention to another important facet of professional coding: sharing code within an org. Unlike GitHub Gists, which were built to distribute snippets far and wide through embeddable widgets, GistBox needed a system that made it easy for any member to access the team library but still kept snippets private from the web.
I immediately faced the dilemma of whether to continue using GitHub's API for Team Gists. The trouble was that gists were specific to a single user in GitHub's world, which meant that a team's code could magically disappear if one of its members decided to disassociate from the team. GistBox needed gists to exist on the team level, which was not a capability that GitHub's API provided.
I ended up writing the data model for teams, gists and members from scratch. The design ensured that a team and its content existed separate from its members. This meant team membership/leadership could be changed without affecting gists.
GistBox's architecture was designed around low-latency user interaction. I wanted it feel like a desktop app, with the number of requests to the server kept to a minimum.
Backbone also allows for easily mixing in helpers. I wrote a bunch of these functions for many purposes, from rendering Date objects to piecing together Gravatar URLs. With such a large single-page app, it was also important that changes were uniformly applied to every corner. Helpers ensured that code was reduced and reused.
Ruby on Rails
I picked Rails for its awesome ecosystem. Coming with great support for writing APIs straight from the box, Rails is made even better with Ruby Gems, which are single-purpose packages of code for everything from request caching to generating cat memes.
For GistBox, I relied on a number of great gems:
- Unicorn - Allows for multiple server threads to be pooled into a single server process, making Heroku dynos 4x more efficient
- Pusher - Gives GistBox the ability to automatically refresh team members' local library if another member makes an edit to a team gist
- RABL - Makes writing JSON output much easier through the use of templates
For the full list, check out the GistBox About page.
Deploying on Heroku was an easy choice to make. I wanted to write apps, not manage servers. As a platform, Heroku has nice support for load scaling (which I made full use of when Addy Osmani tweeted about GistBox) and for integrating with monitoring services like New Relic. While not the cheapest solution by any measure, Heroku's ease of deployment and flexibility was the right solution for an app of GistBox's size.
To date, GistBox has over 35,000 registered users, with about 20% of them coming back each month. There have also been over 2,200 teams created along with 11,000+ team gists. The Chrome Web Store boasts over 22,000 users of the packaged app along with 6,000 installed users of the GistBox Clipper, a companion extension for creating gists from any content on the web.