Friday, August 16, 2013

Build Native Apps with HTML5

Joe Marini came by to show us some neat tricks on the Chrome Packaged Apps Platform, building native apps in HTML5.



We had a huge turnout for this talk!

The public release will include native launch points for each OS (the Mac doc, Windows start menu, etc). Packaged apps run offline as well as online, they run locally and all the code (HTML5 and JS) is stored locally.

He showed some cool demos, including 500px, a code editor with syntax highlighting, and a magazine. The apps can use the native windows controls if you want, or you can build your own using webkit regions.

Packaged apps are an attempt to solve problems inherent in web applications, like intermittent connections. Most web apps have functions that should work offline, but they don't. With a packaged app you can retain offline functionality even if features requiring connectivity won't be available. Packaged apps also have access to platform capabilities and hardware (USB, bluetooth, sockets, etc). Imagine playing a web game with any controller you want. You can create a richer, more immersive experience, with distribution and updates managed through the chrome web store. Packaged apps also support in-app purchases with Google Wallet, as well as analytics.

Joe went into a deep dive into the packaged app structure. One interesting point is the differentiation between online and offline features, and developers need to think about what local resources are required to allow offline features to function in the absence of an Internet connection.

Want some specifics? No plugins! No Flash, no Java. You can embed native code using the HTML5 native client, but it can't use local storage because it is a synchronous API, and a synchronous API call can block the main thread causing your app to hang. You still get the functionality of local storage, as an asynchronous equivalent called Chrome Storage is supplied to be used instead. You can also leverage Chrome's cloud features, such as the Sync API and SyncFileSystem. It supports Google Drive out of the box, and is extensible for use with other services like DropBox.

Joe gave a lot of great pointers on how to build great packaged apps and some live code examples.

Like Dart? There is a chrome.dart github project, and as soon as Dart hits v1.0, they will start working on Dart for packaged apps.

Packaged apps are build with HTML5 and Chrome tools, but they live outside the browser, allowing for more developer options and a richer user experience. It was standing room only for this talk. Pretty cool stuff.

Joe is a developer advocate for the Chrome team, you can find him on twitter and github:
@joemarini
github.com/joemarini