Hybrid App UI Framework Comparison

Karthik

The days of just native app are about to be extinct in mere future. The trend is turning over other alternatives to build rapid and native like apps. This is where cross platform Apps come into picture. As the name suggest cross platform apps are the apps that you develop (code) once and will be able to build for multiple platforms.

Even though it sounds independent of native, we cannot rule-out the native completely as the app requires the same old native structure and support code so that the app can be built into native.

This is the reason why cross platform Apps is referred to as Hybrid Apps. A mixture of cross platform and native codes. Now the question is what if I dont know how to build the native code part for different platforms? Well fortunately there are frameworks that will build this native code for us and all we need to concentrate is on building webApp using HTML5,CSS3 and JavaScript.

To further ease our work while building webApp, there are Hybrid UI frameworks which provides lots of widgets so that we can concentrate working on functionality rather than custom creating the widgets (components).

There are lots of Hybrid UI framework available in the market right now. We compared what we found to be the better frameworks.

We started with many UI frameworks and ended up selecting four framework which we found to be better. However we did consider only two platforms for comparing iOS and android.

Initial sorting was done based on the native appeal provided by the framework. And selected the following four frameworks for further comparison Kendo UI, PhoneJS, Sencha Touch and Ionic framework.

Comparison levels:

  1. Ease to learn

     Among the four frameworks from a developer’s perspective who has a basic knowledge of html, javascript and css, KendoUI can be easily learnt as it uses HTML5 data attributes to allow markup based initialisation of widgets.

    For example to create a list view all you need to do is create html unordered list and inside <ul> tag add list-view as  data-role data attribute as <ul data-role=”listview”> this will render the list-view as if it is native list view.

    PhoneJS uses almost same approach as KendoUI i.e, it uses HTML5 data attributes to render a widget but the process is not as simple as Kendo. Developer need to know some basics of knockout JS and  learn the view-modal structure of PhoneJS. The amount of javascript required to write for a PhoneJs app is more than KendoUI.

    Ionic frameworks requires the developer to have some basic knowledge of angular JS as majority of the code will be based on Angular JS.

    Sencha Touch  requires the developer to know Ext.JS. The app on Sencha Touch is completely developed using Ext.JS i.e only javascript.

  2. License

    Kendo UI is a product from Telerik. Kendo UI is available for 30-days free trial . The product costs $199/developer per year and a renewal cost of $99/developer per year.

    PhoneJS is a product from DevExpress . Its free to download and use for non commercial use. If using for commercial purpose then a 12 month subscription for a single developer will cost $199/developer and post 12 months 40% of initial pricing for next year.

    Ionic framework is a open source product.

    Sencha Touch is a product from Sencha. Sencha touch licence is free and is open source.

  3. Performance

    Performance in iOS is almost same for all the framework. So the performance result is based on android platform. Basically we used infinite list view to check the performance, checking for the lag in the rendering of the list items and the smoothness of the scroll.

    Performance wise Sencha came out to be best in both the platforms.

    Ionic is still under development but is very promising. Every new release brings with it improved performance.

  4. Feature completeness (Components availability)

    Sencha provides majority of the components and widgets. Kendo UI and PhoneJS comes next in line.

    iOS7 has a transparent statusbar so that the app view is pulled up to the top edge. Because of this half of the navbar is overlapped by the status bar. Screenshots below shows this

    To overcome this we have to customize the navbar. However Ionic handles this by itself.

    Ionic though has less widgets but the features which are available are up-to date with the current UI design. For instance ionic provides frosted glass effect which surfaced in iOS7.

kendoUisenchaphoneJsionic
Kendo UISencha TouchPhoneJSIonic Screenshot
  1. Ease to customise

    KendoUI was easy to customise compared to other framework.

    Ionic uses SASS. once we know Sass then ionic feels easy to customize.

    And Sencha being the one in the other extreme end.

  2. Platform support

    KendoUI, PhoneJS and Sencha supports android 2.3+ and iOS 6+.

    Ionic provides support for iOS 6+, and Android 4+ (with some support for 2.3).

Screenshots iOS

Kendo UISencha TouchPhoneJSIonic
Kendo-PullS-iOS-PullP-iOS-PullI-iOS-Pull
Kendo-ReleaseS-iOS-ReleaseP-iOS-ReleaseI-iOS-Release
Kendo-RefreshS-iOS-RefreshP-iOS-RefreshI-iOS-Refresh
Kendo-SectionHeaderS-iOS-SectionHeaderP-iOS-SectionheaderI-iOS-SectionHeader
Kendo-SearchS-iOS-SearchP-iOS-SearchI-iOS-Search
Kendo-ButtonsS-iOS-ButtonP-iOS-ButtonI-iOS-Button
Kendo-CheckboxS-iOS-CheckboxP-iOS-CheckboxI-iOS-Checkbox
Kendo-RadioS-iOS-RadioP-iOS-RadioI-iOS-Radio
Kendo-editTextS-iOS-EditP-iOS-EditI-iOS-Edit

Screenshots Android

Kendo UISencha TouchPhoneJSIonic
K-Android-Pull
S-Android-PullP-Android-PullI-Android-Pull
K-Android-ReleaseS-Android-ReleaseP-Android-ReleaseI-Android-Release
K-Android-RefreshS-Android-RefreshP-Android-RefreshI-Android-Refresh
K-Android-SectionHeaderS-Android-SectionHeadersP-Android-SectionHeaderI-Android-Sectionheader
K-Android-SearchS-Android-SearchP-Android-SearchI-Android-Search
K-Android-ButtonS-Android-ButtonP-Android-ButtonI-Android-Button
K-Android-CheckboxS-Android-CheckBoxP-Android-CheckboxI-Android-Checkbox
K-Android-RadioS-Android-RadioP-Android-RadioI-Android-Radio
K-Android-EditS-Android-EditP-Android-EditI-Android-Edit

You can find the source code in the following github links

Sencha Components Demo
Ionic Components Demo
KendoUI Components Demo
PhoneJs Components Demo

about the author

Karthik