by Roman Kazantsev
1. About the tool
The Intel® HTML5 App Porter Tool is an application that helps mobile application developers to port native iOS* code to HTML5 by automatically translating portions of the iOS code into HTML5. This tool does not automatically port 100% of iOS applications, but instead it speeds up the porting process by translating as much code and artifacts as possible.
It helps in the translation of the following artifacts:
- Layouts of views inside Xcode* Interface Builder (XIB) files into HTML + CSS files
- Xcode project files into Microsoft Visual Studio* 2012 projects
1.1 Architecture of translated applications
The Intel HTML5 App Porter Tool produces a set of files that can be divided in four groups:
- For each translated module (i.e., each .m file) there should be a .js file with a matching name.
- The default.html file is the entry point for the HTML5 app, where all the other .js files are included.
- Translated .xib files (if any): For each translated .xib file there should be .html and .css files with matching names. These files correspond to their HTML5 version.
- Resources: All the resources from the original iOS project will be copied to the root folder of the translated HTML5 app.
In short, the high level structure of the translated application is practically the same as the original one. Therefore, the design and structure of the original application will remain the same in the translated version.
At a high level, the transformation pipeline looks like this:
This pipeline follows the following stages:
- Objective-C files are parsed into an intermediate AST (Abstract Syntax Tree)
- Placeholder definitions are generated for unsupported API calls
1.3 Current release and planned features in the next release
The latest release of the tool is the beta version, which you can find at: http://software.intel.com/en-us/html5.
The next release is expected to have better integration with Intel® XDK (Intel’s HTML5 cross platform development kit) and have more iOS API coverage in terms of planned features.
2. Porting translated application to different OSs
Additionally, the translated project can be ported to Android*. To do so, you have to call HTML5 routines from Dalvik* code as follows:
Also, you should add webView object in xml file for layout.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <WebView android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/webView" /> </LinearLayout>
3. Recap from one sample of translated application
I tried to translate one Xcode 3.2 project that has a GUI-based storyboard and a code snippet that used Social API modules.
- 76% of the iOS calls translated successfully
- The other 24% had placeholder declarations. The tool didn’t translate calls for swipe gesture handlers, file reading, font configuration, string appending, and unichar type.
- Beta version (the latest release) compared to the July demo version. The demo version could not parse some Objective-C files with synthesis and define directives for clang. The latest version parses them successfully. The percentage of placeholders was reduced by 20% in the latest version compared to the July demo.
The tool showed relatively good translation statistics but only for a set of minor iOS calls. Actually, I have no positive results in output. Most of the kernel parts in GUI and the social API were not translated on the whole.
3.1 The pros and cons of the beta version of HTML5 App Porter
- Standard types and their method translation. The tool supports C global functions and types such as NSString, NSArray, NSDictionary, etc., but only a small part of their methods can be translated. For instance, the methods stringByAppendingFormat and stringWithContentsOfFile of NSString are unsupported.
- Social API. Most mobile applications seem to use the social API, but unfortunately, the tool is unable to translate it.