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

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 push updates server side without requiring people to download a new version of the app”

- Jonathan Dann (Facebook Engineer)

"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

Why Web Interfaces?

• Runs on every modern operating system

• Deploy without app update

Why Native Interfaces?• Performance.

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 in three places:

• “app” class in CSS

• isRunningInApp method in JS

• “ App” appended to user agent for server-side logic

20% Native, 80% Web

Why Web Interfaces?

• Runs on every modern operating system

• Deploy without app update

Why Native Interfaces?

• Performance.

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 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

Find the sweet spot in your app

@shawnjan8

http://astro.mobify.com/

Questions?