One Codebase, Endless Possibilities: Real HTML5 Hacking

Loose notes from SXSW 2011 session: One Codebase, Endless Possibilities: Real HTML5 Hacking

HTML5 is no question the “buzzword du jour” in tech nowadays, but looking past the vernacular cruft one will discover that the HTML5 technology STACK is actually an incredibly powerful & useful framework for apps well beyond the traditional web browser. Massive companies like Google and Hewlett Packard are placing huge bets on the future of “HTML5 App development”. From HP/Palm’s WebOS to be used in their mobility products to Google’s Chrome OS, HTML5 is not simply another buzzword that can be treated as a mere passing trend, but should actually be taken seriously for app development. But what makes up the HTML5 stack and how will it truly be the future of software? What are the benefits & risks associated with using the HTML5 stack? Prove to me it works. All of these questions & demands will be answered & showcased in the presentation including important issues such as: What constitutes the HTML5 stack Benefits of using the HTML5 stack Use a single codebase Rapidly prototype an app targetting multiple devices including: iPhone, iPad, Android Devices, Chrome OS Devices, Mobile Webkit Browsers, Desktop Browsers Target thousands of developers for extensibility & community development .

Joe McCann
Principal Architect
subPrint Interactive

Slides: http://bit.ly/hack_5

HTML5 is not going to solve all of your problems. JavaScript is the glue that makes the entire stack useful, available. Things like geolocation aren’t available through an HTML tag, but only through the internal DOM.

If you’re using “native” technologies (Java, Objective C, etc.) you generally need multiple devs on staff to manage all of the interoperating technologies. With the “Web stack” (HTML5 + Javascript), fewer people can cover the whole scope of needed technologies. i.e. cheaper and faster. The resource pool for web designers is much larger than the resource pool for native technologies.

If your mobile app is written in both Java (Android) and Objective C (iOS) and Rails (web app), then you have three code bases to update just to change your company logo. Add QA into the mix and things get really messy. The business guys hate this – gets expensive fast.

Using the Web Stack significantly reduces development costs, design costs, simplifies maintenance, and you can do it all with a single codebase.

*** Tools for the Web Stack ***

– Phonegap – use it write web apps for native mobile apps. Bridges the gap between all the phone platforms. A set of Javascript bindings to things like the accelerometer, contacts list, etc. So it’s an abstraction layer.

– Sencha Touch – HTML5-ish development toolkit for creating near-native applications using web technologies.

– Appcelerator Titanium – All of the above but also creates native desktop applications.

– JQuery Mobile – Gracefully degrades to crappy devices.

– YQL – Scraping query language. If you try scraping a big site they’ll probably block you. But they won’t block a search engine like Yahoo, so this lets you write scraping tools in Javascript that get around blockages.

– Node.js – A set of C++ bindings that lets you make highly efficient web apps, which could be a web server. It’s server side javascript. Amazingly easy to write native UIs. Mediatemple and others already provide Node.js hosting. Traditionally if you want to validate form fields you needed both Javascript front end and Python etc. back-end. This lets you do it all in one language.

Demo app: http://freebeernear.me/ Showed it working with both desktop and iOS. Exactly same codebase, but on desktop it uses Google Maps, while on iOS it uses the native iOS map system – no extra work! These abstraction libraries make this possible, save a ton of work. Similar with Android demo. ENTIRE web server code AND back-end app is 75 lines of Javascript. Note: I actually used this app later the same night to find free beer near me!

Demo app example open sourced at https://github.com/joemccann/freebeernearme

Responsive design: Hide UI elements as browser resizes – don’t just squish them or show horizontal sliders, but literally hide them when browser goes small.

Geolocation across these devices is not as accurate as you may think.

Leave a Reply

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