HomeHow To

How to Choose an UI framework to Boost Your Mobile and Web Apps on Cordova

If you’ve ever needed to choose an UI framework for Cordova, here’s all you should know about the most popular ones.

Hybrid mobile development is confusing. Web apps and installable apps, platforms and UI frameworks all constantly get mixed up, which often leads to developers’ wrong decisions. Then, wrong decisions lead to frustration which causes groundless rumors that grow into stereotypes.

As the most popular hybrid development tool, Cordova has to bear with more stereotypes than any other platform. “Unacceptable performance” and “poor look” are common accusations that should be actually fired at miserable UI framework plus Cordova combinations.

A smart combo of an UI framework and a Cordova project can significantly increase an app’s chance of success. In order to make the right choice, one should know an ample of unbiased facts about how UI frameworks work. This article does all the hard work for you.

Photo Credit => ScienceSoft

jQuery Mobile

Created back in 2010, jQuery Mobile can be called a ‘legacy’ UI framework now. It’s free, has a huge online community and is easy to work with. As a rule, apps designed with jQuery Mobile look very similar to one another, and only extra CSS customization can give them a more individual look.

Just like the other 3 frameworks mentioned here, jQuery Mobile follows the Single Page Application principle meant to minimize page transition pauses. Still, its navigation is powered by AJAX, which makes data transfer rather heavy on the Document Object Model (DOM) and causes lags.

Used mostly in mobile web app development, jQuery is not recommended for mobile hybrid/native app design due to its issues with Model-View-Controller (MVC). Mobile projects on Cordova with jQuery UI is still feasible, but quality app development will require a lot of efforts. Now other frameworks can spare you these efforts.

Sencha Touch

Sencha Touch is the most expensive framework among all others, including those not listed here. Build around ExtJS, it also uses AJAX to manipulate DOM and isn’t any faster than jQuery in regards to performance.

Even though this framework offers the largest web UI kit (50 widgets) and supports SVG and vector formats, it’s not efficient enough to be used for apps that are rich in animation or graphics. Still, it allows to extend CSS with the SASS library and is able not only to diversify the design but also tailor an app’s looks to a particular device.

Its expensive license aside, Sencha Touch can cost inexperienced developers a lot of time to simply get the hang of it. Creating a decent mobile UI will require even more time and effort investments than jQuery Mobile.

Onsen UI

Another framework with a Japanese-flavored name is Onsen UI, released in 2013. Open-source and free, this framework is compatible with both web and hybrid mobile development.

Onsen UI is mainly powered by AngularJS, which supports a high-quality Model-View-Controller architecture and simplifies development. The framework’s latest versions support jQuery libraries too, making it easier for jQuery Mobile fans to shift to this framework.

What jQuery Mobile users will find familiar in Onsen is its simplistic interface, which can be customized with CSS and Topcoat. Onsen UI is faster than jQuery and Sencha in terms of page transition, though, since AngularJS effectively minimizes DOM manipulations with JSON. What’s more, Hammer.js helps to get rid of a 300ms delay (common for most of the hybrid apps) for good.

All in all, this tool is easily accessible, convenient to work with and has a great official documentation that helps newcomers to find their way around. Sadly, its community is smaller than that of jQuery Mobile, Sencha or Ionic, and Onsen UI Support is mainly found in Stack Overflow discussions.

Ionic

Even though it can’t be used for web apps and only targets hybrid and native mobile app design, Ionic has gained a great popularity since its release in 2013. Its open-source community is wide and has both an official forum and Stack Overflow discussion boards.

This framework is mostly known for letting developers easily override standard CSS and create trendy material UI without any design skills at all. Its transitions are, once again, swift and smooth thanks to JSON-powered navigation.

Compared to Ionic’s first release version, Ionic 2 uses TypeScript and AngularJS 2, which are only now being adopted by the community. The second release of the UI framework has already received positive reviews from developers and is appreciated for its combination of a great look and functionality.

Long story short

Cordova definitely has its specifics and is in no way perfect. Yet, when it comes to performance and usability, UI frameworks that are used on top of Cordova make up as much as 80% of an app’s success.

The knowledge of ‘legacy’ Sencha and jQuery Mobile is still relevant since apps created with these technologies have to be updated and maintained up to now. Without a doubt, ways to create a great app with both of these frameworks exist too, but AngularJS-powered tools like Onsen UI and Ionic allow to do it faster.


The Blog Post is Written By Anastasia Yaskevich.


Comments (2)

  • Thank you so much for reviewing Onsen UI!

    Just wanted to let you know that Onsen 2 (released in September 2016) no longer has the dependency to AngularJS. We changed it to be JavaScript-framework agnostic, meaning that developers can use a framework of their choice or no framework at all. We currently support Angular, React, Vue, and Meteor.

    We also have a community forum (yes still smaller than others, but active) and Gitter channel where lots of technical questions are answered!

    Thanks again!

    Reply
  • Nice information from you and i also love @Yuki comment and i have one more question is Cross Platforms App Development is good for my client because i think there is many limitation on Cross Platforms.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge