16 ms·
Why Discord Is Sticking with React Native
- mrkcsc 8y agoHi all, Discord engineer here! If anyone has any questions about the post or our experience using React/React Native the team would be happy to answer them!
- superplussed 8y agoAwesome post, and it's really impressive what you have managed to build with such a small team! Could you go into more detail regarding your problems with Android? Poor performance of touch events seems like the kind of thing that would make RN/Android unsuitable for most teams, so why does it have such widespread adoption? 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.
- mrkcsc 8y agoSure, 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.
- bulldog13 8y agoWhy do I get feedback on discord, but not Skype for Business ? Have tried 3 different mics of different types and messing with the settings constantly. When I say feedback I mean my speaker output going as input to everyone else.
- a13n 8y agoSeems like something you should bring up with Discord's official support channel. This isn't really related to the article.
- mrkcsc 8y agoI'd suggest reaching out to our CX team (support@discordapp.com) - we really do care and you will get a reply :) 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.
- connorshea 8y agoAs a user of the iOS app it used to have some admittedly frustrating problems, but pretty much every complaint I had previously has since been fixed, huge kudos on the progress you've made! 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
- mrkcsc 8y agoWe are actually starting work on allowing pasting images from the clipboard this week :D So stay tuned! Thanks for the kind words, the team really appreciates it.
- connorshea 8y agoThis makes me so happy, thank you! :D
- mehblahwhatevs 8y ago* I'm curious as to what performance degradation you've seen on Android? * Have you evaluated cross-platform "native-ish" alternatives? (Nativescript, Flutter, etc.) * What does the "lack of 64-bit support" mean for Android?
- saagarjha 8y agoThere's a linked issue in React Native regarding 64-bit: https://github.com/facebook/react-native/issues/2814 https://github.com/facebook/react-native/issues/2814. In short, you can't use 64-bit dependencies.
- mrkcsc 8y ago* Mentioned in another comment, but generally the performance of animations was poor with mixed in with any other kind of UI rendering - particularly on older phones (when we prototyped iOS we really only focused on the latest two generations of iPhones). * 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 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.
- nottorp 8y agoWhy does Discord need 2G RAM if you don't restart it regularly? In your defense, it's a cancer that all "modern" apps done in javascript suffer from, but still, why?
- euphidime 8y agoIs Discord really using 2GB of RAM for you? Can you clarify what you mean by regularly? Discord (including all of its helper processes) is only using 190 MB of RAM for me at the moment.
- nottorp 8y agoThe screenshot below was a particularly bad day... but Discord, Skype and Slack (all javascript "applications") compete continously for eating more ram than my actual work stuff. https://imgur.com/a/NrNTDop https://imgur.com/a/NrNTDop 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 :)
- Klonoar 8y agoThis is getting really, really old. 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.
- jamesgeck0 8y agoThe post says, "it’s roughly 1.5s startup delay to load a 15mb bundle on an iPhone X." 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.
- milankragujevic 8y agoSlower storage and slower CPU on the SE? Maybe that is a factor, I'm not quite sure.
- nikanj 8y agoThe X is the most expensive iPhone you can buy right now, and the SE is the cheapest. Too bad engineers practically always have the top-end models, so they don't really have to dogfood the everyday pain of using the slower devices.
- postalrat 8y agoThat creates opportunities for other developers to build a better product.
- StudentStuff 8y agoThat kind of optimization is happening much more on Android than on iOS, the install base of low end devices is much, much larger.
- victoriasun 8y agoActually I don't own an iPhone X :P Our core user base tends to use 6 and above (approx 2 generations behind) and we dogfood regularly with a huge group of beta testers (thousands) with a huge range of hardware. We try our best to make sure the average use case is considered.
- steveklabnik 8y agoI don't have a question, I just want to say that I really have enjoyed using Discord. It's been a pleasure. And I'm traditionally an IRC die-hard. Thanks for all of your work.
- mrkcsc 8y agoThank you! :)
- Vishnevskiy 8y agoThanks! And thank you for helping make Rust awesome.
- daimyoyo 8y agoThis is not related to the post but I have an honest question. I use nitro(and absolutely love it) and I'm constantly getting inquiries about how I use blobs. There are literally 5 accounts I would happily gift a nitro subscription to but dont have the option. When is discord going to allow people to gift nitro to other accounts. It's a huge potential revenue stream and something I would happily engage in if I had the chance to. Thank you for your work. I love discord.
- mrkcsc 8y agoIt's been discussed a lot internally - I would love to gift Nitro to folks myself ala Reddit Gold :) 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.
- itsyogesh 8y agoThanks a lot for the writeup. We've been using react native for a while now at our org and while we aren't native developers, we are getting along really well. 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.
- mrkcsc 8y agoBased on our experience yes I would certainly consider doing the Android side in React Native starting today. 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
- abledon 8y agoWould you guys ever consider using Drab to interact with ReactNative on the frontend?
- Nr7 8y agoWhy on earth don't you have a separate button for emoji on iOS like you have on Android? Having to manually type :emojiname: every time is absurd. Yes, I know it shows a list when you start typing but it's still horribly cumbersome.
- grawlinson 8y agoDiscord Canary on my linux PC is unusable. It "stutters" during scrolling, typing and any form of interaction with it. Is this what's expected from the app?
- jamesgeck0 8y agoIt’s not unheard of for alpha versions of applications to have issues. Does the release version also stutter?
- victoriasun 8y agoSorry to hear that your Canary experience is not great :( Have you tried our stable Discord release? Canary will always have instability to it. If stable Discord still jitters for you please contact us (https://support.discordapp.com/hc/en-us https://support.discordapp.com/hc/en-us) and we can diagnose better.
- Neighbor_ 8y agoNot related to React/React Native, but I was wondering if there was a way to show a users online/idle/offline status through an API call or if there are plans too. 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.
- JaimeThompson 8y agoWhy, starting I think about 30 or so days ago, does Discord start using insane amounts of CPU time when it is started on a system that doesn't have network connectivity? On a Surface 3 Pro, A newer laptop, and a desktop system I have seen this happen. It will just use 20-40% of available CPU unit networking is restored.
- haney 8y agoWhat tool/service/library are you using for OTA updates? Could you share any best practices around managing the roll out (do you push to everyone, a subset, etc.)?
- victoriasun 8y agoHi! Not Fanghao but another Discord iOS engineer. We wrote our own library for OTA updates but React Native Code Push (https://github.com/Microsoft/react-native-code-push https://github.com/Microsoft/react-native-code-push) is a pretty reasonable out of the box solution. Because our OTA solution is designed for hotfixing issues rather than feature releases we push to everyone, and we also have a flag that forces our users to relaunch the app if the bug is app breaking.
- saagarjha 8y agoHow do you comply with Apple's App Store Review Guidelines when using this (specifically, this clause): 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?
- victoriasun 8y agoApple allows updates to Javascript outside of the review process as long as it subscribes to certain guidelines (1), including but not limited to: not changing core feature functionality, being limited to bug fixes, and also that the app doesn't provide unlimited access to native SDK or system functions. React Native provides a limited API to js code so it's fine. 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-the-apple-app-store-allow-developers-to-perform-these-types-of-updates https://microsoft.github.io/code-push/faq/index.html#1-does-...
- driverdan 8y agoRE Android, are you saying that React Native Android is still bad? If so, why hasn't it been improved?
- mrkcsc 8y agoIt's less that it's bad (in my opinion) and more that on Android you have a much wider range of hardware to support ranging from quite new and recent, to basically ancient almost flip phone level. I am hoping that in the future something like React Fiber (https://www.youtube.com/watch?v=aV1271hd9ew https://www.youtube.com/watch?v=aV1271hd9ew) will make its way to React Native and unlock a new level of performance.
- mikewhy 8y agoIt's also limited by the single-core performance in Android phones, which IIRC is far behind Apple's chips.
- babaganoosh89 8y agoFor comparison how many engineers does it take to make the native Android app?
- mrkcsc 8y agoThe core Android team is four engineers so about double in size. 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.
- Klathmon 8y agoCan you expand/clarify on what you mean by "on Android we have to re-write most of the stores/business logic and not just UI"?
- mrkcsc 8y agoThe iOS application can safely pull data and perform actions from just about every Store (we don't use redux but the idea is the same https://redux.js.org/api-reference/store https://redux.js.org/api-reference/store) and Action Handler (https://reactjs.org/docs/handling-events.html https://reactjs.org/docs/handling-events.html) that exists in the main Discord React application. 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-messages-on-the-android-app-67b0e5d56fbe 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.
- Klathmon 8y ago
- joeblau 8y agoThis post is interesting because at the bottom, Discord is soliciting for engineers. Gabriel Peal from AirBnB came and gave a talk at our company a few weeks ago and he shared at after AirBnB published their 5 part medium series[1], they got a huge flood of mobile developer resumes. [1] - https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a https://medium.com/airbnb-engineering/sunsetting-react-nativ...
- hamms 8y agoI feel like it's far more unusual to see a blog post from a tech company that _doesn't_ end with them soliciting for engineers.
- joeblau 8y agoYeah. I guess my point is that they are trying to get web/mobile engineers, but the data from AirBnB shows that the opposite of this post is what actually attracts mobile engineers.
- eunoia 8y agoThey probably got a flood of applications from native mobile engineers who want to work for a successful company who's new architecture direction aligns with their existing (native framework) skills. 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.
- shados 8y agoA popular blog post will get you a flood of resume, no matter what you say in it as long as its not politically incorrect.
- mathw 8y agoWhat AirBnB showed is that there are a load of mobile engineers out there who don't want to work with React Native. 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.
- saagarjha 8y ago> In the React Native repo, we sometimes see hot issues with limited activity in response from Facebook. Lack of visibility into such a large company can bring about frustrations when so many people depend on their open source contributions. On the other hand, it forces us to dive into the core codebase in order to figure out the problem, which admittedly one of the best ways to learn an open source platform. By understanding the React Native platform deeply, we were able to maintain a fork that fixes issues for our own use cases and reuse their core modules. I guess that's one way to sugarcoat the fact that you're at the mercy of Facebook being timely in fixing bugs here…
- mrkcsc 8y agoTo be fair though this exists in Native land too :P but it's sometimes even worse. 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.
- EddieRingle 8y agoThe support library sources have been published to AOSP for a long time now. And as of recently, they're even developing most of them in AOSP (as opposed too merely syncing changes there occasionally): https://android.googlesource.com/platform/frameworks/support/+/androidx-master-dev https://android.googlesource.com/platform/frameworks/support...
- mrkcsc 8y agoThats really cool :D I think getting it to the point where it's not just occasionally synced is really helpful for upstreaming contributions and bug fixes.
- dagenix 8y agoMaybe a bit pedantic, but, isn't RecyclerView in the support library which is open source? And since the support library is bundled with each app, you actually could fork it and ship a customized version with your app if you wanted.
- superplussed 8y agoAfter starting to use RN for iOS, did you adapt the web app to use react-native-web?
- victoriasun 8y agoNo, we do not share Views with web. All view logic is custom on each platform. - a Discord iOS engineer
- nacho2sweet 8y agoI quit Facebook lately and moved to Discord for my group chats, cause we already had the channels from gaming. 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.
- brightball 8y agoBasically just needs idle tracking.
- Klover 8y agoIt does have that. No idea why it wouldn't work for GP. If I lock my computer, or don't look at the Discord tab for a few minutes, my phone gets notifications.
- Kratisto 8y agoJust to add my experience, I feel like it's hit or miss. It seems like I get notifications with zero issues. Then I'll randomly have a week or two in a row where I don't get notifications or get 50% of them. Not sure why this happens, but I use Discord as my only means of contact with multiple people.
- Klover 8y agoInteresting. For what it's worth I am using Discord on Mac Safari (not TP), Win Chrome 69 (dev channel), and iOS. In one year I have not had any of the issues mentioned above. Perhaps using the desktop app can introduce problems.
- Ologn 8y agoThe usual idea I hear is that React Native might be a good idea for a small company with an uncomplicated app, especially if they use the React stack on the web. 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.
- victoriasun 8y agoDiscord is actually an extremely complex app and run almost entirely off React Native, with 2 engineers, only 1 of which who is an iOS expert :P! We have millions of users, and we typically rank in the top 10 of Social Networking on the iOS App Store. We are excited to share our success story of being a "big" company using such a product.
- deleted 8y ago[deleted]
- jrumbut 8y agoI was very surprised to hear discord used RN because I found that I had to break down and use native code to deal with a lot of multimedia and a few other things that aren't just displaying text. I still loved RN, I just maybe naively hoped I could do everything with it. 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?
- victoriasun 8y agoPersonally I have found that RN does require some amount of native platform knowledge to be successful. However, the bulk of our app is actually in React Native. The times we've had to bridge into native is mostly around our voice modules or things that, in RN, were not very performant (like poor list performance) or required synchronous updates (like the keyboard problem mentioned in the post). Certain multimedia objects RN doesn't support out of the box but the community has come to the rescue (ie: https://github.com/cornedor/react-native-video-player https://github.com/cornedor/react-native-video-player for video).
- oh-kumudo 8y ago> small and mighty team Says it all. It is all about cost.
- mrkcsc 8y agoIt's not about cost, it's about impact. 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.
- KirinDave 8y agoI wonder if, one day, Discord will get around to fixing the fact that once you have more than 3 channels and get a notification in more than one, your mobile notifications do not go to "newest" they go to the "channel highest on the sidebar". 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.
- victoriasun 8y agoActually, behavioral symmetry is not an issue with React Native so much as its an issue with poor UX design. Nothing about RN mandates that the apps behave similarly. That the iOS app and the desktop app look and behave similarly is simply a design choice made by the team to maintain a consistent look/feel/UX across the apps, not RN itself. We do not share Views. All Views across all the apps are custom. 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 :)
- robinwassen 8y agoI actually saw another UX oddity by Discord. 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.
- KirinDave 8y ago> Actually, behavioral symmetry is not an issue with React Native so much as its an issue with poor UX design. Nothing about RN mandates that the apps behave similarly. I think the economics of RN strongly do though. Why would you use RN if you aren't planning to reuse code between environments?
- victoriasun 8y agoWe do reuse code. To be clear, a traditional "React app" typically consists of these pieces: + 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.
- ryanjodonnell 8y agoI predict there will be another blog post in about 18 months from discord about "Why we moved away from React Native"
- mrkcsc 8y agoWell it’s been three years so far - we shall see :P 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.
- sandGorgon 8y agoLove discord..but their email notifications are a problem. There are no fine grained controls and once unsubscribed, you can never re-subscribe. Would have loved to use discord at work, but in developing countries... network connectivity is not always a given.
- HNNewer 8y agoYeah, keeping a fork of it does the trick, but it means you have to watch your back from React's unstable APIs, changing too fast
- mhartl 8y agoThe Discord iOS app has millions of daily active users and 4.8 stars with over 240k ratings. This has all been accomplished with a team of two engineers! This is impressive.
- rsingla 8y ago