Native or Cross Platform mobile app?

You’ve probably heard about cross platform frameworks — such as PhoneGap, Ionic, Xamarin, React Native, Flutter, and many others. Each one promises easy, fast development and reduced costs (opposed to building everything twice — for Android and iOS). Many use phrases like “build once, deploy everywhere”. But are things really as they claim?

When deciding between native and cross platform mobile apps, people sometimes base their decision on hyped up blog posts, or simply on the grounds that they want to try something new. It should depend on the type of project you’re about to build, what features the project requires, and what money/time you have.

The longer you think your app will “live”, the more you should question your decision. If it’s something short lived, then you can feel free to use whatever you want, and experiment a little (but don’t forget to check whether you’ll be able to deliver all the features you plan to or you’ll have to make a compromise).

The main selling point for cross platform frameworks is that you’ll be able to share a code base between platforms. The amount of shared code depends on the framework of your choosing.

The main downside of these frameworks is that, by using an extra framework, you add another layer that can be a source of bugs (no software is bug free). Like any other library, this framework has to keep up with every update from each platform, otherwise you’ll be left behind.

One thing you should keep in mind is that even though you’ll be using a cross platform framework, there is a chance that you’ll have to write some native code (uderstood as Java/Kotlin or ObjC/Swift), or edit some configuration using the native build system on either platform. So you should invest some time into getting familiar with it, or have other developers for it. This mostly depends on the app you decide to build.

First, let’s look at what cross platform frameworks are available right now. We’re not going to go through all of them. Rather, we’ll divide them into 3 categories — WebView based, Native Widget based and Custom Widget based.

1. WebView based

Frameworks like PhoneGap, Apache Cordova, Ionic, etc. are all based on WebViews. That allows developers to create mobile applications using web technology such as HTML, CSS, and JavaScript.

The biggest issue with these frameworks is performance. Even though WebView’s improved over the years (iOS WKWebView and Android Crosswalk), it won’t match the performance of native widgets.

2. Native Widget based

Using React Native, the developers can use JavaScript and JSX (JavaScript syntax extension) to construct their application from components that are then mapped to the platform specific widgets.

The biggest issue this time is that, in order to use native widgets, the JavaScript part of the application has to communicate with the native part through a “bridge”. This is most noticeable when dealing with animations. Luckily AnimatedJS was created to handle most cases — but not all. In order to create a performant React Native application, we must keep passes over the bridge to a minimum.

3. Custom Widget based

Flutter does not use WebView nor does it use native widgets. Rather, Flutter communicates directly with the canvas and renders the whole UI in a very effective way. Flutter provides a rich set of widgets that are easy to use, compose, and customize.

The biggest issue with Flutter is that it’s still in beta. Don’t get me wrong, Flutter is pretty stable but it lacks some features, like inline WebViews and inline Maps (there are workarounds, but they are not always an acceptable compromise).

We can’t possibly go though everything in this single article. This was only meant as an introduction. Every framework has downsides, otherwise there would be no point in creating a new one. I wanted to point out the major ones.

In my opinion, the WebView based frameworks are the things of the past and the main focus should now be on React Native and Flutter.

Maybe you’ve tried some of them. What’s your opinion? Feel free to leave a comment about your experiences.

In the next article, we’ll look more closely at React Native vs Flutter.