Two worlds: native vs. hybrid

Slide 1

Slide 1 text

TWO WORLDS HYBRID VS. NATIVE Ilya Pukhalski, EPAM Systems

Slide 2

Slide 2 text

@witchﬁnderx

Slide 3

Slide 3 text

What we'll talking about?

Slide 4

Slide 4 text

— Web yesterday, today and tomorrow — Mobile strategies — Native and Hybrid — Does it work for you? — Aﬅerword

Slide 5

Slide 5 text

What's going on

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

WEB?

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

6/29/2007

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

By 2015, more U.S. Internet users will access the Internet through mobile devices than through PCs or other wireline devices. http://mobithinking.com/mobile-‐marketing-‐tools/latest-‐mobile-‐stats

Slide 16

Slide 16 text

HTML5 and friends!

Slide 17

Slide 17 text

MOZILLA POPCORN http://maker.mozillapopcorn.org/

Slide 18

Slide 18 text

RUMPETROLL GAME http://rumpetroll.com

Slide 19

Slide 19 text

FIREFOX OS http://www.mozilla.org/en-US/ﬁrefoxos/

Slide 20

Slide 20 text

FIREFOX OS http://www.mozilla.org/en-US/ﬁrefoxos/

Slide 21

Slide 21 text

FIREFOX OS: CALLS http://www.mozilla.org/en-US/ﬁrefoxos/

Slide 22

Slide 22 text

FIREFOX OS: MESSAGES http://www.mozilla.org/en-US/ﬁrefoxos/

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

SINGLE ELEMENT MACBOOK http://dribbble.com/shots/685851-Single-Element-CSS-Macbook-Pro

Slide 25

Slide 25 text

REVEAL.JS http://lab.hakim.se/reveal-js/

Slide 26

Slide 26 text

HOW TO GO MOBILE

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

WEBSITE != WEBAPP

Slide 30

Slide 30 text

Web Application — a web page (XHTML or a variant thereof + CSS) or collection of Web pages delivered over HTTP which use server-side or client-side processing (e.g. JavaScript) to provide an "application-like" experience within a Web browser. http://www.w3.org/TR/mwabp/#webapp-‐de;ined

Slide 31

Slide 31 text

SEPARATE MOBILE VERSION

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

m.yoursite.com mobile.yoursite.com touch.yoursite.com tablet.yoursite.com ...

Slide 34

Slide 34 text

iphone.yoursite.com android.yoursite.com ...

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

How-to —Netbiscuits —UsableNet

Slide 37

Slide 37 text

Pros — Nice performance — Mobile-optimized IA

Slide 38

Slide 38 text

Cons — Expensive in terms and resources — Poor mobile UX

Slide 39

Slide 39 text

RESPONSIVE WEB DESIGN

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Pros — Quick to implement — Doesn’t require additional design versions — Future-friendly

Slide 42

Slide 42 text

Cons — Some old mobile and desktop browsers don’t support media- queries — Slow rendering; downloading non-using content — «Bad» mobile UX

Slide 43

Slide 43 text

WEBAPP

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

How-to — JQuery Mobile — JQuery Touch — Sencha Touch — Kendo UI + Backbone.js — YourOwnAmazingFramework.js — ...

Slide 46

Slide 46 text

Pros — Look-and-feel close to native — Mobile optimized IA — Better mobile UX

Slide 47

Slide 47 text

Cons — Expensive in terms of time and resources — Device-speciﬁc APIs access problems — Performance optimization «headache»

Slide 48

Slide 48 text

I want desperately to be a web developer again, but if I have to wait until 2020 till browsers to do what Cocoa can do in 2010, I won't wait. — Joe Hewitt

Slide 49

Slide 49 text

Web technologies are not ready to use them to build applications... It's all about workarounds.

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

NATIVE APPLICATION

Slide 52

Slide 52 text

Pros — Native look-and-feel — Nice load speed and performance — Access to native mobile features — Simple bugﬁxing and support

Slide 53

Slide 53 text

Cons — Time-consuming for maintaining — Third-party approval required for app to appear in the app stores

Slide 54

Slide 54 text

HYBRID APPLICATIONS: FILLING THE GAP

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

How-to — PhoneGap — Moai — Quick Connect — TapLynx — ...

Slide 57

Slide 57 text

Pros — Access to native mobile features — Simple bugﬁxing and support

Slide 58

Slide 58 text

Cons — Time-consuming for maintaining — Third-party approval reqiured for app to appear in the app stores — Problems with look-and-feel if needed to get native for all devices

Slide 59

Slide 59 text

HYBRID AND NATIVE

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

LOOK AND FEEL

Slide 62

Slide 62 text

Slide 63

Slide 63 text

Slide 64

Slide 64 text

Even smartphones may have diﬀerent contexts of interaction.

Slide 65

Slide 65 text

UI Guidelines — iOS Human Interface Guidelines — Android User Interface Guidelines — BlackBerry User Interface Guidelines — User Experience Design Guidelines for Windows Phone — ...

