Building an Ionic application using React

The Ionic team recently announced some exciting news: the new version of the Ionic Framework — V4 — is now framework-agnostic, meaning it can work with any JavaScript framework.

In this post, we take a deep dive into using Ionic with React.

Ionic in an open-sourced framework which allows development of cross-platform hybrid apps, using HTML, CSS and Javascript.

It allows developers to build a single application and then easily deploy to multiple platforms, all from a single code case, and all maintaining the same look and feel across different platforms.

Until recently, Ionic was strongly tied to Angular. Whilst Angular is an excellent framework, Ionic’s reliance on the framework proved a hinderance to adoption of the platform.

In addition, over the past few years, browsers have converged on a standardised component model, known as Web Components. Web components are based on existing web standards, and allow developers to create custom components and widgets that can be used with any JavaScript library or framework that works with HTML.

These factors prompted the Ionic team to distribute the Ionic Framework as a set of customised Web Components that use standard web APIs. This means developers can now easily embed Ionic’s custom HTML tags in their apps on mobile, desktop and progressive web apps, safe in the knowledge that the components are fully supported by users’ browsers and will remain stable over time.

Bringing the user-interface controls under the Web Component API has also allowed Ionic to support a “bring your own framework” model, whereby all tooling for building, bundling, and routing within the application can be performed by the framework of your choice.

Ionic can thus now work seamlessly with all major frontend frameworks (Angular, React, Vue, etc.)

How does Ionic work under the hood?

Ionic-based Smartphone apps are essentially native apps. They’re downloaded from a platform’s app store, and access the same native features and hardware as any app built with a native SDK.

Ionic apps, however, run in a full-screen browser, called a web-view, that is invisible to the user.

Through customisable native plugins, Ionic applications can also access the native features of specific mobile without the core code being tied to that device.

When built for Android, this Ionic app contains a single Activity containing a single WebView. All the Ionic application’s UI and logic runs from within this single WebView.

What are the benefits and drawbacks of Ionic?

The main benefits of Ionic (and other similar Hybrid platforms) can be summarised as:

1. Supporting rapid application development.
2. Allowing easy deployment to multiple platforms (iOS, Android, desktop, progressive web apps).
3. Allowing the ability to reuse familiar technologies of HTML, CSS and Javascript.
4. Offering a rich suite of components and native plugins, which allow access to smartphone device hardware such as camera, file system, GPS, touchID).

Ionic has a comprehensive library of great-looking UI components

Like any software platform, Ionic is not ideal in every scenario. There may still be instances where it makes more sense to develop a smartphone application natively. Factors that may detract from the choice of Ionic for app development include:

1. Performance: The use of the web-view may introduce a degree of overhead compared to native. For most applications, the difference in performance is negligible, but for 3D games and other performance-intensive applications, hybrid may not be the best choice.
2. Third-party plugins: reliance on plugins to access native features on a device can add complexity to development. However, with the convergence to Capacitor for native plugins (discussed later), this seems to be less of an issue than in previous years.
3. Framework dependencies: whilst Ionic is open source, you’re essentially placing trust in the framework and its contributors to keep up with the latest native features and design patterns of each mobile platform.

Ionic and Typescript

An important feature of Ionic is that it works best with TypeScript, and the Ionic Foundation recommend using Typescript for all Ionic projects.

Typescript is a superset of Javascript, and compiles to normal Javascript. The main benefit of Typescript is that it allows for static type checking (which normal Javascript does not), thereby allowing the Typescript pre-compiler to catch bugs before build time, and allowing complex codebases to scale.

We will be using TypeScript in the code example.

React, what is it and why is it so popular?

If you’ve come this far in the article, you probably know what React is, but in case not, React is an open-source JavaScript library for building user interfaces, developed and maintained by Facebook.

It has proved extremely popular with the development community, due to its elegantly simple component-based architecture, which allows the building of encapsulated components that manage their own state.

Getting going with Ionic and React

OK, let’s build an Ionic application using React.

1. Install the create-react-app command line tool:

npm install -g create-react-app

2. Create a React app with typescript support (replace ‘mytestapp’ with the name of your app):

create-react-app mytestapp — typescript

3. Change to the newly-created app directory:

cd mytestapp

4. Install Ionic support for React, React-Router, and the necessary type definitions:

npm install -s @ionic/react react-router react-router-dom @types/react-router @types/react-router-dom @types/react @types/react-redux @types/node

5. If you plan on using Redux for state management: install Redux and React-Redux:

npm install -s redux react-redux redux-devtools

6. If you plan on using Redux: install typesafe utilities for action-creators:

npm install -s typesafe-actions

7. Run your application in a browser:

npm run start

Voilà!

Woohoo, that was simple

Deploying your application to iOS and Android

To deploy your Ionic app to smartphone and PWA’s, Ionic suggests using Capacitor.

Capacitor is a cross-platform app runtime that allows the creation of web apps that run natively on iOS, Android, Electron, and the web. Its set of APIs allow accessing rich native device features on platforms that support them.

Capacitor’s Camera API, as an example, allows application access to iOS and Android devices’ camera.

Let’s build an Android version of our Ionic app using Capacitor:

1. In your Ionic project directory, install Capacitor:

npm install — save @capacitor/core @capacitor/cli

2. Initialise Capacitor. It will ask for your app name and package name:

npx cap init

3. Build your Ionic project for production. This is important, because all local links must be sanitised correctly before running in your smartphone application:

npm run build

4. Add Android to your project:

npx cap add android

Make sure the capacitor.config.json file’s ‘webDir’ property points to the ‘build’ folder created when you ran npm run build

{
  "appId": "com.test.app",
  "appName": "My Test App",
  "bundledWebRuntime": false,
  "webDir": "build"
}

5. Open your project in Android Studio using the following command:

npx cap open android

Android Studio will automatically build your application from the build.gradle definition. From here, you can click the ‘Play’ button to run the app in Android, either using a virtual device or via a physical Android device connected to your development computer via USB.

Steve’s Fish Emporium: an example React application

Built off the Ionic conference example app template, this app show off some of the awesome UI components that Ionic has to offer. The application also retrieves the user’s location using Capacitor.

The repo is available here.

Please note, before running the app, a Google Maps API key must be provided in public/index.html on line 30

An awesome app for tropical fish fans

Here are some code snippets from the application:

☝️The application uses React routing and is wrapped in a React-Redux provider for app-level state management.

☝️Here’s an example of usage of the Ionic web components (page, tab, tab bar) alongside React routing.

☝️The app makes use of Redux reducers as part of its global state management

☝️The app uses capacitor to retrieve the user’s location from the device and add it to the map.

As a final word, I would like to say kudos to the team at Ionic, for all their hard work in allowing Ionic to be used by different Javascript frameworks and libraries.

It is an exciting development and foresee adoption of the platform gaining steadily. It is indeed a great time to be a developer.

Thank you for reading! 🙏

References

Introducing Ionic 4: Ionic for Everyone

@ionic/react

Ionic Stencil Conference App

How to Use TypeScript in React