Best JavaScript framework for mobile apps

Experiments

Experiments Environment

The ADE (Application Development Environment) describes the hardware/software and the computing resources required for developing, deploying, and testing the reference app.
The used hardware for the reference app development was a MacBookPro 9,2 (IntelCore i5, 2,5GHz, 8GB memory) running OS X 10.9.1 as a development platform. The JavaScript Console of Google Chrome was used to debug the apps. Ripple (a Google Chrome plug- in) was used as an emulator to emulate different devices before deploying the app to real devices. An Apache web server with Xampp was set up to test the apps locally. AptanaStudio 3 was used as an IDE. Besides the hardware and software, there are some online services required to be able to deploy the apps. An Apple development certificate was obtained to be able to deploy apps for iOS. A GitHub account was created for public software project hosting. A repository of GitHub was used to pull the app into another web service called PhoneGap Build. PhoneGap adds a cloud build service to the Apache Cordova project that allows building the app in the web without having to install local SDK’s such as Xcode (for iOS) or the Android SDK and make it a hybrid app (Harwani 2013, p. 77). Cordova is an open source community driven framework of code. PhoneGap is built on top of this framework.

Experiment Constraints

One of the aims of the experiments was to establish the difficulty of mastering the frameworks and the complexity of developing the reference app with them (if at all possible). All of the projects started with a ‘Hello world!’ application as a skeleton to build upon. The time it took to download and install the SDK, read instructions, check requirements, and set up a basic project was measured. The complexity of the development of the reference app is described and the progress of the reference app is shown graphically. According to the RAD method, time constraints were set on the experiments. A maximum of 20 hours was devoted to each framework. The code complexity is illustrated by code snippets (in the appendices). If, during the experiments, a certain framework turned out to be unsuitable for the development of the reference app, the experiment was aborted.

1. Dojo Mobile

The basic “Hello World!” app, FlickrView as Dojo calls it, was set up in minutes. Dojo uses a traditional script statement to include the basic Dojo codebase. A theme was dynamically loaded, depending on the OS, through another inclusion script (deviceTheme.js). The Dojo HTML tags are analyzed (by a “parser”) and defined by the CSS in the theme. Declarative markup provides a mobile look-and-feel. A loader plug-in, called domReady, is required to make sure that functions do not run before the DOM (Document Object Model) is ready (until all HTML is received). Dojo offers a Carousel widget with two optional sub classes for data store support (DataCarousel and StoreCarousel). It loads the content of the carrousel dynamically in an efficient way (only previous, next and current item at a time). Constructer parameters were used to implement the desired carrousel. The FixedSplitter was used to divide the screen in 2 vertical panes.

A new theme was derived from the custom theme, which is a generic grey theme that contains variables (e.g. @lightColor and @darkColor) that can easily be changed. The adjusted theme had to be compiled by a script for usage. A build profile was used to automatically detect dependencies in order to create optimized and minified files.

There were some difficulties in styling the carousel: a page indicator on top of the screen was difficult to customize, a poster image that covers the video on loading was not clickable, which makes is not work intuitively. The build tool for the creation of optimized builds was complex and poorly documented. The panels were not responsive (failed to adjust to screen sizes).

The Dojo Foundation developed Dojo Mobile as an “HTML5 mobile JavaScript framework that enables rapid development of mobile web applications with a native look and feel” in 2004 (2013 [online]).

Dojo Mobile is a very complete framework. Unlike jQuery Mobile, Dojo does not make use of community-driven plug-ins so as to prevent varying usage and distribution licenses.
When using the Dojo framework, it is still possible to develop the application in different ways (declaratively or programmatically). This freedom of choice can be attractive to developers.

Dojo mobile is a modular framework that supports AMD (Asynchronous Module Definition), which dynamically pulls in only the resources required (using Dojo.require). This keeps code modular and maintainable and improves speed performance.

Dojo’s website structure and documentation were unclear to me. For example, it was hard to find the proper “Getting started” guide and a PhoneGap interface guide. The overall design of the framework was not appealing to me. Because this framework was very time- consuming the reference app developed with Dojo lacks proper “make-up”.

2: Enyo

The getting started guide provides instruction on how to layout a proper file/folder structure for pre-deployment optimization and how plug-ins are being loaded into the package.js file. This package file lists the dependencies of the app.

The reference app project started with a bootplate template, which contains a complete starter package including most used libraries, the Enyo core, and a deployment script.

The carousel consists of enyo.Panels that uses enyo.CarouselArranger as its arrangerKind. The carousel dynamically loads instances of enyo.ImageView when requested, creating a gallery (carousel) of panels.

