A few experiments with HTML 5 applications

I’ve had a long-standing interest in taking client-side programming beyond display logic and input validation. The new HTML 5 technologies are making full-scale application development in the browser increasingly practical. Unfortunately, the needs of Carbon Five’s clients generally exceed the capabilities of purely client-side solutions, so I don’t get to spend as much time developing JavaScript as I’d like. Consequently, I challenged myself to solve as many of my day-to-day issues as possible by writing applications that require only a single HTML page and a modern browser to run. So far, this has resulted in five applications; they’re available — with some additional thoughts on this style of development — below the fold.

The Applications

• Snowballs

  Snowballs is a video game that was mostly designed by my 7 year old daughter, Ada. She started with a drawing that contained a maze filled with dots, a player and some monsters, and she explained how you throw snowballs at the monsters and build walls to block them. I convinced her we could get roughly the same effect by freezing the monsters instead of blocking them, and then I began developing. We started iterating, and she continued to contribute ideas which, somewhat surprisingly, always made the game more fun. The arrow keys move the player, and the spacebar launches a snowball. It’s implemented as a single Canvas tag using a JavaScript interval as a run loop. The maze, players, monsters, and snowballs are all drawn with JS functions using the Canvas drawing API. Since this application uses the Canvas tag, it won’t run in Internet Explorer or older versions of other browsers.

• Flashcards

  I wrote Flashcards one evening when Ada’s teacher suggested using flash cards to help her memorize the words she shouldn’t need to sound out. The idea is that the parent clicks the spacebar when the child reads the word and they work together to reduce the time needed to read all the words. The application doesn’t need any graphics (other than some external images at the end), so it doesn’t use any HTML 5 features (browser compatibility is unknown).

• Timetest

  Like Flashcards, I wrote Timetest to help Ada with her schoolwork. In this case, she was getting frustrated with a lesson on analog clocks, so I wrote this application to make it more of a game. The goal is to answer as many questions as possible in the given time. The test turned out to be more difficult than it really needed to be, so I created an easier version (accessed by adding #easy to the URL). Since this application uses the Canvas tag, it won’t run in Internet Explorer or older versions of other browsers.

• Arithmetic

  Arithmetic is another educational application designed to drill addition that uses carrying. It provides spaces at the top, which you can click to mark a carry from the previous column. It doesn’t have any fancy HTML 5 features, but it does have a lot of stats.

• Surround

  My wife and I had designed a fireplace surround and mantel for our living room, but when it came to actually buying the materials and building the thing, we realized we didn’t know exactly how to scale it. Since the design was entirely composed of rectangles, I realized it would be possible to build a simple one-off CAD program to help us agree on some dimensions. The application makes use of the Canvas tag and the new HTML 5 slider inputs (which aren’t currently supported in Firefox). It translates between pixels and feet/inches constrained to an 8th of an inch, in order to make the measurements easier to use in the shop.

The goal of these exercises was to produce something simple and quick, but not entirely without polish. All the applications except Snowballs took only an evening or two. Each application (also excluding Snowballs) ended up under 300 lines of HTML, CSS, and JS combined.

Developing without a JavaScript framework

Limiting the applications to a single page means no importing jQuery or Prototype. This might seem like a big constraint in an application written entirely in JavaScript. But these frameworks really only help out with DOM traversal/manipulation, event handling, animation, Ajax, form validation. All the applications make do with a small amount of HTML, so it’s easy enough to grab elements by ID, and a few visits to Quirksmode gave me some reasonably cross-browser event-handling code. Animation isn’t really that hard in JS, and I needed it to be more custom than frameworks allow anyway. The rest I didn’t need. The truth is, I never miss having a framework (though I’m not about to stop using jQuery when working on client’s sites).

Advantages and disadvantages

• They’re quick to start. Since it’s a single page, there’s no setup and no integration.
• They’re easy to deploy. It’s only one relatively small file, so you can e-mail it to friends, and you can host it anywhere. If you want to spend a little time making it touch-screen compatible, you can get it on all the smarter smart phones without bothering with app stores. On the other hand, there is no way prevent people from stealing the application or the code if you were developing it commercially, since the source is always just a right-click away.
• HTML+CSS is a powerful display framework. Although it lacks built-in support for some of the fancier UI widgets, there is no GUI framework that I’m aware of (and I’ve developed with quite a few) that provides the same level of design control with the same ease of development as these technologies. Of course, I’ve been swimming in HTML/CSS for years, so this opinion is a bit biased.
• Canvas has a powerful vector graphics API. I had done a fair amount of Cocoa programming prior to these projects, so this didn’t come as a surprise. The real power of Canvas lies in its transformation functions. I’d like to find an application for some more advanced spline generation. The downside is that Canvas and HTML don’t really mix, so you can have great text layout in HTML and sophisticated text animations in Canvas, but not both at the same time.
• JavaScript is a capable if not optimal language. No one is going to make the case that JavaScript is the greatest language ever designed, but what it lacks in performance and language features, it partially makes up in powerful fundamentals and simplicity. JavaScript is neither a great functional language nor a great object-oriented one, but it is sufficiently powerful to develop in either of these paradigms. Snowballs, for example, acts a lot like a simulation and benefited from stateful objects. The other applications required less state and I found several uses for higher-order functions, though I wouldn’t consider any of them properly functional.
• Single-page applications are fun. These exercises have reminded me that, once the responsibilities of software engineering are stripped away, there is a joy to be found in coding for coding’s sake.

All of these applications are available on GitHub, but it’s probably easier to right-click on the page and choose view source. :)