Introducing GoldenGate

You might not know it, but both Flipboard for iOS and Flipboard for Android make heavy use of web views. We use web views so we can ensure consistent designs for our partners’ articles across all platforms. Communication between native code and the JavaScript code running in a web view is something that is both […]

You might not know it, but both Flipboard for iOS and Flipboard for Android make heavy use of web views. We use web views so we can ensure consistent designs for our partners’ articles across all platforms. Communication between native code and the JavaScript code running in a web view is something that is both tedious to implement as well as very bug prone as it’s mostly just string concatenation. Today we are releasing a library to make this task easier when developing Android applications which use web views.

GoldenGate is a annotation processing library which generates java wrappers around your JavaScript code. An annotation processing library is a piece of code which runs when you compile your code and has the ability to generate new java classes. This means that GoldenGate can ensure at compile time that you are sending the correct types into the JavaScript functions you define in your bridge. If you’re interested in knowing more about how to write your own, this blog post is a good intro.

Let’s get into a quick example to really show the power of the library! First of all a quick example of how to currently call a JavaScript function in a WebView.

1
webview.loadUrl("javascript:alert(" + myString + ");");

You should clearly see that a lot can go wrong here which the compiler won’t catch. For example you could misspell

1
alert

or maybe

1
myString

isn’t a string at all.

GoldenGate allows for the compiler to have your back. The same code as above written with GoldenGate looks like this.

1
2
3
4
5
6
7
@Bridge
class JavaScript {
	void alert(String message);
}

JavaScriptBridge bridge = new JavaScript(webview);
bridge.alert(myString);

We started by defining an interface which describes the JavaScript methods we want to call from java. This interface is annotated with

1
@Bridge

which is where the magic happens. This will generate a class named

1
JavaScriptBridge

in this case which implements all the methods defined by the interface.

There are a couple more options for more advanced usage that we won’t cover in this blog post but they are well documented over on Github.

At Flipboard we love the type safety GoldenGate gives us and we think it can help more developers using both native and web technology in their apps. Head over to the Github repository to check out the code. Pull requests are very welcome!

Source: Flipboard