4 ms·

Is React Native performance really good? Compared to what? I've found RN performance passable but underwhelming. It seems generally worse than a good native UI

Is React Native performance really good? Compared to what? I've found RN performance passable but underwhelming. It seems generally worse than a good native UI, and no better than a mobile web UI. I don't understand why the JS is run in a separate thread, rather than just using the UI thread for UI (as it's intended for). By making all the interaction with the native toolkit asynchronous, it adds extra latency and leads to unavoidable glitches in native widgets used as controlled components. Animation in React Native is much more of a hassle than UIKit or even CSS. (About the same as native Android, though, where it's also pretty tedious.)

karatestomp 7y ago
> Animation in React Native is much more of a hassle than UIKit or even CSS. (About the same as native Android, though, where it's also pretty tedious.) My experience was that RN was way more helpful on Android than on iOS, in general. But that has more to do with Android than RN, which achieves its utility on that platform by papering over a pile of bad decisions, inexplicable awkwardness, and half-finished-apparently-by-the-Summer-interns APIs, none of which should be problems in the first place. I'd seriously consider using it for just for Android even if I wrote a separate, native iOS version of the same app.
- iainmerrick 7y ago
  Yes, agreed! The tools are starting to get fairly good on Android. There’s a lot to like about Android Studio. But the actual platform APIs are still a mess.
partyboat1586 7y ago
The JS is run in a separate thread because the real-time operations are meant to be handled fully native. If you are constantly passing large amounts of data between the JS thread and the Native thread or constantly changing the layout (which passes data between the threads) you are doing it wrong. You can't code it like a web app where you just replace one large node tree with another if you want it to be instant, you have to mount both and keep one invisible, either using a navigation library or custom code. This way layout changes are smaller packets so it doesn't saturate the low bandwidth of the thread bridge. The extra latency for a layout change is most noticeable if it's an animation hence why you should use native animations not JS polling animations. I agree the Animations API is not as easy as CSS. If you want to do complicated stuff you need a lot of experience with it. This is one of the major hurdles for new RN devs. Its possible to get good performance our of it, better than mobile web UI, you just need to have some experience with what costs and what doesn't.
- LinguaBrowse 7y ago
  > If you are constantly passing large amounts of data between the JS thread and the Native thread or constantly changing the layout (which passes data between the threads) you are doing it wrong. I’m working on an alternative to React Native that does exactly this, and it works absolutely fine: React NativeScript. In NativeScript (and thus also React NativeScript), the JS logic and the UI both execute on the UI thread. Furthermore, you can synchronously access any native API without needing to set up bridging code; bindings to the whole Obj-C/Java runtimes are ready-generated. https://github.com/shirakaba/react-nativescript https://github.com/shirakaba/react-nativescript https://react-nativescript.netlify.com/ https://react-nativescript.netlify.com/
  - partyboat1586 7y ago
    Sweet, no more bridge bandwidth issues. I'll check it out.
  - iainmerrick 7y ago
    Sounds great! After using RN for a while, that’s exactly how I think it should have been designed in the first place. Good luck!
- iainmerrick 7y ago
  If you are constantly passing large amounts of data between the JS thread and the Native thread or constantly changing the layout (which passes data between the threads) you are doing it wrong. If I'm coding in a style that works fine on web, and also works fine in native code, but is slow in React Native, then I'd suggest I'm not the one doing it wrong, it's React Native itself. This way layout changes are smaller packets so it doesn't saturate the low bandwidth of the thread bridge. Even if they were to stick with the multithreaded architecture, it should be possible to build a layout structure in the background thread and just hand ownership over to the UI thread. I believe the RN team are working on doing this with their new Hermes runtime (sharing objects directly rather than marshalling them into and out of the JS engine), so that ought to help a bit. But I really think the threading model is just wrong-headed in the first place. Its possible to get good performance our of it, better than mobile web UI Is there a case study or even just an example that demonstrates that? I'm skeptical. Mobile browsers are very fast these days, so there's no obvious reason why RN should necessarily be faster. I suppose RN might have an edge if you're making extensive use of native code. But then calling native code from RN is very laborious, so RN doesn't exactly pull its own weight in that scenario.
LinguaBrowse 7y ago
> I don't understand why the JS is run in a separate thread, rather than just using the UI thread for UI (as it's intended for). By making all the interaction with the native toolkit asynchronous, it adds extra latency and leads to unavoidable glitches in native widgets used as controlled components. Totally agreed. I’m working on an alternative to React Native that addresses exactly this: React NativeScript. In NativeScript (and thus also React NativeScript), the JS logic and the UI both execute on the UI thread. Furthermore, you can synchronously access any native API without needing to set up bridging code; bindings to the whole Obj-C/Java runtimes are ready-generated to begin with. https://github.com/shirakaba/react-nativescript https://github.com/shirakaba/react-nativescript https://react-nativescript.netlify.com/ https://react-nativescript.netlify.com/

