A Little Background

Ionic framework is a full suite hybrid mobile app framework built on top of Angular and Cordova. React Native (RN) is a mobile app library developed by Facebook that built on top of ReactJS and native codes that bridge Javascript codes and device native bits. They both allows developers to build mobile apps with Javascript.

This post is not trying to conclude whether Ionic or React Native is better, it's going to be never ending and depends on your dev/business strategy. Instead, this post is about to layout and comparing things that you may consider in app development.

App Development Checklist

(Part 1)

  • Development Environment
  • Debugging
  • Community
  • UI Kits
  • Styling
  • State Management
  • API Integration

(Part 2, TBC)

  • Testing
  • Performance
  • Animation
  • Splash Screen / App Icon
  • Push Notifications
  • Web Socket
  • App Deploy / Live Update

Development Environment

Developing in Ionic and RN involves a lot of Javascript coding. As JS codes ain't compiled, both general coding experience is quite similar. Editors like Atom / Visual Studio Code / Sublime Text are the quite popular choices amongst.

These editors usually advertise customized coding experience through installing a wide range of packages/extensions. Such as auto-complete code suggestions, linter for code quality control, codes beautifier, see git history or commit codes, etc etc.

Configure Visual Studio Code for React Native

Configuring Visual Studio Code for Ionic Development

More choices for React Native

Nuclide - Atom plugin that power up for RN development
https://nuclide.io/docs/quick-start/getting-started/

Expo - an integrated environment for RN development (from code generation to deployment)
https://expo.io/

ADD-ON: Collaborative Coding

This quite-recent feature enables developers from different countries code together in real-time.

Collaborate in real time in Atom

Visual Studio
Live Share

Boostrapping Skeleton

1. Using Official CLI

The codebase generated by Ionic cli is more ready for full app development (e.g. http-client for api integration). This ain't the difference of generators, but rather the nature of Ionic and React Native where RN leaves a lot of room for developers/community to answer the missing puzzle.

Ionic CLI
Project source codes can be generated from command terminal. A list of templates can be chosen during generation.
Getting Start from Ionic official

React Native CLI
using Facebook official cli create-react-native-app.

2. Choose a Boilerplate / Starter App

Stuff like tests script, community driven best practices are pre-baked in the start app.

Ionic Starter App

ionic-boilerplate (262 stars)

React Native Starter App

Debugging

Debugging in Ionic

Debugging in Ionic is akin to debugging in web. You can fire up the Ionic app on your favourite browser and view console logs, network activity, etc. However if the issues are hardware related, debugging on real devices or simulator is needed.

Learn more debugging tips from Ionic official

Remote debugging Ionic app on Android device

Debugging in React Native

Apps built with RN do not run in browser. To debug, a device or simulator is needed.

In-app Developer Tool
A must-know tool, pretty much a browser inspector for RN.
https://facebook.github.io/react-native/docs/debugging.html#accessing-the-in-app-developer-menu

React Native Debugger
https://github.com/jhen0409/react-native-debugger

Learn more debugging tips from React Native official

Community

Ionic frameworks is built on top of Angular and Cordova and thus inherits the supports from their communities. Angular from Google is a all-round web development framework. While React Native developers can learn a lot from the ReactJS community.

At the time of writing, in github, Ionic got 33505 stars and React Native got 60871 stars. Both of them have continuous momentum from contributors.

When considering community supports, it is worth considering the popularity of related github pages as well. Below is the community curated list of libraries that related to Ionic and React Native.

Besides, Ionic Market is the marketplace where you can get or publish Ionic stuff. Such as plugins, themes, or even starter apps.

For React Native, JS Coach and Native Directory are nice places to discover useful libraries.

UI Kits

Ionic provides a list of standard UI components with pretty good documentation. The style of all components are fully ready for both iOS and Android design (material design).

Check them out here
https://ionicframework.com/docs/components/

One of the currently missing UI components is the "swipeable tabs", but thanks to community:
https://github.com/zyra/ionic2-super-tabs

React Native also provides a number of UI components out of the box. However not all components are ready for both iOS and Android. Community fills this gap with great efforts. At the time of writing, these are the few popular ones!

Navigation is an inevitable UI element when building mobile apps. Ionic and React Native answer to this quite differently.

Ionic built with a full-feature navigation design in mind. From common page navigation, modal navigation, to deep-link friendly navigation. Quite well planned.

React Native leaves room for community to handle the navigation bits. Passionate open source developers have built these navigation libraries for RN community:

react-navigation is recommended by Facebook. NOTE: this issue may concern you when you want to "erase" navigation history though.

Styling

Ionic uses CSS to do stylings. As Ionic components are styled out of the box, they also offer ways to customize look and feel on top. You will feel home if you are with web frontend dev background.

You can change overall theme by setting the preset colors differently
https://ionicframework.com/docs/theming/
https://ionicframework.com/docs/theming/overriding-ionic-variables/

You can also choose different platform style to a specific element (e.g. you can choose to have a material design button in iOS app, if you like)
https://ionicframework.com/docs/theming/platform-specific-styles/

Of course, you can style your own component by your own. As Ionic app is component based, style is contained in the component it belongs to.

example folder structure of loading spinner component in Ionic

React Native uses Javascript to do stylings. Style in RN is often expressed in Javascript object. Like this:

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

Learn more from Facebook official docs
https://facebook.github.io/react-native/docs/style.html

Likewise in RN, style is contained in the component.

example folder structure of loading spinner component in RN

RN uses flexbox algorithm to do layout, similar to CSS if you are familiar.

Check this out to learn more about flexbox in RN
https://facebook.github.io/react-native/docs/flexbox.html
https://medium.com/the-react-native-log/understanding-react-native-flexbox-layout-7a528200afd4

State Management

For Javascript apps, managing application state can be complicated when app grows. Redux is of the popular libraries that implements the flux unidirectional data flow pattern.

In fact both Ionic and React can fully equip Redux as their state management arm. However adoption in React community seems much better. Possibly because the flow unidirectional pattern came from Facebook.

Some useful Redux related links:

It's worth mentioning how to handle "side-effects" when changing state. "side-effects" are those changes to real-world when changing state. They can be updating server database, playing a sound, showing an alert, etc.

Popular libraries for handling Redux side-effects:

  1. redux-observable (4799 stars, using RxJS)
  2. redux-saga (12294 stars, using JS generator feature)
  3. redux-cycles (650 stars)

Useful discussions in handling Redux side-effects:

TIPS - For Ionic/Angular apps, as an alternative to Redux, ngrx uses RxJS (which is Angular friendly) to handle state management, including side-effects.

API Integration

In Ionic, the HttpClient module comes with Angular which just do the job. Its interfaces are observable type (RxJS) which is change detection friendly in Ionic/Angular apps.

For instance, an API call may look like this:

public getUsers(): Observable<User[]> {  
  return this.httpClient
    .get(this.baseUrl + '/users')
    .map(users => {
      return users.map((user) => new User(user));
    })
    .catch(err => {
      console.error(err);
    });
}

In React Native, the ways to integrate API is basically the same as how ReactJS (just Javascript) does. There are a number of choices available in the community.

(To be continued...)