This post from the Google Code Blog is part of the Who’s @ Google I/O, a series of blog posts that give a closer look at developers who’ll be speaking or demoing at Google I/O. This guest post is written by Adrian Graham, co-founder of nextstop.com who will give us a demo inside the Developer Sandbox.
When building nextstop’s HTML5 mobile app, we were able to leverage a powerful combination of HTML5 and Google API’s to build a mobile web experience that we believe rivals what we could have built natively. For more on our mobile app, check out this post — here we will just focus on the technologies that made this experience possible.
Lately HTML5’s video features have gotten a lot of attention, but it’s three other HTML5 features that we’ve found most useful for mobile web development.
If you’re using a recent version of Chrome or Safari or on an iPhone 3 or Android 2 phone and want a sense of what prefetching feels like, try clicking the left and right arrows here (you can ignore the warning you will see in Chrome and Safari).
2. Geolocation: Using the geolocation features built into HTML5 (and available on iPhone 3 and Android 2), we’re able to connect you with local information based on the GPS in your phone, so all you have to do is launch the app to see nearby recommendations. I wish it were a bit faster, but it sure beats entering an address or zip code — and it’s super easy to hook into as a developer.
As excited as we are about HTML5, things get even more interesting when you combine these technologies with Google APIs.
1. Google Maps API V3: Google Maps V3 has been rewritten from the ground up to better support modern mobile web browsers, and it shows. We were able to build a map interface into our mobile app that is nearly as full featured as our main site, including support for dynamic updates when the user pans and gestures like pinch to zoom on the iPhone. Coupled with the Geolocation support in HTML5, we can easily show users where they are in relation to the recommendations on the map. A year ago, this would have required writing a fair amount of native code. Today it can be done in the browser and works on both Android 2 and iPhone 3 devices.
3. Google Local Search API: Coupled with HTML5 geolocation, the Google Local Search API becomes even easier to use. For instance, the nextstop app lets users add places that they like to nextstop’s database. In a desktop browser, we have no choice but to ask the user to type in some words and do a local search. However, on the phone, we can show users a list of nearby places by passing the local search api the user’s current position. More often than not, no typing is required to locate the place you’d like to add.
If you can’t already tell, we’re pretty excited about the future mobile apps running inside a browser. As mobile web browsers and web APIs continue to evolve, we expect more and more people to hop on the HTML5 bandwagon as a cross-platform way to build powerful mobile apps.
We’ll be at Google I/O in May and would love for you to stop by our demo station in the Developer Sandbox and share any questions, tips, or tricks you have related to HTML5 mobile development. And in the meantime, if you have a great idea for an HTML5 app based on nextstop’s data, we encourage you to check out our API.