The Program

TechStars Blog

19th June 2012

Fixing Top 3 Issues with HTML5 Apps Connecting to Cloud Backends

Author: Mark van Seventer of Kinvey

What are your New Year’s resolutions?

I’ve always hated that question, not in the last place because everyone tends to forget all about them once it’s February. However, when my aunt asked me this question last year, I replied: “I want to work with a company in the United States.”

Let me introduce myself. I’m Mark, a Computer Science student at VU University Amsterdam, The Netherlands. Over the past year I have been looking for a once-in-a-lifetime-internship to conclude my studies. My patience paid off, as of today I am the latest addition to the Kinvey team. Exciting!  So, here we are, one year after I made that fateful resolution…

I will be working on making it really easy to connect HTML5 apps to cloud backends. Although iOS and Android apps are hugely popular at the moment, I am convinced HTML5 apps will get a growing market share in 2012. But, in order to make a real impact, HTML5 apps need to overcome a number of challenges to communicate with cloud backends. Here are my top 3:

1. Browser Compatibility for Mobile App Features

The HTML5 spec is far from complete. This makes it difficult for browsers to implement HTML5 specific features, since these are subject to change. Some browsers don’t even bother implementing certain features. Consider the Web Sockets API, allowing HTML5 apps to implement push messaging to active apps: not supported by the Android Browser.

How do we solve this? Depending on the importance of the feature, we could simply ignore certain browsers. However, things like push messaging often cannot be left out. So we need some kind of workaround, but only for browsers who don’t offer native support.

By using a library such as Modernizr, it is easy to detect whether an API is natively supported. If not, just use a workaround which mimics this API, and off you go. However, one thing that is often overlooked is that a workaround comes with a performance penalty.

Many libraries implement the above behavior, and most include workarounds even if they are not needed. The obvious tradeoff made here is download size versus number of HTTP requests. For example, jQuery still supports Internet Explorer 6. When using jQuery for your app, it may be very interesting to use a smaller, stripped version which only supports mobile browsers.

Furthermore, grouping different workarounds together (e.g. CSS3 transitions and CSS3 animations) is an interesting approach to decreasing the download size even more. Performance is a critical success factor of any app, so it will be very interesting to see how this develops in 2012.

2. Data accessibility

Another big challenge is building a HTML5 library, which converts the application’s data model into REST API calls. Since Kinvey targets a huge variety of apps, the library should be able to store any data model. An additional requirement is that all communication should go asynchronously, to avoid blocking the browser.

Unfortunately, since the application runs in the browser, it cannot do any data processing once the application is closed. This can and eventually will lead to situations where data is not persisted correctly, maybe because the Wi-Fi is slow.

To make things even more complicated, requests have a certain order. For example, it should not be possible to delete a resource first, and then edit it. However, due to the asynchronous nature of the requests, this may very well occur. This can be resolved using an asynchronous job queue, such as the one used by persistence.js.

However, unrelated requests should be pipelined in order to optimize performance. This seems tricky at first, but given a NoSQL data store, checking on document level should be sufficient.

3. Synchronization

Many applications will only succeed if they can be used offline. This also holds true for HTML5 apps. But how can we implement offline storage, and synchronize the offline data store with the remote backend once the app is back online? This is, in my opinion, the toughest challenge to overcome.

You can imagine synchronizing data is a lot more than simply copying data from one server onto another. What if two users alter the same piece of information? Or the data model changes? These examples are both realistic use cases which need to be taken into account. There are existing solutions which tackle one problem, but not another. This will not work.

The way to overcome this challenge is to abstract the whole service, so that it also can be run locally. When both the remote and local backend implement the same policies, synchronizing data is just a matter of following a defined set of rules. This not only holds true for HTML5, but also for native apps.

All in all, I can understand some people referring to HTML5 as immature. However, with some tweaks we can run HTML5 apps almost everywhere. And, native support is only going to get better. For me, there is no reason not to create your app in HTML5. And with Kinvey’s upcoming support for HTML5 apps, its becoming much, much simpler.

Those are my top 3, what are yours?

This entry was posted in . Bookmark the permalink.

Don’t Miss a Post, Subscribe Below:

Email address: