Download pdf - Javascript Strategies for Hybrid Apps and Mobile Web

JavascriptStrategies

For Hybrid Apps and Mobile Web

Sunday, November 17, 2013

@pantojacoderNuria Ruiz


5 million unique usersper week

50% use Mobile2 million use Mobile Only


HTML5 Native


HTML5 Native

Not your average mobile website. See Forecast.io


http://forecast.io/

http://forecast.io/

HTML5 Native


HTML5 Native


A Hybrid App is a Mobile App in which

someof the main

functionality is web based


Disclaimer: We are talking

remote webviews


HTML5 Native



remote webviews

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


<interlude>


Intrinsic DifferencesBetween Mobile Web and

Webviews


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



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


Link to profile

my-protocol://profile/123456


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


4. Offline.

AppCache Issues

Improving AppCacheSunday, November 17, 2013

http://www.w3.org/2011/web-apps-ws/papers/Facebook.html

http://www.w3.org/2011/web-apps-ws/papers/Facebook.html

http://www.stevesouders.com/blog/2011/10/03/improving-app-cache/

http://www.stevesouders.com/blog/2011/10/03/improving-app-cache/

</interlude>


ValueProposition

Hybrid Apps


Best of both worlds

Or messy marriage?


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


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

Share Functionality

You Control the Updates

Fast Prototyping


Not so Good.


Not so Good.Performance?



IOS Browser Speed Bake offSunday, November 17, 2013

http://www.guypo.com/mobile/ios-browsers-speed-bakeoff/


http://livepage.apple.com/



IOS Browser Speed Bake off

Performance differences are mostly determined by network speed







Native Browser ~ WebView Browser In Android

Uses V8


Not so Good.

Linked In Mobile BreakupSencha FastBook

Tools

Android Webview Debug Tools


http://venturebeat.com/2013/04/17/linkedin-mobile-web-breakup/




http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story/

http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story/

https://plus.google.com/+PaulIrish/posts/ccP98BTMd5Z

https://plus.google.com/+PaulIrish/posts/ccP98BTMd5Z

The Basic Rule


Know Your User Base


Know Your User Base

Because It DeterminesYour strategy


beyond-the-mobile-web-yibuSunday, November 17, 2013

http://www.slideshare.net/yiibu/beyond-themobilewebbyyiibu

http://www.slideshare.net/yiibu/beyond-themobilewebbyyiibu



Example



On 2011 - 500K pageviews daily


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

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


m.tuenti this week

No Javascript support to speak of



The Strategy


1. Be Plain


1. Be PlainHave aversionwithout

Javascript that works everywhere


Plain navigation

No-Ajax submit


Plain navigation

No-Ajax submit

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

version


Bonus: Dumb Site can be used for not so

smart desktop browsers ... IE6/IE7


2. Augment


2. Augment no JSon first

pageload, once loaded decorate


Fastest Javascript is the one you do not need to

executeSunday, November 17, 2013

How?


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

loader framework needed


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

// Controller code goes here}

How?


Responsive Design starts on

the server


HTTP request

Rough User AgentDetection

Windows Phone7No Javascript


Responsive Design is not always possible


HTTP request

Rough User AgentDetection

jPlayer

Android < 4.*




http://jplayer.org/

http://jplayer.org/

3. Be Fancy


3. Be Fancy, native functionality from webview

access


WebView can access the

devicecamera via Javascript


http://cordova.apache.orgSunday, November 17, 2013



http://cordova.apache.org


http://www.appgyver.com/steroidsSunday, November 17, 2013

http://www.appgyver.com/steroids

http://www.appgyver.com/steroids




remote webviews

Not the standard way to set up your PhoneGap App


Cordova is big, 70K compressed

Have the communication bridge deployed locally.

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

Android 2.3requires some contortions


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)

}}

}


Conclusion


Worth Trying


Questions

@pantojacoderSunday, November 17, 2013