[ SXSW Bios ] #hack5 [ Presentation Files ]
- @joemccann
Brief
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 See code & install an actual working HTML5 app that works on a number of devices See code best practices in use for tailoring the UI based on the user’s device See code using Phonegap to create native mobile apps See code using Titanium to create native desktop apps
Web as a Platform
- Content: the HTML doc itself
- Style: the CSS3
- Business Logic: JavaScript
JS gives you access to geolocation, local storage, web workers, etc. The web stack has a much smaller development (language) and design (artifacts) skill and maintenance footprint.
Tools
- Phonegap — write web apps for native mobile applications. JS bindings to native device libraries. build.phonegap.com (automated build of different device app versions).
- Sencha Touch — development toolkit to create native apps.
- Appcelerator Titanium — native device apps and create native desktop applications (JS bridge).
- jQuery Mobile — (alpha) mobile web applications that gracefully degrades across devices.
- YQL — turns the entire web into an API (screen-scrape that won’t get blocked) that lets you parse any web page and collect it in JSON/etc..
- Node.js — C++ bindings to V8 (Google Chrome) to make highly efficient network applications; server-side JS built on JS. RESTful web services that use common libraries as your desktop (offline) side. I.e., validation of form fields (requires client and server side validation) is exact same code on client as server. This solves the issue of this presentation’s glossing over of server-side code?
Demo
Filesystem
appfolder
– clients
— android (phonegap)
— desktop (titanium)
— web (/key folder/ that other folders symlink to)
— css
— html
— js
– server (Express node.js)
— public (symlink to web)
Demos/Code
Demo: http://freebeernear.me
Responsive design tip: Only load the libraries (jQuery) you need for the screen size a person is using.
Write logic that finds out what kind of framework you are in (phonegap, titanium, etc.) to handle deltas.
Code: http://github.com/joemccann/freebeernearme/
Responsive Design
CSS media queries + fancy JS = same code that’s good for multiple devices and screens.