How Discord achieves native iOS performance with React Native • Hacker News Board

Re: How Discord achieves native iOS performance with React Native

#91

Post by mrkcsc » Fri, Nov 08, 2019, 5:34 PM UTC

js2 wrote: post #81

Some people, when confronted with having to develop a mobile app on Android and iOS, think “I know, I'll use React Native.” Now they have three problems: Android, iOS and React Native. My company has both natively developed Android and iOS apps, as well as a few RN apps. I'm in the developer tooling part of the company. Indeed, the RN apps did allow those teams to add developers who had only JavaScript coding experie…

I've made many native apps (including our own native Android app) and performance issues are definitely still a thing with native code :P

The amount of work was non-trivial, however, in absolute time it was a few weeks of work that we have only done once after first creating the app many years ago.

It's likely that we we would have considered doing something like this even if the app was in pure iOS - Discord has gotten much bigger.

Mobile teams I have seen for apps at scales similar to Discord tend to run anywhere from 10-20+ dedicated engineers. By comparison I believe we have been able to accomplish a lot with a much smaller team.

Re: How Discord achieves native iOS performance with React Native

#92

Post by mrkcsc » Fri, Nov 08, 2019, 5:44 PM UTC

reimertz wrote: post #2

I almost got an tear in my eye reading this, being heavily invested in React-Native and the worries I’ve felt since Airbnb abandoned the ship. I’ve always loved the framework and the beauty of being able to write native , cross-platform applications as a web developer. And what they are doing right now, trying to get rid of the js-thread bottleneck in 2020 excites me a lot! > “While it was closed it always had a spin…

Thanks for the read, and the support!

Re: How Discord achieves native iOS performance with React Native

#93

Post by reimertz » Fri, Nov 08, 2019, 5:47 PM UTC

coldtea wrote: post #51

reimertz wrote: post #34

Earlier quoted context omitted.

Is that really true? ‘react-native init AppName’ and your ready to go? What is wrong with react natives official documentation? I think what many mess up(me included) is to look at the wrong version of the documentation. I guess that could be a little bit more obvious. edir: oh, typescript! Yeah, that is a little bit more troublesome; https://facebook.github.io/react-native/blog/2018/05/07/usin...

> Is that really true? ‘react-native init AppName’ and your ready to go? If you already know React/Redux/etc, perhaps. Else "Ready to go" after reading about several concepts, libraries, and systems and getting how the work together, what performance pitfalls they have, etc...

If you would initiate a Swift app or any other for type of app for that matter, what language/frameworks give you a complete solution with state etc done for you.

I guess I’m asking; what other solution have you found that solves everything for you?

Re: How Discord achieves native iOS performance with React Native

#94

Post by mrkcsc » Fri, Nov 08, 2019, 5:48 PM UTC

ericlewis wrote: post #47

londons_explore wrote: post #5

Earlier quoted context omitted.

A spinner running in the background consuming CPU is two bugs... The non-obvious one is why is the framework consuming any CPU time at all on something not visible? When an element tries to animate, and the whole element is covered/offscreen, the framework should simply pause the animation. When the element becomes visible again, it's simple to calculate how long the element has been invisible, and fast-forward the a…

I’ve seen this happen especially with Lottie. And what basically happens here is the actual drawing isn’t actually handled by react-native since the library is itself a native view to either platform. Therefore, react-native has no idea it’s wasting any resources because it’s not technically “in charge” of what exactly the native view itself is doing . It certain scenarios where it might be “covered up”, such as all…

The strongest RN teams and engineers I've seen tend to be those that either already have or are willing to acquire knowledge about how native app development works under the hood.

It greatly augments your ability to write elegant solutions to hard problems.

Some argue this is a large cost to bear - however I'd say it's one that is very reasonable to acquire. Having experience and knowledge in several languages/frameworks helps make one stronger engineer.

Re: How Discord achieves native iOS performance with React Native

#95

Post by reimertz » Fri, Nov 08, 2019, 5:49 PM UTC

rvz wrote: post #78

reimertz wrote: post #34

Earlier quoted context omitted.

Is that really true? ‘react-native init AppName’ and your ready to go? What is wrong with react natives official documentation? I think what many mess up(me included) is to look at the wrong version of the documentation. I guess that could be a little bit more obvious. edir: oh, typescript! Yeah, that is a little bit more troublesome; https://facebook.github.io/react-native/blog/2018/05/07/usin...

