Ionic. A hybrid mobile app framework.

With the introduction of the HTC Dream in 2008 as the first android-based smartphone, mobile app developers were confronted with a tough choice. iOS or Android. Today there is even more variety in platform specific development platforms. From iOS and the different Google dev kits to Windows Phone Tools and everything in between. This fragmentation puts both business and developers in a difficult spot.

It’s not surprising that a whole other category is gaining more support every day. Hybrid mobile apps. Compared to native apps which are built using a platform specific SDK, hybrid apps are developed using the Holy Trinity of web standards: HTML, CSS and JavaScript. These client webapps can be opened in every native browser component. And as they are packaged by the hybrid app frameworks as actual native apps, they are given access to device APIs, such as file storage, camera, geolocation, etc.

When choosing between SDKs, pick web

I’m writing this post as a member of this latest category of "device-end" developers. Passionate about the web and taking that experience to mobile.

For years hybrid app frameworks have gotten a lot of attention and community support. Just as with the vast selection of web frameworks it’s quite easy for developers to get lost. This Wikipedia page attempts to give an overview for the most popular frameworks and their key differentiators. Apache Cordova, arguably the most popular framework today, provides the best support for devices and their native features. Its plug-ins provide a JavaScript interface that allows you to call natively written libraries from within the web application.

Those who take the plunge and build their first mobile app in Cordova will quickly have the following realization: you won’t get there with just a responsive mobile first design. The peculiarities of each platform, the different implementation of web components and the complexity of touch interaction can and will provide you with a sometimes hellish experience. In most cases you’ll be looking for salvation in workarounds, hacks and more platform-specific band-aids.

Ionic is an open source framework on top of Apache Cordova with a mission to help developers get rid of these problems and provide them with a true platform-agnostic approach. To achieve this, it uses an AngularJS based JavaScript library, a SCSS stylesheet collection and a CLI for executing the full workflow to create, configure, build, run and deploy your mobile app.

Native. Just a front-end for the web?

When choosing a hybrid app strategy, experience with web development will give you a significant head-start. The project structure feels very familiar; you can use the same back-end API, and with Ionic's AngularJS foundation, you'll achieve the same front-end modular approach. For us, these were the deciding factors for choosing a web-based hybrid app:

• A successfully completed and well-received AngularJS project
• The overall company strategy to use web technologies in new and innovative services
• A good and successful cooperation with an external web designer (HTML and CSS)
• The availability of free open-source frameworks for a relatively small project scope

Going mobile, one major challenge was to enable offline use. There has been a lot of progress in standardizing offline storage of data in the browser. WebSQL and IndexedDB are at the basis of new browser storage options and frameworks like Lawnchair or PouchDB can help you with document storage on the client. The latter also supports syncing with an online CouchDB document repository.

A whole other challenge was the build automation process. To get an iterative test process up and running, you have to get the application packages available for the different target platforms – fast. We used TeamCity and its flexibility to build and package the source code both on Mac (required for building iOS packages) and Windows Server.

Although Ionic tries to facilitate and ease the transition from a web application to a (hybrid) mobile app, you’ll encounter some hurdles along the way. As web applications still struggle with browser compatibility, your mobile app might look and perform different between devices. Device and plug-in APIs, styling or performance issues might all contribute to the root cause. Testing on a variety of devices is key to find and resolve as many issues as early on as possible. The Ionic framework provides great tools to build and deploy the application to a connected device. Once deployed, you can enable LiveReload, and see your changes appear immediately on the device. You can also use Chrome or Safari developer tools to debug your scripts and styles. However, emulators are still painfully slow and assisting testers with dedicated build environments using multiple platforms is not an out-of-the-box feature.

The performance of client-side JavaScript has increased tremendously throughout these last years, and I’m looking forward to seeing how this evolves on mobile devices with recent and upcoming optimizations (full support for iOS 8’s WkWebView, unlocking latest chromium developments with Crosswalk). Hopefully we’ll see the performance gap between hybrid and native apps reduced even further.

Takeaways from a hybrid app developer

A successful mobile app project does not only rely on picking the right technology stack. It is of vital importance to have a good methodology and design approach. A modular front-end architecture can quite easily become a mess if you don’t follow best practices and industry guidelines. TypeScript and JSLint can help you a great deal in sticking to the guidelines. Good code makes good friends.

As a web developer you have a lot of libraries and code snippets at your disposal when building a web application. The community feedback really helps to make an informed decision but always stay vigilant and expose third-party code to the same requirements and tests as your own code.

The web continues to accommodate new innovative and creative projects. As a result, customer expectations in terms of design, UX, functionality and performance, were never this high. Don’t hesitate to call on the expertise of internal or external parties at each stage of the project from conception to design, from analysis to execution. Invest in customer experience, it pays for itself.