A presentation on when it makes sense to build native interfaces vs web interfaces, and how to get them to work together.

1. Finding the sweet spot -
blending the best of
native 📱 and web 🏄
Shawn Jansepar
@shawnjan8

4. "The biggest mistake that we made, as a company, is
betting too much on HTML5 as opposed to native…" -
Mark Zuckerberg

5. “For areas within the app where we anticipate making
changes more often, we will continue to utilize HTML5
code, as we can push updates server side without
requiring people to download a new version of the app”
- Jonathan Dann (Facebook Engineer)

6. "The biggest mistake that we made, as a company, is
betting too much on HTML5 as opposed to native a
particular technology rather then focusing on the
experience…" - Mark Zuckerberg

7. Why Web Interfaces?
• Runs on every modern operating system
• Deploy without app update
Why Native Interfaces?
• Performance.

8. Why choose?

9. What matters is the experience,
not the technology.

10. +

12. A “Write once, run everywhere” approach

13. A “Write once, run everywhere” approach

14. Credit to Allen Pike, image from http://www.allenpike.com/2011/providing-joy-at-60-fps/

15. We need a “Maybe write once maybe run-
everywhere it really depends on the
feature” approach

16. What was our “sweet spot”?

17. The native bits 📱

19. Navigation

20. Navigation

21. Navigation

22. Bidding Screen

23. ¯_( )_/¯

24. The web bits 🏄

25. Building “app-aware” responsive websites
• Take “progressive enhancement” to the
next level
• Detecting the “app” context in three places:
• “app” class in CSS
• isRunningInApp method in JS
• “ App” appended to user agent for
server-side logic

28. 20% Native, 80% Web

29. Why Web Interfaces?
• Runs on every modern operating system
• Deploy without app update
Why Native Interfaces?
• Performance.

30. Web + Native
• Runs on every modern operating system
• Deploy without app update
• Performant

31. In a 🌰, choose the appropriate technology
on a feature by feature basis

32. How to build apps using a mix of both

33. Embedded PhoneGap
http://docs.phonegap.com/develop/embed-webview/

34. Credit to Holly Schinsky, image from http://phonegap.com/blog/2015/03/12/mobile-choices-post1/

35. Astro - the “Native” Hybrid SDK built on
top of Cordova
http://astro.mobify.com/

36. Top 3 WebView Performance Tips
• Remove transform: translate3d in
Android 4.4.2 (or use Crosswalk)
• Change WebView deceleration rate to
UIScrollViewDecelerationRateNormal
• Use fast click, not only to make clicks faster, but
also to fix a bug in iOS 8.4.1 that causes slow taps
to not navigate

37. Find the sweet spot in your app

38. @shawnjan8
http://astro.mobify.com/
Questions?