• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Javascript Strategies for Hybrid Apps and Mobile Web
 

Javascript Strategies for Hybrid Apps and Mobile Web

on

  • 1,317 views

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 ...

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

Statistics

Views

Total Views
1,317
Views on SlideShare
1,303
Embed Views
14

Actions

Likes
1
Downloads
8
Comments
0

1 Embed 14

https://twitter.com 14

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Javascript Strategies for Hybrid Apps and Mobile Web Javascript Strategies for Hybrid Apps and Mobile Web Presentation Transcript

    • 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 Javascript Sunday, November 17, 2013
    • <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 the Updates 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 off Sunday, November 17, 2013
    • Not so Good. Performance? Performance differences are mostly determined by network speed IOS Browser Speed Bake off Sunday, November 17, 2013
    • 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 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
    • 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 TuvoicemailPageCoordinator { } // Controller code goes here Sunday, November 17, 2013
    • 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, 2013
    • 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 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 Sunday, November 17, 2013 @pantojacoder