Ionic: An AngularJS based framework on the rise

Ionic is one of those frameworks that you hear about from time to time. It is barely a year old and falls in line with other web-based hybrid app frameworks like Sencha Touch and jQuery mobile. This means that it makes use of web technologies to support a variety of platforms with one code base. Write once, run anywhere? An old claim that can partially be achieved with Ionic and the underpinning Apache Cordova platform.

Web-Based Hybrid Apps

It is possible to develop apps in various ways. Going native and developing an app multiple times to achieve the best integration and potentially best user experience, is just one of a few options. Hybrid apps are on the rise and come in various flavours. The most common option is to base the app on web technologies and use the fact that most devices support web standards, i.e. HTML, CSS and JavaScript. The app even continues to be installable via app stores.

The previous image illustrates the high level architecture of Apache Cordova. Cordova is a platform for web-based hybrid apps. It does the heavy lifting of supporting and interacting with various device-specific APIs and combining the essence of all native APIs in one JavaScript API that is accessible by the hybrid app. Hybrid apps are running inside a WebView which is controlled by the Cordova framework. This is a complicated job considering the amount of platforms out in the wild.

On top of that Cordova has the concept of plugins which encapsulate the interaction with one (or sometimes many) native device APIs. Plugins for the retrieval of basic device information , local file access and access to the device’s geolocation are just some examples of the Cordova plugin ecosystem. Plugins always consist of two parts. The first is a JavaScript part that is running within the WebView which exposes a nice API to the hybrid app. The second part is platform specific and written in the platform’s native language, e.g. Java for Android and Objective-C for iOS. Native APIs are controlled by that second part. The following picture illustrates the high level plugin architecture.

Other hybrid app approaches exist. Google published an article just recently in which they explain their hybrid approach for Google Inbox, and Martin Fowler even dedicated a complete Infodeck to the various hybrid app approaches. In the end the selling point for hybrid approaches is often the same: Cost. For many organizations it is not economically feasible to develop the same app multiple times and to keep feature parity.

May I present: Ionic

Ionic is a relatively new project. The initial commit was done in August 2013 and since then a lot of things have happened. A startup named Drifty Co. is the main driver behind the framework and it has gained quite some traction in the AngularJS community. But why is that?

First of, Ionic is based on AngularJS. Ionic is basically one AngularJS module and a stylesheet that can be used to build native-resembling apps. It is therefore very easy to get started with Ionic, especially when one already knows AngularJS. Most Ionic components, where one component is a list, toggle or slide box, are just AngularJS directives. This often results in highly legible markup and a nice productivity. Consider the following listing which shows the definition of a list of items with pull to refresh and share buttons that reveal when swiping list items to the left!

1<ion-content>
2    <ion-refresher pulling-text="Pull to refresh..."
3                   on-refresh="refreshArticles()">
4    </ion-refresher>
5 
6    <ion-list>
7        <ion-item ng-repeat="article in articles">
8            {{article.title}}
9 
10            <ion-option-button ng-click="share(article)">
11                Share
12            </ion-option-button>
13        </ion-item>
14    </ion-list>
15</ion-content>

While the previous example is very nice, one thing makes Ionic especially interesting in my opinion: It doesn’t try to be nor do everything itself. App bundling? Use Cordova for it and make use of Cordova’s default directory structure. Structuring frontend code and enabling testability? Leave that to Angular and the huge community surrounding it. Executing build steps with maximum parallelism? Gulp can do this.

It is this attitude that enables a small and dedicated team to build a successful framework. They do not need to burden themselves with other problems. Building a mobile app framework is hard enough. This significantly reduces complexity in their product and allows for more open source contributions. Every AngularJS developer can read and debug the Ionic source code as it uses the same concepts and structures as their own application! This means that every AngularJS developer can trace bugs and can potentially become an Ionic framework contributor.

The Ionic framework, at its core, consist of four parts:

• A stylesheet that defines a mobile optimized base layout. This layout serves as the foundation for your app. It includes many best practices that you do not need to think about anymore. Slap your corporate identity on top of it and you will have a great start.
• The AngularJS module is nothing special when you are used to AnuglarJS. It defines the directives (think custom elements), navigation patterns and best practices so that you don’t need to think about it.
• Productivity is important to Drifty Co. They have a background in developer tooling and this shines through in their command line tool. The CLI gets you off the ground quickly and can act as a sort of proxy to the Cordova and Gulp CLI.
• The last component is a keyboard plugin. Though technically not required, the plugin provides more information about the current state of the app.

Is Ionic an option, now?

Ionic will certainly become a strong contender to other hybrid app frameworks, especially Sencha Touch. Ionic has a familiar programming model and benefits from AngularJS’ incredible growth and popularity. It still needs to be said that Ionic is very young and that it hasn’t been used for any enterprise-grade projects yet. This also means that there are no long term experience reports and thus verry little best practices.

If you decide to go with Ionic right now, then you should make sure that you have at least one person on the team that really groks AngularJS. This person needs to be comfortable dealing with directives and debugging framework code as unspecified behavior and bugs can still be found regularly. If this doesn’t match your current situation and you still want to use Ionic, then try to find less important projects. Everybody wants to know what is up for lunch, so how about an app for the canteen?

Conclusion

Write once, run anywhere. With Ionic, you can support Android 4+ and iOS 6+. This is certainly not anywhere, but covers the largest two mobile ecosystems. The Ionic framework manages to do only what it needs to do, while providing everything one may need and maintaining the possibility to fall back to plain AngularJS and Cordova.

Ionic is reaching its 1.0 release and the folks from Drifty are working hard on fixing the last bugs. The next beta version (at the time of writing beta-14) will also upgrade the AngularJS version from 1.2.X to 1.3.X which is great news. Nevertheless, Ionic will be too bleeding edge for most people. Make sure to evaluate Ionic and its alternatives thoroughly before settling for a framework.