Thursday, April 29, 2010

Google APIs + HTML5 = A New Era of Mobile Apps

This post 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.

1. Prefetching using LocalStorage: It's no secret that mobile data networks are slow but by putting a bit of thought into what users will tap on next, and prefetching that data in the background you can build a dramatically faster user experience. It's possible to do limited forms of prefetching using plain old JavaScript, but using the localStorage key/value storage built into HTML5, we're able to store much more data and therefore prefetch more aggressively.

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.



3. App Caching: The last HTML5 feature that we heavily rely on is the application cache. If a cache manifest file is specified, the browser won't re-download files unless the content of the manifest file has been updated. This may not sound like a big deal, but the latency of cellular networks can be long enough that requesting multiple files at startup can slow down your app by 10 or 20 seconds. Ideally, you'd put all your static JavaScript, CSS, and image files in the manifest file, so users never have to wait for them to be downloaded more than once.

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.

2. Google Analytics: Since we prefetch most of our content, we end up rendering mobile pages using JavaScript. This makes tracking things like page views a little more tricky than a typical website, since we're not requesting an HTML file for each page view (and the App Cache can further complicate matters). We planned on building a custom mobile analytics system, but we decided to try running Google Analytics in the mobile web browser instead. Using the _trackPageview method (with a URL corresponding to each mobile "page" generated by Javascript) has worked surprisingly well and has had minimal performance impact. Best of all, if you're already using Google Analytics on your main site, you see all your mobile analytics in the same place. This lets you do things like easily compare the time on site for a mobile visitor and a desktop visitor. (Here's one data point if you're wondering whether or not to build a mobile web version of your site: visitors spend over twice as long using our mobile HTML5 app as they do on our website.)

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.


By Adrian Graham, co-founder of nextstop.com

12 comments:

  1. For sure HTML5 + Google APIS is the winning combination!
    I really like the HTML5 spec. Combine it with cool API's and the sky is the limit!

    ReplyDelete
  2. Good overview.
    HTML 5 may be fairly limited for use within traditional websites for sometime to come due to the lack of support in the many older browsers used still, but where Mobile Apps are concerned it is a no brainier that HTML5 is a good choice where devices are likely to have good support for newer web technologies and standards.

    ReplyDelete
  3. Thanks for sharing.I Like this site your article is very nice , Thanks, very interesting article, keep up it coming.

    Thanks~

    Prasen Dutta
    Business Development LLC, at web design and development company India

    ReplyDelete
  4. The Google From My Android doese not work, However, it seams to give Lat. Lon. Therefore, I asked were can I get the software that is like the view from YouTub.

    ReplyDelete
  5. Hi its really very nice i enjoyed a lot to visit..
    Mobiles
    Mobiles Price
    Handset Prices

    ReplyDelete
  6. HTML5 will definitely have it's place in a developer's toolbox, but it isn't going to replace native apps. There will always be Apple API's that a browser just isn't going to give you access to(Push notifications, all of the upcoming background api's in OS 4.0, just to name a few). People are doing some amazing things in a browser with HTML5, but sometimes you have to ask yourself one question: why?? I can see some kind of argument on the desktop, but that's where developers fail: taking the same mentality they used to develop good desktop apps, and expect that to fly in the mobile space. Not gonna happen. When all is said and done, you are still trying to make HTML a programming language, which it was never intended to be.

    ReplyDelete
  7. HTML is a language for universal display on any screen, resolution and with very advanced layout possibility's.
    Javascript is a programing language to manipulate the Dom.
    Theres no contradiction or wrongness to making apps online. HTML is for the display. Javascript is for the actions.

    Why would anyone want to make an App - coded specifically for one device - when you could make a webpage for everywhere?
    Not to mention webpages are easiest to update and far harder for a 3rd party to control.

    (Will my app get approved? Will they suddenly decide my Flash/Unity/LUA based code is now not allowed? Will an upgrade kill compatibility later down the line?).

    The question is not "why make a html5 based application" the question is "why not?"
    Only if specifically you need something html cant give you, imho.

    ReplyDelete
  8. Hi its really very nice i enjoyed a lot to visit..

    web application

    ReplyDelete