DEV Community

Cover image for Good bye ReactNative, hello Ionic.

Good bye ReactNative, hello Ionic.

Philipp Renoth on July 10, 2022

Developing a ReactNative (RN) app for Android and iOS for the last 2 years I have more and more doubts that ReactNative is still a good choice for ...
Collapse
 
bradcypert profile image
Brad

This was a really insightful post on your experience with React Native! Thank you for sharing that! Did you happen to look at Flutter at all? I’ve been using for a few years now and have been loving it.

Collapse
 
daaitch profile image
Philipp Renoth

Hey Brad,

thank you for the feedback.
I just did a "hello world" with Flutter, but nothing that really allows me to criticize the technology itself. My problem is just about the community trend, that around 2012 Dart and TypeScript came out and the web community went in the direction of TypeScript. As far as I know Flutter is only possible with Dart.

Collapse
 
leob profile image
leob • Edited

Depends on what you're talking about - if you talk about web tech as such then it's absolutely Typescript that's big, but if you talk about mobile dev then Flutter is a serious player ... but it's definitely not "web", that's why it's not a "thing" in the web community. Yes and Flutter is based on Dart, not on Javascript or Typescript ... I don't see that as a problem, I mean there are people programming in Python, in PHP, in Go, in C# ... Javascript is not the only game in town.

Thread Thread
 
daaitch profile image
Philipp Renoth

You're right that for a good reason not everything is JS, but when you don't need all of those fancy app features, I would always vote for hybrid apps where I can let my web team work on a mobile (web-like) app and even more if we also have a website.

if you talk about mobile dev then Flutter is a serious player ... but it's definitely not "web", that's why it's not a "thing" in the web community.

Would you say Dart is or could be a thing for the web? I've never heard of it outside of Flutter in the past. If I remember correctly, 10yrs ago there shall be types in JS so among others Dart and TS started their missions. According to a survey the Dart community really loves it, but not so many are working with it.

I also don't see a problem when Dart comes in, but I think it's not about "can you write or learn Dart?", but "do you have enough experience to kick off a Flutter app?" so you also don't have to rewrite it after one year.
Jumping back to Ionic: your pool of developers making projects with Angular, React, Vue and so on is very huge.

The question is what you have and what you want :).

Thread Thread
 
leob profile image
leob • Edited

Dart itself is niche, I don't know if anyone really uses that, lol ... Flutter is really THE killer app for Dart, don't shoot me but outside of Flutter I don't think anyone takes Dart seriously ;)

And oh yes, I think in many (most?) cases a hybrid app/PWA just hits the sweet spot, native is required only or a minority of use cases I would say ...

Thread Thread
 
daaitch profile image
Philipp Renoth

Great :). At least you've got me to check out Flutter again and maybe read my article about "good bye Ionic, hello Flutter" then :D.

But why the hell seems Dart to be the best language for Flutter? That really makes me nervous :D.

Thread Thread
 
leob profile image
leob

Why does it make you nervous? It was just designed or "invented" that way (by Google, if I'm not mistaken) ... they wanted a type-safe, compiled language, which Javascript isn't (Typescript is still a "kludge" lol even though a beautiful one).

Collapse
 
nombrekeff profile image
Keff

Yup, I've tried most solutions and flutter is by far the best developer/user experience, it's a joy to work with!!

Collapse
 
leob profile image
leob

I've heard nothing but good things about it as well ... people who are still writing code two times (once for Android with Java/Kotlin, and once for iOS with Swift/Objective C) should really rethink what they're doing :)

Thread Thread
 
nombrekeff profile image
Keff

Yup, it's one of the best frameworks I've ever tried, since using flutter I think I've gained at least 10+ years of life xD Jokes aside, I really think it's worth trying out, you won't be disapointed... You will have a lot of "oh so this is how it's supposed to be done" moments. No more weird APIs, hacks, layers, bullshit, just start coding and build for any platform you want... what else could we want??

Thread Thread
 
leob profile image
leob

Spot on, based on what I've heard about it :)

Collapse
 
maxlynch profile image
Max Lynch • Edited

Great post Philipp! On the topic of device debugging, this is absolutely possible. We have docs on that here: ionicframework.com/docs/troublesho.... Another popular tool for iOS debugging is inspect.dev.

I'm glad you mentioned the community size aspect. One thing people don't always realize is that Ionic + Capacitor is part of the broader web ecosystem, while Flutter/Xamarin/etc. are self-contained/closed ecosystems. Ionic devs can use practically any web library, share code with their web app, and use their existing web and web framework experience. If you're a React dev then using React with Capacitor will be the most like building with React on the web where all the React libraries you want to use pretty much just work (which is not the case for React Native).

This has given the platform strong staying power since developers see it as an "electron for mobile" where they are basically building a web app but extending it with native mobile functionality.

Collapse
 
daaitch profile image
Philipp Renoth

Hi Max,

I've edited the part about debugging.
Thank you for that and of course for having Ionic at all :) !
I appreciate you've read it.

