Introducing HybridKit for iOS

Find HybridKit on Github for iOS and JavaScript. Android releasing soon.

All things being equal, native mobile interfaces are vastly preferable to web view emulation: they look familiar to users, scroll and feel faster, and allow for more nuanced user interaction.

But pragmatically, using a web view in some spots could be helpful. They can let you focus on developing other, more visible parts of your app with native APIs. Or maybe your content is so dynamic that it would be difficult to write a reliable native interface.

So that's why we built HybridKit: to make developing hybrid apps easier. It's intended for apps which are mostly native, but need a web view sprinkled every now and then. We use it while developing Propeller, and it's been a huge help (join us!).

Usage

With iOS, the workflow goes like this:

1. Open a HYWebViewController in the app with your URL.
2. On that web page, you can send commands using the HybridKit JavaScript library.
3. These commands are executed by your HYWebViewController instance, causing native interactions.

Additionally, HybridKit controllers try to remove all web view chrome and provide as much of a native look-and-feel as possible.

What do those commands look like? HybridKit ships with a number of built-in commands, like alert:

HybridKit.runCommand("alert", {
    title: "Hello!",
    message: "This is from the web",
    cancel_button_title: "Gotcha."
});

Customizing

We wanted to build an extensible API that made sense for native app developers. When you want to respond to custom commands, all you need to do is define a simple command hander:

@interface HideNavigationBarHandler : HYWebViewCommand
@end

@implementation HideNavigationBarHandler

-(void)handleCommandString:(NSString *)commandString dictionary:(NSDictionary *)commandDictionary {
    self.webViewController.navigationController.navigationBarHidden = [commandDictionary[@"hidden"] boolValue];
}

- (BOOL)respondsToCommandString:(NSString *)commandString {
    return [commandString isEqualToString:@"hide_navbar"];
}
@end

And then register it with your HybridKit controller:

HYWebViewController *webViewController =
    [[HYWebViewController alloc] initWithParams:@{@"url" : @"http://yourservice.com"}];

[webViewController registerCommandHandler:[HideNavigationBarHandler new]];

With that, you can invoke the command from your page's JavaScript:

HybridKit.runCommand("hide_navbar", { hidden: true });

Future

We'll be releasing HybridKit for Android very soon, which is API-compatible with the other HybridKit libraries and default commands.

If you build new command handlers, we'd love to see and link from our repos! And if you run into any problems, don't hesitate to open an issue.