The Case for the React Native Web Singularity
Bottom line up front: There is a possible "React Native Web Singularity", when it starts being a better standalone choice for developing for the mobile web than
react-dom. If this speculation comes true, this would be gamechanging.
I spent a couple hours looking into React Native Web today. I want to preface this with the very important acknowledgements that I have no knowledge of the React team's plans, and I have not ever built anything with React Native Web so I am really just speculating and thinking out loud.
⚠️I REITERATE: I AM JUST SOME INTERNET RANDO SPEWING THOUGHTS, DO NOT IN ANY WAY TAKE WHAT I WRITE HERE AS ANY FORM OF OFFICIAL ROADMAP
I just want to discuss why React Native Web is interesting to me and what I see as a neutral but interested outsider to the project. However I am aware that RNW is a moderately controversial project and if you have your mind made up on it, I suggest doing something else with your time than reading on.
I mean it, please stop reading if you are just going to get mad whenever RNW is mentioned.
If you are out of the loop on even knowing what RNW is, here are some resources I would recommend:
- Their README
- @necolas' talk at React Rally 2017 and on the React Podcast
- Peggy Rayzis's talk: Write Once, Render Anywhere — ReactNext 2017
- Using React Native For Web in Production at Curai
- what am I missing?
Because there is a lot of ground to cover, I will assume from here on that you have read and watched these basic things above. The main selling points that resonate with me are:
- Code reuse across RN and Web codebases
- Better A11y APIs (not a given, and if you reject this out of hand please stop reading)
- Improved styling model (subjective!)
- "native-quality interactions, support for multiple input modes (touch, mouse, keyboard)" (untested! I'd love to read more here)
- "Free" built-in components and modules that RN developers enjoy including an Animated Module
- (not so relevant to me) i18n is better
There is one very big downside, which cannot be ignored: it drops all pretense of using APIs that look like normal webdev. No
<div>s here. No Media Queries. And expect fiddling with alien RN ecosystems like Metro with fun problems with symlinks.
Now, I also pay attention to incidental/leading indicators:
- Both the authors of React-Native-Web and React-Native-DOM have been hired into the React org in the past year. @necolas is on React Core and @vincentriemer seems to be on Web but is obviously extremely close to the RN team.
- Rick Hanlon (RN team)'s talk on the Untouchable Web gives a very strong indication of what the RN team wants for mobile web
- React Fire gave way to React Flare (also worth reading:
<FocusScope>and the unreleased
useEventhook). I expect some form of this to be announced, even released at React Conf 2019 alongside Suspense for Data Fetching.
- From Nicolas: "You can now build Web, Android, and iOS apps from the same React codebase using Expo. Expect a lot more progress towards a web-first, multi-platform React over the next couple of years."
- Of course, Twitter's continuing investment
- what am I missing?
As well as community proof points:
Now for the really useless part of this blogpost, where I speculate about the potential of RNW without even ever having used it. Yeah, I know. Humor me, contradict me, back me up, I'm just thinking aloud and would love your thoughts.
Fact: Mobile is extremely important for web developers. I won't bother substantiating this.
Fact: A React-Native-informed approach to Gestures, Focus, and A11y is clearly in the future of React.
Fact: It is working for Twitter and Uber Eats and others.
Opinion: I don't think
react-dom can or should ever be deprecated, because it will forever be important for web developers coming into React from a HTML/CSS background. I used to entertain this notion, but I recognize it is unnecessarily aggressive.
Opinion: Code reuse is very project dependent. Plenty of projects are web-only. BUT...
Speculation: There is a decent chance that RNW reaches a crossover point, a singularity, where it simply starts to be a better starting point for developing for mobile web than
react-dom is. As a standalone tool, even with no intention of reusing code for native apps, it could be better than
react-dom, for reasons I have already stated. At this point, all doubt of premature optimization becomes invalid, and RNW becomes the default for people who are ok not using HTML-like APIs.
If true, THIS WOULD BE INCREDIBLY FREAKING IMPORTANT. This is why I keep eyeing the RNW project despite never having needed it.
If true, This would be a fun turn of events from people proclaiming the death of RN after Airbnb sunset RN in 2018. If anything, judging by Eli White's talk, the expanded RN team with Lean Core/community focus, and open sourcing of Hermes, RN has in the public eye become more relevant than ever in 2019.
I think all this is years out. I directly pointed this question at Dan a few months ago and this was his reply (which, again, is not official communication they have committed to so dont hold them to it please):
Me: does some combination of React Native DOM/Web, React Fire, and React Flare point towards some possible future version of react-dom where we drop the HTML-like basic JSX components and just provide a smaller set that are more accessible/intuitive by default?
Dan: Not in immediate feature. But finding ways to steer people towards accessible UIs by default is an active exploration with Flare. In shorter term insights will likely feed back into React Native. Maybe someday having a unified opt-in API for folks who prefer it would be nice.
So RN is the near term focus for now. But what if...
I was a bit too web centric in this piece, and was totally blind to the obvious fact that RNW is a bigger win for RN users than for React-Dom users. Glen Maddern has ported an RN app to RNW which of course is going to be a great usecase for RNW. He said:
In general RNW isn't the bottleneck, it's the native bits of RN that cause trouble. So I would speculate that one day maybe Expo becomes better for building for the web than Create React App, that'll be the tipping point. RNW is a small piece of the puzzle but it feels good enough for now.
The RNW DX story itself does have some drawbacks. Ryan Jerue says:
In terms of using RNW for a bit over a year, I'd say that there's some good and some bad. The good is that it does deliver on its promise. My focus has been working on a design system that my company can use across our web and native apps. If you like CSS in JS, it's 100% that. Dimensions API covers media queries well too. The bad of RNW is mostly from react native, meaning webapps are going to be stuck at the ceiling of being annoying up upgrade, flexbox everywhere. The support of libraries isn't as great either as often ones with native modules require one to be skilled in JS, Swift/ObjC, and Java. React Native doesn't support SVG out of the box (or really at all) either, which is a bummer.
Even if it isn't RNW, something else that looks like it might do it. Christian Hall said:
Given the interest in VR and AR, for devs who want to focus on making the best UI possible, regardless of platform, I think the “RNW Singularity” is essential. If the React Team doesn’t come up with some way to express UI universally, someone else will.
Bruno Lemos agreed:
We are definitely trending into more cross-platform dev, all big companies are betting on it (facebook, microsoft, google and even apple with project catalina). Dunno if it will be react-native-web or not, but yes I agree with the predictions
There remain key sticking points in a RNW singularity, like opening in a new tab, and routing. As Josh Parret put it:
I feel we are quite far off a RNW singularity, as there’s undeniable cases where a single codebase doesn’t work for both platforms; such as opening a link in a new tab, or changing routes/screens...
PostScript: more resources for my reference
- Ben Awad's RNW Series
- Guide for Creating reusable RN and RNW components
- Material Bread RN universal components
- Expo Web tutorial
- Routing: React Router
- Routing: React Navigation
- Universal Navigation Strategy in React: https://dev.to/ythecombinator/driving-towards-a-universal-navigation-strategy-in-react-j60