> edir: oh, typescript! Yeah, that is a little bit more troublesome; So appending '--typescript' is troublesome and not obvious? Like this? react-native init AppName --typescript That's it. I never knew in 2019 that adding an extra flag would be 'troublesome'. The description of your installation of a React Native and TypeScript project in 2018+ is greatly exaggerated.

According to the article, there are caveats.m, I don’t know, therefore I linked to the article.

Is the flag generating a project that works without anymore tweaking/setting up? If so, my reference to the blog is not accurate.

Also, a better reply would be “oh that article is not accurate anymore, now everything is setup for you I’d you add this flag!”

Re: How Discord achieves native iOS performance with React Native

#96

Post by mrkcsc » Fri, Nov 08, 2019, 5:50 PM UTC

beders wrote: post #38

Amazing job by the discord team having the patience with the available tools to analyze these problems and the stamina to dig deeper and deeper. Well done! It is quite interesting to see that the re-frame and fulcro authors were on the right track adding their own 'componentNeedsUpdate' layer which is very fast and will minimize the repainting React has to do. (Mostly thanks to immutability)

Thank you for the kind words!

Re: How Discord achieves native iOS performance with React Native

#97

Post by mrkcsc » Fri, Nov 08, 2019, 5:54 PM UTC

dannyr wrote: post #7

So Discord's iOS app is React Native while its Android app is native (i.e. Java/Kotlin)?

Blog author here - this is correct (mostly Kotlin :)

This is primarily an artifact of history for us. When we first set out to build the mobile apps, React Native for Android had not yet been open sourced so we had no choice but to build it in native.

That being said, the Android side of RN has always been more nascent and so one of the benefits for us has been not having to deal with some of those early bugs/issues while building our our current iOS app.

It's since become much more mature however - so we may explore RN for Android again someday.

Re: How Discord achieves native iOS performance with React Native

#98

Post by Aissen » Fri, Nov 08, 2019, 6:04 PM UTC

bsaul wrote: post #50

izacus wrote: post #24

Earlier quoted context omitted.

This is the approach we took at my current and previous mobile projects and has proven to be very effective (we chose C++ due to toolchain maturity over all platforms): - It forces you to think about your business logic vs. UI structure. - It forces you to make your core logic library easily testable. - Since you can deploy the core logic library anywhere, you get native, no Electron bullshit, support for pretty much…

how did the java interop work for you ? I used to work in a company that used that approach with gomobile (golang) , and frankly the dark magic required to have a decent java API to the shared library made me want to not touch that with a ten foot pole. I believe it was due to JNI but my memories may be wrong.

The answer is in the parent's comment. They used protobufs, so I guess there's no JNI, just a simple RPC over a local socket.

Re: How Discord achieves native iOS performance with React Native

#99

Post by nazka » Fri, Nov 08, 2019, 6:12 PM UTC

adatavizguy wrote: post #71

trevorah wrote: post #39

React Native is excellent for web teams that are creating a new mobile app. If your team has more experience with React than native iOS/Android, then it's a no-brainer. However, in my experience you get diminishing returns once your app has passed v1 and your customers expect more after the new-ness wears off. You find yourself spending more and more engineering effort to make your RN app to feel as good as existing…

I use react native svg with low level d3.js utils to produce data visualizations with a utility class that holds all the animation values across components and screens which is sort of a hack but very clean for animating several pseudo svg components. For me it isn't about look and feel so much as being able to quickly manage massive amounts of data for interaction and data viz. I use the ramda lenses, sagas, redux,…

Hum! I didn't know Ramda, very interesting... Thank you for sharing your stack :)

Re: How Discord achieves native iOS performance with React Native

#100

Post by coldtea » Fri, Nov 08, 2019, 6:42 PM UTC

reimertz wrote: post #93

coldtea wrote: post #51

Earlier quoted context omitted.

> Is that really true? ‘react-native init AppName’ and your ready to go? If you already know React/Redux/etc, perhaps. Else "Ready to go" after reading about several concepts, libraries, and systems and getting how the work together, what performance pitfalls they have, etc...

If you would initiate a Swift app or any other for type of app for that matter, what language/frameworks give you a complete solution with state etc done for you. I guess I’m asking; what other solution have you found that solves everything for you?

My point wasn't from someone who expects the language/environment to "solve everything".

It was from someone familiar with GUI programming, who wants to try doing it in React Native and suddenly finds tons of new concepts to keep in mind (compared to common native GUI frameworks/libs).