3 ms·

All in all is it still a terrible idea to try to build native apps with HTML? In my experience going back to Phonegap, I have tried many evolutions of these pr

All in all is it still a terrible idea to try to build native apps with HTML? In my experience going back to Phonegap, I have tried many evolutions of these products over the years and all of them are terrible. Like unusable. 3fps and unresponsive. Is React Native a new generation, a new stable outlook, or is it simply making React 3fps and unresponsive?

lwansbrough 8y ago
React Native is native. There’s no HTML. You’re using JSX (probably) which is basically XML in JavaScript (it’s not as bad as it sounds) to build native UI. Can’t stress the native bit enough. Where React Native differs from truly Native is that UI orchestration is batched into chunks on the JS side and sent asynchronously to a native receiver, which then applies those changes to the native side. This means that currently if your JS thread gets blocked, or the main thread gets blocked, your app will snag. Performance is a top priority for React Native and it mostly fulfills that goal too. It’s not hard to keep your app running at 60fps.
- wvenable 8y ago
  React native is an abstraction layer. It has all the problems of any abstraction layer has ever had on any platform that has ever existed. The lessons from this article (that is 15 years old) is still relevant today: https://www.joelonsoftware.com/2002/11/11/the-law-of-leaky-abstractions/ https://www.joelonsoftware.com/2002/11/11/the-law-of-leaky-a... Using the term "native" to say something is "not HTML" is sort of disingenuous. There is just a whole different custom layer in the middle instead.
  - ricardobeat 8y ago
    Not disingenuous at all - all the rendering code is _native_, no subtle hidden meanings. No webviews, no custom drawing, all existing platform components - that's as 'native' as you can get.
    - wvenable 8y ago
      By that argument, all the rendering code in my browser is also native. The browser takes a markup language and CSS and renders this text using native components. React Native takes smaller markup and a subset of CSS and renders it using native components. So how is that as native as you can get in comparison? I agree that layer between markup and native controls is thinner in React Native but the actual abstraction is actually very comprehensive. iOS and Android applications are constructed quite differently from each other. And React Native is itself different from that. It has an entirely different API with a whole different model for how applications are made. So much so that the platform differences are almost completely papered over. So is that native? I disagree that the idea of "native components" trumps the fact that practically everything you do in React Native is different from the underlying platform. Ultimately that seems like the least important detail. The abstraction is actually what makes React Native useful but it shouldn't be sold as "native".
jwarren 8y ago
RN isn't a wrapped HTML renderer like Phonegap. It uses bridge code to render native UI powered by JS business logic. You still write in JSX, which makes layout pretty straightforward. With some careful optimisation, I had pretty solid 60fps scrolling performance on 1000 item/image lists on old Android devices.
- i6mi6 8y ago
  Did you use FlatList or ListView (or a custom module) for this? I've noticed that ListView sometimes does much better than FlatList, interested to hear what you used.
  - jwarren 8y ago
    FlatList was absolutely the way to go here. In fact, we initially built the list in question when ListView was the only option. During development, FlatList was made available as an experimental component. It made a huge difference switching over to it. The optimisation we needed to do was to use onViewableItemsChanged to toggle the visibility of images. We found that otherwise it wasn't properly emptying the memory of Android devices, and it was easy to crash older devices. After implementing that, we got silky smooth 60fps everywhere. The only issue was there was a bug in RN core. We submitted a PR which was finally accepted about 6 months later: https://github.com/facebook/react-native/issues/16612#event-1628339588 https://github.com/facebook/react-native/issues/16612#event-...
imeron 8y ago
Phonegap is pure crap in my mind. React Native is much much better, but still has it's issues. Also, it's not HTML based, you write JavaScript code to drive native components.
Fifer82 8y ago
Thanks for pointing it out to me guys, I am not in the react world and don't mind getting down votes for being corrected. Appreciated.
- andrewingram 8y ago
  You weren't rude, and not knowing something shouldn't be justification for a downvote. So you got an upvote from me.

lwansbrough 8y ago

React Native is native. There’s no HTML. You’re using JSX (probably) which is basically XML in JavaScript (it’s not as bad as it sounds) to build native UI. Can’t stress the native bit enough. Where React Native differs from truly Native is that UI orchestration is batched into chunks on the JS side and sent asynchronously to a native receiver, which then applies those changes to the native side. This means that currently if your JS thread gets blocked, or the main thread gets blocked, your app will snag. Performance is a top priority for React Native and it mostly fulfills that goal too. It’s not hard to keep your app running at 60fps.

wvenable 8y ago
React native is an abstraction layer. It has all the problems of any abstraction layer has ever had on any platform that has ever existed. The lessons from this article (that is 15 years old) is still relevant today: https://www.joelonsoftware.com/2002/11/11/the-law-of-leaky-abstractions/ https://www.joelonsoftware.com/2002/11/11/the-law-of-leaky-a... Using the term "native" to say something is "not HTML" is sort of disingenuous. There is just a whole different custom layer in the middle instead.
- ricardobeat 8y ago
  Not disingenuous at all - all the rendering code is _native_, no subtle hidden meanings. No webviews, no custom drawing, all existing platform components - that's as 'native' as you can get.
  - wvenable 8y ago
    By that argument, all the rendering code in my browser is also native. The browser takes a markup language and CSS and renders this text using native components. React Native takes smaller markup and a subset of CSS and renders it using native components. So how is that as native as you can get in comparison? I agree that layer between markup and native controls is thinner in React Native but the actual abstraction is actually very comprehensive. iOS and Android applications are constructed quite differently from each other. And React Native is itself different from that. It has an entirely different API with a whole different model for how applications are made. So much so that the platform differences are almost completely papered over. So is that native? I disagree that the idea of "native components" trumps the fact that practically everything you do in React Native is different from the underlying platform. Ultimately that seems like the least important detail. The abstraction is actually what makes React Native useful but it shouldn't be sold as "native".

jwarren 8y ago

RN isn't a wrapped HTML renderer like Phonegap. It uses bridge code to render native UI powered by JS business logic. You still write in JSX, which makes layout pretty straightforward. With some careful optimisation, I had pretty solid 60fps scrolling performance on 1000 item/image lists on old Android devices.

i6mi6 8y ago
Did you use FlatList or ListView (or a custom module) for this? I've noticed that ListView sometimes does much better than FlatList, interested to hear what you used.
- jwarren 8y ago
  FlatList was absolutely the way to go here. In fact, we initially built the list in question when ListView was the only option. During development, FlatList was made available as an experimental component. It made a huge difference switching over to it. The optimisation we needed to do was to use onViewableItemsChanged to toggle the visibility of images. We found that otherwise it wasn't properly emptying the memory of Android devices, and it was easy to crash older devices. After implementing that, we got silky smooth 60fps everywhere. The only issue was there was a bug in RN core. We submitted a PR which was finally accepted about 6 months later: https://github.com/facebook/react-native/issues/16612#event-1628339588 https://github.com/facebook/react-native/issues/16612#event-...

imeron 8y ago

Phonegap is pure crap in my mind. React Native is much much better, but still has it's issues. Also, it's not HTML based, you write JavaScript code to drive native components.

Fifer82 8y ago

Thanks for pointing it out to me guys, I am not in the react world and don't mind getting down votes for being corrected. Appreciated.

andrewingram 8y ago
You weren't rude, and not knowing something shouldn't be justification for a downvote. So you got an upvote from me.