html5 app development - advantages & drawbacks

37
introduction myths benefits conclusion challenges html5 app development advantages & drawbacks

Upload: dotblue

Post on 01-Nov-2014

4.334 views

Category:

Technology


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: HTML5 App Development - Advantages & Drawbacks

introduction myths benefits conclusionchallenges

html5 app development

advantages & drawbacks

Page 2: HTML5 App Development - Advantages & Drawbacks

introduction Vincent van Scherpenseel

Founder & UX Designer at dotBlue.

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

Page 3: HTML5 App Development - Advantages & Drawbacks

introduction SalesChamp

Application supporting door-to-door sales.

HTML5-based.

Page 4: HTML5 App Development - Advantages & Drawbacks

introduction SalesChamp

• Registration of sales visits

• Real-time reporting

• Schedule follow-up meetings

• Contract signing

• Team-based or stand-alone

Page 5: HTML5 App Development - Advantages & Drawbacks

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.

Page 6: HTML5 App Development - Advantages & Drawbacks

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.

Page 7: HTML5 App Development - Advantages & Drawbacks

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.

Page 8: HTML5 App Development - Advantages & Drawbacks

myths HTML5 is slow

The most commonly used quote?

Page 9: HTML5 App Development - Advantages & Drawbacks

myths HTML5 is slow

The most commonly used quote?

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

Page 10: HTML5 App Development - Advantages & Drawbacks

myths HTML5 is slow

The most commonly used quote?

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

Page 11: HTML5 App Development - Advantages & Drawbacks

myths HTML5 interfaces are ugly

You can’t build a pretty UX in HTML5.

Page 12: HTML5 App Development - Advantages & Drawbacks

myths HTML5 interfaces are ugly

You can’t build a pretty UX in HTML5.

Page 13: HTML5 App Development - Advantages & Drawbacks

myths HTML5 doesn’t allow for complex apps

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

Page 14: HTML5 App Development - Advantages & Drawbacks

myths HTML5 doesn’t allow for complex apps

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

Page 15: HTML5 App Development - Advantages & Drawbacks

myths HTML5 doesn’t work offline

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

Page 16: HTML5 App Development - Advantages & Drawbacks

myths HTML5 doesn’t work offline

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

Page 17: HTML5 App Development - Advantages & Drawbacks

myths HTML5 apps run in a browser

HTML5 apps run in a browser.

Technically correct, but not from a UX perspective.

Page 18: HTML5 App Development - Advantages & Drawbacks

myths HTML5 apps run in a browser

HTML5 apps run in a browser.

Technically correct, but not from a UX perspective.

Page 19: HTML5 App Development - Advantages & Drawbacks

challenges HTML5 is harder

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

Page 20: HTML5 App Development - Advantages & Drawbacks

challenges Not a standard yet

HTML5 specifications are not final yet.

Recommendation status expectedat the end of 2014.

Page 21: HTML5 App Development - Advantages & Drawbacks

challenges Write once, run everywhere?

There is no such thing as a browser.

Per-platform tweaking is still needed.

Page 22: HTML5 App Development - Advantages & Drawbacks

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.

Page 23: HTML5 App Development - Advantages & Drawbacks

challenges Accessing hardware APIs

Accessing hardware APIs is limited.

Page 24: HTML5 App Development - Advantages & Drawbacks

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.

Page 25: HTML5 App Development - Advantages & Drawbacks

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.

Page 26: HTML5 App Development - Advantages & Drawbacks

challenges Performance and stability

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

Page 27: HTML5 App Development - Advantages & Drawbacks

challenges User’s mental model

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

Page 28: HTML5 App Development - Advantages & Drawbacks

benefits Multi platform

With a single codebaseyou can target all major platforms.

Page 29: HTML5 App Development - Advantages & Drawbacks

benefits Release whenever you want

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

Page 30: HTML5 App Development - Advantages & Drawbacks

benefits You are in control

You are in control of your business model.

Page 31: HTML5 App Development - Advantages & Drawbacks

benefits Data collection

Use common web analytics toolsto measure and analyze usage.

Page 32: HTML5 App Development - Advantages & Drawbacks

benefits More development resources

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

Page 33: HTML5 App Development - Advantages & Drawbacks

benefits Future proof

It’s not aboutiOS vs. Android.

Page 34: HTML5 App Development - Advantages & Drawbacks

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.

Page 35: HTML5 App Development - Advantages & Drawbacks

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.

Page 36: HTML5 App Development - Advantages & Drawbacks

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)?

Page 37: HTML5 App Development - Advantages & Drawbacks

thank youfor your attention

vincent van [email protected]