Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Finding the sweet spot -
blending the best of
native 📱 and web 🏄
Shawn Jansepar
@shawnjan8
"The biggest mistake that we made, as a company, is
betting too much on HTML5 as opposed to native…" -
Mark Zuckerberg
“For areas within the app where we anticipate making
changes more often, we will continue to utilize HTML5
code, as we can...
"The biggest mistake that we made, as a company, is
betting too much on HTML5 as opposed to native a
particular technology...
Why Web Interfaces?
• Runs on every modern operating system
• Deploy without app update
Why Native Interfaces?
• Performan...
Why choose?
What matters is the experience,
not the technology.
+
A “Write once, run everywhere” approach
A “Write once, run everywhere” approach
Credit to Allen Pike, image from http://www.allenpike.com/2011/providing-joy-at-60-fps/
We need a “Maybe write once maybe run-
everywhere it really depends on the
feature” approach
What was our “sweet spot”?
The native bits 📱
Navigation
Navigation
Navigation
Bidding Screen
¯_( )_/¯
The web bits 🏄
Building “app-aware” responsive websites
• Take “progressive enhancement” to the
next level
• Detecting the “app” context ...
20% Native, 80% Web
Why Web Interfaces?
• Runs on every modern operating system
• Deploy without app update
Why Native Interfaces?
• Performan...
Web + Native
• Runs on every modern operating system
• Deploy without app update
• Performant
In a 🌰, choose the appropriate technology
on a feature by feature basis
How to build apps using a mix of both
Embedded PhoneGap
http://docs.phonegap.com/develop/embed-webview/
Credit to Holly Schinsky, image from http://phonegap.com/blog/2015/03/12/mobile-choices-post1/
Astro - the “Native” Hybrid SDK built on
top of Cordova
http://astro.mobify.com/
Top 3 WebView Performance Tips
• Remove transform: translate3d in
Android 4.4.2 (or use Crosswalk)
• Change WebView decele...
Find the sweet spot in your app
@shawnjan8
http://astro.mobify.com/
Questions?
Finding the sweet spot - blending the best of native and web
Finding the sweet spot - blending the best of native and web
Finding the sweet spot - blending the best of native and web
Finding the sweet spot - blending the best of native and web
Finding the sweet spot - blending the best of native and web
Finding the sweet spot - blending the best of native and web
Upcoming SlideShare
Loading in …5
×

Finding the sweet spot - blending the best of native and web

2,677 views

Published on

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

Published in: Software
  • Be the first to comment

Finding the sweet spot - blending the best of native and web

  1. 1. Finding the sweet spot - blending the best of native 📱 and web 🏄 Shawn Jansepar @shawnjan8
  2. 2. "The biggest mistake that we made, as a company, is betting too much on HTML5 as opposed to native…" - Mark Zuckerberg
  3. 3. “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)
  4. 4. "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
  5. 5. Why Web Interfaces? • Runs on every modern operating system • Deploy without app update Why Native Interfaces? • Performance.
  6. 6. Why choose?
  7. 7. What matters is the experience, not the technology.
  8. 8. +
  9. 9. A “Write once, run everywhere” approach
  10. 10. A “Write once, run everywhere” approach
  11. 11. Credit to Allen Pike, image from http://www.allenpike.com/2011/providing-joy-at-60-fps/
  12. 12. We need a “Maybe write once maybe run- everywhere it really depends on the feature” approach
  13. 13. What was our “sweet spot”?
  14. 14. The native bits 📱
  15. 15. Navigation
  16. 16. Navigation
  17. 17. Navigation
  18. 18. Bidding Screen
  19. 19. ¯_( )_/¯
  20. 20. The web bits 🏄
  21. 21. 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
  22. 22. 20% Native, 80% Web
  23. 23. Why Web Interfaces? • Runs on every modern operating system • Deploy without app update Why Native Interfaces? • Performance.
  24. 24. Web + Native • Runs on every modern operating system • Deploy without app update • Performant
  25. 25. In a 🌰, choose the appropriate technology on a feature by feature basis
  26. 26. How to build apps using a mix of both
  27. 27. Embedded PhoneGap http://docs.phonegap.com/develop/embed-webview/
  28. 28. Credit to Holly Schinsky, image from http://phonegap.com/blog/2015/03/12/mobile-choices-post1/
  29. 29. Astro - the “Native” Hybrid SDK built on top of Cordova http://astro.mobify.com/
  30. 30. 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
  31. 31. Find the sweet spot in your app
  32. 32. @shawnjan8 http://astro.mobify.com/ Questions?

×