Comparison-only view

Introduction

The Mobile App Framework Matrix represents a comparison and documentation of current technologies for building native iOS and Android apps with a single JavaScript code base: this is possible by using certain frameworks which provide cross-platform support by using HTML or by providing a dynamic runtime. At this point it has to be said that Windows Phone apps are not considered since current solutions don't support them or just slightly yet.
Web developers shall get a picture of the available technologies and their drawbacks. Since cross-platform mobile apps have different requirments, not each solution is suitable for every scenario. When it comes to extensibility, performance and scalability, frameworks differ in several ways.

Functional principles

The frameworks which are presented on this page, work in very different ways. As said before, the choice depends heavily on the requirments of the mobile application. So it has to be clear that there will always be compromises in comparison to native app development with Objective-C/Swift or Java. Developers will have to find an appropriate balance between performance and adaptability. And at this point it should be clear that apps built using a single JavaScript code base will always some disadvantages compared to fully native apps.

Here is a quick overview of how the different approaches work in general. Basically there are two concepts how a framework can accomplish the task of having a single JavaScript code base for iOS and Android apps: using a WebView wrapper with a JavaScript bridge or a dynamic runtime approach. In both cases JavaScript represents an abstraction layer which is used to access native functionalities and device features.

WebView wrapper

The WebView wrapper approach is a hybrid one where web and native technologies are used together. The WebView component (UIWebView on iOS, WebView on Android) is a chrome-less browser view which uses a HTML layout engine (WebKit/Blink) to render a HTML/CSS user interface. Additionally this approach uses a JavaScript-Native bridge to communicate between the WebView application and the native platform. Therefore, native APIs and device features (like the camera) can be used inside the WebView by using JavaScript.

The most popular framework which is based on this idea is PhoneGap/Cordova. It has to be clarified that these frameworks are more or less the same but still exist as separate tools. This can be confusing but if you look at their documentation you will see that there's no difference. Some conventions and CLI commands differ so it's up the developer which one he chooses. Since the frameworks are being maintained by different developers (Apache and Adobe), they will remain separate tools in the future.

Dynamic runtime

On the other side there is the dynamic runtime approach which is also known as "Write Once Run Anywhere" (WORA). JavaScript code is evaluated at runtime and fills the gap to platform-specific calls: a dynamic runtime written in the device's native language (Objective-C or Java) acts as a bridge between native methods and JavaScript. Such technologies offer a unified JavaScript API to access native functionalities.

The advantage of this concept is the usage of native views and widgets. The drawback is that you can't use HTML components here. But since there is no HTML layout engine, there is no additional area which could slow down the performance of the application.

Frameworks

Currently there are 7 noteworthy frameworks and technologies which either follow the concept of having a WebView wrapper or provide a dynamic runtime. At this point, it has to be said that PhoneGap/Cordova are not included in the following evaluations. By this time there are more advanced solutions which already come with UI components and MV* frameworks. The following lists contain links to each framework and a brief description.

Based on PhoneGap/Cordova

Ionic An open source HTML5 mobile app framework that is based on AngularJS. It includes HTML, CSS and JavaScript components as well as a Node.js-based CLI, Live Reload and other interesting features.
Telerik AppBuilder A hybrid app solution based on jQuery and Kendo UI Mobile which comes with many UI widgets and an optional MVVM framework. The visual appearance of an app can be adjusted by using or customizing themes.
Supersonic A hybrid app framework that utilizes Ionic and provides more advanced features (Cordova promises). It partly integrates native UI components and is based on an advanced PhoneGap-compatible WebView wrapper called AppGyver Wrapper.

Dynamic runtime

React Native A native mobile app framework based on the React JavaScript library. It provides direct access to native UI components, allows asynchronous execution and can be run in different JavaScript environments (includes support for ES5, ES6 and ES7).
Appcelerator Titanium A mobile app framework that comes with an integrated MVC framework, an own IDE and a special framework designed for building APIs. Appcelerator promises a code reuse across device platforms of 60-90%. On Appcelerator.org you'll find the open source Titanium mobile framework.
Tabris.js A cross-platform mobile framework with support for native widgets. JavaScript code is written using a module system and a Page stack concept is being used for the UI. Tabris.js implements a subset of W3C standards and also supports Cordova plugins.
NativeScript An open source cross-platform native development kit that comes with UI abstractions, a CSS subset, ES5 features and support for third-party JavaScript libraries. The whole development workflow is based on a Node.js-based CLI.