The deploy script /tools/deploy.sh generates a folder (called build) that contains two compressed JS (app.js and enyo.js) files and two CSS files (app.css and enyo.css). These files, combined with the assets and the index.html file, are the deployment files that can be pushed to PhoneGap build or hosted online as a web app.

Getting the carousel to work was very time consuming because of lacking good documentation. Although the images slide well, the video component did not work properly for example. This experiment failed for the most part.

The Enyo development team developed “a framework for building native-quality HTML5 apps that run everywhere”. It was initially developed by Palm in 2008 (Enyo 2014 [online]), which was later acquired by Hewlett Packard. It was originally based on the code that powered HP webOS 3.0 for the HP TouchPad device (StackOverflow 2014 [online]). In 2012 Enyo 2 was rewritten from the ground up.

Enyo is the only true cross-platform framework in this study. Not only does it support all major mobile platforms, but also PCs and TVs. Enyo uses JavaScript to construct its UI and provides a layer on top of it that makes it easier to express objects such as inheritance and encapsulation (Sutton 2013, p. 9). However, it is still difficult to use.

This framework was not suitable for the development of the reference app. There was not enough comprehensible documentation in relation to the code complexity. For this reason, this experiment resulted in an incomplete reference app.

3: Ionic-Framework

After the installation of Node.js for building command line utilities, and the Cordova/Ionic command line tools, a project template was fetched from the command line: $ ionic start myApp sidemenu. The result of this tutorial was a modern looking app that was built in minutes.

The starter project has a file structure that contains an index file, which loads Ionic, Angular, CSS, and a navigation system. The navigation system loads the content from external templates. The starter project also contains a list API out of the box.

A slide box API was used as a container for swiping between panels. The List View (ion-list) consists of a list class and an item class that can contain any HTML element. They have lots of options and events that can be easily configured.

To customize the design, Sass files were included into the project.

The build process is fairly straightforward. In the command line, ionic has to be told which platforms it should enable: $ ionic platform ios (or Android). It is important that Xcode (the iOS SDK) is installed correctly (that was not the case in my situation). A few files must be removed from the project (index.html, the app folder, and app.css) after the build. Finally some configuration changes had to be made in the confix.xml.

Max Lynch, Adam Bradley, and Ben J. Sperry from Drifty developed the Ionic “front-end framework for developing hybrid mobile apps with HTML5” in 2013 (Lynch, Bradley 2013 [online]).
It is actually a framework built on top of AngularJS (a popular open- source framework maintained by Google). Ionic plans to support more framework back-ends in the future, but the UI components will remain the same. Although community support is not mature, the activity on StackOverflow was increasing during this study. Because it is in beta version, PhoneGap/Cordova plug-ins and Windows Phone support are not released yet, but that is just a matter of time, according to Ionic employees. Ionic has a compelling look and feel. It is very easy to build the UI because of the custom tag attributes that are very well documented. This framework was found suitable for developing the reference app.

4: Jo

Jo needs an index file that includes the Jo library, a theme, and an application file (hello.js). The supplied code for the index file refers to the Jo library that did not exist in the download (core/_jo.js did not work either). A previous stable version 0.4.1 (uploaded 3 years ago) did work however.

Packaging was easy: running the command $ ./build within the app folder minified the package.

This experiment was broken off due to lacking documentation and support.

Dave Balmer, Jr. developed Jo as a lightweight JavaScript framework for HTML5 apps in 2010 (Balmer 2013 [online]). It has one of the smallest footprints of all the frameworks tested and has a simple data layer. Although the last version (0.5) was released late 2013, this framework currently does not get a lot of attention. There is no user community to seek help from and no books about Jo have been published. This framework was found unsuitable for developing the reference app.

5: JQT

The “Hello World!” app does not have any functionality. It loads the themes and includes the Zepto library. JQT provides the developer with a choice between the jQuery library and the Zepto library. Zepto is recommended though because of its smaller footprint.

Div id elements represent different pages. So a reference to another page is actually a reference to an id within the same document. Only the first div or the one that is marked as “Current” is visible as a panel. The rest is hidden until they are ‘called’.

There is no carousel component available in JQT so that functionality has to be created in JS. With some help of other users on Stack Overflow, a carousel script was developed (which does not hold up when scaled). Making a list is fairly easy in JQT.

A theme was copied in the theme folder, overriding some of the colour variables. The new theme had to be compiled using Compass.

Interesting to mention is that the JQT web app opens in full screen without a visual browser environment. So is looks native.

