68
Javascript Strategies For Hybrid Apps and Mobile Web Sunday, November 17, 2013

Javascript Strategies for Hybrid Apps and Mobile Web

Embed Size (px)

DESCRIPTION

In this talk we share challenging issues that we encountered when developing Webviews for Android and iOS. Why we think Webviews and Mobile Web are two closely related, but different problems. We will also discuss PhoneGap and how it is a game changer, but also how the best way to use it in a Hybrid App might not be the most obvious one. Presented a short version of this talk at dotJS on 2013: https://www.youtube.com/watch?v=9xcZNBLGWsU

Citation preview

Page 1: Javascript Strategies for Hybrid Apps and Mobile Web

JavascriptStrategies

For Hybrid Apps and Mobile Web

Sunday, November 17, 2013

Page 2: Javascript Strategies for Hybrid Apps and Mobile Web

@pantojacoderNuria Ruiz

Sunday, November 17, 2013

Page 3: Javascript Strategies for Hybrid Apps and Mobile Web

5 million unique usersper week

50% use Mobile2 million use Mobile Only

Sunday, November 17, 2013

Page 4: Javascript Strategies for Hybrid Apps and Mobile Web

HTML5 Native

Sunday, November 17, 2013

Page 5: Javascript Strategies for Hybrid Apps and Mobile Web

HTML5 Native

Not your average mobile website. See Forecast.io

Sunday, November 17, 2013

Page 6: Javascript Strategies for Hybrid Apps and Mobile Web

HTML5 Native

Sunday, November 17, 2013

Page 7: Javascript Strategies for Hybrid Apps and Mobile Web

HTML5 Native

Sunday, November 17, 2013

Page 8: Javascript Strategies for Hybrid Apps and Mobile Web

A Hybrid App is a Mobile App in which

someof the main

functionality is web based

Sunday, November 17, 2013

Page 9: Javascript Strategies for Hybrid Apps and Mobile Web

Disclaimer: We are talking

remote webviews

Sunday, November 17, 2013

Page 10: Javascript Strategies for Hybrid Apps and Mobile Web

HTML5 Native

Sunday, November 17, 2013

Page 11: Javascript Strategies for Hybrid Apps and Mobile Web

Disclaimer: We are talking

remote webviews

Important: Not all Javascript has to be remote. You can mixlocal and remote Javascript

Sunday, November 17, 2013

Page 12: Javascript Strategies for Hybrid Apps and Mobile Web

<interlude>

Sunday, November 17, 2013

Page 13: Javascript Strategies for Hybrid Apps and Mobile Web

Intrinsic DifferencesBetween Mobile Web and

Webviews

Sunday, November 17, 2013

Page 14: Javascript Strategies for Hybrid Apps and Mobile Web

1.You can pack part of your Javascript with the App.

Sunday, November 17, 2013

Page 15: Javascript Strategies for Hybrid Apps and Mobile Web

Sunday, November 17, 2013

Page 16: Javascript Strategies for Hybrid Apps and Mobile Web

2. You can very easily open Native functionality from a WebView.

Sunday, November 17, 2013

Page 17: Javascript Strategies for Hybrid Apps and Mobile Web

Link to profile

my-protocol://profile/123456

Sunday, November 17, 2013

Page 18: Javascript Strategies for Hybrid Apps and Mobile Web

3. End of sessions are likely not 301s anymore.

Sunday, November 17, 2013

Page 20: Javascript Strategies for Hybrid Apps and Mobile Web

</interlude>

Sunday, November 17, 2013

Page 21: Javascript Strategies for Hybrid Apps and Mobile Web

ValueProposition

Hybrid Apps

Sunday, November 17, 2013

Page 22: Javascript Strategies for Hybrid Apps and Mobile Web

Best of both worlds

Or messy marriage?

Sunday, November 17, 2013

Page 23: Javascript Strategies for Hybrid Apps and Mobile Web

What is the web good at?PortabilityLayout, formatting text.Delivery

Sunday, November 17, 2013

Page 24: Javascript Strategies for Hybrid Apps and Mobile Web

What is the web good at?PortabilityLayout, formatting text.Delivery

Share Functionality

You Control the Updates

Fast Prototyping

Sunday, November 17, 2013

Page 25: Javascript Strategies for Hybrid Apps and Mobile Web

Not so Good.

Sunday, November 17, 2013

Page 26: Javascript Strategies for Hybrid Apps and Mobile Web

Not so Good.Performance?

Sunday, November 17, 2013

Page 28: Javascript Strategies for Hybrid Apps and Mobile Web

Not so Good.Performance?

IOS Browser Speed Bake off

Performance differences are mostly determined by network speed

Sunday, November 17, 2013

Page 29: Javascript Strategies for Hybrid Apps and Mobile Web

Not so Good.Performance?

Native Browser ~ WebView Browser In Android

Uses V8

Sunday, November 17, 2013

Page 31: Javascript Strategies for Hybrid Apps and Mobile Web

The Basic Rule

Sunday, November 17, 2013

Page 32: Javascript Strategies for Hybrid Apps and Mobile Web

Know Your User Base

Sunday, November 17, 2013

Page 33: Javascript Strategies for Hybrid Apps and Mobile Web

Know Your User Base

Because It DeterminesYour strategy

