SXSW 2011: One Codebase, Endless Possibilities: Real HTML5 Hacking

HTML5 HackingJoe McCann
Principal Architect
subPrint Interactive

What is HTML5?

HTML5 is just the next version of HTML, and don’t expect it to solve all your problems.

What is the HTML5/Web “Stack?”

HTML is the “Content” of the application; the .html file. The styling is your CSS. And the business logic is the Javascript.

Benefits of the Web Stack

For the business individuals, there is an important concept that needs to be covered. There are value propositions which you want to have native development in languages such has Java, C++, Ruby, etc.

For majority of applications, however, you can the Web Stack (HTML/CSS/JS) without needing to know all the different environments.

When you’re designing your application there are some serious issues you may run into. Typically with a native design you’ll need designers who can develop across all different languages. However with HTML it’s just one language. HTML has native web components, and it’s cheaper to hire designers just for the web than everything else. There are many more web-designers than there are in other languages.

But what about maintenance? Across languages pushing updates requires updating to all different platforms. This can be costly, and time consuming.

Keep in mind HTML5/Web Stack does not solve all of these problems.

Web Stack Benefits

  • Significantly reduces development costs
  • Significantly reduces design costs
  • Maintenance becomes easier
  • A single codebase

Tool of the HTML5/Web Stack

  • Phonegap: bridges the gap between multiple phones through HTML and Javascript Bindings for things such as the camera, accelerometers, etc.
  • Sencha Touch: HTML5 development tool-kit for creating native applications using web technologies.
  • Appcelerator Titanium: Not only do they have cross mobile applications, but they also have desktop applications too!
  • jQuery Mobile: Uses HTML5 tag elements united with jQuery. It’s theamable, but really in early stages of development.
  • Yahoo! Query Language (YQL): not necessarily a framework or something that will create a user interface. This essentially turns the entire web into an API. It allows you to screen scrape websites (wow!). It allows you to create an SQL statement to parse through the HTML and respond back with XML or Json with what you want. This allows you to make calls with Javascript.
  • Node.js: Very easy to use, very fast. Allows you to write javascript on the client side, but then also use that code on the server. This makes it really nice for form checking. Basically if you can write Javascript, well, then you can now write server back-ends too.

One Codebase (How, Setup, etc)

First you need to figure out what is it you’re targeting: Google Chrome, Mobile Safari, Android Chrome, Native Mac OSX, Native Android App, etc.

Clearly there’s a server-side component you’ll need, but you can still use Javascript through Node.js.

Demos (click here for the code)


If you’d like to see this presentation you may so here.

Posted in SXSW 2011.

Leave a Reply

Your email address will not be published. Required fields are marked *