Thursday, April 12, 2012

Mobile JavaScript frameworks, Evaluation and Comparison (Part 1)!

Developing mobile HTML5 apps from scratch that behave like native mobile apps, is very hard if not impossible. Therefore, HTML5 developers (who do not want to go for Native UI)  usually have two choices:

  1. Keep the identity of their HTML5 apps and create nice looking UIs that do not look like Native,
  2. Try to simulate the Native behavior using lots of CSS and JavaScript hacking.
Luckily, there are some frameworks out there to help in this matter. On the other hand, selecting a framework that suits you is a bit tricky and there is no standard or common way of comparing the JavaScript  frameworks available for mobile phones.

Therefore, we plan to evaluate the frameworks that we find and create a detailed comparison table. But first of all we need a selection criteria and a scoring system. Here is our take on the factors that should be used in the comparison. If you think there is something missing please post a comment with your suggestion. The scoring system will evolve as we progress and I will post the modifications as we go on.

In addition, we are going to use three platforms for our tests, Apple iOS, Android and Microsoft Windows Phone, because we believe these three platforms will dominate the app market in the near future.

Native Experience 

In order to define a score for Native Experience in JavaScript Frameworks, One must first define Native experience. Here is my definition:
"An app that looks and feels Native if it provides the same transitions, styles, and widgets as the one available on the Native platform it is running on, provides Native experience"
 Based upon that definition we propose using the following scores for this part:

  • 5 (Completely Native) : The UI looks and feels exactly the same as Native UI.
  • 4 (Native Like): The UI provides a similar experience to Native UI but some elements are different.
  • 3 (Native Behavior): The UI behaves like Native UI, but the colors and styles of the widgets are different in a way that is easy to distinguish it from Native UI.
  • 2 (Touch Support): The UI has proper touch support and is easy to use with Phones and Tablets but is not similar to platform's Native UI.
  • 1 (Usable): The UI does not have very good touch support but is still usable through modern phones and tablets.
  • 0 (No Support): The UI does not work on a modern phone or tablet at all.
We will test this on multiple platforms and use the average as the final score for a specific framework. 


A performance scale is also tricky to define because the speed of the UI is a bit hard to measure. Since we want tom measure the way users would feel about the app, we will use subjective tests to score the frameworks. Anyway here is how what we will use:

  • 4 (Perfect): The UI is very smooth and does not have any lag or slowness in it.
  • 3 (Good): The UI is pretty smooth with some lag that is not noticeable and does not affect User's experience. 
  • 2 (Acceptable): The UI is a bit slow but still usable.
  • 1 (Slow): The UI is very slow and hard to use.
  • 0 (Broken): The UI does not work.

Cross Platform Capabilities

It is very important for a JavaScript framework to be able to run smoothly on multiple platforms if it is called cross platform. Of course you always have to do some minor tweaks to make your app look the best on all target platforms but the amount of change should be minimum.  Here is the score scale for this factor:
  • 5 (Perfect): The same code(more or less) works without any problem on all platforms.
  • 4 (Good): The same code works on all platforms with minor problems.
  • 3 (Partial): The same code works on two platforms but partially on another one. 
  • 2 (2 platform): The code works only on two platforms.
  • 1 (partially 2 platform): The code work fine on one platform and partially on the second one but does not work on third platform.
  • 0 (Single platform): The code works well only on one platform.


Joe Lennon in his post "Compare JavaScript Frameworks", has provided out some useful criterion for selecting JavaScript Frameworks.  Although for desktop browsers I think he has a point and we will use similar criterion for the features. The framework with the most features available will get a perfect score of five and the next best framework will get a four and so on. 

Code Efficiency and Ease of Use

Another important factor for me personally is that how easy is the framework to use. How much of my old no framework code is reusable within the framework, and how much code is needed to create a simple app. In addition, size of the framework, interdependencies and the amount extra files required to work with the framework is very important. The framework that requires has the least amount of total size(code plus size plus extra files) will get a perfect score of five and the next frame work will get the next best score (four) and so on.


Licensing is also very important for me as a developer, and here is how I will rate the licenses:

  • 5: Open source and free to use
  • 4:  Open source with GPL or similar licenses
  • 3: Commercial but with a free open source version
  • 2: Commercial license but free to use
  • 1: Commercial License
  • 0: Not available to individual developers

Other Factors to Consider

There are other factors in selecting a framework. These are more about user preference and we do not plan to include them in the comparison table. 


Community is an important factor because it indicates how much the framework will be developed in the future and how much help you can get when using it.


If a framework is extensible the likelihood of you finding a library for what you want to do is much higher so that is an important factor to consider.

In a series of posts, I am going provide some feedback on different frameworks. In addition, as I am interested in performance, there will be posts only covering performance. All of the evaluations will be done using hybrid app models rather than online websites. So stay tuned for more information and the results.

No comments:

Post a Comment