David Kaneda developed JQT, formally known as JQTouch, as “a Zepto/jQuery plug-in for mobile web development” (Kaneda 2013 [online]) in 2010. Jonathan Stark currently maintains the framework. JQT allows developers to choose between the Zepto library and jQuery although it recommends Zepto because of the smaller footprint. It has a catalogue of CSS3 animations that can be applied by setting a class on a link, which runs very smooth. The CSS is easy to customize using Sass and Compass. It tries to emulate the iOS platforms as much as possible. Some of the animations do not work on Android and tablets, so it has its focus on the iPhone. JQT is easy to use and to setup. It provides a fairly good UX. Documentation is incomplete, but it is easy to get help from the user community. This framework was found not suitable for the development of the reference app, due to limited device support and performance.

The jQuery team developed JQuery Mobile as a touch-optimized web framework in 2009 (The jQuery Foundation 2014 [online]).

According to the StackOverflow and GitHub activity and the amount of published books on jQuery Mobile, it is the most commonly used framework.
It encourages a unique UI style for each app and facilitates this ability by offering a tool (ThemeRoller) to easily customize the look and feel of an app. The large amount of available code examples and third party plug-ins provided by the user community, as well as the ease of use of this framework make it very suitable for the development of the reference app.

6: jQuery Mobile

In the “Hello World!” index file, a viewport tag is placed in the <head> section that sets the screen width to the device width. A theme is linked and two libraries are being loaded. The page is defined by data- role=”page”, which contains a header, a content block, and a footer. In the content block a listview was created with a client side data-filter, a slider, and a button.

jQuery does not have a built-in carousel function. A third-party plug-in called OWL-carousel was used, which is a touch enabled and responsive carousel that was easy to configure and install.

The appearance of widgets was easy changed by adding an attribute like data-theme=”a” (from a to e). A complete new theme could easily be developed using the ThemeRoller website. Once done, the new theme can be downloaded and linked in your index page (very easy).

The jQuery Mobile custom builder was used to generate a compressed JS file that only contains used components. This process was a bit time-consuming because every used component had to be identified.

The jQuery team developed JQuery Mobile as a touch-optimized web framework in 2009 (The jQuery Foundation 2014 [online]).

According to the StackOverflow and GitHub activity and the amount of published books on jQuery Mobile, it is the most commonly used framework.
It encourages a unique UI style for each app and facilitates this ability by offering a tool (ThemeRoller) to easily customize the look and feel of an app. The large amount of available code examples and third party plug-ins provided by the user community, as well as the ease of use of this framework make it very suitable for the development of the reference app.

7: Sencha Touch

The “Hello World!” app was generated from the command line: $ sencha -sdk /path/to/touch generate app MyApp.

The carousel component contains multiple full screen swipeable pages. The orientation can be either horizontally or vertically. They were relatively easy to configure and can contain all kinds of content. In this app, the carousel exists of a Vbox (a vertical box with a flex configuration) that contains an image, background image and a video component with several controls. Indicator dots automatically show the available screens to swipe through.

Sencha Touch interacts very well with PhoneGap. Building the app was done in 2 simple commands within the app folder: $ sencha phonegap init and $ sencha app build –run nativecom.sencha.test. The generated files were placed in a repository and fetched to PhoneGap Build.

The app was not full screen in IOS7 although full screen was set to “true”. It turns out that Sencha Touch did not support the new iOS full screen views yet. A few lines of code in the app.js file (Russell 2013 [online]) and a new startup image with the iPhone5 (640×1136) resolution solved this issue.

Although Sencha Touch is considered to be a complex framework, the documentation is complete and thorough. Every time difficulties arose, documentation or tutorials guided me in the right direction.

Sencha Inc developed Sencha Touch as a “high-performance HTML5 mobile application framework” (Sencha Inc. 2014 [online]) in 2010.

It is a widely used framework with the best documentation of all of the frameworks tested. It focuses on hybrid app development; therefore, it has little browser support and offers 3 different ways to wrap up your apps. The UI can only be developed in JS, which makes it more difficult to learn than for example jQuery Mobile, but the results are very good on all devices. Sencha also provides a commercial tool, called Sencha Architect, which allows building apps visually. Sencha Touch is the only framework in this study that has a different licensing approach. It has either a commercial license option or an open source GNU GPL license option. This is something to look in to, when developing a commercial app. It was not an issue for the development of the reference app.

8: The-M-Project

The getting started manual was not up to date. They recently switched to a new building tool called “yo m” which is based on grunt (the previous builder was called espresso). This had to be installed first: sudo npm install -g grunt-cli
There were some errors during Grunt installation that took a lot of time. The following command created a MVC structured boilerplate project: yo m.

