Javascript
Strategies

For Hybrid Apps
and Mobile Web
Sunday, November 17, 2013
Nuria Ruiz
@pantojacoder

Sunday, November 17, 2013
5 million unique users
per week
50% use Mobile
2 million use Mobile Only
Sunday, November 17, 2013
HTML5

Sunday, November 17, 2013

Native
HTML5

Native

Not your average mobile
website. See Forecast.io

Sunday, November 17, 2013
HTML5

Sunday, November 17, 2013

Native
HTML5

Sunday, November 17, 2013

Native
A Hybrid App is a
Mobile App in which
some
of the main
functionality is web
based
Sunday, November 17, 2013
Disclaimer: We
are talking
remote
webviews
Sunday, November 17, 2013
HTML5

Sunday, November 17, 2013

Native
Disclaimer: We
are talking
remote
webviews

Important: Not all Javascript
has to be remote. You can mix
local and remote J...
<interlude>

Sunday, November 17, 2013
Intrinsic Differences
Between 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
my-protocol://profile/123456

Link to
profile

Sunday, November 17, 2013
3. End of sessions
are likely not 301s
anymore.

Sunday, November 17, 2013
4. Offline.

AppCache Issues
Improving AppCache
Sunday, November 17, 2013
</interlude>

Sunday, November 17, 2013
Hybrid Apps
Value
Proposition
Sunday, November 17, 2013
Best of both
worlds
Or messy marriage?

Sunday, November 17, 2013
What is the web good at?
Portability
Layout, formatting text.
Delivery
Sunday, November 17, 2013
What is the web good at?
Portability
Share Functionality
Layout, formatting text.
Fast Prototyping
Delivery
You Control th...
Not so Good.

Sunday, November 17, 2013
Not so Good.
Performance?

Sunday, November 17, 2013
Not so Good.
Performance?

IOS Browser Speed Bake off
Sunday, November 17, 2013
Not so Good.
Performance?

Performance differences are mostly
determined by network speed
IOS Browser Speed Bake off
Sunda...
Not so Good.
Performance?
In Android
Native Browser ~ WebView Browser

Uses V8
Sunday, November 17, 2013
Not so Good. Tools

Android Webview Debug Tools
Sencha FastBook
Linked In Mobile Breakup
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 Determines

Your strategy

Sunday, November 17, 2013
beyond-the-mobile-web-yibu
Sunday, 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 daily
We still have about 100k daily

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

S...
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
Have a
version
1. Be Plain without
Javascript that works
everywhere
Sunday, November 17, 2013
Plain
navigation
No-Ajax
submit

Sunday, November 17, 2013
Plain
navigation
A webview
in a low-grade
Android would
see a ‘plain’
version
Sunday, November 17, 2013

No-Ajax
submit
Bonus: Dumb Site

can be used for not so
smart desktop

browsers ... IE6/IE7
Sunday, November 17, 2013
2. Augment
Sunday, November 17, 2013
no JS
2. Augment on first
pageload, once loaded
decorate
Sunday, November 17, 2013
Fastest
Javascript is the

one you do not need to

execute

Sunday, November 17, 2013
How?

Sunday, November 17, 2013
How?

Sunday, November 17, 2013

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 TuvoicemailPageCo...
Responsive
Design starts on
the server

Sunday, November 17, 2013
HTTP request
Rough User Agent
Detection
Windows Phone7
No Javascript

Sunday, November 17, 2013
Responsive
Design is not
always possible

Sunday, November 17, 2013
HTTP request
Rough User Agent
Detection
Android < 4.*

jPlayer
Sunday, November 17, 2013
3. Be Fancy
Sunday, November 17, 2013
3. Be Fancy, access
native functionality from
webview
Sunday, November 17, 2013
WebView can
access the
device
camera via
Javascript

Sunday, November 17, 2013
http://cordova.apache.org
Sunday, November 17, 2013
http://www.appgyver.com/steroids
Sunday, 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, ...
Android 2.3
requires some
contortions