cheers
Philipp

Collapse
 
apayrus profile image
Rustam Apay • Edited

Thank you for the article. I have the same feelings as yours. But I also didn't rewrite RN app to Ionic.
I had a lot of problems with RN. Maybe I'll have them with Ionic too :)
matchAll didn't work, so I had to rewrite a module with a polyfill.
scrolling speed in View (programmatically) is not custom, but fixed. What is 1 line of code in Ionic I don't know how to do it in RN after hours of research (I think it is impossible).
position: sticky -- two words in CSS, I don't know how to achieve it in RN.
I was pissed off, when in Expo Video, there wasn't an attribute playsInline and on iOS my app looked so ugly... And there wasn't a solution. After months they fixed this issue.
Expo weights (60-70mb) -- it is even "Hello world" app.
Playing video and audio is buggy there, as well as a web version too (it was experimental).
Finally I refused it when at some point the app was building for hours without the result. I am so tired of RN/Expo surprises, I burned out and fell into severe depression for months after 6 months of development.
I hope that in Ionic web will work as expected, without surprises.
But I don't wan't to step out of web, because I am neither smart enough to learn swift, kotlin, c# or dart (in addition to JS) nor rich to hire such experts.

Collapse
 
leob profile image
leob

I completely understand why working with a "hybrid mobile" tool like Ionic is MUCH easier than working with a "native" tool like RN ... the question is just - do you absolutely require a "real" native app, or is a hybrid app (based on WebView) more than "good enough"?

In the latter case, by all means I'd go with Ionic (or comparable 'hybrid' tool) because it's just much quicker and easier to work with ... if you MUST have a real 'native' app, then well, it's either native iOS/Android, or RN, or Flutter - I've heard many great things about Flutter and maybe you're discounting it a bit too quickly.

But the decision between "do I really need native" and "is hybrid (more than) adequate for my needs", that just depends on your requirements ...

I'd guess that 70 or 80 percent of mobile apps are just fine as 'hybrid' or PWA apps - typically apps that are content focused and that aren't doing technically crazy complex things ... in all likelihood performance in those case is great if you use hybrid/PWA, and you don't gain much by building them as a 'native' app.

Collapse
 
maxlynch profile image
Max Lynch

There's another option, too, that we see growing in popularity: build a native app shell using whatever tech your team wants to use, and then mix in web experiences in a micro-frontend fashion. Our Portals project does this and it's pretty interesting seeing die-hard native app teams embracing this approach to move faster and enable other teams to contribute to an app: ionic.io/portals

Collapse
 
leob profile image
leob

Interesting !

Collapse
 
iamabdulazeez profile image
I-am-abdulazeez • Edited

Hi, Phillips

Nice article. It seems my story and ours are going in the opposite direction.

Ionic is great! I worked with it using the Angular part for like 3 years, but have not really tried the Vue part extensively.
Ionic-angular is cool. We enjoyed every part of it. It just works well. We integrated plugins; they work well too.
As for ionic-react, we had a lot of issues,Β beginning with the navigation. Ionic-React-Router occasionally lags. Some people even suggested using pure react-router instead of Ionic-React-Router. Then we also had issues with plugins; some work and some do not.
Β 
However, in React Native, which I recently came acrossΒ and also from what I have heard from developers in my country, React Native is a goal here.
I posted a lot of questions on stackoverflow and ionicforum concerning ionic-react. I got no positive answer. It seems people don't really know much about it.
Most of your issues are related to iOS. I think 2 years of experience in React Native is a lot for you to decide, but I see people with 4 years of experience in React Native with minimal complaints.
Β 
Lastly, what I love about react-native is the react-navigation lib. Almost everything is done out of the box. Ionic has an animation builder API for you to create a custom animation, but I think react-native plugins do something beautiful too.
They all have their pros and cons. For me, I think react-native is cool.
Β 
Ionic-angular is cool.
Ionic-react is not yet cool.
Welcome to the ionic world 🌎🌎
Β 

Collapse
 
aaronksaunders profile image
Aaron K Saunders

I have used both for client projects, more ionic than react… but there are definitely times when I wish there was a larger Ionic community building and maintaining plugins. Often where I get jammed up is around native plugins. A perfect example is for native maps, if you look at the map native plug-in for maps in ionic vs react native, it is like night and day.

I just use JavaScript web based solutions and for maps now, but I think the plug-in ecosystem is a place for growth in ionic community

Collapse
 
lorenzosjb profile image
Lorenzo JimΓ©nez

Goodbye RN, I am investing my time learning .Net Maui

Collapse
 
daaitch profile image
Philipp Renoth

What do you say about it? Target is iOS, Android?

Collapse
 
amani_art profile image
Austine Amani

I came to the same conclusion a while ago. Most apps are content driven, which can easily be done in ionic / capacitor and with decent performance.

Collapse
 
nombrekeff profile image
Keff

