1 Codebase. 3 Platforms. Here’s How.
Tags: React, Programming, JavaScript, Software Development, Ionic

Which Cross-Platform Framework Should I Use?

There’s a lot of different solutions for building cross-platform apps. You have quite a few popular solutions such as React-Native, Cordova, Ionic, Capacitor, Flutter, so the decision isn’t an easy one. I’m not going to discuss the tradeoffs between these in this article, but here’s some good articles that compare the differences between these alternatives:

Instead, today I’m going to talk through the framework that I believe is the best, and why it’s been a pretty amazing stack to work in.

My Cross-Platform Tech Stack

A lot of React developers would opt for something like React-Native. I decided against this because I didn’t want to write any native code at all. I also didn’t want to deal with compatibility issues with other React libraries that I might want to include, so I went with Ionic

Ionic released its version that officially supported React back in October 2019. I was an early adopter to this release, and started using it a month after it’s released. I’ve now been on the technology for 9 months and although it’s had some issues, I think the technology has come a long way. Here’s some of the things I love about Ionic + React:

It’s deployable to everything. iOS. Android. Electron (desktop). Web. Etc.

I’ve never had to write any native code.

I can test my code and develop it in the browser, then when I’m ready to test how it works on mobile, I can build the code and test it directly in XCode/Android Studio

Ionic is now framework agnostic

There’s a repository of ionic react-hooks that give you an easy interface for a lot of native capabilities

Here’s a rundown of the other pieces in my cross-platform tech stack.

Ionic

Ionic is basically a UI kit of different generic components that you can use in your web code to have native-looking features in your app. It offers generic components like an <IonButton> that might look like this on iOS:

and this on Android:

The difference between these may look small, but it’s meant to make your application look and feel native no matter which device you’re on. I think this has it’s tradeoffs because your UI won’t always be consistent across platforms. For example, on iOS those buttons are slightly bigger which means your UI will look different on both platforms. This is annoying at first, but over time you’ll learn the oddities of each component and what they look like on each platform, and then it’s much easier to work with them.

I’ll also note that these Ionic components are generic, so they can be used paired with React, Angular, Vue, or even no framework at all. This is very powerful because it means you won’t be locked in to a frontend framework as-well if you choose this technology. In my opinion, this is a large benefit over something like React-Native, because it future-proofs the technology much better.

React

React is the most popular web framework, pulling ahead of angular by a greater margin every single day. I first started pairing Ionic + React in 2019 within a month of Ionic being supported on React. Through this process things have become far more stable, so now I feel comfortable recommending the two technologies together.

Capacitor

The React code is what will get displayed in the “WebView”, and it will use Ionic components to mimic native the look and feel of native components. Then, Capacitor comes in and acts as the “build step” that will take that web code, bundle it into an app and then toss it into Android Studio or XCode for you to configure further.

Firebase Cloud Messager

On the backend, I like to use FCM because it gives you the same cross-platform capabilities, except this time it’s with your push notifications. If you didn’t know, android and apple both have their own push notification services. If you want to send out a notification to all your users, you’d have to write the API calls twice to upload that notification for both services. Using something like FCM, you can have 1 single API to upload push notifications to, and then they’ll get forwarded to all the different notification services for the platforms your users are on.

Ionic Appflow for CI/CD

I’ll admit, I haven’t use Ionic Appflow yet, but I must say the technology looks attractive. One of the really interesting features to me is their idea of “live deployments”. Basically the idea here is to let you push new web code to your mobile apps without having to push a new release to the stores. This means you can use their CI/CD platform to just push new frontend code once and have it automatically be update the website and every single user’s app. That’s insanely powerful if you think about it! Not only do you only have to write code once, but you only have to deploy it once too.

If AppFlow was free, I’d give it a try right now because that’s a super attractive service for small development teams.

Conclusion

In the end, there can be quite a few tradeoffs you’ll have to make with a cross-platform solution, however the downsides can be minimized by choosing a proper tech stack. Using something like capacitor is going to give you a really solid way to embed your web apps into native code. But combine that with a cross-platform CI/CD platform like AppFlow and a nice UI-kit like Ionic and you can end up with a solid app. Enjoy!