Slide 66

Slide 66 text

iOS WP BB Android

Slide 67

Slide 67 text

Hybrid apps smell like web!

Slide 68

Slide 68 text

How to eliminate — Using native UI elements /so complex — Don't simulate native UX /users judge by appearness

Slide 69

Slide 69 text

DEVICE SPECIFIC FEATURES

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

Slide 72

Slide 72 text

Slide 73

Slide 73 text

PERFORMANCE

Slide 74

Slide 74 text

74 Native apps are much more faster

Slide 75

Slide 75 text

WEB IS A LIMITATION

Slide 76

Slide 76 text

Applications? — News — Mail — Timetables — Social stuﬀ — ...

Slide 77

Slide 77 text

77 Not realtime 3D games

Slide 78

Slide 78 text

PUSH NOTIFICATIONS

Slide 79

Slide 79 text

79 ACCESS TOKEN REQUEST MESSAGE NOTIFICATION

Slide 80

Slide 80 text

Slide 81

Slide 81 text

Slide 82

Slide 82 text

MONETIZATION

Slide 83

Slide 83 text

Slide 84

Slide 84 text

Slide 85

Slide 85 text

Android? No one pays. — Marco Arment

Slide 86

Slide 86 text

Another ways? — In-app purchases — Subscriptions

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

TESTING

Slide 89

Slide 89 text

89 TESTING WEB APPS IS DIFFICULT

Slide 90

Slide 90 text

90 TESTING HYBRID APPS IS A NIGHTMARE

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

For every hour spent on development, three had to be spent in QA (QA:DEV = 3:1). — Brian Fling

Slide 93

Slide 93 text

93 EMULATORS?

Slide 94

Slide 94 text

94 REMOTE TESTING?

Slide 95

Slide 95 text

95 REAL DEVICES

Slide 96

Slide 96 text

Slide 97

Slide 97 text

MAINTENANCE AND UPDATES

Slide 98

Slide 98 text

98 WE CAN DECIDE WHAT TO DO

Slide 99

Slide 99 text

KEEP EVERYTHING WHAT CHANGES PERMANENTLY ON THE BACKEND and CACHE ALL THE THINGS

Slide 100

Slide 100 text

WHAT'S BETTER?

Slide 101

Slide 101 text

101

Slide 102

Slide 102 text

Making a native application can be the best thing for a product, but on the other hand the mobile web is the only long term commercially viable content platform for mobile devices. — Brian Fling

Slide 103

Slide 103 text

103 LET'S JUMP INTO NUMBERS

Slide 104

Slide 104 text

104 https://speakerdeck.com/;ling/native-‐v-‐hybrid-‐v-‐web

Slide 105

Slide 105 text

105 https://speakerdeck.com/;ling/native-‐v-‐hybrid-‐v-‐web

Slide 106

Slide 106 text

HYBRID = MOBILE APP + WEBAPP

Slide 107

Slide 107 text

NATIVE — A single mobile OS is a target — Some native functionality is required — Requirements contain rich extraordinary UI — There are existing in-house skills for creating native apps for all platforms

Slide 108

Slide 108 text

HYBRID — Multiple mobile OS is a target and budget is not so huge — There are existing in-house web skills — You are thinking about the future

Slide 109

Slide 109 text

NATIVE MAY WORK FOR... — Games (in most cases) — Consumer-focused apps with a moderately graphical interface. — Wow-eﬀect apps

Slide 110

Slide 110 text

— Consumer-focused apps with a moderately graphical interface. — Business-focused apps that need full device access. HYBRID MAY WORK FOR...

Slide 111

Slide 111 text

111 THERE IS NO BAD OR GOOD, RIGHT OR WRONG

Slide 112

Slide 112 text

EVERYTHING DOESN'T WORK ANYWAY

Slide 113

Slide 113 text

Blame the Implementation, not the Technique. — Tim Kadlec http://timkadlec.com/2012/10/blame-‐the-‐implementation-‐not-‐the-‐technique/

Slide 114

Slide 114 text

Blame the Implementation, not the _______.

Slide 115

Slide 115 text

DO YOU REALLY NEED THIS?

Slide 116

Slide 116 text

116 EVERYBODY WANTS AN APP BUT...

Slide 117

Slide 117 text

117 ~4% OF APPS SURVIVE FOR A YEAR

Slide 118

Slide 118 text

Slightly more Americans (36.4%) use their mobile browser than access applications (34.4%). http://www.comscoredatamine.com/2011/02/top-‐mobile-‐activities-‐in-‐us/

Slide 119

Slide 119 text

Facebook's top mobile client is m.facebook.com (Facebook's mobile Web site) with 18% of total new Facebook posts. Android, iPhone, and Blackberry are next each with about 4% of total new Facebook posts. http://danzarrella.com/new-‐data-‐on-‐mobile-‐facebook-‐posting.html#