Hello Ionic(2)!

In a previous post we gave already a high-level overview about the continuum of mobile development. This time we will have a deeper look at Ionic 2:

Ionic2 is a framework to build performant and beautiful mobile apps using HTML, JavaScript and CSS. It is built on top of the known hybrid mobile framework Cordova overseen by the Apache Software Foundation. Simply said, Ionic is the Twitter Bootstrap of mobile. It focusses on user interaction and design and therefore provides platform agnostic components like tab bars, navigation controllers, datepicker and many more. These components look different on each platform, automatically adjusting themselves to the native look and feel while obeying the user interface guidelines, e.g. see the following example of Ionics conference demo app.

Every component comes with nice design defaults out-of-the-box, but can be customized easily. It must be said that none of these components are native. They just look similar and mimic some native behavior, but are built completely with web technologies. Additionally, Ionic comes bundled with an opinionated list of cordova plugins called Ionic Native, supporting 3D Touch, Camera, Storage, Bluetooth and other native features. The supported platforms are currently iOS, Android, Windows and some browsers (leveraging Progressive Web Apps). At the time being, Ionic is tailored to be used with Angular2, but the Ionic team explicitly states that they plan to be framework agnostic in the future. Furthermore, development can be done using plain JavaScript or using TypeScript (preferred).

The framework is open source and released under a permissive MIT license. Further, the Ionic team offers a whole platform built on top of the framework that provides easy user authentication, push notifications, packaging and deployment of apps, e.g. real-time app updates. Additionally, they offer a lot tools to create, preview and distribute your apps in a way that allows easy collaboration between peers, e.g. business, designer and developer. The platform is a topic on its own and would go far beyond the scope of this blog post.

Ionic from a Business Perspective

Ionic2 allows your business to very quickly publish cross-platform mobile apps with no or little overhead for platform specific adaptation. The mantra here is “write once, run everywhere”. That means you have to implement each feature only once and it will work on every platform. The following screenshot shows a single list view implementation on every supported platform:

A huge advantage is that you only have to use one technology stack (HTML, JavaScript and CSS) and therefore, may leverage existing skills within your development team. In addition, developers don’t have to acquire deep knowledge of every platform and can thereby focus on implementing features rather than dealing with platform specifics. Besides the mobile platforms you can also deploy a Progressive Web App easily that will boost your mobile website.

We often heard people arguing that the interface paradigms are too different between these platforms and hence the user experience will be unsatisfying. Maybe that’s sometimes right, but often it is not. Compare the previous screenshot for each platform for example: You will notice that the tab bar is positioned differently. That conforms exactly to the different interface guidelines, where Windows likes to position the tab bar at the top while Android and iOS position it at the bottom. Ionic does a great job and adjusts the position according to the platform specific guidelines. This is just one simple example you don’t have to worry about. Furthermore, Ionic comes with very decent platform-tailored design defaults and if you don’t have any design skill within your team this is also very beneficial. These simple adjustments and designs are often sufficient, especially for data centric apps with a lot of lists and detail views. In other cases a more native UI might provide a better user experience as the controls and animations feel more snappy. But at the same time a native app might deliver an even worse user experience, if you don’t have a ux designer available or don’t have the time to address each platform conscientiously. In case you still want some nativeness in your app, there are fortunately technologies like Microsoft ACE and alike that allow you to integrate native components into your hybrid app.

Another complaint we often hear about hybrid apps is performance. It is true that hybrid apps are far below the performance of native apps. But really, how often do you need this superior performance? Yes, in the past this was a serious issue of hybrid apps, but nowadays the devices got a lot faster and will even more in the future. Again, it depends on the kind of app you are developing, e.g. for many data centric apps hybrid performance will be just fine, like a new application or a CRM app. On the other hand, if you need concurrency, high computing power or extraordinary graphics have a look at native development, for example programming games or augmented reality apps. As always, it’s not black and white, thus you have to make your decision very carefully.

In the end you have to match your app’s requirements, the existing skills within your development team and the time/money you want to spend.

Ionic from a Technical Perspective

From a technical point of view Ionic is a layer on top of Cordova providing decent UI components. If you are interested in how Ionic/Cordova can be categorized in the mobile development landscape, have a look at our previous blog post.

Cordova itself can be independently used to develop hybrid mobile apps and offers a rich plugin system. In case you want to learn more about how Cordova itself works, please consult their great documentation. In short: Cordova provides a native app shell for your application that can be installed on the targeted platform, e.g. on iOS. Inside this shell your application will be run inside a WebView that can communicate with the underlying device via a so-called bridge. This bridge does the heavy lifting between your app and the platform. The API provided by the bridge can be extended using plugins, e.g. camera and storage access. Furthermore, you are be able to hook into the bridge and connect your hybrid code (JavaScript) with native code (Objective-C, Swift, Java). See the Platforms Guide for more details. Alternatively, you can use Microsoft ACE which provides similar functionality and flexibility.

What does development with Ionic look like? Ionic provides you with a very handy command line interface. It provides a lot of useful functionality like setting up the project structure, launching the local development server or emulating your app on a device/emulator. The CLI provides many more features, especially for connecting your project with their optional platform service called Ionic cloud. The Ionic team made two fundamental decisions when designing the framework: First, they chose to use Angular2 as its underlying JavaScript framework, but they plan to become framework agnostic in the future. Second, they prefer TypeScript as programming language, but also allow to use plain JavaScript. Besides that, you will be using plain HTML with heavy use of Custom Elements describing Ionic components. Lastly, styling can be done with simple CSS or more preferable with SASS. Ionic provides some default stylings, but give you the full flexibility to adjust it to your needs - they call it theming. What does this mean for the development workflow? You can use all your well known development tools. You can use your editor of choice, you can use your browser of choice and all other tools you like to use, like a debugger. Only in case you want to run your application on a real device or inside an emulator, then Ionic/Cordova will take over.

The main advantage is that you will have only a single codebase for all platforms. For an average app there won’t be any if-else statements doing custom stuff for each platform. Ionic does a great Job abstracting it away using their components. A component consists of some HTML with custom tags, a bit of JavaScript and some styling. See the screenshot below, where a nice menu bar is build using exactly the same code for all platforms.

This screenshot was taken within the browser using the Ionic LabView, which shows all platforms at once. Having everything running in the browser makes it very easy to deploy the app as a Progressive Web App - documentation will hopefully be improved after the final release of Ionic2. In order to integrate deeply with the underlying platform, Ionic ships with a curated list of wrappers around native features using cordova plugins, e.g. Bluetooth, GeoLocation, Contacts, Maps and many more. Other cordova plugins can be included easily, but may vary in quality.

It’s not always as easy as it sounds right now. There are often times, when you have to do some fiddling to get everything working. On the one hand, that might be due to the beta version of Ionic2. On the other hand, behind the scenes Ionic2 has to do a lot of complex tasks and integrates multiple technologies, like NPM, Node.js, Gulp, Webpack, TypeScript, SASS, Cordova, Xcode, iOS, Android and many more. But we believe that it is a good tradeoff compared to developing an app for each platform separately.

Summary

Altogether Ionic2 might be a really good solution when it comes to mobile app development depending on your requirements and resources. Particularly for data centric apps with primarily list and details views, Ionic is an awesome fit. Another case is if you just want to get out a prototype very quickly in order to experiment if your idea might be worth following up on. There are also some alternatives to Ionic like Onsen UI or Kendo UI.We hope you enjoyed this post and found some answers. We plan to give you some insights into ReactNative or NativeScript in future posts - so stay tuned.