DEV Community

Cover image for Ionic React - First Look

Ionic React - First Look

Nader Dabit on October 17, 2019

Ionic now officially supports React as a first-class target & framework Ionic is an app development platform for web developers that...
Collapse
 
amanhimself profile image
Aman Mittal

There is the mvp: "Your users more than likely don't actually care."

Collapse
 
maxlynch profile image
Max Lynch • Edited

Great post! One thing that is relevant to the discussion around how close to a native experience Ionic or React Native can get is that Ionic and Capacitor also uses a lot of native UI and enables direct access to native functionality. It also means you can and likely will run native code alongside your app, so the line is pretty blurry. While a lot of your app will indeed run in the WebView, it's been a key design consideration that dropping down to native code or mixing in native views is really easy in Capacitor.

That also means it is and should be easy to find any old CocoaPod, write a tiny wrapper around it, and expose it to your web app, thus creating a sort of "new Web API" your app can interact with. More on that.

We've also had a lot of people want to mix in Ionic/Capacitor with their React Native apps. Maybe they have a web team they want to enable to build out screens, or they just think it's faster to build and design a web screen, but I think we'll see them start to be used together in interesting ways. That reminds me, this calls for a page in the Capacitor docs!

Anyways, for those curious about how far the web has come for UI and animations, take a look at a preview of a drawer component we will be rolling out soon: twitter.com/maxlynch/status/113899...

Collapse
 
dotnetkow profile image
Matt Netkow

Great writeup, Nader! You nailed it on the "framework vs. framework" idea. At the end of the day, it takes time, dedication, and hard work to build great apps - regardless of the technology you choose.

Collapse
 
ggenya132 profile image
Eugene Vedensky

Really nice writeup, Nader. We are most certainly spoiled with the wealth of choices available to us as developers. There are so many ways to get into mobile development developments but I will always love Ionic for allowing me to create my first mobile app three months into my journey as a developer. Cheers to a happy marriage between React and Ionic ❤️

Collapse
 
zyzmoz profile image
Daniel Cunha (he/him)

Your first phrase talking about the differences between RN and Ionic + React made it the best comparison ever ("Your users more than likely don't actually care.")! Also, I couldn't agree more as all technologies have their pros and cons, it's up to you decide which one is more suitable according to your necessities.

I've tested Ionic + React + Capacitor reproducing a small production app I have. In my opinion, it got a bit faster than using the standard stack (Ionic + Angular + Cordova) but still a bit laggy when comparing with React Native.

Btw, nice article mate!

Collapse
 
gktim profile image
gkTim

I think capacitor is the main factor for the speed improvement.

Collapse
 
ahmadawais profile image
Ahmad Awais ⚡️

This is a great piece, Nader. I was hoping to check it out and discover for myself most of what I got from reading this. Thank you. Definitely going to try it out and see how things go. Ionic feels like a React Component library and less native.

Collapse
 
sabahang profile image
Saba Ahang

I appreciate if anyone could answer this question:
I was thinking to create a "native wrapper" with React Native myself that would point to my webapp in a webview but now I'm wondering how would it be different than just using Ionic? In other words, if all you want to use RN for is building a native wrapper why not just using Ionic or other similar hybrid platforms that allow using web technologies for targeting different platforms? Any thoughts? Is the difference in code sharing with desktop or web? Or Vendor lock in? or lack of possibility to integrate into another native app in future? Would appreciate a list of pros and cons or any info

Collapse
 
rodrigovive profile image
Jhair Rodrigo Viveros Cordova

Thank you, Nader.

Sorry for my question, How does Ionic React work with Amplify?

Collapse
 
dabit3 profile image
Nader Dabit

Ionic works great with Amplify. Using the Amplify JS library you'll be able to do everything that the library has to offer.

Collapse
 
lolochka profile image
Olga Shkoda

Nader, thank you for great post. I have one question, which option should we select when init amplify for our next Ionic React app? Ionic or React? or maybe plain JS?

Collapse
 
256hz profile image
Abe Dolinger

I'm deciding between Ionic and RN for a passion project, and one of the central features is QR code scanning. Does Ionic have good APIs for camera functionality, and hardware in general?

Collapse
 
dabit3 profile image
Nader Dabit

Both React Native and Ionic should have most of the same APIs available. As far as a QR scanner, it looks like there is one for Ionic via Cordova here

Collapse
 
256hz profile image
Abe Dolinger

Haha, the intro article mentions that people are understandably frustrated with Cordova, so I'm hesitant to jump into it. In the end I think my app is native-first, and I'm comfortable patching react-native-web later on if it becomes necessary.

Collapse
 
dance2die profile image
Sung M. Kim

Thanks for the nice intro, Nader.

How does Ionic React differ from react-native-web?

(I don't have a background on native development :))

Collapse
 
maxlynch profile image
Max Lynch • Edited

I don’t know RNW too well but my impression is they have a lot fewer components and aren’t focused on “bringing native patterns to the web” like Ionic is.

It’s definitely awesome though and you can’t go wrong with it.

Collapse
 
dance2die profile image
Sung M. Kim

Thank you Max for the reply even for my uncalled-question (out of nowhere 😅).

I tried the tab template, and it was really easy to get started :)

I will play around more as PWA-focused approach is appealing.

Collapse
 
atkaranshah profile image
Karan Shah

With the rise of ReactJS frameworks such as GatsbyJS and NextJS, how do you think they fare when it comes to creating a PWA?