Developing in Ionic & React Native: a Walk-Through — Part 1
How we created a Happiness app PoC in Ionic.
Our business is at the heart of mobile, an industry that evolves daily. Mobile has emerged a new type of person: the homo mobilis. To adapt and stay lean, we’re always on the lookout for new technologies that challenge and add to what we already know.
Ever since usage went mobile, web tech did the same. Already, web is playing an important role in app development. And with new opportunities come new advantages. As a supplier, we want to offer these benefits to clients — from creating a single code source for cost efficiency reasons to updating parts of the app without the need to release another version.
In examining hybrid development we’ve explored several platforms — two of which we’ll re-explore here: Ionic and React Native (starting with the former). This two-part blog series outlines the basics of each platform, and takes you through our key findings.
For the hybrid platforms in scope, we created various proof of concepts. One of the PoCs was to build a Happiness app, which lets users quantify their happiness level over the previous five days. Our design team made a nice, clean and simple design, which we’ve used to build the PoC. When users vote ‘unhappy’, a screen is shown with questions that help them motivate their rating. When they vote ‘happy’, we show a confirmation screen. We also wanted to store the data in Firebase, Google’s realtime database tool.
1 — Ionic
If you’re into web development, Ionic is the easiest way to create native and hybrid apps for multiple mobile platforms from one single source. Ionic is an open-source framework with a single codebase, based on AngularJS and Apache Cordova. Developing apps requires experience in HTML5, CSS3 and Javascript/Typescript.
Starting up projects
With Ionic, starting up a new project is easy. With a few terminal commands, you can set up a project in mere minutes. The framework lets you choose the navigation type you want in your app, e.g. single screen, tab bar or hamburger menu. After you create the project, you can review the app realtime in your browser with a native look and feel — one of Ionic’s main advantages. Ionic allows you to view the app in iOS, Android and Windows Phone style at the same time, which is a big pro.
Proof of Concept
When developing our PoC in Ionic, we started by creating multiple views: app screens for voting, questions and confirmations. In Ionic, views are based on HTML files containing components that allow you to quickly construct an interface for your app. For example, you can load a native navigation bar just by adding <ion-navbar></ion-navbar> to your HTML. You can expand this bar by adding buttons, or a page title. As most of the native components are already defined in Ionic, you can build up your interface easily. The components work on all mobile platforms.
Building and styling
Building screens in Ionic shouldn’t be difficult if you have some basic HTML knowledge. Plenty of documentation is available online on how to implement each component. Defining the screen designs and adding animations can be done in a specific SASS stylesheet (CSS), linked to each page. Your global styling (think brand colors and typography) can be stored in the main stylesheet. This process feels similar to building a website and delivers a very well structured project. We’ve tested a few CSS-animations to review the performance, and they turned out to work pretty well.
Transitions and API’s
After implementing the design, we started working on the transitions. Our aim was to create transitions based on user preferences. All data had to be stored on Firebase, so there were a few API calls. Setting up Firebase for the first time typically requires a few steps, but the database can be used directly across all of your screens.
To define these transitions and API calls, we used a Typescript-file (.ts) linked to each HTML page. Typescript is a superset of JavaScript, which is optional when building in Ionic. Setting this up requires knowledge of JavaScript, but Ionic provides enough documentation to get you started. You can also use all kinds of open source JavaScript libraries to create transitions and animations.
Adding native features
Some of the iOS and Android components are not available directly in Ionic (e.g. camera, TouchID and Push Notifications). To cover these components you can use plugins provided by Apache Cordova, Ionic's home base. Installing a plugin requires a few steps, but is easy to implement across your screens. Most plugins are available for all three major mobile platforms, which is also a big plus.
In our Happiness app PoC we’ve tested the previously mentioned Firebase plugin. When further examining Ionic, we’ve also been trying out the camera plugin to scan QR-codes, a Google Maps plugin with clustered pins, and a device plugin to retrieve and store local data. These plugins felt native and performed well on the devices we’ve tested on.
Debugging your app
As mentioned before, debugging in Ionic is relatively easy. You can see changes immediately in your browser, and debug using the Inspector. However, native components (the camera, for example) are not available in the browser. To test these components, you need to build them for the platform you’re developing on (e.g. iOS). After building you can open your project in Xcode and start debugging, or deploy it on a device. This makes Ionic a great tool to develop en debug your app for multiple mobile platforms at the same time.
In conclusion
Already millions of apps have been created in Ionic, which makes it one of the most popular hybrid platforms in the world. With a big community and well-organized documentation, it’s a great platform to learn and create apps that feel native on all mobile platforms in a few steps.
Stay tuned for the upcoming part 2 where we’ll explore React Native.
Kai Mallie
Founder of iBucket, designer, web developer and major soccer supporter all in one. Sketches stunning screens and builds them, too.
The Mobile Company
We’re an award-winning Amsterdam-based mobile agency, working with leading companies and well-known brands to create apps for millions of people. We post about cool tech, awesome projects and other fun stuff. Want to chat? Get in touch. Learn more at www.themobilecompany.com.
If you’ve enjoyed this article, please hit 👏 and help spread the love.
