html5 app development - advantages & drawbacks

introduction myths benefits conclusionchallenges

html5 app development

advantages & drawbacks

introduction Vincent van Scherpenseel

Founder & UX Designer at dotBlue.

Web realization and consultancy.Offices in Haarlem and Brno (CZ).

introduction SalesChamp

Application supporting door-to-door sales.

HTML5-based.

introduction SalesChamp

• Registration of sales visits

• Real-time reporting

• Schedule follow-up meetings

• Contract signing

• Team-based or stand-alone

introduction Why we choose HTML5

• We need to support multiple platformsPrior experience showed that native can be very costly to build and maintain.

• This is not a consumer appWe don’t want to be in an app store, nor do we want to pay a subscription / licensing fee.

• We are a web firmWe were already familiar with HTML5/CSS/JS.

introduction Definitions

• Native appiOS, Android or other binary platform.Question: what is native on Firefox OS?

• HTML5 appCompletely web-based.

• Hybrid appWeb-based app packed in a binary.

introduction Great HTML5 apps

• Financial Times (app.ft.com)FT didn’t want to play by Apple’s rules.

• Forecast.ioMultiple platform support.

• Google Chrome Maze (chrome.com/maze/)Tech demo.

myths HTML5 is slow

The most commonly used quote?

myths HTML5 is slow

The most commonly used quote?

“Our Biggest Mistake Was Betting Too Much on HTML5.” - Mark Zuckerberg

myths HTML5 is slow

The most commonly used quote?

“Our Biggest Mistake Was Betting Too Much on HTML5.” - Mark Zuckerberg

myths HTML5 interfaces are ugly

You can’t build a pretty UX in HTML5.

myths HTML5 interfaces are ugly

You can’t build a pretty UX in HTML5.

myths HTML5 doesn’t allow for complex apps

You can’t build a complex appsuch as a game in HTML5.

myths HTML5 doesn’t allow for complex apps

You can’t build a complex appsuch as a game in HTML5.

myths HTML5 doesn’t work offline

You can’t use an HTML5 app while being offline.

myths HTML5 doesn’t work offline

You can’t use an HTML5 app while being offline.

myths HTML5 apps run in a browser

HTML5 apps run in a browser.

Technically correct, but not from a UX perspective.

myths HTML5 apps run in a browser

HTML5 apps run in a browser.

Technically correct, but not from a UX perspective.

challenges HTML5 is harder

Creating a speedy, stable app which looks good and works seamlessly offline is harder in HTML5.

challenges Not a standard yet

HTML5 specifications are not final yet.

Recommendation status expectedat the end of 2014.

challenges Write once, run everywhere?

There is no such thing as a browser.

Per-platform tweaking is still needed.

challenges Offline app usage

• Offline app usageManifest file is hard to work with (stale cache).

• Offline databasesTwo approaches: IndexedDB and WebSQL. WebSQL is deprecated, but supported by iOS.

• Offline flat dataWeb Storage (key/value store) is pretty ok.

challenges Accessing hardware APIs

Accessing hardware APIs is limited.

challenges Accessing hardware APIs

Accessing hardware APIs is limited.

But we more or less have:URI schemes, GPS, device orientation, camera,

battery, vibration, ambient light sensor, network, push messages.

challenges Accessing hardware APIs

Accessing hardware APIs is limited.

But we more or less have:URI schemes, GPS, device orientation, camera,

battery, vibration, ambient light sensor, network, push messages.

Going hybrid may help you,but introduces its own drawbacks.

challenges Performance and stability

Creating a fast & stable app is definitely possible.But it takes some effort.

challenges User’s mental model

The app store concept is well understood.Bookmarking an app is not.

benefits Multi platform

With a single codebaseyou can target all major platforms.

benefits Release whenever you want

No need to get approval.Update while users are using your app.

benefits You are in control

You are in control of your business model.

benefits Data collection

Use common web analytics toolsto measure and analyze usage.

benefits More development resources

It may be easier to find HTML5 development resources than native resources.

benefits Future proof

It’s not aboutiOS vs. Android.

conclusion Main drawbacks of HTML5

• Harder to buildIt takes more effort, but fortunately frameworks and tooling are getting better.

• Not all hardware APIs are accessibleBut this is definitely improving.

conclusion Main advantages of HTML5

• Multi-platformCheaper building & maintenance. Reduce costs.

• You’re in control of your release processRelease when you want, no need for approval.

• You’re in control of the business modelNo need to play the app-store game.

conclusion Final verdict

It’s up to you! — Ask yourself:

• Which platforms do we need to support?

• What is our release frequency like?

• Are we building internally or externally?

• If internally: what knowledge do we have (access to)?

thank youfor your attention

vincent van scherpenseelvincent@dotblue.nl