Bridge the gap

1,912 views

Published on

Slides for presentation Piotr gave at the NYC SproutCore meetup on 4/21/2011

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,912
On SlideShare
0
From Embeds
0
Number of Embeds
80
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Bridge the gap

    1. 1. Don’t Gap The BridgeBridge The Gap
    2. 2. Piotr Steininger• Software enthusiast and architect• Background: PHP, JEE, ExtJS, SproutCore• Worked with: GEICO, FINRA, Time• SproutCore: SI for Android, Fortune500+
    3. 3. JS-to-Native-to-JS• Challenge: access to Mobile phone features • accelerometer • local storage • CAMERA, Microphone, etc• Solutions: PhoneGap, Titanium ?
    4. 4. PhoneGap - Features• Supports 6 platforms• Features • Accelerometer, Compass, GPS • Camera, Audio • Storage/File System • Notifications (sound, vibration)
    5. 5. PhoneGap - Issues• Tries to cover too much ground• Overly complex• Excessive amount of code• Slow (due to the above)• Many features already in WebKit• Breaks SproutCore !
    6. 6. The Project• SI Magazine• Reader app, rich UI• Support various content types• Run on iPhone and Android• Limited JS-native needs
    7. 7. Project Needs• Access to Native Debug console• Secure off-line storage and caching of data• 2-way JS-native Bridge with callbacks• Change native controls based on JS UI changes• Ability to execute select native commands
    8. 8. Problems• PhoneGap does not work (well) with Sproutcore • Uses custom URL schemes on iOS to send commands to native • Causes split second loss of access to DOM • Sproutcore blows up silently during rendering and stops the app
    9. 9. More Problems• Works differently on Android • Uses a long-polling AJaX server (?!?!)• Bloat (!) - too many features• Slowdowns• Too much complexity
    10. 10. Solutions• Step 1: on iOS change transport layer• Step 2: remove 99% of PhoneGap• Step 3: Keep it simple
    11. 11. iOS• Used SC.Request instead of window.location.url• Intercepted psuedo-XHR requests in iOS default cache• Rewrote requests and redirected to PG command infrastructure
    12. 12. iOS Details• Extend NSURLCache• Override cachedResponse method to intercept URLs• Used http://gap/... instead of gap://....• New JS-to-Native API + callback support
    13. 13. iOS Details@interface MyURLCache : NSURLCache {}@implementation MyURLCache- (NSCachedURLResponse *)cachedResponseForRequest:(NSURLRequest *)request { NSString *pathString = [[request URL] absoluteString]; if ([pathString rangeOfString:@"http://gap/"].location != NSNotFound) { pathString = [pathString stringByReplacingOccurrencesOfString:@"http://gap/" withString:@"gap://"]; NSNotification *n = [NSNotification notificationWithName:DidReceiveJSNotification object:pathString]; [[NSNotificationCenter defaultCenter] performSelectorOnMainThread:@selector(postNotification:) withObject:n waitUntilDone:NO]; } return nil;}
    14. 14. iOS Details//in app delegate didFinishLaunchingWithOptions:MyURLCache *cache = [[MyURLCache alloc] init];NSURLCache setSharedURLCache:cache];[cache release];
    15. 15. Android• No part of PhoneGap used• Java Class and exposed to WebView• Separate and simpler JS API to match iOS (same API different guts)
    16. 16. Android Detailspublic class NativeInterface { private static final String TAG = "NativeInterface"; private WebView appView; private App activity; public NativeSupport(WebView v, App activity) { appView = v; activity = activity; } ...}
    17. 17. Android Detailspublic class App extends Activity {private WebView webView;private NativeInterface nativeInterface;...public void onCreate(Bundle savedInstanceState) { nativeInterface = new NativeInterface(webView, this); webView.addJavascriptInterface(nativeInterface,"NativeInterface");}...webView.loadUrl("javascript: SCApp.function(...);”);
    18. 18. Conclusion• There IS a NoGap way• Pick your battles wisely!• Evaluate your needs and decide• iOS and Android expert on your team
    19. 19. Q&A• Piotr (Peter) Steininger• Contact Info: • http://about.me/piotr.steininger • piotr@tapangi.com

    ×