Simon Sturmer (ex-Facebook, Google) joins the panel to talk about React Native Web. Why use RN on the web? What advantages and what pain points are there? And a bonus side rant about Android!
Simon Sturmer (ex-Facebook, Google) joins the panel to talk about React Native Web. Why use RN on the web? What advantages and what pain points are there? And a bonus side rant about Android!
This episode brought to you by Infinite Red! Infinite Red is a premier React Native design and development agency located in the USA. With five years of React Native experience and deep roots in the React Native community (hosts of Chain React and the React Native Newsletter), Infinite Red is the best choice for your next React Native app.
Helpful Links:
Connect With Us!
[Music]
Jamon Holmgren:
Hey everyone. Welcome to React Native Radio podcast where we explore React Native together. I'm your host, Jamon Holmgren. And I am joined today by all three of my co-hosts. We have Harris. Harris, how are you doing? You're in a new place again.
Harris Robin Kalash:
Yes, yes. Hello.
Jamon Holmgren:
Where are you at today?
Harris Robin Kalash:
So, I'm in Vancouver city this time. I was in Vancouver Island last time. So-
Jamon Holmgren:
Okay.
Harris Robin Kalash:
--in a beautiful neighborhood called Kitsilano, if anyone knows.
Jamon Holmgren:
You're still kind of inching closer to me, I'm pretty sure.
Harris Robin Kalash:
Yes.
Jamon Holmgren:
Eventually, you'll be at my doorstep. Adhithi, you're back. Hey, how you doing and welcome back.
Adhithi Ravichandran:
Yeah, I'm doing pretty good. I missed the last episode, so glad to be back here.
Jamon Holmgren:
Yeah, we're glad to have your help. Last time it was just a complete disaster without you. So--
[Adhithi and Jamon laugh]
Adhithi Ravichandran:
I'm sure that's not true.
Jamon Holmgren:
And Robin, thanks for joining us as usual. How are you doing today?
Robin Heinze:
I'm doing pretty good. Surviving ready for the holiday, the holiday week next week.
Jamon Holmgren:
Yeah, it is looming. I think that this episode will probably air after that.
Robin Heinze:
Well, a little peek behind the curtain, we are recording this before American Thanksgiving.
Jamon Holmgren:
That's true. Yeah, everybody who thought it was live on their podcast app is now very shocked.
[Robin laughs]
Jamon Holmgren:
But, yes we do record it prior. Today we are going to be doing a panel, but we have a guest. We have a panelist, a guest panelist. His name is Simon Sturmer, and he is a former Googler. He worked on YouTube. He's a founder, speaker, trainer consultant React and React Native enthusiast, and the React Native Bay Area meetup organizer. I think they're 700-ish people. Is that right, Simon?
Simon Sturmer:
Yeah, we're a pretty good-sized group.
Jamon Holmgren:
That's pretty cool. Yeah, of course this year it's a little more challenging. We'll probably talk about that as we get into the episode, but I assume that means you live in the Bay Area then?
Simon Sturmer:
Yeah, so I live in San Mateo. So, it's like 30-40 minutes south of San Francisco.
Jamon Holmgren:
Very cool. Before we get into the topic today, let's let's just talk a little bit about your background. Where did you grow up? How did you get into coding? What's kind of been your career path?
Simon Sturmer:
Yeah, totally. So, I grew up in Kansas City which is where Adhithi is. So, a shout out to Kansas City Chiefs here.
Adhithi Ravichandran:
Yay.
[Robin and Jamon laugh]
Simon Sturmer:
And I came to the Bay Area in 2013 to take a job at Facebook as a UI engineer. And so, originally working on React on the ads infrastructure team.
Jamon Holmgren:
That was really early then in the React world.
Simon Sturmer:
Yeah, I think React had been an open source for months by the time I had joined. So, I had never touched React before. And they were like, "Cool, do you want to interview in React?" "No, no, can we interview in anything else?" Right, so we did some other jobs.
[Jamon laughs]
Simon Sturmer:
So, I think they asked me to center a div and CSS or something.
[Jamon laughs]
Jamon Holmgren:
Wow, I would never have gotten the job. But--
[Robin laughs]
Simon Sturmer:
Yeah, so I spent a number of years at Facebook. And I was there when React Native internally was being developed. It was called Catalyst back then. And if I remember right, it was Christopher Chedeau who originally told me--
Jamon Holmgren:
Mhm.
Simon Sturmer:
--about React Native. And we were playing around with it internally, and it was like buggy. It was exactly as you'd expect a pre-release thing to be. Not long after that, the ads team rolled out the first React Native app which was the, what they called Madman or the Mobile Ads Manager. And that was I guess the first app ever built in React Native, and I had just a very small piece of involvement in that. So, I wasn't directly on that team. But we were helping out because I was on the targeting team, and there was targeting involved in that. And then I was there at Facebook when it was open source to the public in 2015 which was really exciting, and we were all shocked that it had an app name.
Jamon Holmgren:
So, what did you think of React when you first heard about it? You were early on, so here you're kind of going to Facebook. I'm sure that's kind of exciting to move into a new role there, but they wanted you to talk like start working in a brand new technology. I remember back in those days, it wasn't really clear that React was going to be the "winner" of these framework wars at that time. So, kind of where was your headspace at when you went there?
Simon Sturmer:
Yeah, you're right. It's not only just that we weren't sure they was gonna be the winner, is that it was like there was a winner, right? It was Angular, right? If you remember that Angular was the way that time--
Jamon Holmgren:
Right. That's true.
Simon Sturmer:
--and had an enormous lead on React, and then React had the additional disadvantage of having this weird syntax. And we were like changing the JavaScript language.
Jamon Holmgren:
Yes.
Simon Sturmer:
Right? And it's like, "Why are we trying to support angle brackets in JavaScript?" And it was like, "This never gonna work." And anyway, so it was quite the underdog. Yeah. So, Facebook is one of those places back then where it's still had, and I know it's changed over the years, but it still had that kind of like overgrown startup feel. So, every--
Jamon Holmgren:
Mhm.
Simon Sturmer:
--team chose their own tech stack. There wasn't very many standardized stuff, and so React kind of organically grew within the org, right? And so the--
Jamon Holmgren:
Right.
Simon Sturmer:
--individual teams would choose which framework they were gonna use, and more and more people were getting on the React bandwagon. They were like, "There's something to this thing, right?" So, for me to go in there with no React knowledge was not a problem because a lot of the teams had no React knowledge. And they were just picking it up as we go. And so Facebook has this amazing internal bootcamp which lasts, I forget, something like 8 weeks. And so you go through and learn all the internal infrastructure, and then they had to spin off UI eBoot Camp which I think I was part of the very first batch. And so some of the people who are, I don't know if you guys know like Jin Chang or I think so many other names. So, these people were running this internal UI eBoot Camp. And they were teaching us React, so it was really cool to learn React from those books.
Adhithi Ravichandran:
So, how did you move on to like React Native from React, I guess? Was that the ads manager?
Simon Sturmer:
No, I just took a bet on--I just thought it was such a cool--I really liked the mobile space, and it just became so accessible to JavaScript developers to web developers to jump into React Native like all of a sudden we were mobile developers overnight. And so when I left Facebook, I just took a bet on that. And so I started a software agency, and we were building React Native apps for startups back before anyone had really known what that is. But a lot of like early stage startups they didn't care so much what you were building with as long as it worked on both Android and iOS which is a bold statement because back then you could barely say it worked on iOS and Android.
Adhithi Ravichandran:
Yeah.
[Laughter]
Jamon Holmgren:
We had the same issue at Infinite Red. We actually had sold two projects, mobile projects. And we were going to be doing them in native code. And we went back to the customer and said, "Hey, we'd like to do these two projects." Each of the clients and said, "We'd like to do these projects in React Native." And convinced them to switch technologies just prior to starting the project which I'm not sure how that happened. Todd, my business partner, somehow went and finagled that. It was in September of 2015, I remember, which was exactly when React Native Android came out. So, it was basically like React Native Android came out. We convinced two clients to go that way, and then the rest is history. But--
Robin Heinze:
Oh, you had previously worked with RubyMotion which had a lot of--
Jamon Holmgren:
Right.
Robin Heinze:
--issues with Android, if I--
Jamon Holmgren:
Yes.
Robin Heinze:
--remember, right?
Jamon Holmgren:
That was one of the reasons we ejected from it. The iOS side of it was great. But when it went to Android, it was just really problematic. So--
Robin Heinze:
So, having this solution come along that promises a true like dual platform experience?
Jamon Holmgren:
Yeah. I don't know how we ended up actually trusting it, but we did. And that was a good move.
Robin Heinze:
It paid off.
Jamon Holmgren:
But it was definitely rough in those early days, Simon. I definitely remember that.
Simon Sturmer:
Our navigation, how many tries did it take us to get that right?
[Jamon laughs]
Jamon Holmgren:
We used react-native-navigation-flux. No.
Simon Sturmer:
I remember that flux-rotative--
Robin Heinze:
Oh, router-rotative-router-flux. Yeah.
[Robin laughs]
Jamon Holmgren:
Router-flux. Okay.
Adhithi Ravichandran:
I think router-flux is still pretty decent library. They are maintaining it.
Jamon Holmgren:
From what I understand, the API was always really nice. But it was just mainly React Navigation one for probably other reasons, but--
Robin Heinze:
Router-flux had a big update that long ago where their API changed to really like--
Jamon Holmgren:
Yeah.
Robin Heinze:
--resemble react-navigation--
Jamon Holmgren:
Yeah.
Robin Heinze:
--in a lot of ways.
Adhithi Ravichandran:
Those were the days.
[Robin laughs]
Harris Robin Kalash:
So, Simon, I'm guessing that at Facebook--So, you were doing the flux architecture for your clients as well, right? So, probably--
Simon Sturmer:
Yeah.
Harris Robin Kalash:
Did you ever do Redux or?
Simon Sturmer:
Yeah, so Redux just took the world by storm with Dan Abramov and whatever. That was 2016 or 17 '16 I wanna say, right?
Harris Robin Kalash:
Yeah.
Simon Sturmer:
And so prior to Redux, there was how many flux implementations? You guys remember? There were dozens. There was a new one, and it was like we had Thunks and we had Sagas. And No, actually, sorry. Thunks and Sagas probably came out after Redux. So, yeah.
Jamon Holmgren:
Mhm.
Simon Sturmer:
There were dozens of flux implementations, and a lot of them were modeled after what we had at Facebook, right? And so--
Jamon Holmgren:
Right.
Simon Sturmer:
--we pioneered, I guess, or the UI team--the core UI team in Facebook kind of pioneered that idea of this one-way Dataflow stuff which became--you know how these things become buzzword soups? Everybody's like, "My new framework has micro front-end architecture one way-Dataflow."
[Laughter]
Simon Sturmer:
And so--
Jamon Holmgren:
Right.
Simon Sturmer:
But when we did it, Dataflow was the buzzword, right? That was what everybody was--
Jamon Holmgren:
Yeah.
Simon Sturmer:
--after. And then Redux just came. It just wiped out the competition, right?
Jamon Holmgren:
Yeah.
Robin Heinze:
Mhm.
Jamon Holmgren:
I remember talking to a friend, we went to lunch. And we were talking about flux different--I think we were looking at a library called Reflux, which is the worst name, and it was okay. I went to lunch with a friend who said, "Have you ever heard of Redux? I've been using that, and it's pretty cool." And I think that's when we ended up switching over to that.
Robin Heinze:
Sorry, Reflux? Like acid--
Jamon Holmgren:
Reflex.
Robin Heinze:
Like acid reflux?
Jamon Holmgren:
Right.
[Robin laughs]
Jamon Holmgren:
Well, the--
Robin Heinze:
That's terrible.
Jamon Holmgren:
It's called flux, and they wanted to--
Robin Heinze:
Uh-huh.
Jamon Holmgren:
--come in. And actually I think I could be wrong, but I think that Redux was kind of a play-off of Reflex, the name. But--
Robin Heinze:
Interesting.
Jamon Holmgren:
--I could be wrong about that. But yeah, there were a bunch of kind of wars around what would win. And then Redux won, for better or worse. And we all started using it. We've been using mobx-state-tree lately. I'm actually the primary maintainer now in mobx-state-tree which we'll probably do an episode about that sometime.
Robin Heinze:
We tend to be mobx-state-tree evangelists, but--
Jamon Holmgren:
Yeah.
[Jamon laughs]
Robin Heinze:
--it has its quirks--
Jamon Holmgren:
It does. Yeah.
Robin Heinze:
--its ups and downs for sure.
Adhithi Ravichandran:
Jamon's super passionate about MobX.
[Adhithi chuckles]
Jamon Holmgren:
I love it, but that's for another time. We have a topic today. I guess it's a good time to introduce that. The topic today we're gonna be talking about React Native on the web and just kind of deep diving into that, talking about our experiences with it as a panel. We're going to talk about, well, a lot of things but just React Native on the web itself. Before I get too much further, I will say this episode is sponsored by Infinite Red. Infinite Red, of course, is the company that I'm part-owner of. And it is a premier React Native design and development agency located fully remote in the USA. We have years of React Native experience, as I just kind of talked about. And we have deep roots in the React Native community. We are the hosts of Chain React which is a React Native conference. We published a React Native newsletter for over 11,000 subscribers. If you aren't subscribed, go check it out, reactnativenewsletter.com. And you can hit us up, hello@infinite.red if you need help on your React Native project. Or you can email me directly jamon@infinite.red, and I will get back with you. You can learn more on our website infinite.red.
Simon Sturmer:
And you guys run the conference, the really famous React Native conference, right?
Jamon Holmgren:
Yeah, we do.
Robin Heinze:
Chain React
Jamon Holmgren:
Chain React is about 500 developers I think we get and from representing 200 ish different companies. We've had Facebook announced features like the last Chain React. We had Marc Horowitz do a talk on Hermes when they announced Hermes at Chain React. And by the way, this is a little bit of an aside, they just released Hermes for iOS. Or actually it's not released yet, but it's coming in 0.64. So--
Adhithi Ravichandran:
Wow.
Jamon Holmgren:
--that's coming pretty soon.
Adhithi Ravichandran:
Very interesting.
Jamon Holmgren:
Yeah. That should be a game changer on the iOS side.
Robin Heinze:
Once that comes out, we'll have to do an episode on Hermes, I guess.
Jamon Holmgren:
Yeah. Maybe I should try to get Marc in here.
Harris Robin Kalash:
Yeah, that would be good.
Robin Heinze:
Yeah.
Adhithi Ravichandran:
I always found the iOS performance pretty good actually.
Jamon Holmgren:
It is. Though I think the one thing that Hermes might help solve is the startup time really--
Robin Heinze:
Mmm. Right.
Jamon Holmgren:
--on the iOS side. Performance is pretty good otherwise.
Robin Heinze:
Mhm.
Simon Sturmer:
All I want from Hermes for Christmas is to support Date.LocaleString. And if they give me that for Christmas, I'll be happy.
[Laughter]
Jamon Holmgren:
They gave us proxy, and I didn't think that was going to happen. So, it will probably happen at some point. Cool, so let's talk React Native on the web. So, I guess my question to the panel-- And Simon, feel free to jump in first if you have some thoughts on this. Why would we ever use React Native on the web? It doesn't make sense because you already have React on the web, that's where React Native came from, was React. And React Native actually has a version of React embedded in it. It seems like to me that if you're gonna use React on the web, why not just use React and not go to React Native and then backport right back to the website of things? Obviously, I know the answer to this. But I'm asking the question to spur some conversation. Why would you use React Native on the web?
Simon Sturmer:
Yeah. That's the question, right? That's the question I already asked. And I've heard it put like, "We've come full circle. We are just laying abstractions on top of abstractions, and now we're back to where we started like what's the deal?" And so, it's a thin layer like I will say React Native web is a thin layer on just regular React for web, just to be API compatible with React Native. That's probably the short answer. Right. That's the TL;DR of it. The kind of why would I want this thing is, obviously universal apps, right? So Evan Bacon from the Expo team has been huge on universal apps. And I should probably differentiate that even though Expo web is kind of all the build tooling around React Native web, but the actual core React Native web is from a guy named Nicholas which is ExTwitter. So, he was at Twitter when they built that. In fact, Twitter itself both the desktop and the mobile website are built on React Native web which is great.
Jamon Holmgren:
Mhm.
Simon Sturmer:
So--
Robin Heinze:
I didn't know that actually.
Adhithi Ravichandran:
Hmm. Hmm.
Simon Sturmer:
Yeah. And they did it not because they wanted to share a code with their mobile app, but because they wanted a number of things that you get out of the box with React Native that you all probably know and love which is you get things like no CSS, right? Remember the famous Christopher Chedeau talk about why CSS is broken and you know why styling in JavaScript is the way to go forward. So you get all of that, right? And it's really well optimized in the way that they generate those class names everything. And then maybe the biggest reason that I initially got into it kind of prior to it being really smooth in terms of universal apps was that you get this flux layout. You get the layout model of React Native without having to try to mess around with all the browser incompatibility stuff where you have to put prefixed flux. You have to remember the flux behavior differences between browsers. And I know that's probably a non issue today cuz everybody's gone Chromium including Edge and everything, but that was like what jQuery came into the world to do back then which is just like gloss over, put an abstraction layer on top of all the weird browser stuff, I feel kind of like React Native did that for Flex layout.
Jamon Holmgren:
The biggest engine that you have to deal with outside of the Chromium browsers is on iOS. You have Safari, and you have to deal with that. So, clearly having an abstraction that works well across browsers is still a pretty big deal.
Robin Heinze:
And it's interesting you say that cuz we were--At Infinite Red we're working on a shared mobile and web project at the moment. Most of us are React Native developers primarily. I don't have a ton of front-end web experience. Personally, not good at CSS. But I was able to hop in and basically start using React Native web and build components using like the React Native Flex skills that I had just transferred. And I don't think I really fully appreciated that benefit of React Native until you just said that because I've never been a web developer. I've never really had to feel the pain of IE and all the different browser incompatibilities.
Adhithi Ravichandran:
So, that's interesting to hear your perspective on React Native web. I've never used it. And I have a similar product where we have a mobile React Native app. And for the web version we have a full-blown React web app. So, how much work is it for me to like translate that to React Native web? Or is that worth it? Something like that, would it be worth it?
Simon Sturmer:
No, probably not. You would definitely have to kind of rewrite all of your-- Okay. You could do it gradually, right? So you can one component at a time. I've definitely introduced React Native web into projects, and that's totally fine. I don't know that there's like a trick to converting it. You know what? It's a little bit similar like to the age-old question when React Native came out. People were like, "Great, I already have a React website. Just slap it into React Native, and it'll be a mobile app." And it's like, "Whoa, no."
[Laughter]
Simon Sturmer:
To some extent, sure you share your business logic. You share your reducers or whatever.
Jamon Holmgren:
Right.
Simon Sturmer:
But, yeah. No. I think directly to that point, it's kind of a ground-up.
Robin Heinze:
Okay.
Jamon Holmgren:
React DOM is kind of a leaky abstraction. Not kind of, it really is a leaky abstraction. You're using divs, you're using a, you're using--there are all these different elements that come specifically from HTML. And so you're using all of that stuff in React itself. So, in some ways it feels like React Native is a more pure abstraction where you have view and--
Robin Heinze:
Mhm.
Jamon Holmgren:
--button. These are things that can work across many platforms. It's not necessarily just specifically for the web.
Robin Heinze:
React Native feels to me instinctively what React should have been. Like--
Jamon Holmgren:
Mhm.
Robin Heinze:
--having learned React Native first and sort of getting to know it as like, okay, so you have the business logic and then you have this view layer, that's an abstraction on top of the native UI components. And so, not having ever done React. js, what I would expect React. js to be is the same thing except the view layer is an abstraction over HTML. But instead it just uses HTML.
[Jamon laughs]
Robin Heinze:
And so React Native web sort of brings that view layer abstraction back in.
Adhithi Ravichandran:
Interesting, so like I haven't used React Native web as I was mentioning. So, does it not have divs and a's and stuff like that?
Jamon Holmgren:
No, you pretty much are using the same stuff as React Native itself.
Robin Heinze:
Yeah, you're pulling in Views, you're pulling in Texts.
Jamon Holmgren:
Yeah.
Robin Heinze:
You're pulling in TouchableOpacity like--
Adhithi Ravichandran:
And it translates into a web component, then?
Robin Heinze:
Yeah, it translates it into HTML.
Simon Sturmer:
Not web components in the—
Adhithi Ravichandran:
Cool.
Simon Sturmer:
--sense of like Web Components TM, registered trademark. Not web components, but well--
Jamon Holmgren:
Right.
[Laughter]
Simon Sturmer:
But no. I think you bring up a good point, Adhithi which is that, what do you do about an a, right? Has anybody ever tried to write a link in React Native and you're like, "Wait a second, I have to pull in this linking library.''
Robin Heinze:
Yeah.
Simon Sturmer:
"I have to imperatively open things and--"
Robin Heinze:
Right.
Jamon Holmgren:
Mhm.
Simon Sturmer:
So, like that's a super legit kind of concern when you jump in there. You're like, "Great, I can just like do all my mobile stuff on the web." And then, before you know, you look at the markup and everything's divs. And it's like your link is a div, and your heading is a div and everything. And then you realize this is awful. But it isn't, right? So, that's not the end of the story.
Jamon Holmgren:
Yeah.
Simon Sturmer:
You get to add accessibility rules to things. So in the case of an a like or anchor hyperlink or wherever you wanna call it, they do have the concept of a View with accessibility rule link and then you throw your href on there.
Jamon Holmgren:
Mmm. Yeah.
Adhithi Ravichandran:
Cool.
Harris Robin Kalash:
Would you say that React Native web makes it a little bit harder or it doesn't matter? Because it seems like that sounds confusing to me that I have to know that I need an accessibility rule for it to be an a tag.
Simon Sturmer:
Okay, I can give you that. So, like the textbook answer is that we're supposed to semantically describe what we mean with the elements, not necessarily like syntactically describe that it's an a. So, it's like we should describe that we wanted to have the roleover link. But, okay, whatever. That answer aside, I think the essence of it is that yeah, you're trading off one pain point for another, right? So, you're trading off the pain point of not like you don't have to deal with CSS and browser compatibility and Flex layout. And you get a bunch of stuff out of the box for free. Like with Expo web, you get a ton out of the box for free from like camera and QR code scanners and local storage and abstraction layer over all that stuff. It's great. But the trade-off then is that you do have to fight with it sometimes to do really web-specific stuff.
Adhithi Ravichandran:
Mhm. So it sounds like if we want a cross-platform app with iOS and Android and also have a web version, then React Native web is just gonna take care of all these things.
Simon Sturmer:
Yeah. That's what I love to do, right? It's like you try to kind of you sell it as, "Okay, cool we only have to do 20% more work to get a web version, right?"
Adhithi Ravichandran:
Mhm.
Simon Sturmer:
And take that number with a grain of salt, give or take. Whatever.
[Jamon laughs]
Simon Sturmer:
But, there's some amount of work additionally.
Jamon Holmgren:
Yes.
Simon Sturmer:
That's like less work than doing the thing twice, right?
Jamon Holmgren:
And that was the promise of React Native with iOS and Android as well, wasn't so much that you can necessarily just drop the code in to both iOS and Android and have it work. It was more that it was going to reduce the amount of work and also the amount of like context shifting between the two. In practice, it's actually worked out better than we expected. And we've noticed that also with React Native web. I'm gonna go back to something Robin said earlier about how maybe React should have been what React Native web is now. And I would agree with that in abstract. I think that there is one aspect though that you have to think about, and that is the adoption side. So React wasn't the winner yet. And if it had come in and said, "Okay, you're not going to be writing divs. You're going to be writing Views."
Robin Heinze:
You have to learn a whole new DSL like--
Jamon Holmgren:
Whole new API. Yeah.
Robin Heinze:
Yeah.
Jamon Holmgren:
They probably wouldn't have achieved the adoption.
Robin Heinze:
It's true. It's true.
Jamon Holmgren:
Yeah.
Robin Heinze:
It's like you can--
Jamon Holmgren:
Yeah.
Robin Heinze:
One of the selling points was it's the same HTML and CSS that you use.
Jamon Holmgren:
Exactly. Yeah.
Robin Heinze:
Yeah.
Jamon Holmgren:
And at that time it wasn't even like React--Simon said like React Native it wasn't known outside of Facebook. It wasn't known that React was going to be anything other than a web framewok at that point publically or otherwise.
Adhithi Ravichandran:
That makes sense.
Simon Sturmer:
Even among the creators, right? I guess it's somehow little known, but Jordan Walke is the creator of React, right? And I don't think he ever--
Jamon Holmgren:
Mhm.
Simon Sturmer:
--had dreamed up native mobile apps with React. And he ended up moving on to--
Jamon Holmgren:
Right.
Simon Sturmer:
--reason and a few other languages and stuff. But, yeah. So, I think to take your point even further it's like it's not even that it wasn't a defining goal of it. It kind of wasn't even on their radar until I think Christopher came along and was like, "Hey, I got this crazy idea. What if we took the principles that we just learned and just applied it to a new medium?" And to go back to what you said Robin it's like these are generic primitives. These are building blocks of like whether you're writing a View that's gonna be like a PDF doc. I've seen like React using the concept of pdfDocs or terminal applications or whatever, and it's like these are basic primitives of Views and Texts and interactive elements and things like that. And so it's like, "Why couldn't we apply that to something else, right?"
Robin Heinze:
Mhm.
Jamon Holmgren:
It's really cool. I remember when we first heard about React Native, the misunderstanding or the misconception we had was, "Oh, they're running this in a browser." Because obviously you're using a web framework, so how are you possibly running this native. But then we looked into it. And no, actually, there's no browser, there's no web view involved here. So, all of the negatives of Cordova, PhoneGap, etc. which we all had kind of this visceral reaction to because we tried to try to do that before and it didn't work out so well. That was just incorrect it. It was, "These are native views, and that's the brilliance of it." And I think it was enabled by that one-way Dataflow, virtual DOM, all those ideas that came out of React which worked really well for abstracting across browsers and making sure that it had the performance that needed. It managed to decouple to the point where you could just put it into a completely new medium. And now it's not just iOS and Android, there's Windows, there's--
Robin Heinze:
macOS.
Jamon Holmgren:
--you know, tvOS,--
Robin Heinze:
Yeah, tvOS.
Jamon Holmgren:
--lots of other places where it's being used. In fact, this week I saw someone got Ignite working on tvOS, which is, you know, Ignite is our framework that we use to spin up new React Native apps. And we never intended it to work on tvOS, but you know, they got it working. So that's a pretty cool thing to see, and it wasn't that much work, I don't think.
Adhithi Ravichandran:
So back to React Native Web, how do you integrate like routers? Can you use something like React Router within React Native Web?
Simon Sturmer:
Yeah. And I think it comes down to how much of your code you want to reuse. So if you want to reuse 100% of your code across those platforms, then you need libraries that support both out of the box, and so React Navigation is the answer there. But React Navigation isn't necessarily the right tool on web, right? In terms of the right tool as in like the perfect tool. So yeah, I think what, you know, what you suggested using React Router is totally fine, but you're just gonna right, you're just gonna branch, you're gonna have, "Okay, this is my routing logic for web, and this is my separate routing logic for mobile." And there's run-time branching, and there's compile-time branching. So with compile-time branching, as you probably know where you do .ios.ts and .android.ts, right? It's the same thing where you do .web.ts. and then you're working on the web.
Adhithi Ravichandran:
So there is flexibility to, you know, pick and choose certain things like routing?
Robin Heinze:
Definitely. Definitely. We, I mean, that's the kind of the approach that we take, is like we're not afraid to write platform specific stuff, where it makes sense. Like navigation was one of those areas. And of course, you have things that need to go into the native layer on mobile that you write specifically for mobile, and then you write a web version. We're not aiming for 100% reuse because you kind of you lose efficiency in the last 20% kind of, it stops being worth it. But yeah, so we use React Router on web and React Navigation on native. And then whatever code reuse we get is gravy essentially, because the thing that we're replacing was two completely separate apps. So anything more than zero code reuse is a win.
Harris Robin Kalash:
One thing I feel we didn't really talk about is JSX. I mean, when JSX came out, I remember the community's reaction that was like everyone freaked out. And then you know, turns out that that was like one of the best decisions because now we have multiple renderers. And you know, even when Vue came in to try to fill that gap for all the people that freaked out about JSX, you know, React is still the bigger ecosystem, everyone's okay with it. And I even see really quickly that, you know, they want to work on React Native for Harmony OS even. So like supporting all these render targets, like being tied to HTML would never have gotten us there, right?
Jamon Holmgren:
What did you say? Harmony?
Harris Robin Kalash:
Harmony OS like the Huawei like--
Jamon Holmgren:
Oh.
Harris Robin Kalash:
--yeah.
Jamon Holmgren:
Yeah.
Harris Robin Kalash:
Because they got banned by Google, so.
Simon Sturmer:
Yeah, they got banned by like-- Wasn't it the US government who laid down the hammer? It's not like Google cared. Google was kind of told to, right? Isn't that...
Jamon Holmgren:
Yeah, I remember that.
Harris Robin Kalash:
Yeah. The US government laid down the ban hammer, and Huawei overnight had to come up with their own operating system, which they claim is much faster than Android, so we'll see. It's much better but like, I don't know, we'll see. But without starting a...
[laughter]
Harris Robin Kalash:
Yeah. So yeah, I think React Native will probably support that, too. So that's crazy. We have like all these renderers, I think that's really cool.
Simon Sturmer:
Yeah, I'd be surprised if they built an operating system from scratch. I would guess that they'd take the core of Android and just layer on a UI layer, you know? Like what do you call that? A GUI--
Harris Robin Kalash:
Yeah.
Jamon Holmgren:
Yeah.
Simon Sturmer:
--or something? Right, because a lot of what Google-- Because, you know, they can't stop them from using an open source project. I think a lot of what Google said they can't use is their ecosystem. They're like, you know, all the stuff that comes pre-loaded on Android from, you know, the Play Store to like Gmail, and those kind of things, right?
Harris Robin Kalash:
Google Maps and all this stuff, which is super useful.
Simon Sturmer:
And the interesting thing is China has a lot of alternatives to all the Google products anyway, because Google's effectively banned there, right? So it's like they have their own search engines, they probably have their own maps, I'm sure they have like internally everything. So that may not have been as big of a leap. I guess now we're getting way off topic.
[laughter]
Jamon Holmgren:
Yeah. We are. But I think that, you know, Harris, your point was that these abstractions allow for targeting all these different platforms when they come out, which is just a huge, huge advantage. And I think for those developers who have been around a while like myself, you know, we kind of look at this and roll our eyes like, "Oh yeah, a lot of systems have claimed they were going to be fully cross platform, but you know, have they really delivered? Well, React Native has actually really delivered. I mean, you know, Microsoft is now rewriting large chunks of Office in React Native. And that's not just on iOS and Android, that's Windows, that's web, that's a lot of different things. So it definitely is living up to the promise it seems.
Simon Sturmer:
After five years though, right? Like, I mean, in certain ways, it didn't live up to the promise. and-- Okay, that's not true. It probably didn't meet the performance expectations, you know? Cuz there was no promise around performance, but it probably didn't really meet the performance expectations until Reanimated 2, right? Like I think now, which is, you know, I don't even know that that is in state for release yet, but it's like now all of a sudden, because on my most recent project I've been using that, I'm like, "This changes the game," right? This is next level.
Jamon Holmgren:
Yeah, and I think that some of the rearchitecture of React Native itself on iOS and Android, there's fabric and turbo modules and other efforts that are going to really make a difference for, you know, being able to achieve the user experiences people want.
Simon Sturmer:
Yeah, cuz Reanimated 2 would not have been possible without turbo modules, right? Because basically you need to run you need to run animations off the main thread, but without the overhead of message serialization and deserialization or whatever, something like that. That's a pretty naive description of why it's amazing, but it is.
Jamon Holmgren:
Right, absolutely.
Harris Robin Kalash:
I have a question for you, Simon. Why do you think-- As, you know, someone who's sort of been closer to the React team than any of us, why do you think Android has always lagged behind?
Simon Sturmer:
I mean, I can take a stab at that. I don't know that I know the answer, but my-- The feeling, especially internally at Facebook, was that supporting the Android ecosystem-- So there's nothing wrong with Android as operating system or whatever, right? The Android ecosystem is a disaster, right? So there's just so many millions of devices around the world or I should say, you know, hundreds of thousands of like different kinds of devices and the versioning is a disaster, right? Like I mean, good luck ever getting an update if you're on some like, you know, I don't know, four-year-old, you know, no name brand, Android phone. And a large portion of the world is, right? Underpowered devices, a lot of them don't have a GPU, there's like-- So anyway, like I think it's just that you have to support such a wide range of devices. And a lot of-- So, you know, remembering back from my time at Google, internally what they would always say about Android is that we have to do it ourselves if we want certain things done right. And so they did, right? So like Google did their-- So originally, they tried their Nexus line, right? Which they partnered with HTC for, and they still were getting crashes and stuff that they later determined was because the driver and hardware layer. So then they pulled it all in themselves where they're writing their own drivers in-house, and now things are like working up to the standard that they wanted it to. And so what it comes down to is like even if the operating system's great, even if the hardware's great, like some, you know, hardware manufacturer that you've never heard of, is building drivers for their chipset, for their Wi Fi chips, that just is plain buggy, right? And it's like, you know, these are-- Especially you know when you think about camera, like if you've ever had crashes on Android that you can only replicate on certain that you can only repro on certain devices where like you open the front facing camera, an app crashes and stuff like that. Terrible things, right?
Jamon Holmgren:
Yeah.
Simon Sturmer:
So anyway, I might have accidentally ranted about the Android ecosystem.
[laughter]
Jamon Holmgren:
It's okay. I wanna bring this back to React Native Web for a brief moment.
[Jamon laughs]
Jamon Holmgren:
And I have a couple of questions for the panel. One is, what are the pain points that are still there with React Native Web?
Simon Sturmer:
I've run into a lot of sort of challenges trying to use escape hatches. So for example, let's say you wanted to do like a drag and drop file uploader, right?
Jamon Holmgren:
Mm hmm.
Simon Sturmer:
So that doesn't exist in React Native, there's no concept of that. So you have to do one of two things. You have to pull in a library that was not built for React Native Web, which is definitely the easier path to go. But that's likely going to need, or depending on which library you pull in, it's going to need a handle to a DOM element, right? So you have to find a way to get a reference to a particular DOM element, which okay, not the end of the world, but there are definitely some challenges around that. The other option is that you kind of write your own, which I've gone down the path of and you know, you have to be-- Like if you're part of a larger dev team where it's more likely that you're going to write some internal tooling or you have an infrastructure team at your company, like you guys at Infinite Red, you probably have an infra team, right? That can like help build these like tooling when you need these challenges. And so if that's the case, so like, you know, when I was running an agency, we had an internal infra team, and it's like if a product team needed a thing, they would go to the infra team and be like, "Hey, could you guys build out this thing for me and make it work," which is great. But, you know, not every developer has that opportunity. So you end up sometimes stuck in a place where you have to interface between some [unintelligible 34:40] where you pull off with NPM and the React Native web ecosystem, and now I've learned to kind of solve all those things, but that's probably a pain point for people getting into it, right?
Jamon Holmgren:
I can definitely see that.
Robin Heinze:
Hey Jamon, who's on our infra team?
Jamon Holmgren:
Yeah. Speaking of which--
[laughter]
Jamon Holmgren:
I I saw Robin...
Robin Heinze:
What's that?
Jamon Holmgren:
Yeah, I'm probably, but I don't know. I'm probably the closest thing...
Robin Heinze:
We have about eight developers.
Jamon Holmgren:
Oh, okay.
Robin Heinze:
Is that like eight?
Jamon Holmgren:
Wait, what? Eight? No.
Robin Heinze:
How many developers? Nine?
Jamon Holmgren:
We have 18, we have 18 developers.
Robin Heinze:
Developers?
Jamon Holmgren:
Yeah, I just counted last night.
Robin Heinze:
Really? Come on, I thought we have less than that now.
[laughter]
Robin Heinze:
On the React Native team?
Jamon Holmgren:
Oh no, that's across the whole the whole company.
Simon Sturmer:
Robin doesn't count anyone who's not React related.
Robin Heinze:
Yeah, like actual developers, yeah.
[laughter]
Adhithi Ravichandran:
She seems like, "Where did all these 10 extra developers come from?"
Robin Heinze:
Yeah, right?
Jamon Holmgren:
Yeah, okay. No, that's across the whole company and count some contractors and staff that we have working on some projects. But yeah, no, our team size is about 25 people. So infra team would probably make sense at a bigger size. But yeah, we do a lot of it ourselves. Like startups, like, you know, startup technical teams do. And you have to take these challenges head on yourself and devise solutions around them. I totally agree Simon, that's a pain point of React Native Web. I think that another piece of that is that so much of stuff on the web is for React Native or it's for React JS. And when you have this kind of in between of the React Native Web, you tend to kind of hit a point where the advice is, it's harder to find, you know, common paths and accepted, you know, this is the way to do it. So people tend to kind of have to build their own way a little bit. And I know that-- I feel like everybody who's done React Native Web and React Native has their own way of sharing components between the two, you know, and sharing logic between the two. How do you kind of bring these two things together? Metro is famously finicky about things like symlinks and other things that are helpful for this sort of a problem. Well, probably in the future-- We probably don't have time this episode, but in a future episode, we'll talk more about how you might structure a project for that. I think that would be really interesting one. But yeah, that's definitely another pain point. Any other pain points?
Simon Sturmer:
I guess accessibility is always a challenge. That's probably a pain point regardless. And to some degrees, React Native Web gives you more accessibility, gives you some accessibility options or gives you some abstraction over certain kinds of accessibility things. But these are small pain points I think.
Jamon Holmgren:
Yeah, for sure. Now, when would you decide to go with React JS? This is my last question. When would you decide to go with React JS instead of React Native Web or vice versa? What types of factors lead into a decision? You know, we're gonna go with React Native Web. And I know we just ran into this with the project that Robin's on. Well, I guess it was in March or whenever we started the project, but we were going to be building the same components in web and mobile, they were going to be very similar, maybe minor differences. And so we had a decision to make, and we ultimately went with React Native web because of the code sharing. But what types of things-- When would you decide to go with React Native Web or React JS?
Adhithi Ravichandran:
So I have done a React Native and then a counterpart React application. So the reason why we decided to go that way, I didn't know much about React Native Web then. This was probably like two or three years ago. And we wanted a slightly different look and feel, we just didn't wanna replicate the look and feel of the mobile on our web. We didn't want it to look like a web app that, you know, somebody can tell that, "Hey, this is just a web version of a mobile app." We wanted it to be its own thing, and you know, we wanted to use all of the real estate to show some other features and things on the web screen. So we chose React. But now that I've heard from you guys today, I don't know, maybe we should have picked React Native Web. So I'm not sure what the answer to that is.
Jamon Holmgren:
It was a lot more rough in those days though, so I'm not sure that it was a bad decision at the time. It's definitely come along way.
Simon Sturmer:
Yeah, they just did a major rewrite like a few months ago. So yeah, at the time, you might have made the right decision for sure. And you know, there's things you can't use, right? So maybe not can't, but like if you're going to go down the path of using Tailwind, which is a great, you know, set of I guess, styling primitives or you know, gives you a lot of other boxes, modern day bootstrap in certain ways that looks better. And if you're going to use that, then, you know, don't fight with trying to make that work with React Native Web, probably just go React JS, you know. And that may be true for a number of frameworks, right?
Jamon Holmgren:
And things like Next.js, that's another example. You can use React Native Web with Next.js, but last time I looked at it at least, it was not trivial, and it's sort of like, "Well, don't fight the system at this point," you know, just roll with it. But as you said Simon, you can actually replace things piecemeal as well, you don't have to go all in on it.
Simon Sturmer:
Absolutely. And we gotta check with Evan and Brent from Expo about the Next thing, but they've been working very hard to make it work Next really well, I think. So I'm hoping that that situation is better than when you last checked.
Jamon Holmgren:
I love what they're doing over in Expo with React Native Web, I think that that's gonna be fantastic. It's a great team, they do a great job.
Simon Sturmer:
Yeah, they're incredible.
Jamon Holmgren:
So I think that's probably good for now. We have tons more to talk about with this subject, but I think that we'll have to leave it for another episode. I'm going to move into another quick little section that we do called weird bugs, where we ask has anybody run into a weird bug in the last, you know, few weeks or been dealing with it? You don't have to have solved it, just kind of talk about it, or maybe worked with someone who has run into a weird bug. I have one that I heard about kind of secondhand from one of our developers. But before I talk about it, does anybody else have a weird bug that they wanna talk about?
Robin Heinze:
You can go for it. Go for it, Jamon.
Simon Sturmer:
I think you go first, we'll turn it over in our head for a sec.
Jamon Holmgren:
I'll take this then. Yeah, perfect. So Frank let me know about--. So Frank works for us, he's a React Native and React developer. So this is I think something that if you've worked on React Native apps after being a web developer, you've had to kind of adjust to. But you don't really have cookies in the same sense, you know. Cookies aren't exactly the same deal when you're working with React Native because obviously, you're not in a web context, you don't have a browser, you're not in a WebView. And he had a situation where after a session timeout, like after over an hour, some users would open the app and try to log in, and they would hit an error in this app that he was building, that would be like a 500 error. And they were using an API client called SuperAgent. He said, "You know, this works well." But this client was really built for the web, and it handles cookies behind the scenes. And, you know, for React Native app, usually you're passing through an auth token or JWT in a header when you're making requests. So the back end in this particular app was never really built for mobile, it was just kind of an adapted web back end. And it was looking for a cookie, that's what it was trying to do, is look for a cookie. So he eventually suspected, "Oh, wait a minute here, there must be some long expired, you know, cookie value that it's looking for. And the back end is freaking out at this point, so we need to have the back end team go in there and give us some love. You know, this relying on a cookie is not going to work here.
Robin Heinze:
We've actually been experiencing something sort of similar--
Jamon Holmgren:
On your project?
Robin Heinze:
--on our-- Yeah, on our project. Because we're sharing business logic now. In addition to sharing components with React Native Web, we're sharing business logic. Means sharing API calls, and so the mobile app obviously uses authentication headers, so the web does too now. But their API previously used cookies for authentication, so we're having to kind of do a little bit of a hybrid approach and like manually set a cookie with the token, and then they're having to change some of their endpoints to like accept auth headers and recognize those. So yes, definitely a challenge.
Simon Sturmer:
I mean, like in my mind, the subtext that whole like fetching works differently on mobile is that you have no concept of an origin, right? So same origin policy is out the window and mutilated of course, is really out the window. And in some ways is more powerful, like so think about it. A React Native app-- So if you didn't have a password on your router, your 192.168. or whatever or your password is admin admin, think about it. A React Native app that you're running your local network could hit a web request to that because there's no concept of an origin, log in, change your router settings, and do that kind of stuff and you won't even know, right? And so like this is things that maybe people don't realize that we get protected from on the web, where some random website can just make a request to my router, log in and start doing things, whereas on like mobile or at least on React Native and probably on any mobile, like you can go nuts with, you know, like with making requests everywhere. But then the flip side to that is, just so it's more powerful in that regard. But then the flip side of that is like you were saying, you have to manually manage your cookies, you have to set every little thing independently, right?
Jamon Holmgren:
I've been dealing with that with React Native WebView, which I also am one of the maintainers on, and you know, we have a pull request right now waiting to be merged that persists cookies between reloads and sessions and stuff, not between sessions, but you know, it just kind of behaves like you would expect a cookie to behave. But it's very kind of like-- It just feels a little weird to be storing cookies in WebView, and you know, and just the lookup table and sending them along and like checking the origin, it's like we're reimplementing a browser basically. Like I don't know if I feel qualified to do that, this feels dangerous. Like I'm totally missing something.
Simon Sturmer:
It's like rolling your own crypto. We're not supposed to be doing this, this is above our...
Jamon Holmgren:
Exactly. You know, if you use React Native WebView, make sure that you review all of the thousands of lines of code to make sure that everything works exactly how you want it to. That's my disclaimer.
Robin Heinze:
It's funny that you mentioned CORS errors not being a thing with mobile because we've been battling CORS errors pretty much non stop for the last month on the website, but like the mobile site is all smooth sailing cuz like CORS isn't even a thing. So I'm like, "I'm not sure how I feel about having to deal with CORS errors on the mobile side. I kind of like this open security policy here.
Jamon Holmgren:
The reason for that is because you're not necessarily on the mobile and the native side, just running kind of random JavaScript that can be injected from, you know, wherever, you're dealing with a little more, hopefully, a little more trusted code.
Robin Heinze:
It just leads to a more frustrating developer experience, having to spend your entire day being like telling the server team, "Hey, can you guys fix the CORS errors on this endpoint? Okay, now this one."
Simon Sturmer:
But yeah, in terms of crazy bugs, I would say all other crazy bugs that I've experienced in the last anytime recently, fall under the category of keyboard avoiding view or keyboard avoiding scrollview. Like that just is the bane of my existence.
Adhithi Ravichandran:
Oh, me, too. I hate those.
Simon Sturmer:
So bad.
Adhithi Ravichandran:
Yeah, me too. It's just-- It's still not resolved on my end. I've tried using everything.
Simon Sturmer:
There's no right answer. You can't win this. You can't win that battle.
Adhithi Ravichandran:
No, no, no.
Harris Robin Kalash:
I wonder why. Still see a lot of apps that don't get it right either. Like I know the pain, I just wish we had like a good solution for all the devices.
Adhithi Ravichandran:
I know there's like keyboard avoiding view, keyboard aware scrollview, and then there's just, you know, so many different things. But for sure, it either breaks on Android, if it works on Android, it will break on iOS. It's just like back and forth and back and forth.
Harris Robin Kalash:
Yeah. Does anyone know why it's so hard to get that right?
Robin Heinze:
It's just a hard problem, right? You're talking about changing half of your screen real estate.
Jamon Holmgren:
Yeah.
Harris Robin Kalash:
Right. But I feel like shouldn't like the native side give us the exact offsets that we need? And--
Adhithi Ravichandran:
Exactly.
Harris Robin Kalash:
--that's what I'm trying to understand. Like why don't we have like a simple way of getting those...
Robin Heinze:
Is this a hard problem for pure native too or is it all figured out for pure iOS and pure Android?
Jamon Holmgren:
I remember it being a hard problem for native too because there aren't the tools like Harris said. There generally aren't. In the early days, it was easy because every-- We never built for Android and iOS, the keyboard was always the same size. You could literally hard code in the values into the app.
Adhithi Ravichandran:
500 pixels.
Simon Sturmer:
Oh, it's like when the header bar was always 20 pixels, was it 20 at the top? And it's like then...
Jamon Holmgren:
44 for the-- I think it was 44 pixels for the header, is that right? And 20 pixels for the status bar or something, yeah.
Simon Sturmer:
And then you have the in-call status bar that came around and screwed everything up, right? And then on top of that, now we have the notch in there.
Adhithi Ravichandran:
Notch, yeah.
Jamon Holmgren:
The notch, yeah. Thanks a lot.
Adhithi Ravichandran:
And now Android devices have notch, too.
Jamon Holmgren:
Mm hmm.
Robin Heinze:
Some but not all.
Simon Sturmer:
And now the new Pixels on Android have the pinhole, right? So they have the hole on the upper left of the camera, which I like. I actually think it's probably a good solution to that problem. It's just that now we have to think about more things.
Jamon Holmgren:
Cool. Well, I think we are out of time here. Thanks so much Simon for joining us, it was awesome to chat with you. And hopefully, we can have you on in a future episode.
Simon Sturmer:
Yeah, absolutely. It was great talking to all of you.
Jamon Holmgren:
Where can people find you online, Simon?
Simon Sturmer:
So you can find me on Twitter, which is sstur and then an underscore at the end. So you have to have that trailing underscore cuz someone took my username on there. You can always give me a shout out at sstur@me.com at me.com. But yeah, if you search my name, I'm really easy to find. So you can find me for sure.
Jamon Holmgren:
Perfect. And Harris, you have a new Twitter handle, what is it?
Harris Robin Kalash:
nomadicspoon, that's where you'll find me, @nomadicspoon.
Jamon Holmgren:
nomadicspoon.
Harris Robin Kalash:
Yeah.
Jamon Holmgren:
I can definitely verify for the nomadic side of that. Not sure about the spooning but that's...
[laughter]
Jamon Holmgren:
Robin, you're @robin_heinze with an E?
Robin Heinze:
Yes.
Jamon Holmgren:
And Adhithi is @AdhithiRavi on Twitter.
Adhithi Ravichandran:
Uh-huh.
Jamon Holmgren:
Perfect, and we'll link to all of those things in the show notes. Thank you all. Make sure to subscribe on all the major podcasting platforms. We are called React Native Radio. As always, we are brought to you by Infinite Red. Check us out infinite.red. And we'll see you next time.
Robin Heinze:
Bye.
Simon Sturmer:
Thanks everyone. See y'all, have a great day.
Adhithi Ravichandran:
Bye.
[outro music]