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
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 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.
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.
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.
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.