karatestomp 7y ago

> Animation in React Native is much more of a hassle than UIKit or even CSS. (About the same as native Android, though, where it's also pretty tedious.) My experience was that RN was way more helpful on Android than on iOS, in general. But that has more to do with Android than RN, which achieves its utility on that platform by papering over a pile of bad decisions, inexplicable awkwardness, and half-finished-apparently-by-the-Summer-interns APIs, none of which should be problems in the first place. I'd seriously consider using it for just for Android even if I wrote a separate, native iOS version of the same app.

iainmerrick 7y ago
Yes, agreed! The tools are starting to get fairly good on Android. There’s a lot to like about Android Studio. But the actual platform APIs are still a mess.

partyboat1586 7y ago

The JS is run in a separate thread because the real-time operations are meant to be handled fully native. If you are constantly passing large amounts of data between the JS thread and the Native thread or constantly changing the layout (which passes data between the threads) you are doing it wrong. You can't code it like a web app where you just replace one large node tree with another if you want it to be instant, you have to mount both and keep one invisible, either using a navigation library or custom code. This way layout changes are smaller packets so it doesn't saturate the low bandwidth of the thread bridge. The extra latency for a layout change is most noticeable if it's an animation hence why you should use native animations not JS polling animations. I agree the Animations API is not as easy as CSS. If you want to do complicated stuff you need a lot of experience with it. This is one of the major hurdles for new RN devs. Its possible to get good performance our of it, better than mobile web UI, you just need to have some experience with what costs and what doesn't.

LinguaBrowse 7y ago
> If you are constantly passing large amounts of data between the JS thread and the Native thread or constantly changing the layout (which passes data between the threads) you are doing it wrong. I’m working on an alternative to React Native that does exactly this, and it works absolutely fine: React NativeScript. In NativeScript (and thus also React NativeScript), the JS logic and the UI both execute on the UI thread. Furthermore, you can synchronously access any native API without needing to set up bridging code; bindings to the whole Obj-C/Java runtimes are ready-generated. https://github.com/shirakaba/react-nativescript https://github.com/shirakaba/react-nativescript https://react-nativescript.netlify.com/ https://react-nativescript.netlify.com/
- partyboat1586 7y ago
  Sweet, no more bridge bandwidth issues. I'll check it out.
- iainmerrick 7y ago
  Sounds great! After using RN for a while, that’s exactly how I think it should have been designed in the first place. Good luck!
iainmerrick 7y ago
If you are constantly passing large amounts of data between the JS thread and the Native thread or constantly changing the layout (which passes data between the threads) you are doing it wrong. If I'm coding in a style that works fine on web, and also works fine in native code, but is slow in React Native, then I'd suggest I'm not the one doing it wrong, it's React Native itself. This way layout changes are smaller packets so it doesn't saturate the low bandwidth of the thread bridge. Even if they were to stick with the multithreaded architecture, it should be possible to build a layout structure in the background thread and just hand ownership over to the UI thread. I believe the RN team are working on doing this with their new Hermes runtime (sharing objects directly rather than marshalling them into and out of the JS engine), so that ought to help a bit. But I really think the threading model is just wrong-headed in the first place. Its possible to get good performance our of it, better than mobile web UI Is there a case study or even just an example that demonstrates that? I'm skeptical. Mobile browsers are very fast these days, so there's no obvious reason why RN should necessarily be faster. I suppose RN might have an edge if you're making extensive use of native code. But then calling native code from RN is very laborious, so RN doesn't exactly pull its own weight in that scenario.

LinguaBrowse 7y ago

> I don't understand why the JS is run in a separate thread, rather than just using the UI thread for UI (as it's intended for). By making all the interaction with the native toolkit asynchronous, it adds extra latency and leads to unavoidable glitches in native widgets used as controlled components. Totally agreed. I’m working on an alternative to React Native that addresses exactly this: React NativeScript. In NativeScript (and thus also React NativeScript), the JS logic and the UI both execute on the UI thread. Furthermore, you can synchronously access any native API without needing to set up bridging code; bindings to the whole Obj-C/Java runtimes are ready-generated to begin with. https://github.com/shirakaba/react-nativescript https://github.com/shirakaba/react-nativescript https://react-nativescript.netlify.com/ https://react-nativescript.netlify.com/