Sunday, November 17, 2013
public class MyWebViewClient extends CordovaWebViewClient {
/**
Once the page has finished loading
it loads cordova in a n...
Conclusion
Sunday, November 17, 2013
Worth Trying
Sunday, November 17, 2013
Questions
Sunday, November 17, 2013

@pantojacoder
Upcoming SlideShare
Loading in …5
×

Javascript Strategies for Hybrid Apps and Mobile Web

2,420 views

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,420
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
20
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Javascript Strategies for Hybrid Apps and Mobile Web

  1. 1. Javascript Strategies For Hybrid Apps and Mobile Web Sunday, November 17, 2013
  2. 2. Nuria Ruiz @pantojacoder Sunday, November 17, 2013
  3. 3. 5 million unique users per week 50% use Mobile 2 million use Mobile Only Sunday, November 17, 2013
  4. 4. HTML5 Sunday, November 17, 2013 Native
  5. 5. HTML5 Native Not your average mobile website. See Forecast.io Sunday, November 17, 2013
  6. 6. HTML5 Sunday, November 17, 2013 Native
  7. 7. HTML5 Sunday, November 17, 2013 Native
  8. 8. A Hybrid App is a Mobile App in which some of the main functionality is web based Sunday, November 17, 2013
  9. 9. Disclaimer: We are talking remote webviews Sunday, November 17, 2013
  10. 10. HTML5 Sunday, November 17, 2013 Native
  11. 11. Disclaimer: We are talking remote webviews Important: Not all Javascript has to be remote. You can mix local and remote Javascript Sunday, November 17, 2013
  12. 12. <interlude> Sunday, November 17, 2013
  13. 13. Intrinsic Differences Between Mobile Web and Webviews Sunday, November 17, 2013
  14. 14. 1.You can pack part of your Javascript with the App. Sunday, November 17, 2013
  15. 15. Sunday, November 17, 2013
  16. 16. 2. You can very easily open Native functionality from a WebView. Sunday, November 17, 2013
  17. 17. my-protocol://profile/123456 Link to profile Sunday, November 17, 2013
  18. 18. 3. End of sessions are likely not 301s anymore. Sunday, November 17, 2013
  19. 19. 4. Offline. AppCache Issues Improving AppCache Sunday, November 17, 2013
  20. 20. </interlude> Sunday, November 17, 2013
  21. 21. Hybrid Apps Value Proposition Sunday, November 17, 2013
  22. 22. Best of both worlds Or messy marriage? Sunday, November 17, 2013
  23. 23. What is the web good at? Portability Layout, formatting text. Delivery Sunday, November 17, 2013
  24. 24. What is the web good at? Portability Share Functionality Layout, formatting text. Fast Prototyping Delivery You Control the Updates Sunday, November 17, 2013
  25. 25. Not so Good. Sunday, November 17, 2013
  26. 26. Not so Good. Performance? Sunday, November 17, 2013
  27. 27. Not so Good. Performance? IOS Browser Speed Bake off Sunday, November 17, 2013
  28. 28. Not so Good. Performance? Performance differences are mostly determined by network speed IOS Browser Speed Bake off Sunday, November 17, 2013
  29. 29. Not so Good. Performance? In Android Native Browser ~ WebView Browser Uses V8 Sunday, November 17, 2013
  30. 30. Not so Good. Tools Android Webview Debug Tools Sencha FastBook Linked In Mobile Breakup Sunday, November 17, 2013
  31. 31. The Basic Rule Sunday, November 17, 2013
  32. 32. Know Your User Base Sunday, November 17, 2013
  33. 33. Know Your User Base Because It Determines Your strategy Sunday, November 17, 2013
  34. 34. beyond-the-mobile-web-yibu Sunday, November 17, 2013
  35. 35. Example Sunday, November 17, 2013
  36. 36. Sunday, November 17, 2013
  37. 37. On 2011 - 500K pageviews daily Sunday, November 17, 2013
  38. 38. On 2011 - 500K pageviews daily We still have about 100k daily Says that it supports Javascript.. but it doesn’t really Sunday, November 17, 2013
  39. 39. m.tuenti this week No Javascript support to speak of Sunday, November 17, 2013
  40. 40. Sunday, November 17, 2013
  41. 41. The Strategy Sunday, November 17, 2013
  42. 42. 1. Be Plain Sunday, November 17, 2013
  43. 43. Have a version 1. Be Plain without Javascript that works everywhere Sunday, November 17, 2013
  44. 44. Plain navigation No-Ajax submit Sunday, November 17, 2013
  45. 45. Plain navigation A webview in a low-grade Android would see a ‘plain’ version Sunday, November 17, 2013 No-Ajax submit
  46. 46. Bonus: Dumb Site can be used for not so smart desktop browsers ... IE6/IE7 Sunday, November 17, 2013
  47. 47. 2. Augment Sunday, November 17, 2013
  48. 48. no JS 2. Augment on first pageload, once loaded decorate Sunday, November 17, 2013
  49. 49. Fastest Javascript is the one you do not need to execute Sunday, November 17, 2013
  50. 50. How? Sunday, November 17, 2013
  51. 51. How? Sunday, November 17, 2013 Composed via annotations in code. No client-side loader framework needed
  52. 52. How? <?php /* @DependencyFileList(requires="js/wap/tuportal.js, js/wap/ tuportal/voicemail.js") */ class TuvoicemailPageCoordinator { } // Controller code goes here Sunday, November 17, 2013
  53. 53. Responsive Design starts on the server Sunday, November 17, 2013
  54. 54. HTTP request Rough User Agent Detection Windows Phone7 No Javascript Sunday, November 17, 2013
  55. 55. Responsive Design is not always possible Sunday, November 17, 2013
  56. 56. HTTP request Rough User Agent Detection Android < 4.* jPlayer Sunday, November 17, 2013
  57. 57. 3. Be Fancy Sunday, November 17, 2013
  58. 58. 3. Be Fancy, access native functionality from webview Sunday, November 17, 2013
  59. 59. WebView can access the device camera via Javascript Sunday, November 17, 2013
  60. 60. http://cordova.apache.org Sunday, November 17, 2013
  61. 61. http://www.appgyver.com/steroids Sunday, November 17, 2013
  62. 62. Disclaimer: We are talking remote webviews Not the standard way to set up your PhoneGap App Sunday, November 17, 2013
  63. 63. Cordova is big, 70K compressed Have the communication bridge deployed locally. Rest of JS is remote. Sunday, November 17, 2013
  64. 64. Android 2.3 requires some contortions Sunday, November 17, 2013
  65. 65. 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
  66. 66. Conclusion Sunday, November 17, 2013
  67. 67. Worth Trying Sunday, November 17, 2013
  68. 68. Questions Sunday, November 17, 2013 @pantojacoder

×