Why Discord Is Sticking with React Native
blog.discordapp.com
blog.discordapp.com
I guess that's one way to sugarcoat the fact that you're at the mercy of Facebook being timely in fixing bugs here…
EG: In Android in the past there have been bugs in core components like the `RecyclerView` (thing that renders lists) that forced us to downgrade and unlike with React - there is no option there to fork the source and make our own bug fix.
https://android.googlesource.com/platform/frameworks/support...
Native iOS would have been a better example as that code is not open source at all.
Their priorities may not align with yours, but it's not such a bad policy. If you don't like it, fork it?
Recently watched Angular Material first dismiss a glaring problem with datepicker, then sit on their hands [0] while some bloke made a complete fix, adjusting anything they brought up, then sit on their hands again [1] after it was finished until someone started building pressure again.
[0][1]: I didn't actually verify that. They might have had some really busy days. Point is they stuck to Google communication policy: try to not say anything at all.
Facebook's lawyers did some very questionable things to "open source" here.
Facebook differs from the standard in that they require your address, but I assume that is to make sure the CLA has the correct form
They even require you to sign their CLA just for README.md updates - that's not "being safe", that's "being willingly idiotic".
Facebook legal is not interested in changing the CLA requirements to something that doesn't discriminate, and despite the rather large number of people who work on their open source projects, who would all love for that CLA to fuck off so they can do open source properly, Facebook as an organisation is still not a good citizen in the open source space. They're still trying to put up a walled garden as much as they legally can, even if you think you can't see the wall anymore.
People don't remember what it's like, praying to dear gods that Microsoft patches that IIS bug before you lose your last customers.
I wish more companies would give developers about 10% of their time to develop things they think would benefit the company, whether it's internal tools or open source projects they rely on (or building new things). Just give devs every Friday or every other Friday with free reign to code or learn new things.
Ah well... If the projects they rely on stop being maintained they just suck it up and let it foster eternally till forced to migrate.
Dear Discord:
Your bread and butter seems to rely upon React / React Native. It's an open source project, pay your employees to contribute to it!
Complaining about FB not prioritizing/fixing the particular issues that affect you the most seems a little bit insane to me. Of course they have their own priorities.
Regardless, you're really at the mercy of _any_ maintainer of components you depend upon heavily. It's a fact of life unless you feel like building it all from scratch.
I know this comment is a joke but in all seriousness even if we did move away I think it would still mean we got several years of great utility out of the framework.
No tech lasts forever and it’s important to be open to change as well as being mindful to not chase the latest trend - as in all things, balance is key.
Any other insights would be great, as I'm planning to start converting my web app to RN in the next months and didn't know Android would be a problem.
When we originally got it running on Android (without the chat view since that component is native in the iOS app) we found that it performed quite poorly due to most of our pages being heavy on data and UI - as well as being very reactive (a typical discord server might have hundreds of permissions, messages and users all changing/updating in real time). React Native is single threaded and while iPhone’s have great single threaded performance, Android phones are more reliant on multiple cores and RN as I understand it mostly can’t take advantage of that.
On higher end Android phones the performance was actually fairly acceptable out of the box, but our user base has a lot of gamers who are running very old Android phones from many years ago - and in those situations the lag was unacceptable. For iOS, most users tend to only last one or two hardware generations behind.
Additionally, at the time React Native for Android had just been released and there were a whole host of other issues at the time - bugs and lack of Android specific components like the Navigator (which have since mostly been ironed out).
Today I think it is possible to build a fast React Native Android application and I would recommend someone starting from scratch do so :). However now the challenge is that we have an existing Native Android app so our users already have a baseline expectation of feature parity and performance. If we switch over we must meet or exceed that bar.
I'm not an expect on voice but iirc we do use a different codec than Skype so the audio is not going to be identical however, we have advanced settings in the `Voice and Video` section of the settings that allows you to enable/disable things like Echo Cancellation and Voice Suppression that could be the cause of the feedback.
The only thing left that really bugs me is the fact that you can't paste images from the clipboard into the message field. It's made me change my entire workflow, from copying images to saving them.
Sorry to use this as a soapbox for my pet issue, but I saw the opportunity :P
So stay tuned!
Thanks for the kind words, the team really appreciates it.
* Have you evaluated cross-platform "native-ish" alternatives? (Nativescript, Flutter, etc.)
* What does the "lack of 64-bit support" mean for Android?
* This can be worked around by deferring work when doing transitions/animations based on user interaction but at the time we only had a single Android Engineer (myself) and I felt it would be an overly large hurdle to cross. The team is however still interested in trying again some point in the future now that we have more time for it.
* The minimum version we support is API level 16 which is quite old and we may eventually bump that to 17.
* We have not evaluated any native-ish alternatives mostly due to bandwidth but also because the goal is to re-use our stores/business logic from the desktop/ios clients so we can move faster.
* On 64-bit support https://github.com/facebook/react-native/issues/2814 it ca be worked around without much consequence but is a consideration as ones application grows in complexity and dependencies.
In your defense, it's a cancer that all "modern" apps done in javascript suffer from, but still, why?
Edit: for those who don't want to click, it's a screnshot of the os x activity monitor showing the worst memory consumption, in order: Discord Helper 1.98 Gb, kernel_task 1.67 Gb, Skype Helper 1.58 Gb, Slack 1.20 Gb :)
Modern RAM doesn't work the way people who complain about Slack/et al think it does. The operating system will cull it from other places when it needs it; even a native Cocoa app will not dump memory you're done with until the system decides it needs it for something else, because on the off-chance your app ends up needing it again, it's already allocated. "purge" exists for a reason.
It's like when you pull up a StackOverflow answer for "how can I judge how much memory usage my process has?", and the top voted answer is some bash script to determine peak ps, when every other answer tries to explain that that's only one measure of memory and isn't even totally accurate.
Furthermore, that nice feature of most modern apps where you're scrolling up rapidly and an image is nice and ready to present? Images are big, especially when we all use retina displays. They take up memory. There was a blog post that went on HN a few months ago but didn't seem to make the front page, wherein the author determined that forcing Electron to dump image cache junk lowers the memory usage substantially.
Could Electron & co do better? For sure. Loading an entire browser for a UI does kind of suck. But stop acting like all the stuff that the browser does for you _for free_ is or should be zero-cost.
End rant, I guess.
If i don't restart the machine for a year, is the pretty chat app going to keep in ram, uncompressed, all the cat pictures that people posted in the last 12 months then? Do you think that's sane?
That is just not how memory works anymore, at least not how the OS reports it to you.
> The system was responding slowly when I made that screenshot because it started using swap.
How did you determine this? If you're looking at swap usage in activity monitor, this is also not an accurate metric. I'm sitting here with 14GB used, 18GB free and 2GB of swap usage. Using swap does _not_ mean you are out of ram, it just doesn't work like that.
Is the memory pressure graph in activity monitor yellow or red? If not, which is likely the case, you don't have memory issues. You don't need more memory and it doesn't matter how much memory your applications are using.
I don't know how your OS X works, but mine tends to not go into swap before running out of ram. It does not come out of swap when ram is freed indeed, but when you freshly boot it it will stay at swap used: 0 bytes until someone posts too many cat pictures in Slack or Discord.
Or until i forget how many VMs I opened, but that's work and actually useful.
Edit: I can't reply to your reply because HN doesn't like so many indents. I also don't want to continue a flame war about observed behaviour vs the theory of shared libraries and memory mapped files etc so I'll stop here.
...until I hit 8 gb of ram (the amount installed on my machine). The second that happens, the entire OS grinds to a halt. It starts with 5-10 seconds to change focus, and can go as high as 5 minutes if I don't do something about it. My best option for dealing with it is usually opening a new console (Ctrl-Alt-F3) and killing Android studio or the gradle daemon (the most common culprits). If I'm able and patient enough to open system monitor at this point, I can see that my swap usage has increased dramatically.
Again, I can't speak to "how memory works", but I am absolutely the expert on how my computer performs, as described above.
I'm assuming you mean 8GB of ram 'used', by some metric of 'used'. What tends to confuse the hell out of people is what 'used' means. It varies by how it's measured, what OS you are using and how that OS is configured. I haven't a clue how Fedora 27 is configured nor how you are determining 'used' RAM, so my comment may well not apply to your use case.
And frankly, it seems to me like the issue is the OS being unoptimized or apps being leaky on it, because my Windows 7 machine with worse specs almost never has such issues, under any kind of similar load (and exactly the same apps).
If your RAM is full, there is a probability that something will need to be read from disk. If your RAM is empty, there is a certainty that something will need to be read from disk or from the network. A probability of a slow operation is preferable to the certainty of a slow operation. Something in RAM is preferable to nothing in RAM.
The pretty chat app will not keep all of your cat pictures in RAM indefinitely, because the OS won't let it. If something else needs that RAM, then the cat pictures will be paged to disk. The OS is incredibly good at figuring out what belongs in RAM and what belongs on disk at any given moment.
You probably run a machine with above average ram and ship apps with below average performance for lack of this understanding.
(all speeds are read time) RAM speed: 35 GB/s Disk speed: 3.2 GB/s Network speed: 0.87 GB/s
While you aren't wrong, I have no problem loading cat pictures at network speed instead of ram speed.
I think the real issue here is network consumption is expensive. It's better if you store all your cat pictures for as long as possible. People would complain in discord generated gigabits of temporary disk files, but RAM usage can always be freed if the OS demands it.
Its not clear to me how it would apply to other memory how does the os communicate to Firefox that it needs to clear out some memory for Chrome save by moving less used pages to swap with the probable high cost, of moving it back later. Further while some intelligence may be exercised insofar as which pages to swap it won't be made with the benefit of the app deciding which chunks of data to keep closer at hand.
Modern memory works the same way it always has and the best performance has always been maintained by staying within the boundaries of available ram and not needing to swap much.
When most computers have no more than 8gb of ram and consumer machines are likely to have 4 its kind of silly for a chat app to use 1-2 sillier yet to claim that the os will fix the matter.
RAM that's reported as "free" by OS X's activity monitor/windows' task manager is used for disk caching.
RAM reported as in use by an application is in use by that application. It could be using some sort of internal cache, but it does not give that memory up to other apps under memory pressure except by the OS swapping it out which gets very slow.
The only reliable way to learn the memory consumption of a process is to somehow make sure other processes don't allocate/deallocate memory, kill the process in question and watch the difference in global memory consumption.
For anyone interested to repeat it fast, run this in powershell:
Get-Process | Format-Table WorkingSet > c:\data.txt
Import contents in excel and sum all cells.
I've seen startup latency much slower than that on my iPhone SE. In the best case, the application takes about six seconds to cold boot when I tap on a notification. Sometimes it's closer to fifteen or twenty seconds if the app sits on the "connecting" screen for a while. It's difficult to understate how much slower the app feels than everything else on my phone.
If we had some magical way to make the dev treadmill run slower than the user treadmill, we'd see better architectures in many cases. In that alternate world it would be easy to precompile the javascript and load 20 times faster.
iOS users tend to run newer devices generally which might lead some devs to feel that this extra optimization isn’t worth the time it takes, but I disagree because it doesn’t benefit only users with older devices – it’ll make your app run better on newer devices too and make it that much more unlikely that your app gets killed or causes the OS to kill other apps in multitasking scenarios (iOS kills resource hogs much more readily). In short, everybody benefits.
With this same thought process, I plan to pick up one of the 120hz iPad Pro models to test on soon. It’s one of the most powerful iOS devices available, but driving 120FPS isn’t easy and given how many apps fail to hit the target of 60FPS on similar hardware I’d bet that a huge number, perhaps even most, don’t come anywhere close to running at 120FPS even with the extra horsepower.
Meanwhile, we keep working towards to improving our user experience on all the devices especially the lower-end ones (I personally use iPhone 6 as my go-to test device). For instance, we will add caching very soon to shorten the interaction waiting. Hopefully you will enjoy more using Discord on your SE then :)
Thanks for all of your work.
And thank you for helping make Rust awesome.
I believe it's something we may eventually take on - just not currently planned - there are a lot of ways we could make the nitro experience better.
One question that popped up in my while reading the article was would you consider doing the android app in react native if you had to start now ? Or do you still feel it lacks the coherency it has with iOS.
While the performance footprint is mostly the same - the ecosystem and feature set around it has improved a ton to the point where I believe you could get it 90% there very quickly.
One of my friends has a small startup and they went full React Native as a team of two and they describe the Android side as "free" as in they really just focus on iOS and it 90% of the time it also works fine on Android (they care less about older devices at the moment so they don't spend time optimizing for those).
Android inherently will always have challenges due to the vast number of devices and hardware/performance problems but going native isn't a silver bullet either and doesn't shield you from the challenges entirely - it's just a familiar form of pain ;P
Is this what's expected from the app?
I've been using Discord's OAuth and that's been nice, but I what I'd really like is to display that status on my site.
It is good, but we all have trouble with the notifications. (this has nothing to do with react native but you are here and this is a gripe). Like if you have it running on a computer it doesn't come to your phone. So we have tons of miss-communication for stuff like "yo I am drinking near your house meet-up". Discord just sits running all the time on your PC, which for most is running all the time. So I stopped using it for time sensitive messages which sucks. I would never dare use it for a "Hey I am buzzing outside your house answer". You literally have no idea where the notification for the person is going to go. FB-Messenger never had this issue.
As for using Slack, I am too scared of dropping 3am Friday/Saturday messages in my work chat instead of my group chat so keep separate apps.
Certain programs can keep your computer in a non-idle state indefinitely even if you don't move the mouse.
Having the Slack Linux desktop client open means I don't get any notifications, even when I'm away from my computer.
Works a lot better than group texts, and with better file sharing to boot. We'll still text each other for 1:1 conversations where we're not near a computer.
We'd switch to Discord if Slack's free offering is ever gimped.
I keep Discord running on my desktop at work, plus I tend to have browser windows connected to it on my both my desktop and laptop at work. I still get phone notifications.
However when one grows and starts competing head to head in the App Store or Google Play with the other top social or finance or music or whatever apps, the ones who have expert teams with familiarity with the specific Android or iOS platform will pull ahead. Particularly as you can still have a (mostly) common REST API backend, base things off the same design mockups with some modifications, and so on.
Is that your experience too, that a good bit of native code is required (with RN serving as glue and handling simple screens), or have you avoided that somehow?
Check out the code examples: https://facebook.github.io/react-native/docs/native-modules-...
In practice, most of it is wrapping "RCT_EXPORT_METHOD" around native code and importing it into JS.
Even if you had to write half the app in native code (which you won't), you're still far ahead of having to write it all in native code on both platforms.
The bridge creates an interface between an embedded webserver to react native.
Things to note:
1. Always dispatch bridging methods to their own threads. On IOS you can do this via. dispatch_async. On Android, you can utilise native threads or some kind of task management library. I like Bolts [2].
2. Always create bridging methods that resolve promises. This makes it easy to utilise async / await paradigm on the JS side.
[0] Android: https://github.com/hemantasapkota/react-native-web-server/tr...
[1] IOS: https://github.com/hemantasapkota/react-native-web-server/tr...
Would have loved to use discord at work, but in developing countries... network connectivity is not always a given.
[1] - https://medium.com/airbnb-engineering/sunsetting-react-nativ...
If the announcement was the other way around (we're going from native to react native!) I bet they would have gotten a similar flood of web/rn engineers.
What Discord might show is that there are also a load of mobile engineers out there who do.
Personally I find it baffling why anybody would choose to work with anything based on JavaScript (I'm grumpy enough about having to work with something as primitive and loosely-typed as C#, so I find JavaScript an endless horror show), but there are people sitting right near me in my office who work on frontend web code all day and chose to do that and actually enjoy it.
So really, I guess I'm saying we're all different. And that's a good thing, because there are lots of different jobs we need to get done to keep all these systems running.
* companies pitching a product by way of blog post
* companies recruiting by way of blog post
* individuals pitching a product by way of blog post
* individuals pitching themselves by way of blog post
Blog posts and TED talks are the new advertising mediums.
Just because it benefits them doesn't mean it's exploitative or bad.
2.5.2 Apps should be self-contained in their bundles, and may not read or write data outside the designated container area, nor may they download, install, or execute code which introduces or changes features or functionality of the app, including other apps.
Also,
> we also have a flag that forces our users to relaunch the app if the bug is app breaking
How do you do this?
As far as your second question, we simply deploy store logic that loads a Modal telling our users that they must relaunch the app.
[1] https://microsoft.github.io/code-push/faq/index.html#1-does-...
> Apps may contain or run code that is not embedded in the binary (e.g. HTML5-based games, bots, etc.), as long as [long list of requirements...]
Any chance you could share any info about the architecture design of your homegrown system? I've seen a few snippets where devs build their bundles and host them in s3, how complicated was it for you to roll your own OTA solution? Would you guys do it again or would you use Code Push?
This makes some sense since on Android we have to re-write most of the stores/business logic and not just UI. We have modeled the architecture similarly to things on the Desktop/iOS side so we still are able to move fast and stay lean as a team.
So if one is writing a feature that say allows one to ban a user - they don't need to write any of the banning logic or worry about fetching the user data/validating it against server roles permissions - if it exists on the main Discord app, it can be safely imported.
Other helpful examples are perhaps things like markdown parsing - iOS was able to just import and use the exact same system desktop uses to handle markdown and things like user/channel mentions, custom emoji, etc. On Android we had to write one ourselves: https://blog.discordapp.com/how-discord-renders-rich-message...
On Android since there is no code re-use everything had to be written from scratch.
This is impressive.
Says it all. It is all about cost.
The team - myself included - works normal eight hour days and there is no "crunch time" (other than very rarely when we have external dependencies like when we launched our Spotify integration).
As an engineer we all want to have agency and be able to make impactful decision on the products we work on. Over-hiring too quickly is often what can lead to organizational bloat and can make things get built slower.
Instead, I think it's better to grow slowly, hire great people, and only hire when it's needed. I've found that as a company, staying small has made us always ask ourselves to make tradeoffs and constantly be thinking about what are the most important and impactful things we can be working on.
I am not debating whether it is a good one or bad one.
I am hoping that in the future something like React Fiber (https://www.youtube.com/watch?v=aV1271hd9ew) will make its way to React Native and unlock a new level of performance.
This is why I really hate tools like react native. They try and create a code symmetry and that's not unreasonable, but then they go too far and create behavioral symmetry and that's pretty much unacceptable for as wide a gulf as browser apps and mobile apps. They have such radically different use cases.
However, as Discord's mobile teams grow and expand we're exploring alternative UX designs that are significantly more mobile friendly. So your feedback is heard loud and clear at HQ :)
It was that you had disabled right click on the join server page in Chrome, it is generally considered bad practice, but somehow I liked it since it reinforced the game interface feeling.
I think the economics of RN strongly do though. Why would you use RN if you aren't planning to reuse code between environments?
+ view/UI layer
+ flux/redux stores
+ data fetching and processing
+ action creators
+ utility libraries (date functions, markdown processor, etc)
The economics of RN allows us to share the last 4. However, sharing the first is actually more or less impossible without tooling like react-native-web as the components that exist on a native iOS app and the components that exist in HTML are just different. Certainly you can argue that sharing this much business logic would necessitate that the UI layer looks all the same, but I fundamentally disagree. That is like saying that because all your clients use the same API, they all must look the same.
- a Discord iOS engineer
Deleted comment