What UI framework to choose building Cordova mobile apps
Once you have made a decision to become a part of mobile realm and build a mobile app, you face the choice what type of app to go with. There are three options available as all mobile apps generally fall into native, hybrid and web applications or responsive websites.
Native apps are downloaded from application stores (such as Google Play or Apple’s App Store) and are built for smartphones and tablets. These are apps developed to be “native” to a specific platform and require additional knowledge from a developer (e.g. Swift/Objective-C for iOS or Java for Android). Going the native route allows you to use all smartphone functionality such as camera, microphone, location etc. and protect hardware resources. Responsive websites are in point of fact a website optimized to a smartphone. They allow the developer to write same code for several platforms therefore improving the time.
Hybrid possess cross platform capabilities: the app deploys to multiple platforms, can be run in the Webview and operates as native on all mobile OS. You can also install an app through an application store. Building a hybrid app is quicker and arguably cheaper than Native App.
In terms of information processing rate building a native app is on the winning side. When building a hybrid app you should take into account that custom plugins for Cordova don’t always keep pace with iOS or Android updates that is why plugins are sometimes unstable and poorly performing with OS. There are two approaches to building a hybrid app: WebView app (UIWebView, WKWebView or Crosswalk ) and Compiled hybrid app. Being hosted inside a native application a WebView app runs in an internal browser called WebView and is built with a combination of web technologies like HTML, CSS, and JavaScript. In a Compiled hybrid app the code is usually written in JavaScript or C# and compiled to a native for a required platform.
Our experience when building Welllp hybrid app on top of Apache Cordova showed that WebView app enables developers to leverage most of their existing web skills. Combined with jQuery Mobile Framework Cordova software allowed an app to be developed with JavaScript. It was a good solution because of multiple platforms support and prospect to use the app offline. Since the application is built with Javascript the data processing could have been slow and the performance a bit poor. That would happen if we had built our app with jQuery Mobile as is but we did an optimization and changed some modules to custom developed improving thereby efficiency.
Any development process starts with selecting the right framework. About 50% of all web sites are built using jQuery framework and a great number of developers are familiar with it very well. When building a Welllp app we originally took up this framework too.
jQuery mobile is CSS- and HTML friendly. The framework has a broad themes selection and you can roll your own as well. Changing the theme in most cases resulted in just modifying the CSS file. User interface elements are responsive and jQuery mobile interacts with browser at device’s level, which allows quick customization for screen size on the go.
When a programmer writes HTML code, the code is analyzed and afterwards translated into an API called DOM. When a web page is loaded, the browser creates a Document Object Model (DOM) of the page. When it comes to speed and flexibility, jQuery is at the top when working with DOM API.
Originally we made all popups based on Popup Widget, but jQm tool set of options turned out to be insufficient to cover our needs and we went the different way by integrating a flexible jQuery plugin jBox. Besides jQuery Mobile doesn’t offer a proper support for swipe events so we had to find an alternative and decided upon TouchSwipe plugin. Since jQuery UI was originally not created for the mobile space, it runs fast on desktop browsers but is slow when viewing sites from a mobile device. One of jQm pros could be the fact the framework works well with Windows Phone OS and we are going to port our Welllp to Windows based phones and tablets. As things went forward with Welllp app we had to replace some UI components with custom ones because of slow performance of jQm.
Coming from JQuery world there revealed a number of other UI frameworks like Kendo UI, Onsen UI, Sencha Touch, ChocolateChip and Ionic. In this article we’ll cover the latter, the leader of last couple years development space. Ionic is built with AngularJS, a framework from Google. That means AngularJS provides the application structure and the developer needs it to get the most of Ionic. User interface is built on HTML and CSS. Ionic happens to be a young framework, meaning it was written from scratch taking into account previous mobile solutions together with current requirements and it is very adjustable and easily operated.
Ionic features a simple user interface in the context of style; its components don’t look like native, but produce high performance even with weak devices. The core of Ionic's CSS is built using Sass. This is another popular framework, which activates developing new components without affecting the code cleanliness, which is important for further support.
You can develop Ionic apps on any operating system you prefer, but when it comes time to build - if you want to build for iOS, you will need a Mac. The Ionic can boast a number of great resources tools that provide animated page pop-up windows, header bars, navigation bars, side views, slide boxes, tabs, popups etc. as well as the ability to generate all the splash screens and icons. Ionic View, another useful utensil, allows testing your application on a real device and sharing it with others. Responsiveness is at a very good level, a built application is able to react on user’s actions very quickly.
Although compared to jQuery Mobile DOM is rendered differently on different engines and the performance is increased when it removed and not just hidden when not in view. Ionic now supports the collection repeat directive which renders into the DOM only as many items as are currently visible.
One of the bright benefits of both frameworks for a developer is that he does not need to learn and use new technology. If he is already designing for the web then he definitely knows the building blocks of the web - HTML, CSS and JavaScript. And these are precisely the technologies that lie at the heart of development with both Ionic and jQuery Mobile. Developer’s time is today the most expensive resource. If you can reduce it, you had better use this opportunity. Both frameworks are also free and open source.
All in all picking the framework to go with mostly depends on the developer and his background knowledge. Those with jQuery ample experience will save time by opting for jQuery, the ones with more modern AngularJS insight should definitely build an Ionic mobile application correspondingly. Although you have to be aware of weaknesses as well as obvious benefits in favor of each of comparable frameworks. Ionic makes performance faster on mobiles when compared with jQuery implementation. But if you need support for Windows or FireFox OS phones, developers agree here that with Ionic it is on our roadmap for now.