HTML5 App Development - Advantages & Drawbacks
-
Upload
dotblue -
Category
Technology
-
view
4.338 -
download
0
description
Transcript of HTML5 App Development - Advantages & Drawbacks
![Page 1: HTML5 App Development - Advantages & Drawbacks](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/1.jpg)
introduction myths benefits conclusionchallenges
html5 app development
advantages & drawbacks
![Page 2: HTML5 App Development - Advantages & Drawbacks](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/2.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/3.jpg)
introduction SalesChamp
Application supporting door-to-door sales.
HTML5-based.
![Page 4: HTML5 App Development - Advantages & Drawbacks](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/4.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/5.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/6.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/7.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/8.jpg)
myths HTML5 is slow
The most commonly used quote?
![Page 9: HTML5 App Development - Advantages & Drawbacks](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/9.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/10.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/11.jpg)
myths HTML5 interfaces are ugly
You can’t build a pretty UX in HTML5.
![Page 12: HTML5 App Development - Advantages & Drawbacks](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/12.jpg)
myths HTML5 interfaces are ugly
You can’t build a pretty UX in HTML5.
![Page 13: HTML5 App Development - Advantages & Drawbacks](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/13.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/14.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/15.jpg)
myths HTML5 doesn’t work offline
You can’t use an HTML5 app while being offline.
![Page 16: HTML5 App Development - Advantages & Drawbacks](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/16.jpg)
myths HTML5 doesn’t work offline
You can’t use an HTML5 app while being offline.
![Page 17: HTML5 App Development - Advantages & Drawbacks](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/17.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/18.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/19.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/20.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/21.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/22.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/23.jpg)
challenges Accessing hardware APIs
Accessing hardware APIs is limited.
![Page 24: HTML5 App Development - Advantages & Drawbacks](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/24.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/25.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/26.jpg)
challenges Performance and stability
Creating a fast & stable app is definitely possible.But it takes some effort.
![Page 27: HTML5 App Development - Advantages & Drawbacks](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/27.jpg)
challenges User’s mental model
The app store concept is well understood.Bookmarking an app is not.
![Page 28: HTML5 App Development - Advantages & Drawbacks](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/28.jpg)
benefits Multi platform
With a single codebaseyou can target all major platforms.
![Page 29: HTML5 App Development - Advantages & Drawbacks](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/29.jpg)
benefits Release whenever you want
No need to get approval.Update while users are using your app.
![Page 30: HTML5 App Development - Advantages & Drawbacks](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/30.jpg)
benefits You are in control
You are in control of your business model.
![Page 31: HTML5 App Development - Advantages & Drawbacks](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/31.jpg)
benefits Data collection
Use common web analytics toolsto measure and analyze usage.
![Page 32: HTML5 App Development - Advantages & Drawbacks](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/32.jpg)
benefits More development resources
It may be easier to find HTML5 development resources than native resources.
![Page 33: HTML5 App Development - Advantages & Drawbacks](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/33.jpg)
benefits Future proof
It’s not aboutiOS vs. Android.
![Page 34: HTML5 App Development - Advantages & Drawbacks](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/34.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/35.jpg)
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](https://reader034.fdocuments.net/reader034/viewer/2022051311/5455c54daf7959755d8b4a37/html5/thumbnails/36.jpg)
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)?