View
106
Download
1
Category
Tags:
Preview:
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
JavascriptStrategies
For Hybrid Apps and Mobile Web
Sunday, November 17, 2013
@pantojacoderNuria Ruiz
Sunday, November 17, 2013
5 million unique usersper week
50% use Mobile2 million use Mobile Only
Sunday, November 17, 2013
HTML5 Native
Sunday, November 17, 2013
HTML5 Native
Not your average mobile website. See Forecast.io
Sunday, November 17, 2013
HTML5 Native
Sunday, November 17, 2013
HTML5 Native
Sunday, November 17, 2013
A Hybrid App is a Mobile App in which
someof the main
functionality is web based
Sunday, November 17, 2013
Disclaimer: We are talking
remote webviews
Sunday, November 17, 2013
HTML5 Native
Sunday, November 17, 2013
Disclaimer: We are talking
remote webviews
Important: Not all Javascript has to be remote. You can mixlocal and remote Javascript
Sunday, November 17, 2013
<interlude>
Sunday, November 17, 2013
Intrinsic DifferencesBetween Mobile Web and
Webviews
Sunday, November 17, 2013
1.You can pack part of your Javascript with the App.
Sunday, November 17, 2013
Sunday, November 17, 2013
2. You can very easily open Native functionality from a WebView.
Sunday, November 17, 2013
Link to profile
my-protocol://profile/123456
Sunday, November 17, 2013
3. End of sessions are likely not 301s anymore.
Sunday, November 17, 2013
4. Offline.
AppCache Issues
Improving AppCacheSunday, November 17, 2013
</interlude>
Sunday, November 17, 2013
ValueProposition
Hybrid Apps
Sunday, November 17, 2013
Best of both worlds
Or messy marriage?
Sunday, November 17, 2013
What is the web good at?PortabilityLayout, formatting text.Delivery
Sunday, November 17, 2013
What is the web good at?PortabilityLayout, formatting text.Delivery
Share Functionality
You Control the Updates
Fast Prototyping
Sunday, November 17, 2013
Not so Good.
Sunday, November 17, 2013
Not so Good.Performance?
Sunday, November 17, 2013
Not so Good.Performance?
IOS Browser Speed Bake offSunday, November 17, 2013
Not so Good.Performance?
IOS Browser Speed Bake off
Performance differences are mostly determined by network speed
Sunday, November 17, 2013
Not so Good.Performance?
Native Browser ~ WebView Browser In Android
Uses V8
Sunday, November 17, 2013
Not so Good.
Linked In Mobile BreakupSencha FastBook
Tools
Android Webview Debug Tools
Sunday, November 17, 2013
The Basic Rule
Sunday, November 17, 2013
Know Your User Base
Sunday, November 17, 2013
Know Your User Base
Because It DeterminesYour strategy
Sunday, November 17, 2013
beyond-the-mobile-web-yibuSunday, November 17, 2013
Example
Sunday, November 17, 2013
Sunday, November 17, 2013
On 2011 - 500K pageviews daily
Sunday, November 17, 2013
On 2011 - 500K pageviews dailyWe still have about 100k daily
Says that it supports Javascript..but it doesn’t really
Sunday, November 17, 2013
m.tuenti this week
No Javascript support to speak of
Sunday, November 17, 2013
Sunday, November 17, 2013
The Strategy
Sunday, November 17, 2013
1. Be Plain
Sunday, November 17, 2013
1. Be PlainHave aversionwithout
Javascript that works everywhere
Sunday, November 17, 2013
Plain navigation
No-Ajax submit
Sunday, November 17, 2013
Plain navigation
No-Ajax submit
A webviewin a low-grade Android would see a ‘plain’
version
Sunday, November 17, 2013
Bonus: Dumb Site can be used for not so
smart desktop browsers ... IE6/IE7
Sunday, November 17, 2013
2. Augment
Sunday, November 17, 2013
2. Augment no JSon first
pageload, once loaded decorate
Sunday, November 17, 2013
Fastest Javascript is the one you do not need to
executeSunday, November 17, 2013
How?
Sunday, November 17, 2013
How? Composed via annotations in code. No client-side
loader framework needed
Sunday, November 17, 2013
<?php/* @DependencyFileList(requires="js/wap/tuportal.js, js/wap/tuportal/voicemail.js")*/class TuvoicemailPageCoordinator {
// Controller code goes here}
How?
Sunday, November 17, 2013
Responsive Design starts on
the server
Sunday, November 17, 2013
HTTP request
Rough User AgentDetection
Windows Phone7No Javascript
Sunday, November 17, 2013
Responsive Design is not always possible
Sunday, November 17, 2013
HTTP request
Rough User AgentDetection
jPlayer
Android < 4.*
Sunday, November 17, 2013
3. Be Fancy
Sunday, November 17, 2013
3. Be Fancy, native functionality from webview
access
Sunday, November 17, 2013
WebView can access the
devicecamera via Javascript
Sunday, November 17, 2013
http://cordova.apache.orgSunday, November 17, 2013
http://www.appgyver.com/steroidsSunday, November 17, 2013
Disclaimer: We are talking
remote webviews
Not the standard way to set up your PhoneGap App
Sunday, November 17, 2013
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
Sunday, November 17, 2013
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
Conclusion
Sunday, November 17, 2013
Worth Trying
Sunday, November 17, 2013
Questions
@pantojacoderSunday, November 17, 2013
Recommended