Sunday, November 17, 2013

Page 35: Javascript Strategies for Hybrid Apps and Mobile Web

Example

Sunday, November 17, 2013

Page 36: Javascript Strategies for Hybrid Apps and Mobile Web

Sunday, November 17, 2013

Page 37: Javascript Strategies for Hybrid Apps and Mobile Web

On 2011 - 500K pageviews daily

Sunday, November 17, 2013

Page 38: Javascript Strategies for Hybrid Apps and Mobile Web

On 2011 - 500K pageviews dailyWe still have about 100k daily

Says that it supports Javascript..but it doesn’t really

Sunday, November 17, 2013

Page 39: Javascript Strategies for Hybrid Apps and Mobile Web

m.tuenti this week

No Javascript support to speak of

Sunday, November 17, 2013

Page 40: Javascript Strategies for Hybrid Apps and Mobile Web

Sunday, November 17, 2013

Page 41: Javascript Strategies for Hybrid Apps and Mobile Web

The Strategy

Sunday, November 17, 2013

Page 42: Javascript Strategies for Hybrid Apps and Mobile Web

1. Be Plain

Sunday, November 17, 2013

Page 43: Javascript Strategies for Hybrid Apps and Mobile Web

1. Be PlainHave aversionwithout

Javascript that works everywhere

Sunday, November 17, 2013

Page 44: Javascript Strategies for Hybrid Apps and Mobile Web

Plain navigation

No-Ajax submit

Sunday, November 17, 2013

Page 45: Javascript Strategies for Hybrid Apps and Mobile Web

Plain navigation

No-Ajax submit

A webviewin a low-grade Android would see a ‘plain’

version

Sunday, November 17, 2013

Page 46: Javascript Strategies for Hybrid Apps and Mobile Web

Bonus: Dumb Site can be used for not so

smart desktop browsers ... IE6/IE7

Sunday, November 17, 2013

Page 47: Javascript Strategies for Hybrid Apps and Mobile Web

2. Augment

Sunday, November 17, 2013

Page 48: Javascript Strategies for Hybrid Apps and Mobile Web

2. Augment no JSon first

pageload, once loaded decorate

Sunday, November 17, 2013

Page 49: Javascript Strategies for Hybrid Apps and Mobile Web

Fastest Javascript is the one you do not need to

executeSunday, November 17, 2013

Page 50: Javascript Strategies for Hybrid Apps and Mobile Web

How?

Sunday, November 17, 2013

Page 51: Javascript Strategies for Hybrid Apps and Mobile Web

How? Composed via annotations in code. No client-side

loader framework needed

Sunday, November 17, 2013

Page 52: Javascript Strategies for Hybrid Apps and Mobile Web

<?php/* @DependencyFileList(requires="js/wap/tuportal.js, js/wap/tuportal/voicemail.js")*/class TuvoicemailPageCoordinator {

// Controller code goes here}

How?

Sunday, November 17, 2013

Page 53: Javascript Strategies for Hybrid Apps and Mobile Web

Responsive Design starts on

the server

Sunday, November 17, 2013

Page 54: Javascript Strategies for Hybrid Apps and Mobile Web

HTTP request

Rough User AgentDetection

Windows Phone7No Javascript

Sunday, November 17, 2013

Page 55: Javascript Strategies for Hybrid Apps and Mobile Web

Responsive Design is not always possible

Sunday, November 17, 2013

Page 57: Javascript Strategies for Hybrid Apps and Mobile Web

3. Be Fancy

Sunday, November 17, 2013

Page 58: Javascript Strategies for Hybrid Apps and Mobile Web

3. Be Fancy, native functionality from webview

access

Sunday, November 17, 2013

Page 59: Javascript Strategies for Hybrid Apps and Mobile Web

WebView can access the

devicecamera via Javascript

Sunday, November 17, 2013

Page 62: Javascript Strategies for Hybrid Apps and Mobile Web

Disclaimer: We are talking

remote webviews

Not the standard way to set up your PhoneGap App

Sunday, November 17, 2013

Page 63: Javascript Strategies for Hybrid Apps and Mobile Web

Cordova is big, 70K compressed

Have the communication bridge deployed locally.

Rest of JS is remote.Sunday, November 17, 2013

Page 64: Javascript Strategies for Hybrid Apps and Mobile Web

Android 2.3requires some contortions

Sunday, November 17, 2013

Page 65: Javascript Strategies for Hybrid Apps and Mobile Web

public class MyWebViewClient extends CordovaWebViewClient {

/** Once the page has finished loading

it loads cordova in a non blocking fashion. Note that this means that cordova initialization is slower for 2.* clients than it would be for 4.* clients as it happens after the DOMContentRender event **/

public void onPageFinished(WebView view, String url) {

view.loadUrl("javascript:" + this.readFile("cordova.js"));

super.onPageFinished(view, url)

}}

}

Sunday, November 17, 2013

Page 66: Javascript Strategies for Hybrid Apps and Mobile Web

Conclusion

Sunday, November 17, 2013

Page 67: Javascript Strategies for Hybrid Apps and Mobile Web

Worth Trying

Sunday, November 17, 2013

Page 68: Javascript Strategies for Hybrid Apps and Mobile Web

Questions

@pantojacoderSunday, November 17, 2013