There are many user interface frameworks available to help one build hybrid mobile applications. They offer a set of mobile-optimized HTML, CSS, and JavaScript components, as well as gestures and tools for building highly interactive applications. As I previously discussed differences between AngularJS and jQuery and when each of them excels, I must say that when it comes to development of hybrid application, seamless user experience with fluid transitions and short response times is crucial. And as we discussed in the article, single-page applications are better when we need to deliver smooth interactions. Therefore, I believe AngularJS is much better choice than jQuery Mobile when it comes to mobile development and I discuss only UI frameworks that are built on top of AngularJS. For this reason, frameworks such as jQuery Mobile, Sencha Touch, or Kendo UI are not covered in this article.
Ionic
Ionic is an HTML5 mobile application development framework that comes with very native-styled mobile UI elements. Although Ionic is a young framework with its first alpha being released in late November 2013, its becoming a very popular framework with a fast-growing community of developers. [46]
Ionic’s goal is to close the gap between what native SDK on iOS or Android provides and is not available on the web. It offers a set of beautifully designed UI elements, layouts, and animations that make the development of hybrid applications easy and fast. Besides this, Ionic is built on top of AngularJS, which allows for minimal DOM manipulations and hardware accelerated transitions, making Ionic applications fast. Ionic comes with Sass and Apache Cordova under the hood, allowing for easy UI customizations and integration with device native services. [47]
Figure 1: Ionic’s goal is to deliver the missing web SDK (ref: 48)
The whole motivation behind Ionic could be explained by one of the slides from Adam Bradley, co-creator of Ionic. Figure 1 displays the gap Ionic targets – the missing web SDK.
“Ionic not only comes with well documented markup and CSS, but also JavaScript design patterns to help one build some serious apps with similar concepts to iOS and Android. We wanted to let developers create the same kind of powerful UI interactions seen in native apps, like side menus and navigation controllers. We wanted to free hybrid apps from the URL bar and move towards more generic and powerful View Controller concepts.” [49]
Figure 2 shows multilayer architecture of Ionic applications.
Figure 2: Multilayer architecture of Ionic applications
Besides all the great built-in features such as pull-to-refresh or infinite scroll, Ionic also offers a very powerful CLI (command-line interface) that takes development to a whole new level. It allows one to create, test, and deploy application onto any platform. One can use features such as Ionic Lab that allows building and testing iOS and Android versions side-by-side, or LiveReload that instantly updates application every time changes in the source code are made, even if the application is running on a mobile device. This means one do not need to rebuild the application for a particular platform every time there are some changes in the source code. [50]
Ionic also comes with a great documentation and an open source icon library featuring over 440 icons. Besides this, the Ionic team have built the Ionic View application that allows one to distribute the application to testers and developers without having to go through app stores. They have also created Ionic Creator, an application that lets developers to build their applications with simple drag-and-drop components. And that is still not all, the team has recently released the Ionic Push service, which gives Ionic applications the ability to send native push notifications to devices on any platform. [50]
And there are still more features, such as Ionic Analytics which provides valuable insights into your application, Ionic Deploy that allows one to update and test applications on the fly, Ionic Playground that provides playground without the need to set up your development environment, or Ionic Market, an marketplace for addons, themes, and plugins.
As Adam Bradley announced at ng-conf 2015 [51], Ionic is planning to support the new version of AngularJS – AngularJS 2.0. With this in mind, and the fact that the company recently raised $2.6M [52], I believe that Ionic have a bright future in the mobile development world.
Famo.us
Famo.us takes a different approach as it completely rebuilds the browser rendering engine. As Hoc Phan wrote in Full-stack Mobile App With Ionic Framework [9]: “…instead of coding typical html/css, you have to create surface (or div) and modifier (or class) in Javascript objects. The reason behind this approach is because the DOM management in the browser is very clunky in terms of event inheritance. This causes a lot of redundancy in event processing, which results in lagging UI, especially where there is a long list of rendered objects.”
Famo.us is considered to be difficult to learn but excellent when it comes to performance. It uses a completely different approach to mobile development as the UI is completely written in JavaScript. Famo.us includes an open source 3D layout engine fully integrated with a 3D physics animation engine, allowing smooth complex UIs and 3D games to be built. Famo.us is one of the youngest frameworks, thus it lacks a bigger community, detailed documentation, and real examples and show cases. But it is definitely a promising project that is growing quickly and in a good direction. [53, 54]
Onsen UI
Onsen UI is an Ionic competitor that is built on top of AngularJS. Like Ionic, it also provides a set of UI elements that allows one to focus on the business logic of the application instead of inventing the wheel oneself. However, there are some small differences when compared with Ionic. First, Onsen UI uses a responsive layout, allowing for classic web development. Ionic, on the other hand, is not intended to be used for classic web development. Second, Ionic is a much more serious framework as it comes with powerful CLI and other useful tools that make development and deployment very smooth and fast. Third, Onsen UI has a much smaller community. [54, 55]
Conclusion
I briefly described three popular UI hybrid frameworks. I have to say that Ionic framework offers the most to developers and at the time of writing this article, it’s definitely the best framework when it comes to development of hybrid mobile applications. I value its powerful CLI and the use of Sass as a CSS preprocessor, Apache Cordova as a WebView framework, and the LiveReload feature that allows for rapid development.
Bibliography
[9] H. Phan. Full-stack Mobile App With Ionic Framework. Hoc Phan, 2014.
[46] G. Grisogono. 5 Best Mobile Web App Frameworks: Ionic (AngularJS). 2014. URL: http://moduscreate.com/5-best-mobile-web-app-frameworks-ionicangulalrjs/ (visited on 03/30/2015).
[47] All About Ionic. URL: http://ionicframework.com/docs/guide/preface.html (visited on 03/30/2015).
[48] A. Bradley. Ionic + AngularJS: Superpowers for Mobile App Development. 2015. URL: http://adamdbradley.github.io/ionic-present/ (visited on 03/30/2015).
[49] A. Bradley. Where does the Ionic Framework fit in? 2013. URL: http://blog.ionic.io/where-does-the-ionic-framework-fit-in/ (visited on 03/30/2015).
[50] Ionic: Advanced HTML5 Hybrid Mobile App Framework. URL: http://ionicframework.com/ (visited on 03/30/2015).
[51] A. Bradley. Ionic and Angular Superpowers for Mobile App Development – Adam Bradley. 2015. URL: https://www.youtube.com/watch?v=wvr11fvCeu4 (visited on 03/30/2015).
[52] S. Perez. Drifty Grabs $2.6 Million To Turn Web Developers Into Mobile App Makers. 2015. URL: http://techcrunch.com/2015/03/30/drifty-grabs-2-6-million-to-turn-web-developers-into-mobile-app-makers/ (visited on 03/30/2015).
[53] famo.us. URL: http://famo.us/ (visited on 03/30/2015).
[54] T. Gleichger. Hybrid UI framework shootout: Ionic vs. Famo.us vs. F7 vs. OnsenUI. URL: https://www.airpair.com/ionic-framework/posts/hybrid-appsionic-famous-f7-onsen (visited on 03/30/2015).
[55] Onsen UI – A Custom Elements-Based HTML5 UI Framework. URL: http://onsen.io/ (visited on 03/30/2015).