Security warning 2015
The Cordova project has been fixing security issues in its external domain whitelist plugin over time, and has also dealt with security issues in its internal bridging mechanism. It is very strongly advised NOT to release an app with a custom-built web view bridging or domain whitelisting mechanism without proper code review and testing.
Hybrid architecture for mobile apps
Cordova/PhoneGap provides a framework to develop mobile applications in HTML5, Javascript, and CSS with common APIs to access native device functionality on a number of mobile platforms. Native device functionality that is not built into the Cordova/PhoneGap core can be accessed by using & adapting plugins for the desired platforms. The API function calls between Javascript and the native access classes are almost always asynchronous.
AFAIK there are a couple important things at an itty-bitty level:
- All native access classes actually subclass from a Cordova plugin class; and
- All function calls and callbacks are sent between JavaScript & native classes in string form. Function call & callback parameters are generally sent as numbers, strings, or JSON objects.
Despite such a simplistic asynchronous API model, Cordova/PhoneGap has become an increasingly complex framework with a very busy forum.
Simplification: a flow-based architecture
Last year I discovered the concept of flow-based programming which seems to have been used & refined over the past 40 years. Flow-based programming (FBP) breaks a large-scale application architecture down to independently threaded components that communicate via data packets, and there are some nice GUI tools to assemble FBP programs. I like the idea very much, however I have two major issues:
- Each component is expected to be written as an infinite loop that receives its input as blocking reads; and
- The data packet format & interface is relatively complex in order to accomodate data that is structural in nature.
I am now in the process of developing an idea called "JSON Flow" to design a flow-based architecture based on JSON messages.
UPDATE (June 2015): The "JSON Flow"/"JSON Bus" idea presented here is inspired by but different from FBP since it relies on (asynchronous) two-way message-based communication.
JSON Bus for a simplified asynchronous API
A subset of the "JSON Flow" idea is "JSON Bus" where Javascript code can send an asynchronous API request as a JSON message and receive a response via a callback. Here is a sample JSON Bus message for a DatePicker request:
{
from: 'datepickerdemo',
to: 'datepicker',
data: {
mode: 'date',
date: '12/12/2012/12/12'
}
}
Here is a sample callback message:
{
from: 'datepicker',
to: 'datepickercb',
data: {
date: '12/13/2014'
}
}
JSON Bus sample for Android
A sample of this idea for Android is available in brodyspark / JSONBus-sample-Android (in public domain). The application contains the following tests:
- Quick JSON echo test;
- Open a native DatePicker, which is adapted from the Cordova/PhoneGap DatePicker plugin for Android and display the selected date in the WebView.
Here is a quick tour of the existing sample code:
- assets/index.html - call SampleEchoHandler & DatePickerPlugin with JSON argument in jsonmessage & show the results in HTML;
- src/org/jsonbus/JSONBusSampleApp.java - subclass of JSONBusActivity - register SampleEchoHandler & DatePickerPlugin and load index.html;
- src/org/jsonbus/JSONBusHandler.java - JSON Bus message handler interface with jsonmessage() method;
- src/org/jsonbus/SampleEchoHandler.java - sample JSON Bus message handler to echo the request;
- src/org/jsonbus/DatePickerPlugin.java - sample adaptation of the DatePicker plugin for Android for the JSON Bus sample;
- src/org/jsonbus/JSONBusActivity.java - base class for a JSON Bus application Activity that sets up the layout, add a JSON message handler, load HTML, and send Javascript callbacks.
The first version of the JSON Bus sample does not follow the format shown above, however this should be fixed very soon.
This JSON Bus sample demonstrates an ability to send JSON messages in API function calls & callbacks and integrate some native GUI functionality with application code developed using HTML5 & Javascript technology.
A first JSON Bus sample version for iOS
As a proof-of-concept, I hacked together a sample version in brodyspark / JSONBus-sample-iOS-with-wvjsbridge, using ExampleApp from marcuswestin / WebViewJavascriptBridge. In this sample, the HTML/Javascript sends a request with JSON data to open a native iOS date picker, which will send a result with JSON data when the user has selected the desired date. UPDATED: This sample is in a very crude state and will be replaced by something better in the near future is now abandoned in favor of: https://github.com/brodyspark/JSONBus-sample-iOS (made without WebViewJavascriptBridge and in public domain)
Next steps
Upcoming steps for the Android version include:
- Fix existing samples to follow the message format given above;
- A JSON message routing handler in Java, both for function calls from Javascript and for callbacks;
- JSON message routing handler in Javascript;
- Addition of a "subscription" model, where Javascript can make a single JSON Bus function call & continue receiving callbacks based on native events;
- Adapter classes to include & build Cordova/PhoneGap plugin classes, including some built-in functionality, with little modifications if any.
For iOS the sample should really be is now rebuilt without the WebViewJavascriptBridge (see brodyspark / JSONBus-sample-iOS). I found a couple excellent links how to make function calls back and forth between Javascript & Objective-C here and also here. Then the enhancements from the Android version can be applied to the iOS version.
