DEV Community

loading...

Flutter, React Native, Ionic and Native platform: A visual guide

rubensdemelo
db2 z/os admin, cobol/java developer, flutter enthusiast, frontend newbie
Updated on ・2 min read

Cross-platform development has another big player: Flutter, the Google toolkit that allows us to create apps to iOS and Android (and soon to desktop and web).

Build mobile apps is a challenge. Especially because we need to target two different platforms. Unlike the web, where HTML, CSS, and JS aims to work in every browser (no matter what the size of the device), iOS and Android platforms had his own environment (language, tooling, approaches, etc).

Some cross-platform tools, like React Native, Ionic, and Flutter came to help us to build once and deploy on both platforms.

In this post, I will show you a visual guide to illustrate the difference between all of them. Let's get started!

Ionic

It is like a dream, write code with HTML, CSS, and JS, and deploy to iOS and Android. The app is a website. To achieve that, tools like Ionic, Cordova, and PhoneGap uses a WebView to render the code. But there is a bottleneck: performance. If the app needs to access hardware services (GPS, sensors, etc) it needs to cross a famous bridge. But if your app does not need those services, this tech should be on your radar.

Native Platform

Your code (kotlin/swift) interact directly with the platform. If you need a button, the platform provides that button. Access to the camera? No worries too. Thit is the best option for mobile development! But you can't code once and deploy to both platforms. You need to write an app to iOS and other to Android, which makes this choice expensive.

React Native

The tool powered by Facebook is so far the most popular choice for cross-platform development. It has a huge community, widely used by a ton of companies, uses Javascript. React Native truly provides an excellent way to build high-quality mobile apps if you are a frontend developer. But is uses the bridge extensively, for hardware services and native components (buttons, text fields), which can bring some performance issues, especially with animations.

Flutter

The youngest option for cross-platform development (by Google), has a peculiar aspect: it uses Dart language (also by Google), which enables the code to be compiled (AOT) to arm/x86, wich is straightforward runs on the hardware (if you need need a button, Flutter paint it on screen, if you need to interact with hardware, Flutter provides a plugin ). It has 71k+ stars on the repository, gradually being adopted by big companies (Alibaba, Tencent, BMW). It has some weakness, like 7k+ issues and the fact that you have to learn Dart (but this doesn't make sense, if you know JS, Java, or any C-style language).


I hope you now know the differences between each option and have more clarity to choose one to learn and or use in your next project.

Discussion (13)

Collapse
seanmclem profile image
Seanmclem

Is the concensus that Ionic 4 (capacitor) has a slow Native Bridge?

Collapse
mhartington profile image
Mike Hartington • Edited

Hey there! This is quite the opposite. The bridge layer between the webview and native APIs is fast, but has also never really been slow. There's a misconception that the native bridge is slow due to the fact that the plugins take a while to become available. With Capacitor, the plugins are loaded and bridge and created right at start up, so you can have a fast interaction between your JS code and native layer. Here's a small example just in terms of perceived startup time.

twitter.com/mhartington/status/113...

The splashscreen is only visible for a second before the actual app hides it on startup.

EDIT: If you're speaking about anything in particular, I'd love to know what issues you've faced and if you have a demo to look out.

Collapse
rubensdemelo profile image
rubensdemelo Author

Thank you for clarification. Would you suggest any adjust about Ionic?

Collapse
chimon1984 profile image
Ryan Edge

The bridge itself is not slow. Rather it can be a bottleneck depending on how much data is sent thru it due to the serialization/deserialization. Think in terms of JSON.parse in the browser. Parsing a couple hundred records is fast, but if you try 50k records, then your performance suffer.

Collapse
seanmclem profile image
Seanmclem

Same for react native I'd think.

Collapse
tomavelev profile image
Toma

All cross platform frameworks have the weak point - plugins in terms of being up to date with all the platforms and changes, beside their own way of work-arounding adapting and fixing the framework to speed, size, performance, features. I've tried Flutter and Cordova (with released apps), and played with react native and native script. It is actually pretty expected to be hard. All platforms have their own things to be careful about.

Collapse
bkairu5 profile image
Halafu

I have never understood why every article on the web about Flutter suggests that learning Dart is a disadvantage. It's almost as if to use RN, Ionic or to go purely native you don't have to learn anything other than booting up your computer, or that every mobile developer (existing or new) on the planet already knows JavaScript, Kotlin, Java and Swift and therefore learning a "new" language is a disadvantage.

Collapse
ipoool profile image
Asep saepulloh

cordova is yesterday 😁

Collapse
_t0p1 profile image
TOP1.0

now i know what is their weakness for each platform. Thanks

Collapse
rubensdemelo profile image
rubensdemelo Author

Great :D

Collapse
rubensdemelo profile image
rubensdemelo Author

Thank you