Javascript Strategies for Hybrid Apps and Mobile Web

Javascript
Strategies

For Hybrid Apps
and Mobile Web
Sunday, November 17, 2013

Nuria Ruiz
@pantojacoder


5 million unique users
per week
50% use Mobile
2 million use Mobile Only

HTML5


Native

HTML5

Native

Not your average mobile
website. See Forecast.io


A Hybrid App is a
Mobile App in which
some
of the main
functionality is web
based

Disclaimer: We
are talking
remote
webviews

Disclaimer: We
are talking
remote
webviews

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


Intrinsic Differences
Between 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.


my-protocol://profile/123456

Link to
profile


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


4. Offline.

AppCache Issues
Improving AppCache

</interlude>


Hybrid Apps
Value
Proposition

Best of both
worlds
Or messy marriage?


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

What is the web good at?
Portability
Share Functionality
Layout, formatting text.
Fast Prototyping
Delivery
You Control the Updates

Not so Good.


Not so Good.
Performance?


Not so Good.
Performance?

IOS Browser Speed Bake off

Not so Good.
Performance?

Performance differences are mostly
determined by network speed
IOS Browser Speed Bake off

Not so Good.
Performance?
In Android
Native Browser ~ WebView Browser

Uses V8

Not so Good. Tools

Android Webview Debug Tools
Sencha FastBook
Linked In Mobile Breakup

The
Basic Rule

Know Your
User Base


Know Your
User Base

Because It Determines

Your strategy


beyond-the-mobile-web-yibu

Example

On 2011 - 500K pageviews daily


On 2011 - 500K pageviews daily
We 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

Have a
version
1. Be Plain without
Javascript that works
everywhere

Plain
navigation
No-Ajax
submit


Plain
navigation
A webview
in a low-grade
Android would
see a ‘plain’
version

No-Ajax
submit

Bonus: Dumb Site

can be used for not so
smart desktop

browsers ... IE6/IE7

2. Augment

no JS
2. Augment on first
pageload, once loaded
decorate

Fastest
Javascript is the

one you do not need to

execute


How?


How?


Composed via
annotations
in code. No
client-side
loader
framework
needed

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

// Controller code goes here


Responsive
Design starts on
the server


HTTP request
Rough User Agent
Detection
Windows Phone7
No Javascript


Responsive
Design is not
always possible


HTTP request
Rough User Agent
Detection
Android < 4.*

jPlayer

3. Be Fancy

3. Be Fancy, access
native functionality from
webview

WebView can
access the
device
camera via
Javascript


http://cordova.apache.org

http://www.appgyver.com/steroids

Disclaimer: We
are talking
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.

Android 2.3
requires 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

@pantojacoder

Javascript Strategies for Hybrid Apps and Mobile Web

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (17)

Dernier

Dernier (20)

Javascript Strategies for Hybrid Apps and Mobile Web