I run immediately into problems and I did not find good documentation that could help me any further.

M-Way Solutions developed The-M-Project as a native-looking framework based on Backbone.js in 2011 (M-Way Solutions GmbH 2013).

It was time-consuming to install the framework because of many dependencies and the outdated “Getting started” guide (they recently switched to another system for their build, optimize, package and deploy tools). Although their website and their specifications looked promising, I think, at this moment, this framework is not mature enough to be utilized for projects like the development of the reference app. For example, the amount of code generated for the index file was tremendous. Maybe Backbone users have a flying start but I found it an unworkable framework.

Framework Conclusions

Although each criterion can be examined on its own, a more general comprehensive conclusion about each framework is formulated above. AExtra weight will be attributed to the following categories: supported platforms, development time, performance, time and effort to learn, and accessible device APIs, because they are considered to be more important according to the Research2Guidance survey (2013, p. 55). The binary data of supported platforms and accessible device APIs are both part of the functionality characteristics of the FURPS+ model. Therefore, this section will be weighted double. P (performance) of the FURPS+ will also be weighted double. The development time and effort to learn a framework are strongly related to the criteria that were covered in the supportability section. This section will also be weighted double.

Since the reliability characteristics can be interpreted in several ways (continuity and stability of the framework or stability of the app) and the experiment is done only once, with limited functionalities, there is no weight assigned to this section. The most remarkable findings concerning reliability are documented in the findings.

MIT, BSD, Apache, and academic free licensing grant similar rights, are very flexible, and are compatible with almost every free form of open source licensing (Laurent 2004 p. 14). Apps developed under the GPL (General Public License) have to be made available, under the same license, to the developer community (Laurent 2004 p. 82). All licences are weighted equally in this study, except for the GPL license (Sencha Touch only). GPL might not be suitable for every project.

The platform support will be expressed in total market share 45 percentages based on IDCs research (2014 [online]).
The framework footprint described in the physical constraints section is interesting, but is less important because of the increasing download speed of 4G available to the mobile user (Rogerson 2014 [online]). Although app size can relate to performance speed, it is the perception of responsiveness that counts and this is already weighed in the performance section. SDK size is not a limiting factor for users. Therefore, the physical constraints are not valued.

So what is the best javascript framework for mobile apps? Final Conclusions

To compare the 8 different open-source JavaScript UI frameworks I used the FURPS+ model (RQ-4). The FURPS+ categories were rated on a scale of 1 to 10 (10 indicates best). Rating was based on the findings of the experiments, where reference apps were developed following the RAD method (RQ-7), secondary research, and app evaluation. Extra weight has been assigned to categories that are considered most important by app developers. The 8 frameworks were selected from a large list of available frameworks (Appendix A) by using inclusion and exclusion criteria in order to form a homogeneous collection of frameworks (RQ-2). The included frameworks were: Dojo Mobile, Enyo, Ionic-Framework, Jo, jQT, jQuery Mobile, Sencha Touch, and The-M-Project (RQ-3).

Keep in mind that this study focuses not only on the requirements of the reference app, but also on which framework features are considered most important by developers. Although the ratings of the FURPS+ elements and the suitability requirements of the reference app have a large overlap, they are two distinct entities. Since the requirements of the reference app and the framework features most valued by developers are almost identical (except for the hardware support, which the reference app only required for touch/swipe support), the resulted ratings of these two entities are next to equal.

As described above, the reference app I was aiming for should be of a high performance and working on at least iOS and Android. It should include a carousel containing swipeable panels displaying an image and audio/video in a vertical box setting, an alphabetically ordered (JSON data) list with a master/detail structure, an info screen, and a welcome screen.

The most suitable framework for the development of the reference app, as well as the best framework according to the FURPS+ model, turned out to be Sencha Touch (RQ-1). Although Sencha Touch is not one of the easiest frameworks to come to grips with, it generates high-performance apps, has excellent documentation and has a large community support. It is worth the effort.

Second best is jQuery Mobile, both in fulfilling the requirements of the reference app as according to the FURPS+ model. The essential difference between Sencha Touch and jQuery Mobile is that jQuery uses tag attributes (HTML/CSS) for the creation of the UI, whereas Sencha Touch uses solely JavaScript for its UI. A practical advantage of jQuery is that there are numerous third-party plug-ins available for the framework, which can speed up development time (RQ-5).

The third most suitable framework for the development of the reference app is Ionic-framework. According to the FURPS+ model this framework came in fourth (and behind Dojo Mobile). However, I found this framework easier to use and better looking by default compared to Dojo Mobile. Since it is a newcomer, I have high expectations of this framework for the future.