Two worlds: native vs. hybrid

Over the last several years web technologies became unbelievably powerful. Even whole operating systems are written using JavaScript, HTML5 and their friends. Can native way be replaced by web technologies? What's the difference between native and hybrid applications? What is the best approach and why? This time Ilya will impartially describe pros and cons of each approach, provide situations when to use which and report all the problems you may face implementing each of them.

Transcript

1. TWO WORLDS HYBRID VS. NATIVE Ilya  Pukhalski, EPAM  Systems
2. @witchfinderx
3. What we'll talking about?
4. — Web yesterday, today and tomorrow — Mobile strategies — Native and Hybrid — Does it work for you? — Aſterword
5. What's going on
11. WEB?
13. 6/29/2007
15. 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
16. HTML5 and friends!
17. MOZILLA POPCORN http://maker.mozillapopcorn.org/
18. RUMPETROLL GAME http://rumpetroll.com
19. FIREFOX OS http://www.mozilla.org/en-US/firefoxos/
20. FIREFOX OS http://www.mozilla.org/en-US/firefoxos/
21. FIREFOX OS: CALLS http://www.mozilla.org/en-US/firefoxos/
22. FIREFOX OS: MESSAGES http://www.mozilla.org/en-US/firefoxos/
24. SINGLE ELEMENT MACBOOK http://dribbble.com/shots/685851-Single-Element-CSS-Macbook-Pro
25. REVEAL.JS http://lab.hakim.se/reveal-js/
26. HOW TO GO MOBILE
27. ?
28. !=
29. WEBSITE != WEBAPP
30. 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
31. SEPARATE MOBILE VERSION
33. m.yoursite.com mobile.yoursite.com touch.yoursite.com tablet.yoursite.com ...
34. iphone.yoursite.com android.yoursite.com ...
36. How-to —Netbiscuits —UsableNet
37. Pros — Nice performance — Mobile-optimized IA
38. Cons — Expensive in terms and resources — Poor mobile UX
39. RESPONSIVE WEB DESIGN
41. Pros — Quick to implement — Doesn’t require additional design versions — Future-friendly
42. Cons — Some old mobile and desktop browsers don’t support media- queries — Slow rendering; downloading non-using content — «Bad» mobile UX
43. WEBAPP
45. How-to — JQuery Mobile — JQuery Touch — Sencha Touch — Kendo UI + Backbone.js — YourOwnAmazingFramework.js — ...
46. Pros — Look-and-feel close to native — Mobile optimized IA — Better mobile UX
47. Cons — Expensive in terms of time and resources — Device-specific APIs access problems — Performance optimization «headache»
48. 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
49. Web technologies are not ready to use them to build applications... It's all about workarounds.
51. NATIVE APPLICATION
52. Pros — Native look-and-feel — Nice load speed and performance — Access to native mobile features — Simple bugfixing and support
53. Cons — Time-consuming for maintaining — Third-party approval required for app to appear in the app stores
54. HYBRID APPLICATIONS: FILLING THE GAP
56. How-to — PhoneGap — Moai — Quick Connect — TapLynx — ...
57. Pros — Access to native mobile features — Simple bugfixing and support
58. 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
59. HYBRID AND NATIVE
61. LOOK AND FEEL
64. Even smartphones may have different contexts of interaction.
65. UI Guidelines — iOS Human Interface Guidelines — Android User Interface Guidelines — BlackBerry User Interface Guidelines — User Experience Design Guidelines for Windows Phone — ...
66. iOS WP BB Android
67. Hybrid apps smell like web!
68. How to eliminate — Using native UI elements /so complex — Don't simulate native UX /users judge by appearness
69. DEVICE SPECIFIC FEATURES
73. PERFORMANCE
74. 74 Native apps are much more faster
75. WEB IS A LIMITATION
76. Applications? — News — Mail — Timetables — Social stuff — ...
77. 77 Not realtime 3D games
78. PUSH NOTIFICATIONS
79. 79 ACCESS TOKEN REQUEST MESSAGE NOTIFICATION
82. MONETIZATION
85. Android? No one pays. — Marco Arment
86. Another ways? — In-app purchases — Subscriptions
88. TESTING
89. 89 TESTING WEB APPS IS DIFFICULT
90. 90 TESTING HYBRID APPS IS A NIGHTMARE
92. For every hour spent on development, three had to be spent in QA (QA:DEV = 3:1). — Brian Fling
93. 93 EMULATORS?
94. 94 REMOTE TESTING?
95. 95 REAL DEVICES
97. MAINTENANCE AND UPDATES
98. 98 WE CAN DECIDE WHAT TO DO
99. KEEP EVERYTHING WHAT CHANGES PERMANENTLY ON THE BACKEND and CACHE ALL THE THINGS
100. WHAT'S BETTER?
102. 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
103. 103 LET'S JUMP INTO NUMBERS
104. 104 https://speakerdeck.com/;ling/native-­‐v-­‐hybrid-­‐v-­‐web
105. 105 https://speakerdeck.com/;ling/native-­‐v-­‐hybrid-­‐v-­‐web
106. HYBRID = MOBILE APP + WEBAPP
107. 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
108. 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
109. NATIVE MAY WORK FOR... — Games (in most cases) — Consumer-focused apps with a moderately graphical interface. — Wow-effect apps
110. — Consumer-focused apps with a moderately graphical interface. — Business-focused apps that need full device access. HYBRID MAY WORK FOR...
111. 111 THERE IS NO BAD OR GOOD, RIGHT OR WRONG
112. EVERYTHING DOESN'T WORK ANYWAY
113. Blame the Implementation, not the Technique. — Tim Kadlec http://timkadlec.com/2012/10/blame-­‐the-­‐implementation-­‐not-­‐the-­‐technique/
114. Blame the Implementation, not the _______.
115. DO YOU REALLY NEED THIS?
116. 116 EVERYBODY WANTS AN APP BUT...
117. 117 ~4% OF APPS SURVIVE FOR A YEAR
118. 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/
119. 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#
120. readlists.com/ead60910
122. @witchfinderx
123. @witchfinderx