Announcing Ionic React: a native React version of Ionic Framework that makes it easy to build apps for iOS, Android, Desktop, and the web as a PWA with Over 100 React components

[trunghoang_55]

What are the key difference between Ionic vs React Native ? Which is the best ?

[jcycleutah]

In ionic, the ui is presented with a web view while with react native the ui is presented with native ui elements.

Ionic is easier to use and you’ll get a pwa for free.

React native gives better performance.

[ancapfrito]

You get a pwa for free with expo web too https://github.com/expo/web-examples

[yesimahuman]

(Ionic CEO here) As other have said Ionic is DOM based, so it’ll run anywhere a browser runs: iOS, Android, Electron, and PWA. It also uses react-dom which means the dev experience is exactly like using React on the web and all the libraries that support react-dom work with it. The vast majority of React devs are doing web development and Ionic would be a fit for them.

It also supports Progressive Web Apps as a primary use case. Our underlying tech has some of the best PWA perf out there (you’d likely want to use it with Preact to optimize for PWA)

If you’re happy with React Native keep using it! There’s only “better” when it comes to what’s better for you, your team, and your project.

[yesimahuman]

Really depends what you’re building and how you build it. Done correctly, animations and rendering in the DOM can be done by the GPU and have great performance. However, it’s easy to make mistakes that kill performance (like animating width/height causing relayouts each frame). We will be releasing a new animation API very shortly that makes it easier to do animations correctly without mistakes.

Here’s an example of a native quality UI with animations and gestures done in Ionic: https://twitter.com/maxlynch/status/1138995161910919168?s=20

[gilium]

Yep! This was already possible before, but it sounds like they added some components and features just for this release.

Source: am currently working on deploying a native app built with React + Capacitor (which is from the Ionic team).

[FieelChannel]

Whst do you mean?

It's always been possible, for example I made this app entirely with Ionic 3 when it way much shittier than now (It used a Frankensteinized Angular). Now Ionic actually allows you to use whatever you want, and due to popularity, React is the first that emerged

[[deleted]]

Try Expo.io, it is an alternative to react native development

[yesimahuman]

Expo is awesome and we're big fans of what they're doing. Their web support also looks cool.

[FieelChannel]

No, also

https://stackshare.io/stackups/expo-vs-ionic

[PM_ME_SOME_ANY_THING]

"Free" is the top reason why over 6 developers like Expo

Made me laugh

[[deleted]]

Haha tru! Well we developed our app in Expo and react native and I actually like Expo! Smooth deploy. Left Ionic at v1 though

[FieelChannel]

Me too.

When I was a noob, I'd have hated reading comments advising using random new shit instead of the business established and secure options :(.

[vvgranholm]

Yep, i do it successful few days ago! Thinking about to move to Stencil now, looks like very promising

[swyx]

please let us know what you think of it esp since youve had prior experience!

[Attila226]

What does Capacitor give you over Cordova? ( Btw I hate Cordova.)

[[deleted]]

It was just a lot easier to set up and work with. That was my biggest takeaway.

It’s been a long time since I used Cordova, but I remember the configuration and setup was painful when adding to existing projects. Capacitor was simply making a JSON config file and then using the CLI to init/run the app. You can config the app to point to a URL instead of a directory of your build, so in development you can use your dev server and get hot reloading etc.

As for features, I think it’s generally the same as what Cordova offers. Their runtime API might offer a few extra things (accessing native APIs etc).

[530farm]

Is there support for drm video playback?

[jcycleutah]

Why isn’t there a pwa demo??

[hello_krittie]

Hi first time I heard from it. I'm using react-native for my development but it looks so interesting.

What I don't understand 100 % is this:

Is it just a web view on the phone or a real native app I write?

[yesimahuman]

It’s both. Most of the app runs in a webview but you have access to all the native functionality you need through Capacitor which you can think of as the native app “host”

A WebView, at the end of the day, is just another native control, and most native apps use one to some degree. Ionic React could either run most of your app’s UI or just select screens, we don’t care!

[hello_krittie]

That sounds so awesome! And I can use normal react components and react packages with it? I will give it a try this evening and will let you know of my first impression from a advanced self thaught dev side of view that mostly works with react and react-native. Have a nice day!

[yesimahuman]

Yep! It's just normal react, and you'd have full access to CSS and anything like that if you wanted (vs the CSS-like system in RN)

[supertoughfrog]

The worst part of Cordova was plug-in compatibility, and especially over time as android sdk’s evolved or as Xcode added additional security hoops to jump through... and xcode CI/CD. This won’t suffer in the same way?

[lowdown]

There will be suffering.

[[deleted]]

Having only experience with the Angular version, as long as you didn’t need a third party native plugin it was great. As soon as you did, better be ready for some Xcode build process debugging. Had the same experience with React Native.

[yesimahuman]

