Navigating the HTML5 Maze

May 2012 · 4 minute read

Ember! Batman! Spine! Knockout! Bootstrap! Boilerplate!  No, this is not the opening sequence to a bad B-list movie from the 1960's.  It is but a very small sampling of the overwhelming number of HTML5 libraries/frameworks/(insert your own catagorization here) available for use by unsuspecting, bright-eyed developers.  [Note: remember, when I use the term HTML5, it is based on what seems to be the industry accepted use of the term which encompasses HTML5, JavaScript, and CSS3] Selecting one or more open source projects to make your development life easier usually ends up being a project in and of itself.  Witness this conversation that may seem all to real to a number of you reading this:

Developer A: "I think we should use jQuery for our next project."

Developer B: "But it's a mobile project using HTML5.  Wasn't jQuery built before HTML5 and mobile?"

Developer A: "So what about jQuery Mobile?  That came later, right?"

Developer B: "Yes, I think so... but that's only part of the puzzle - I've heard good things about HTML5 Boilerplate."

Developer A: "Oh yeah, me too!  I saw that Irish guy post something on Twitter about that.  Now that should solve our problems!"

Developer B: "Speaking of Twitter, I've also heard good things about Twitter's Bootstrap library - if it's good enough for Twitter, it should be good enough for us, don't you think?"

Developer A: "Yeah, good point.  Speaking of being good enough for established companies, I heard Apple uses Sproutcore, and that there are a ton of companies using something called Backbone"

Developer B: "I'm pretty sure Sproutcore has been replaced by Amber or Ember or something, but I can't remember.  Backbone seems to have a large following, you're right.  What about templates?  We need templates, don't we?"

Developer A: "I'm sure we will, so how about Mustache or Handlebars?  Will they play nicely with anything we've mentioned so far?"

Developer B: "I have no idea.  Maybe we should just write everything from scratch.  That will be a lot simpler and cleaner anyway."

Developer A: "Sounds good to me.  Who knows how long these libraries will be around anyway."

I think you get the idea by now.  For many of us, Developer A and Developer B are the same person, and this whole conversation takes place within the confines of one's head (come on - I can't be alone here, can I!?).  Unfortunately, there are no simple roadmaps for confused people like me, who might have a pretty good idea of where they want to go, but no clue on how to get there.  What ends up happening then, for many anlytical sorts, is the dreaded paralysis by analysis, where nothing gets done for weeks or possibly longer.

I'd like to try to help my fellow developers by putting a stake in the ground and declaring 'THE best' solution, given a specified use case.  Of course the answer I give will have many more people who deem it wrong than right, but that's a risk I'm willing (silly enough?) to make.  After all, these frameworks are all top-notch in my book, so you really can't go wrong with any selections in most cases.  The intended value of my reommendations lies in not having spend countless hours in research.

Once the flames from the comments have died down (Ember, anyone? --sorry, couldn't resist), I might even try to expand on this with more use cases and/or more selection criteria.  We'll see how that goes.  Ok, flame suit on:

You want: nothing more than a simple tempting system

Go get: Handlebars.js

You want: nothing more than a simple MVC framework

Go get: Knockout.js

You want: nothing more than a grid/layout/widget library

Go get: Bootstrap

You want: an all-in-one jQuery-centric mobile framework

Go get: jQuery Mobile

You want: a starting-point collection of best practices, templates, libraries, and structure for a Web Site

Go get: HTML5 Boilerplate

You want: an Enterprise scale, highly structured, single-page, MVC-based, mobile app wrapped in a native shell

Go get: PhoneGap, Ember.js

You want: an Enterprise scale, flexibly structured, single-page, MVC-based mobile app, wrapped in a native shell

Go get: PhoneGap, Backbone.js (uses Underscore.js), Mobile H5BP (comes w/jQuery)

You want: a small to medium scale, MVC-based mobile app, wrapped in a native shell

Go get: PhoneGap, Knockout.js

You want: a large-scale Web Site that works on 90% of desktops, tablets, and laptops - even IE6

Go get: HTML5 Boilerplate, which comes with the excellent Modernizr, and jQuery

Find what you’re looking for?

Please feel free to leave your comments on this very subjective list, and be sure to add your own recommendations, or requests for a recommendation.  For any such requests, I’ll be happy to update this post with my suggestions.

by Gene Loparco