Category Archives: Software Engineering

The Holy Grail: Full-stack JavaScript MVC with Rendr

Spike at Airbnb just mentioned during a live TechTalk webcast that the Rendr framework they built was open sourced earlier this month: https://github.com/airbnb/rendr. The framework leverages Node.js and Backbone.js to allow full-stack JavaScript MVC using a common set of code–greatly improving time to content, improving crawability, and reduces overall application complexity.

During the talk, Meteor and Derby were mentioned, and Mojito *sigh*. And Stitch was also mentioned, as a part of the stack they’re using. So anyway, there you have it. The Holy Grail I talked about. It’s out, but admittedly, according to Spike, not quite “finished”. Caveat emptor.

Later in the talk Spike mentions they were heavily inspired by Chaplin, which you can set up quickly by reading my recent post on developing modern web applications.

Developing modern web applications on Windows with Vagrant

I earlier this month I spent way too much time writing an article on how to SFTP to Ubuntu Server with Sublime Text. The purpose of the SFTP effort was to set myself up for developing modern web applications on a new Windows 8 machine I bought to play SimCity 2013. And after getting everything working I realized the SFTP method had some gremlins and the file syncing reminded me of Dreamweaver–it simply wasn’t fast enough.

Lately, unless you were running a Linux machine or had the pleasure of owning a Mac with OS X, developing modern web applications has been a bit of a kludge. Enter Vagrant.

Vagrant is a tool for building complete development environments. With an easy-to-use workflow and focus on automation, Vagrant lowers development environment setup time, increases development/production parity, and makes the “works on my machine” excuse a relic of the past.

In this article I’ll explain how to set up a development environment in Windows using a virtualized Linux box, suitable for rapid prototyping. Then I’ll take it a step further and explain how to integrate a Backbone-based application framework with Vagrant and Sublime Text, greatly increasing the speed for developing modern web applications on Windows.

Continue reading

Installing and using rupa/z

rupa/z is an amazing shell script that allows users to traverse a filesystem hierarchy in no time flat, with minimal effort. Use it if you spend any time at all changing directories in a *nix environment. It will improve productivity and spare fat fingers quite a bit of backpedaling.

z can be installed right from github by curling the raw source, making it available in path and then sourcing the file, e.g.

cd /usr/bin
sudo curl -O https://raw.github.com/rupa/z/master/z.sh
sudo chmod 775 z.sh
. /usr/bin/z.sh

Note: Add the source command (the last one) to your $HOME/.bashrc file to ensure z is available after every log-in.

Try it out by changing to a few of your most commonly used directories and then issuing the z command, e.g.

cd /usr/share/nginx/www
cd ~
z ww # or simply 'z w'

Hat tip to Paul Irish, who demoed rupa/z at Fluent 2012.

SFTP to Ubuntu server with Sublime Text

About a year ago I explained how to set-up a remote project in Eclipse. Since then I’ve ditched Eclipse in favor of Sublime Text. But, even with the cat’s pajamas of modern code editors (that’s Sublime), getting source files from development to production meant carrying around some extra baggage:

  • A deployment process, often manual, or, if automated, tightly coupled with the application sources (zomg! oh n0s!!), must be created and followed.
  • At least two environments, likely not running on the same platform, must be stood-up and carried: development and production.
  • Windows users, who may not have a good method for developing for today’s Linux-based hosting environments, are pretty much snowed from the get-go.

I’m deliberately oversimplifying here for the sake of TL;DR, so let me get the point. If you’re running a small site, are capable of failing fast and failing often, don’t have a lot of code contributors or are for some reason stuck working on an IBM Aptiva with 16MB RAM upgrade, you can pretty much skip the pain points in the list above and just manage code directly on the web server remotely. How is that possible? Simple. SFTP to Ubuntu server with Sublime Text as explained in this article.

Continue reading

Host websites in the cloud in 10 minutes

Hosting companies Bluehost and Dreamhost offer simple, one-click installation of popular blogging platforms like WordPress, Drupal and Joomla. The affordable hosting plans offered are low-cost, but you tend to get what you pay for: shoddy up-time and slow server responses. What would our hero Mario do about this? I’m thinking he’d Tanooki suit up, make a mad dash and fly to the first cloud he found. And that’s what this post is all about. Read on to learn how to host a website in the cloud in 10 minutes. It may not be as simple as 1-click hosting, but it’ll almost certainly be faster. And you’ll earn some geek cred for doing something complicated to do something simple.

Continue reading

The Holy Grail of Rich Internet Applications

One of the largest perceived drawbacks to creating a SPA or other Rich Internet Application is that they’re not SEO friendly or very accessible. With the advent of technologies such as ARIA, HTML5 and Node.js, things are changing. Web apps are becoming more usable and accessible, though also making them crawlable and highly performant is a formidable challenge. To solve this problem I for one am behind Derick Bailey’s approach for using HTML5 pushState and PE to achieve SEO and accessibility. After all, the hashbang method suggested by Google has a major problem: the URLs are not semantic.

It seems as though I’m not alone in my belief that Progressive Enhancement is possible in a single-page application, and the following article by Airbnb points toward the fact that they were able to achieve PE in a RIA using a technique they’re calling The Holy Grail. Under the approach, and per my understanding, content is rendered server-side first using both the same templating logic, routes and models, served up to the user agent, and then progressively enhanced afterwards with JavaScript.

A successful quest for The Holy Grail should yield a fully-crawlable Rich Internet Application with phenomenal “time to content” that doesn’t tax crawlers with ajax and will function in most any browser, even with JavaScript disabled.

Check out the Airbnb article referenced, which depicts the Holy Grail in a linked image, and ask yourself if you’re drinking from the right cup. You must choose, but choose wisely.

Amp up CoffeeScript coding with Sublime Text

Sublime Text with CoffeeScript is a JavaScript developer’s dream, but one that doesn’t evaporate in the fog of sleep shortly after waking. After learning about Sublime Text at Fluent Conf 2012 during a plenary talk by Paul Irish, I immediately began looking for ways to incorporate it into my workflow. And now, after having used it for over 8 months in my day-to-day work, I wanted to share a quick primer for those who want to amp up CoffeeScript coding with Sublime Text too.

Continue reading