Comparison

The table below illustrates a direct comparison of all frameworks mentioned on this page. Some cells contain additional information which can be shown by hovering the mouse cursor over that cell.

Based on PhoneGap/Cordova Ionic Telerik AppBuilder Supersonic React Native Appcelerator Titanium Tabris.js NativeScript
XML-based views/components Ionic Telerik AppBuilder Supersonic React Native Appcelerator Titanium Tabris.js NativeScript
UI framework included Ionic Telerik AppBuilder Supersonic React Native Appcelerator Titanium Tabris.js NativeScript
UI customization via CSS Ionic Telerik AppBuilder Supersonic React Native Appcelerator Titanium Tabris.js NativeScript
Use of native UI components Ionic Telerik AppBuilder Supersonic React Native Appcelerator Titanium Tabris.js NativeScript
Usage of other JavaScript MV* frameworks Ionic Telerik AppBuilder Supersonic React Native Appcelerator Titanium Tabris.js NativeScript
Repository with community plugins/modules Ionic Telerik AppBuilder Supersonic React Native Appcelerator Titanium Tabris.js NativeScript
Node.js-based workflow Ionic Telerik AppBuilder Supersonic React Native Appcelerator Titanium Tabris.js NativeScript
Usage of CommonJS modules Ionic Telerik AppBuilder Supersonic React Native Appcelerator Titanium Tabris.js NativeScript
Support for iOS and Android Ionic Telerik AppBuilder Supersonic React Native Appcelerator Titanium Tabris.js NativeScript
Native app can be turned into mobile web app Ionic Telerik AppBuilder Supersonic React Native Appcelerator Titanium Tabris.js NativeScript
Requires online registration Ionic Telerik AppBuilder Supersonic React Native Appcelerator Titanium Tabris.js NativeScript
Free Ionic Telerik AppBuilder Supersonic React Native Appcelerator Titanium Tabris.js NativeScript
Partial use
Limitation

Pro and contra

Although the solutions above provide a good way to develop cross-platform mobile applications, there are also some disadvantages. As said before, the choice of such a framework depends on the needs of each project. The frameworks are addressed to JavaScript developers: it should be clear that iOS and Android developers can accomplish every task in their native language. Here are some facts that shall give a picture when to use a JavaScript solution.

Pro JavaScript frameworks

  • Objective-C/Swift and Java knowledge is not/rarely needed
  • usage of native IDEs (XCode, Eclipse, etc.) is very limited or not needed
  • platform-specific adjustments can be implemented easily
  • hardware features on both platforms can be used out of the box (API)
  • prototypes and small apps can be developed quickly
  • existing native plugins can accomplish more complex tasks
  • a rapid development and testing workflow is possible through Node.js
  • user interface layouts for both platforms can be developed faster

Contra JavaScript frameworks

  • strong dependency from maintenance/support of frameworks
  • native UI responsiveness and performance is not possible with WebView approaches
  • advanced device feature programming requires native language knowledge
  • app performance and memory consumption can only be optimized slightly
  • new OS/SDK features can not be used immediately
  • possible dependency on community plugins/modules and their maintenance
  • performance leaks and UI glitches in WebView solutions

Conclusion

When looking at the existing JavaScript solutions for building native iOS and Android apps, it's a fact that they're powerful and can extremely reduce the amount of application development time. On the other side it's also clear that they come with drawbacks and limitations. It depends heavily on a project's requirements and of course on the developer skills and sensibilities.

App performance and UI responsiveness are the main aspects when it comes to the question of using a JavaScript solution or not (native apps with a single C# code base can be realized with Xamarin). It should be clear that WebView wrapper approaches will never reach native-quality UI performance. So developers should start with a proof of concept when choosing a HTML-based WebView solution: mastering dynamic data and optimizing form controls are non-trivial tasks.

Finally it has to be said that also JavaScript solutions can require a very deep knowledge of programming paradigms and advanced JavaScript syntax. Even if there are unified APIs and good documentation, it may take a significant amount of time to understand all concepts of a certain framework.