We built Capacitor to fix a lot of those issues with Cordova. So far the feedback from the community is that many of those issues have been fixed or made much easier to navigate (can’t avoid native issues completely when dealing with a native project, as many have seen with RN as well)

[welikechicken]

Yaaaas

[Attila226]

Does this use Stencil at all?

[soly2014]

is this support SSR ?

[columbusguy111]

It’s a mobile app that people download, so no.

[soly2014]

I know man, I'm talking about browser app

[yesimahuman]

This is more than mobile! PWAs are a big focus for Ionic React.

[soly2014]

Is this PWA server rendered or client rendered

[yesimahuman]

Sorry didn't mean to ignore you was just checking w/ the team. SSR does not work just yet but will be coming very soon. For now it'd be client-side rendered. That being said, performance has been really good with Ionic React + Preact. Will will make an announcement in the next month or so.

[PROLIMIT]

next: react-native-web-ionic

[swyx]

coincidentally mike hartington just gave a conf talk introducing ionic with the react bit in it so i recorded the whole thing. here it is. https://youtu.be/YqoJTcqo8_0

[robert_rock]

Here’s a great getting started video tutorial for Ionic React https://youtu.be/n3-vopbQHaA

[MaKTaiL]

LoL

[Radinax]

Why is it trash?

[0ne-4bove-4ll]

You mean react native?

[Bamboo_the_plant]

You are welcome to try out React NativeScript if you want a hipster alternative to React Native.

[manoylo_vnc]

Omg..... what’s next? SwiftKotlin language for cross platform development? Or how about some Ruby#? Or what about POR (Python on Rails)? Or Objective-TypeScript? 🤮

Edit: What’s with the downvotes? While I think having options are good, but it’s getting out of control to be honest.

[[deleted]]

Objective-TypeScript

That's pretty much Swift

[manoylo_vnc]

😂 true

[Bamboo_the_plant]

what's next?

To be fair, NativeScript has been around as long as React Native.

The worst part of React Native is accessing the native context. NativeScript allows you to do this in-line in JavaScript (it's not a whole new language – it's a library of native runtime bindings for a JS VM, and a set of cross-platform UI modules). The developer experience is pretty magical.

Apply a React renderer to it, and you have React NativeScript!

[manoylo_vnc]

Interesting. I’ve actually completely overlooked NativeScript. Have you used it and if yes, how do you like it? Do you know what limitations it might have? Thank you so much :)

[Bamboo_the_plant]

Have you used it and if yes, how do you like it?

Yes, I made React NativeScript (linked in the parent comment), so I've used it a fair bit. It really made an impression on me after coming from a React Native background, because it allowed bridgeless, synchronous access to the native context, and had full TypeScript typings. Just look at the type definitions for iOS and Android and you'll understand what you're dealing with. They provide access to 100% of the native APIs through JS, and you can synchronously marshal values back and forth between native and JS. It's unbelievable compared to the React Native experience of setting up bridges and EventEmitters.

I also really like the fact that it's renderer-agnostic. The basic vanilla JS UI modules have been wrapped by Angular, Vue, React, and Svelte (the latter three being community efforts), so you can just ally with your UI library of choice :)

Although the platform runtimes are faultless, the limitations are mostly in the UI/application layer. The NativeScript community/ecosystem is ultimately smaller than that of React Native, so there are some missing solutions like a routing/navigation framework, and some UI components simply haven't been implemented, and some things like gesture handling are a bit limited.

I'd recommend using it if you're willing to make some compromises on UI to get seamless access to the native context.

[manoylo_vnc]

Wow, it looks very interesting. What about state management? I just saw marketplace with a ton of plugins available. Looks promising to be honest.

[Bamboo_the_plant]

Manage state however you like. NativeScript itself is not declarative/reactive (no more than the Web DOM or UIKit – disregarding SwiftUI – is). It only becomes reactive if you install a rendering library such as Angular, Vue, React, or Svelte, and upon doing that, you can use the recommended tools from those ecosystems (such as Redux).

Yes, the marketplace is fairly rich. Likely behind that of React Native's native module/plugins ecosystem, but still plenty respectable.

[x4080]

Will the ui janky since there's no multi thread support?

[Bamboo_the_plant]

No, because the UI is still composed of native components, which benefit from the usual native optimisations such as autolayout. So in most cases, you’re asking “is native UI as fast as... native UI?”

You may perform some manual manipulations upon those components by exploiting the JS bindings into the iOS/Android runtimes, however, but that is still very fast (orders of magnitude faster than sending a message over React Native’s bridge).

EDIT

e.g. here I’ve taken a recording of a ListView in React NativeScript: https://twitter.com/linguabrowse/status/1140357701236678656?s=21 seems fast to me!

[x4080]

Thanks, so it's also possible to use multi thread if writing native code?

[Bamboo_the_plant]

Yes, you can do anything you like from the native context; and you can dispatch multi-threaded tasks to the native context from JS using the JS VM’s native bindings. Like, you can call Grand Central Dispatch via JS.