I never thought I'd see someone prefer Ionic over anything else really, what a mad man!!! For me ionic is the worst framework for cross platform apps I've ever used, it's painful. Though choice is good and If you enjoy and get value out of it go ahead!!

Collapse
 
daaitch profile image
Philipp Renoth

Hey Keff,

what exactly is wrong with Ionic?
To be fair, Ionic is just a couple of web-components not even very opinionated because they try to simulate iOS and Android behavior. You can use the big three Angular, React, Vue or just web-components. If you don't like Ionic UI/UX then put whatever you like in to the capacitor box. And finally if you don't like web-apps at all what do you use?

Collapse
 
nombrekeff profile image
Keff

I should've said Ionic/Capacitor actually, the whole setup. Worth noting that I haven't tried ionic in a few years, maybe the problems I had have been resolved.

I worked with ionic for mobile app development for a couple of years (iconic with angular), and from my experience, it's a mess, prone to bugs, excessive templating (with angular at least), strange conflicts with plugins, and overall a pain to work with when the project gets bigger. I guess it's up to the developers to prevent this, but having tried other solution I can tell with confidence that quite a few of this problems can be solved by designing the framework correctly.

For me the biggest drawback is the amount of layers that Ionic has, making it really easy for one of them to give you problems.

My hate might be subjective though, I did not have the best experience working with it and it might've not been the frameworks fault... nevertheless I don't think I fancy trying it again, not react native either for that matter. I really don't like using JS/TS frameworks for these scenarios, they allow too much.

Thread Thread
 
leob profile image
leob • Edited

I get what you're saying, I used an old version of Ionic, 6 or 7 years ago and it was okay but not ideal ... however I think you should ultimately base your judgement on an up to date version - and don't forget that you can now use React or Vue with Ionic (I used Angular 1 which was okay-ish, wouldn't touch Angular anymore).

Thread Thread
 
nombrekeff profile image
Keff

Yup I agree, I'm aware of this as I mentioned in the comment, it might've been a mix of working on a badly maintained project, old ionic versions + angular 2+ plus other factors.

When I worked with Ionic, React was beeing added, then Vue was also added. But I did not have the chance to try them out, either way I also don't enjoy React at all, vue is alright though.

I probably should try it out again, though I don't fancy it at all xD

Thread Thread
 
leob profile image
leob

Yeah I also like Vue more than React :)

I might be dabbling a bit with Ionic for an MVP in an upcoming project, although I told them "do yourself a favour and use Flutter instead", lol ... but we'll see.

Collapse
 
leob profile image
leob

You know when I became hugely and thoroughly convinced by the web/hybrid story for mobile app development?

That was when I realized the potential of PWAs ... no more messing around with app stores and the whole packaging and publishing hoopla (although I think that Google still has a "light weight" form of publishing for PWAs, not sure about that).

The fact that you write a web app (PWA) and then you still need to package it inside a native 'shell' (which isn't doing much more than a browser does) always felt somewhat artificial to me, and PWA does away with all that.

The moment PWAs really take off is when I think native app development will begin its downward trajectory, for a large part of mobile app development.

(a company like Apple won't like this because it threatens the power they yield via their App Store - so they might try to push back, but they can't forever keep sabotaging PWAs through an undercooked Safari browser)

Collapse
 
metal3d profile image
Patrice Ferlet

Anyway, React is a bad library (and it's not a framework) – Ionic is perfect with Angular, the project has got a better structure, you can use services (which are natives) instead of Redux.
Ionic and Vue is not that bad.

Collapse
 
nicolasdanelon profile image
NicolΓ‘s DanelΓ³n

this is wrong in so many levels

Collapse
 
edmundo096 profile image
Edmundo Elizondo

Don't know much about the two technologies. Would you mind mentioning what is wrong?

Collapse
 
redbar0n profile image
Magne

In short, the iOS setup is mess of xcode project configuration no human should actually read and with custom inline bash scripts running Ruby or node.js scripts setting hidden environment variables and all in all really hard to debug.

It sounds like you were using your own custom setup? I can’t imagine inline bash scripts running Ruby is auto generated by default.

Collapse
 
daaitch profile image
Philipp Renoth

From the current RN 0.66.3 there are scripts in the project.pbxproj like

shellScript = "set -e\n\nexport NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh\n";
shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n  if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n    if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n      echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n      exit 2\n    fi\n  else\n    open \"$SRCROOT/../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n  fi\nfi\n";
Enter fullscreen mode Exit fullscreen mode

The ruby script generation seems to come from react-native-config which is not from RN itself, you're right.

Collapse
 
brianvalente profile image
Brian Valente

Seems like most of your issues with React Native could’ve been avoided by using Expo, did you try it?

Collapse
 
daaitch profile image
Philipp Renoth

At some point in the past an Expo setup might have been a better starting point for our application, but in the meantime we have one module for PDF presentation that doesn't allow Expo and in the near future we need to connect Bluetooth devices.

But you're probably right that maintaining an Expo project is easier. It would be fair to mention in the article.