The Web as a Virtual Country

So my parents came into town this weekend to visit, and I was explaining to them all the things I’ve learned in the last month or so: HTML, CSS, Javascript, SQL, Ruby, MVC, Rails, etc.

We’ve only covered HTML, CSS, SQL, and Ruby, and how the Internet works so far in class (the other topics being self-taught so far based on prepwork), but regardless, I was explaining to my parents how I understood all these things fit together. Specifically, what the heck is the difference between PHP, Python, Ruby, Ruby on Rails, and all these terms that outside observers might hear about but not understand the difference between.

Struggling to explain these concepts in a short, concise manner, I remembered an analogy I had heard before: the web as a virtual city. Extending this analogy further:

• The browser / internet infrastructure =~ cars / highways
• Websites =~ actual stores or buildings
• Web application frameworks (e.g. Rails) =~ framework or skeleton of a building
• Programming languages =~ building materials (e.g., Ruby could be wood, Python could be brick, PHP could be straw – just as an example, not implying anything about the merits of any language)

We always talk about coders as “builders”, and I think it’s even more true than what most people realize. What I essentially learned in the last month were the tools of the craft, the art of carpentry or brick-laying. Now it’s time to learn how to build buildings. But before I start building buildings, I need to understand what a house actually looks like and how it functions.

Introducing: Sinatra

According to the official website, Sinatra “is a DSL for quickly creating web applications in Ruby with minimal effort.” If we keep with the analogy, Sinatra is a much easier framework for building simple houses, while something like Rails is a lot more powerful and allows us to build all kinds of buildings, but at the expense of requiring a lot more complexity.

On a side note, did you know that if you search for “Sinatra” on Google, the first result is actually Ruby Sinatra and not Frank Sinatra? Crazy eh? Thanks @StevenABrooks for the tip!

So obviously it makes sense to learn how to build a simple house before building a skyscraper, eh? And even before I start to build houses, it might be a good idea to look at what other peoples’ houses look like, eh? Luckily thanks to the open source movement, we can see exactly how sites are built and learn how to organize our tools (i.e. codebase) to best start the building process. Thanks, yer ol’ Hub o’ Gits!

I picked a Sinatra web app, and analyzed its codebase to learn how its floors are laid, how rooms are connected, etc, to better design my own floorplans in the future. And what better app to look at than the appropriately-named “Dashing”?

Sinatra is not Dashing, but Dashing is Sinatra?

Dashing by Shopify definitely lives up to its name – check out demos here and here. Dashing is “a Sinatra based framework that lets you build beautiful dashboards”. Its UI is similar to Window 8’s, except without the evil-empirishness of a close-sourced monopoly; I can look behind the curtain to see a well-designed, simple codebase in the repo. Here’s what it looks like:

• /bin – inside is a single ruby binary for the command line inputs
• /javascripts – where all the magic of the UI happens. The .js files inside include JQuery, as well as a batman.js file, which seems to be linked to another Shopify product
• /lib – there is only single file in here, dashing.rb. This appears to be the actual Sinatra application for interfacing with the web servers and ‘net. So even though this file is very small compared to some others, it is essential – without it this would not be a web app.
• /templates – there are a few miscellaneous templates in here. The biggie is a folder inside called /projects. The way Dashing works, you can generate entire projects with the Dashing gem, by typing ‘dashing new sweet_dashboard_project’ into CLI, which will use this /projects folder as a template
• /test – a pretty simple set of tests in the test suite
• .gitignore – pretty standard; this tells git what kinds of files to ignore when creating or changing a repo
• Gemfile – all Ruby gems have this
• MIT-LICENSE – pretty standard
• README.md – pretty standard
• Rakefile – pretty standard. This rakefile makes it super simple for Ruby to run your test suite
• dashing.gemspec – This contains gem specifications – pretty standard for when we want package a library into a Ruby gem