Progressive flexible mobile tablet sensible extensible accessible pragmatic functional useful production-ready more

If you’re a web designer or developer, you’re well acquainted with prototyping. From raw wireframing to creating interfaces in Photoshop, designers map out how sites will work before they create them. Over the past few years, the protoyping process has changed significantly. With browser makers generally agreeing on web standards and the rise of tools such as Firebug and WebKit’s web inspector, we can sometimes skip Photoshop altogether and go straight to the browser. Plus, JavaScript frameworks like jQuery let us play with browser events with only a few lines of code. But what if we need to do even more? As websites increasingly become web apps, we now need to prototype backend functionality, too.

This article introduces Sinatra, a so-called “micro” web framework that helps you create real (albeit simple) web apps extremely fast, allowing you to prototype flows and behaviors that you may want to integrate into a final product. Sinatra is written in Ruby, but for our purposes we’ll use it as the “glue” between our HTML/CSS and the domain-specific Sinatra functions, so you won’t have to know much more than a few simple methods to get to “Hello world.” In this article, our example will be an extremely simple Twitter app that accepts two usernames and tells you if one user is following the other.