unleash the force of html5 apps
or why html5 apps aren’t that bad.
i recently uploaded the slides from my last talk about html5 (the light side) vs native apps (the dark side). but since slides just cover half of the information, i decided to write an associated blog post about it.
in my daily job, i often talk to customers about their mobile strategy and i realized, that nearly no one had a real clue, why they prefer native apps over html5 apps. that’s why i summarized some of my experience according to html5 apps.
let’s take a look at the main difference of html5 and native apps:
a big plus on the web apps are the reasonable development costs compared to native apps. you have just one codebase, which can be accessed from any browser. html5 apps also can be accessible through the web without any approval process, which can be a plus in terms of no restriction, or a minus in terms of quality of html5 apps or finding apps in a central place. a big minus on html5 apps is definitely the limited access on underlying hardware (like camera, bluetooth, …).
overall, this doesn’t sound so bad for html5 web apps, right? but why do so many people say, that they wouldn’t develop an html5 app? in fact, html5 does not have a good reputation. and that’s also because some big players like facebook or linkedin dropped their html5 apps.
and there is even more bad reputation going on (since users tend to spent more time in native apps than browsing the web):
so, how came?
the dark side of html5 apps
let’s talk about the dark side of html5 apps:
that’s what many people are saying when thinking of a mobile html5 app: when it comes to performance html5 sucks, html5 apps can’t be used offline, no push notifications, no access to underlying hardware,…
but that’s not the truth, for at least the first two points. html5 isn’t slow by itself. it’s made slow by developers. also, html5 can be used offline (as you will see later on).
and for the last two points: yeah, they are true. at least for now. the only change to get these stuff is to wrap your html5 app within a hybrid app (like it’s done with phonegap, titanium … you name it).
use the force, luke!
so, what can i do to improve my html5 app?
never ever try to replicate the default native style on your hmlt5 app! users will recognize the difference. but: aim for a native app look and feel. just because it’s an html5 app, it doesn’t mean it has to look like one. try to create your own custom app look and feel.
as you may recognize from many html5 apps, animations and translation sucks. the main problem is, that many developer make their animations in javascript where they just update the top or left CSS position. use translate3d (and only 3d) for animations and translations, since it’s the only CSS command which is hardware accelerated.
also, all mobile browsers have 300ms touch delay between the physical tab and the click event. that’s because it’s an internal check for double-taps. use a library like fastclick to remove this delay. your ui will feel less sluggish.
use the html5 application cache. it’s a cache to store all your files (like html, js, css, images,…) on the client side. it makes your html5 app available offline and it speeds up loading the resources (since the resources are loaded from the app cache instead of the server).
use offline storage for dynamic storage. it also speeds up your site and makes stuff available offline.
make use of web workers. in javascript, everything is execute in one thread. doing complex computations will result in blocking your ui. with web workers, you can run these stuff in background and it will not block your ui thread.
also, force the user to “download” the app. e.g. in IOS, guide the user to add the app to the homescreen. once done, many users won’t notice anymore that it’s an html5 app.
and what’s the consent of all this?
many developers are switching their approaches mid-project. 40% realizes that after start building a native mobile app that html5 would have met their business needs. vice versa, 31% started building an html5 app and realized, that they had to switch to native to meet their business needs.
what does it mean? there’s no general html5 vs native. it always depends what you want to achieve and which features your app needs (e.g. underlying hardware access, push notifications). start asking yourself, do i really need a native app? if not, you might save a lot of time and money. the other way round, if you need stuff which only can be achieved by building a native app, go for it and the extra time and money. building awful html5 or hybrid hacks will cost you probably more of both in the end.
at least something for my own good: if you want to try an html5 app, just visit www.sharedspaces.at.
may the force be with you!
i’m david, software developer from vienna working at dimocom. i’m founder of sharedspaces.at and co-founder of orat.io. if you liked this post, follow my on twitter or take a look at my personal website.
