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

1. Don’t Gap The Bridge
Bridge The Gap

2. Piotr Steininger
• Software enthusiast and architect
• Background: PHP, JEE, ExtJS, SproutCore
• Worked with: GEICO, FINRA, Time
• SproutCore: SI for Android, Fortune500+

3. JS-to-Native-to-JS
• Challenge: access to Mobile phone features
• accelerometer
• local storage
• CAMERA, Microphone, etc
• Solutions: PhoneGap, Titanium ?

4. PhoneGap - Features
• Supports 6 platforms
• Features
• Accelerometer, Compass, GPS
• Camera, Audio
• Storage/File System
• Notifications (sound, vibration)

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. The Project
• SI Magazine
• Reader app, rich UI
• Support various content
types
• Run on iPhone and
Android
• Limited JS-native needs

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. 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. More Problems
• Works differently on Android
• Uses a long-polling AJaX server (?!?!)
• Bloat (!) - too many features
• Slowdowns
• Too much complexity

10. Solutions
• Step 1: on iOS change transport layer
• Step 2: remove 99% of PhoneGap
• Step 3: Keep it simple

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. iOS Details
• Extend NSURLCache
• Override cachedResponse method to
intercept URLs
• Used http://gap/... instead of gap://....
• New JS-to-Native API + callback support

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. iOS Details
//in app delegate didFinishLaunchingWithOptions:
MyURLCache *cache = [[MyURLCache alloc] init];
NSURLCache setSharedURLCache:cache];
[cache release];

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. Android Details
public 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. Android Details
public 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. Conclusion
• There IS a NoGap way
• Pick your battles wisely!
• Evaluate your needs and decide
• iOS and Android expert on your team

19. Q&A
• Piotr (Peter) Steininger
• Contact Info:
• http://about.me/piotr.steininger
• piotr@tapangi.com