The Case for the React Native Web Singularity

swyx 2019-08-30

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.

Context

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.

Wew. Ok.

Basic Facts on React Native Web

If you are out of the loop on even knowing what RNW is, here are some resources I would recommend:

Also worth noting that there was a (more ambitious!) experiment, React Native DOM, that has since gone on hiatus. ReactXP is another notable attempt I know nothing about, backed by MSFT.

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:

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:

As well as community proof points:

My speculation: The React Native Web Singularity

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.

It also doesn’t have to be RN that “wins”. If Flutter is a success, Bruno Lemos also notes that Flutter for web is in technical preview.

Definitely Not Immediate Future

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…

Feedback from early reviewers

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

Tagged in: #tech #react #react native

Reactions: 👍 1
Loading comments...
Webmentions
Loading...

Subscribe to the newsletter

Join >10,000 subscribers getting occasional updates on new posts and projects!

I also write an AI newsletter and a DevRel/DevTools newsletter.

Latest Posts

Search and see all content