TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Five years of React Native at Shopify

324 pointsby onnnon5 months ago

32 comments

irskep5 months ago
I agree with most of the other comments here, and it sounds like Shopify made sound tradeoffs for their business. I&#x27;m sure the people who use Shopify&#x27;s apps are able to accomplish the tasks they need to.<p>But as a user of computers and occasional native mobile app developer, hearing &quot;&lt;500ms screen load times&quot; stated as a win is very disappointing. Having your app burn battery for <i>half a second</i> doing <i>absolutely nothing</i> is bad UX. That kind of latency does have a meaningful effect on productivity for a heavy user.<p>Besides that, having done a serious evaluation of whether to migrate a pair of native apps supported by multi-person engineering teams to RN, I think this is a very level-headed take on how to make such a migration work in practice. If you&#x27;re going to take this path, this is the way to do it. I just hope that people choose targets closer to 100ms.
评论 #42730123 未加载
评论 #42730668 未加载
评论 #42732024 未加载
评论 #42730720 未加载
评论 #42737372 未加载
评论 #42730580 未加载
评论 #42732603 未加载
评论 #42734492 未加载
评论 #42730440 未加载
评论 #42730268 未加载
评论 #42735167 未加载
nadis5 months ago
I thought the section on the importance of native devs and how they&#x27;re staffing mobile was really interesting:<p>&quot;Native devs are crucial<p>Mobile engineers who specialize in iOS and Android are essential to building great mobile apps. There is no replacing experience and taste that comes from having built many mobile products and deeply understanding conventions and usability. Being able to drop down to the platform layer, write bindings, master build &amp; release, distribution, etc requires native expertise.<p>They also play a vital role in optimizing app performance across the myriad of device models, ensuring a consistent user experience for all users. Additionally, native expertise is essential for managing React Native version updates, as well as adopting new features, APIs, and tooling changes that accompany new iOS and Android releases. You can&#x27;t build a good product without these experts.<p>We invested in training our native mobile developers in React Native through a self-serve course that covered everything they needed to know to ship production-ready code. Additionally, we set up office hours with developers who were already proficient in React Native to provide support through Q&amp;A sessions, pair programming, and code reviews.<p>We also supplemented our mobile teams with some web developers for their Javascript, Typescript, and React expertise. This ensured we had strong expertise in both native and React Native, and over time, it levelled up the entire team.<p>Having a good mix of native and web developers is the key to building great mobile apps using React Native in our experience. &quot;
评论 #42729440 未加载
评论 #42739170 未加载
评论 #42730396 未加载
seemack5 months ago
Blazing fast is a bold claim. I use this app nearly every day on a brand new Pixel 9 Pro and, while much improved from a few years ago, it is far from &quot;blazing fast&quot;.<p>For example, I just recorded myself tapping on a product in the Product list screen and the delay between the pressed state appearing and the first frame of the screen transition animation is more than half a second. The animation itself then takes 300ms which is a generally accepted timeframe for screen animations. But that half second where I&#x27;m waiting for the app to respond after I&#x27;ve tapped a given element is painful. UX studies indicate 0.1s as a number where an application no longer feels instantaneous. (<a href="https:&#x2F;&#x2F;www.nngroup.com&#x2F;articles&#x2F;response-times-3-important-limits&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.nngroup.com&#x2F;articles&#x2F;response-times-3-important-...</a>)<p>Contrast this against something like the Slack app where the screen is navigating even before the pressed animation has appeared. Or for an app with probably not as much engineering focus, Fastmail, which begins the screen transition within 100ms of the pressed animation state appearance.
评论 #42730493 未加载
prophesi5 months ago
I&#x27;m surprised that there was no mention of Expo. In the past, I would say bare-metal is better than Expo-managed React Native projects because of the limitations when it came to native modules. Fast forward to today, and anything you can do in a bare metal RN app can be done with Expo.<p>The biggest game-changer recently is Expo&#x27;s Continuous Native Generation[0]. You can configure all of your native modules and ios&#x2F;android files with a simple config file (which has its limits, whereby you&#x27;ll need to write an Expo Config Plugin[1]). You will no longer commit the ios&#x2F;android native code to your repository, and instead let it be procedurally built.<p>This resolved a lot of environment issues developers would often run into, and greatly simplified onboarding new devs. You can build your iOS&#x2F;Android apps through the CI with ease. And you&#x27;ll no longer be afraid of upgrading React Native, as Expo will handle all of the breaking changes in the native code for you.<p>My guess is that Shopify started with bare metal React Native apps (which I would have done the same 5 years ago), and now migrating back to Expo-managed projects is nontrivial. At my work we only manage one app, and it was well worth migrating back.<p>[0] <a href="https:&#x2F;&#x2F;docs.expo.dev&#x2F;workflow&#x2F;continuous-native-generation&#x2F;" rel="nofollow">https:&#x2F;&#x2F;docs.expo.dev&#x2F;workflow&#x2F;continuous-native-generation&#x2F;</a><p>[1] <a href="https:&#x2F;&#x2F;docs.expo.dev&#x2F;config-plugins&#x2F;introduction&#x2F;" rel="nofollow">https:&#x2F;&#x2F;docs.expo.dev&#x2F;config-plugins&#x2F;introduction&#x2F;</a>
评论 #42732798 未加载
zffr5 months ago
&gt; Our apps are blazing fast (&lt;500ms screen loads)<p>I’m not sure I would consider 0.5 seconds to be <i>blazing</i> fast.<p>I wish the article went into detail on what these screens do and what a screen load means exactly.
评论 #42730261 未加载
评论 #42732043 未加载
评论 #42730281 未加载
fidotron5 months ago
This strikes me as curiously defensive, in that Canadian way of praising things that are obviously problematic to draw attention to them.<p>The wider noise around React Native is seemingly that it works, especially while iterating on things, but it makes the final 20% of work much harder than it already was. As one person put it to me recently “with RN you just have to face the fact you won’t be winning any design awards”.<p>What really amazes me is how far React Native and web React have separated, to the point using the web one is a complete non event.
评论 #42729162 未加载
breckenedge5 months ago
Glad they spent some times discussing the downsides. I’m 4 months in to a Hotwire Native replacement for an unmaintained React Native app. The differences are stark and I could definitely see myself picking up Hotwire again for another project if given the same constraints, but I’ve had good experiences with React Native in the past too. Ultimately though I just do not like all the work that has to go into maintaining a large scale React codebase.
评论 #42728584 未加载
评论 #42730514 未加载
评论 #42737998 未加载
评论 #42731681 未加载
grandinj5 months ago
So basically, as long as you are large enough to have direct contact with the upstream team, have a separate team to manage React Native itself, and have two separate teams for iOS and Android to manage stuff that needs native access, you are good.
mcsniff5 months ago
Heh. Still no dark mode, it&#x27;s almost as embarrassing as HN not having a dark mode -- yeah I said it.<p><a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=34263628">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=34263628</a><p>Will another 10 years go by and there still won&#x27;t be a dark mode for the app?<p>As someone who uses the mobile app basically every day, it is absolutely one of the things that bothers me, every single time I use it. That&#x27;s not a good thing.
评论 #42732431 未加载
humptybumpty5 months ago
The quality standards are so low… half a second to switch screens is ok? Jesus!<p>Apple just keeps making billions and billions by focusing on UX, when other ”tech” companies are satisfied with this garbage.
评论 #42737080 未加载
评论 #42730779 未加载
评论 #42732682 未加载
neilv5 months ago
Has anyone had a success with using &quot;React Native for Web&quot; for a <i>Web-first</i> consumer site (for desktop and mobile, including heavy plain text entry at times), but also being able to use the same React Native code to go to the iOS and Android app stores (when you reluctantly also satisfy those consumers who really-really want to install native apps)?
评论 #42736756 未加载
评论 #42738945 未加载
tempfile5 months ago
&gt; Our apps are blazing fast (&lt;500ms screen loads)<p>Hahaha we are absolutely cooked.
评论 #42735810 未加载
评论 #42734189 未加载
methods215 months ago
What would be amazing is if Swift and&#x2F;or Kotlin could just be the &#x27;native&#x27; language across both platforms and work at native speeds on both platforms.
评论 #42731774 未加载
评论 #42731563 未加载
评论 #42736894 未加载
qazxcvbnm5 months ago
By the way, is it Shopify’s open source policy to ignore outside PRs, or are they simply understaffed? My PR which addresses a major issue in one of Shopify’s big React Native libraries has received zero acknowledgement from Shopify for almost a year.
评论 #42735605 未加载
eviks5 months ago
&gt; We care very deeply about performance at Shopify<p>&gt; We’ve achieved sub-500ms (P75) screen loads in the Shopify app<p>Pick 1.<p>Also interesting that this deep care about performance extends to blogs, where a simple animated image showing how awesome hot reload is causing a noticeable delay in scrolling
assimpleaspossi5 months ago
&gt;&gt;React is legacy technology<p><a href="https:&#x2F;&#x2F;infrequently.org&#x2F;2024&#x2F;11&#x2F;if-not-react-then-what&#x2F;#fn-why-not-1" rel="nofollow">https:&#x2F;&#x2F;infrequently.org&#x2F;2024&#x2F;11&#x2F;if-not-react-then-what&#x2F;#fn-...</a>
评论 #42732917 未加载
dep_b5 months ago
There&#x27;s also the question of the amount of footgun you give to developers. While iOS is more performant than Android, Google gives Android developers much more guidance in best practices and patterns that help developers avoid issues around architecture, injection, state and threading.<p>I&#x27;ve seen many iOS projects overwhelmed by tech debt while its Android counterpart was still OK-ish. I don&#x27;t believe this is coincidence.<p>So how hard is it to apply React Native the correct way? Having a dedicated team of dozens of engineers including native experts for each platform is different than your average 4-8 people dev (web, API, iOS, Android) team. Let alone if you only have people experienced in web doing the work.<p>When I build Swift applications the fact they have sub 500ms loads is not an achievement, they&#x27;re simply already doing that without me trying. But I have found the right way to build iOS apps myself over the years, very little help from Apple.
评论 #42748266 未加载
nitwit0055 months ago
&gt; We’ve achieved sub-500ms (P75) screen loads<p>That&#x27;s a difficult to interpret metric. If it&#x27;s only being met 75% of the time, I&#x27;d tend to assume most features are much better than that, but some are never meeting the target, and there&#x27;s no indication by how much.
morelish5 months ago
I’ve noticed the app has gotten a lot slower and buggier on iOS in the last few years. Kind of wondered what they were writing it with.
adityapurwa5 months ago
I really wanted to work with native SwiftUI, but the lack of hot reload and long waiting times for the preview to refreshes is just painful. React Native on the contrary, delivers good enough live feedback experience. I don’t enjoy React, but compared to waiting 10 seconds for preview changes and occasional “expressions too complex, break it down to smaller one” - I’d choose React. I do still trying to code natively on every XCode updates; just with the hope of it getting better somehow.
griomnib5 months ago
I really think aside from games, media editing, and other such heavy activities, 90% of apps are, or should be, web views. What they are doing makes a lot of sense.
treksis5 months ago
Not sure at shopify size, but I highly encourage startups to use cross platform for mobile distribution. React native&#x27;s OTA update alone is already worth for fast movers.
Woodi5 months ago
Nice someone from new Web circless officially confirmed that multi-langual infra is a must. And that qualified workforce is valuable too! I think &quot;qualified&quot; as in &quot;works here some time and know company code base&quot; :)
echelon5 months ago
Why is the Slashdot logo on this article? I&#x27;m so confused. What&#x27;s the relationship between Shopify and Slashdot?
评论 #42733395 未加载
justinko5 months ago
Two words: Hotwire Native
评论 #42731781 未加载
xyst5 months ago
&gt; Our apps are blazing fast (&lt;500ms screen loads)<p>I frequently encounter Shopify e-commerce in the wild, and it’s my most disliked experience. From browsing the stores to checkout, it always feels clunky.<p>I always shrugged it off as iOS bullshit but now I know the real reason. It’s just slow enough to make you doubt yourself - it’s not the website, it’s probably my shitty {phone|poor internet|computer}
calvinmorrison5 months ago
Personally I miss the old QT interface with plugins capabilities
sirjaz5 months ago
They could have written a MacOS and Windows app to go along with their web app with React Native but didn&#x27;t. Such a missed opportunity
wg05 months ago
Cannot recommend RN enough. One code base gives you three apps. Web, Android and iOS. With NativeWind, you have full Tailwind available to you and I had great success to the point where I have been thinking that I should be building customer facing web apps in RN (React Native Web + Tailwind) which at any time can be exported as native apps while already being a great web app.
sumedh5 months ago
Which tools do they use to measure performance?
lvl1555 months ago
Had high hopes for Shopify at beginning of pandemic but it was all hype. Online shopping is still pretty much the same and in some ways regressed.
hsavit15 months ago
So many of you are yapping about how the performance is not good enough. Yet none of you are talking about how Shopify literally could not develop their mobile app without it. The 3 minutes to compile the app just to do a trivial change makes it near impossible for devs to be productive. Hot reloading is what got me hooked to react native, I literally cannot allow for my brain to rot waiting for minutes waiting for Xcode to compile for a simple border radius change.
评论 #42737007 未加载
评论 #42732848 未加载