Now we're finally ready to write some code. We'll start building our view with HTML and JavaScript, working our way from the outside in. We're going to have to speed through this first step as it is impossible to capture the chaotic first steps of building a UI. The main point to keep in mind is that we're skipping the Ruby code that will power our app eventually.

We'll have a tiny mock web app in Ruby that serves our static HTML and JavaScript files, but that doesn't really count. By defining our UI first, we can figure out what our remaining code will need to do.

First, let's get our mock web app out of the way. All this does is serve static files, and we could have used Nginx or any other web server to achieve the same result. But we're going to use Rack (http://rack.github.io), a popular Ruby web server interface. It's worth learning more about Rack, as it's one of the most important Ruby libraries out there, and is the foundation of Sinatra, Rails, and other popular Ruby web libraries.

First, let's start with a tiny Rack web app so we get the basics of how Rack works. Here is the file for our app, tiny_rack_app.rb:

require 'rack'

# A Rack app is any ruby object that responds to the 'call' method...
# ... in this case an instance of the TinyRackApp
class TinyRackApp
  def call(env)
    [
      200,                              # HTTP status
      {'Content-type' => 'text/plain'}, # HTTP headers
      [ "Hello", ", ", "World", "!" ]   # HTTP body, in chunks
    ]
  end
end

# if this file was executed directly, start the Rack app
if __FILE__ == $0
  Rack::Handler::WEBrick.run TinyRackApp.new
end

We'll explain the code in a moment. First, let's start the app and send it a request to see how it works. Make sure you've installed the Rack gem (gem install rack). Then you can start the app in the terminal very simply:

$ ruby tiny_rack_app.rb
[2015-12-07 22:38:51] INFO  WEBrick 1.3.1 
[2015-12-07 22:38:51] INFO  ruby 2.2.0 (2014-12-25) [x86_64-darwin14]
[2015-12-07 22:38:51] INFO  WEBrick::HTTPServer#start: pid=19223 port=8080

Using a web browser, go to http://localhost:8080 and you'll see a response of Hello, World!. If you want to see more detail, you can open another terminal window and send a request with curl:

$ curl --verbose http://localhost:8080
* Rebuilt URL to: http://localhost:8080/
*   Trying ::1...
* Connected to localhost (::1) port 8080 (#0)
> GET / HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.43.0
> Accept: */*
> 
< HTTP/1.1 200 OK 
< Content-Type: text/plain
< Server: WEBrick/1.3.1 (Ruby/2.2.0/2014-12-25)
< Date: Tue, 08 Dec 2015 06:50:51 GMT
< Content-Length: 13
< Connection: Keep-Alive
< 
* Connection #0 to host localhost left intact
Hello, World!

Notice the Content-Type: text/plain header in the response.

If we look back at the code, we see there isn't much to a Rack application. Of course, this app is just an example that always returns the same response, which we've hardcoded in the TinyRackApp#call method. But an entire Sinatra app is still just a Rack application that returns, after all of its processing, a simple array of three items:

We won't go into too much detail, but note that the body is not a simple String but rather an array. This is because an HTTP body can be very long and processing it is much more efficient if it can be handled in chunks. Note that the HTTP body in the response is simply Hello, World!. The only reason we've split that up into multiple elements is to illustrate this point. In future examples, we'll just use a one-element array with the body as one String.

One last thing to note is that we start the Rack application in the file itself by calling Rack::Handler::WEBrick.run when the files is executed directly (in other words, when we run ruby tiny_rack_app.rb). This is the simplest way to start up a Rack application, but it's not very practical in the real world, where we would never want to limit ourselves to a single web server (and definitely not the very slow WEBrick).