Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

65
The risks you take when develop cross- platform apps using HTML5

Transcript of Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Page 1: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

The risks you take when develop cross-platform apps using

HTML5

Page 2: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Anton SakharovCEO/CTO, MLSDev

[email protected]

Page 3: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Vinnytsia, UkraineKraków, Poland

Page 4: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.
Page 5: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Cross-platform app frameworks

● Apache Cordova / Adobe PhoneGap● Appcelerator Titanium● Sencha Touch● Intel XDK - runs on Cordova● IONIC - Angular-based UI framework● Xamarin - C#, not HTM5● RubyMotion - not HTML5● ...

Page 6: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

HTML5 apps

Page 7: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Image taken from cordova.apache.org

Page 8: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Images taken from cordova.apache.org

Page 9: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

App (HTML, CSS, JS)

Hardware

Web View

OS

HTML5 cross-platform framework

Native part of cross-platform framework

Page 10: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Apache Cordova/Adobe PhoneGap

Images taken from cordova.apache.org

Page 11: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Appcelerator Titanium

Images taken from cordova.apache.org

Page 12: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Images taken from appcelerator.com

Page 13: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.
Page 14: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Write Once, Run Anywhere

Sun Microsystems about Java

Page 15: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.
Page 16: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Risks

● Framework lock-in● Compatibility● Cross-browser markup● Bugs in frameworks● Performance● Reverse Engineering

Page 17: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Framework lock-in

Page 18: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Your app

Hardware

Web Browser Engine (e.g. WebKit)

Core OS

3rd-party frameworks (Cordova, Titanium etc)

Page 19: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

What can you do here?

● Develop native plugins for you cross-platform framework

● Sacrifice some features of your project

Page 20: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Compatibility

Page 21: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.
Page 22: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Few more● Back button on Android, no Back button on iOS

● Touch events different behaviour from platform to platform

● IndexedDB

● ...

Page 23: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Image taken from caniuse.com

Page 24: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Cross-browser markup

Page 25: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Web Browser Engines

● WebKit (Apple Safari, Android Browser)● Blink (Chrome)● Trident (Internet Explorer)● Gecko (Firefox)● Presto (Opera)● ...

Page 26: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.
Page 27: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.
Page 28: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Few options

● Test on all kind of devices you want your app to support (iPhones, iPads, Androids etc) - must have, in fact

● Use UI frameworks (e.g. IONIC)

● Use Crosswalk (increases app size and affects performance)

Page 29: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

crosswalk-project.org

Page 30: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Bugs in frameworks

Page 31: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

App (HTML, CSS, JS)

Hardware

Web View

OS

HTML5 cross-platform framework

Native part of cross-platform framework

Page 32: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

App (we can fix bug here)

Hardware (impossible)

API (can’t fix)

Core OS (no chance)

Page 33: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

App (we can do a workaround...)

Hardware (impossible)

API (...if bug is here)

Core OS (no chance)

Page 34: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Special case

● new iOS version is about to be released

● your framework is not ready for it● your framework has bugs related to

new iOS version

Page 35: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

This may block your app update

Page 36: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.
Page 37: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.
Page 38: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

What to do?

Page 39: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Few options, all are not quite good

● refine your project requirements according to framework stable compatibilities

● postpone the release date● keep native technology developers at

hand

Page 40: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

One more...

Page 41: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Hire experienced developers

Page 42: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Performance

Page 43: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

● Longer user interaction response time (touches etc)

● UI rendering

● PDF rendering

● ...

HTML5 vs. Native

Page 44: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

… but nobody cares these days

you need to reduce your time-to-market if you are startup

Page 45: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Reverse Engineering

Page 46: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

=

Page 47: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

=

Page 48: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Cordova/PhoneGap

Page 49: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.
Page 50: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.
Page 51: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.
Page 52: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.
Page 53: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.
Page 54: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.
Page 55: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.
Page 56: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.
Page 57: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.
Page 58: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.
Page 59: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

What to do?

Page 60: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Uglify your JavaScript files

Page 61: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

One more ;)

Page 62: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Hire experienced developers

Page 63: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.
Page 64: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.
Page 65: Anton Sakharov: The risks you take when develop cross-platform apps using HTML5.

Anton SakharovCEO/CTO, MLSDev

[email protected]