React Native’s Secret Superpower

[@samuelgunter]

Write Once, Debug Everywhere

[@XavierGoncalves89]

Write once, cry every time

[@thedavistheory7674]

Are we talking about java?

[@samuelgunter]

@@thedavistheory7674 no, no. Java is write once, never run

[@maxwebstudio]

😂

[@patrickisboard]

+ ", write workarounds for every platform";

[@mouhibsahloul2577]

As a react native dev I commend you for this because a lot of web devs don't know the struggles of shipping a new version to the app/play store

[@grimm_gen]

And Expo espesially makes this so easy!

[@romeorichardson3138]

So many developers can't see past their noses and only look at performance, it's refreshing to see an opinion from someone like Theo that looks at the nuances of user & developer experience as well.

[@jocke8277]

while what he's saying is true, isn't this just a kind of a loop hole in how apple and google run their app stores? there is no fundamental reason to why this works with RN and not SwiftUI, it just happens to be the this way because of arbitrary rules set by apple, that could change at any time

[@kabal911]

It’s all part of the “lie” that you need “hyper scale”. For most developers and projects “performance” is irrelevant (I’m not talking about slow apps that take seconds to render/respond). I shudder to think how many LOB apps are out there that serve under 100 users, but are made up of 10 microservices

[@twitchizle]

​@@kabal911 hey thats me. 🙋‍♂

[@askeladden450]

Dont ever put RN and UX/DX in the same sentence. Ever.

[@pacifico4999]

​@@jocke8277It is kind of a loophole and it's great

[@11vag]

You have literally made me change my mind about react native. I didn't actually pay any attention to it up until I started watching your videos. Thank you.

[@randyrips]

I remember you talking about this a few months ago and it made a lot of sense. Something I never really thought about before.

[@VeitLehmann]

I did React Native in 2017/18. Flutter hadn't taken off yet. Flow was still a valid alternative for TS, and we used it, because RN also did. It was bleeding-edge, sometimes painful, but often awesome! We also did OTA updates, and sometimes it saved our ass. Now I don't develop mobile apps anymore, but if I did, I thought I'd look into Flutter first. I love the DX that both RN and Flutter provide. But maybe I should give RN another shot first. Server components with RN sound really powerful, can't wait for your insights!

[@jamonh]

I appreciate you being an advocate for React Native, Theo! It gets often unfounded criticism but I was a native dev back in the day and it was often brutal to get through the App Store review process.

[@epiclifesociety]

I think the single codebase and writing Javascript instead of Swift are good, but what you mentioned here is more legendary than any of that. Thanks for all the great insights.

[@magne6049]

Tamagui is also a secret superpower of React Native. One codebase, multiple native platforms (all enabled for web developers).

[@elvispalace]

Next version of Expo Router will support Server components in the similiar way to NextJS. So excited

[@Mosopia]

yeahhhh! Expo is giga chad

[@RaulMartinezRME]

Technically you cannot chage the behaviour of the app or Apple will complain

[@EvanBoldt]

How is this not against App Store rules since it effectively bypasses their review?

[@MrStupiuno]

Its not "weeks in advance" for app submissions. I often have them approved the same day or at least within 24 hours. Also, you can force upgrades by setting a minimum app version in your API calls. For example, the Chipotle app does this all the time.

[@thisweekinreact]

Expo api routes is the first step toward RSC on mobile. It's only a matter of time before EAS offers a server runtime, and fullstack support with universal RSCs

[@tmoran]

Over-the-air updates are nice for sure, but by current App Store guidelines, you are only allowed to use them to fix pressing bugs, and not as a way to circumvent the review process (doing so can get your app banned). I think there are also special restrictions/provisions if your app displays an embedded browser (because it's also a form of OTA), so not sure how server components would be allowed meaningfully?

[@CottidaeSEA]

Just getting an app onto Testflight isn't the easiest, so I'd imagine it'd be tough getting what is basically "HTMX - the app" onto the App Store. I wonder what restrictions would be imposed before it'd get approved.

[@bdotexe]

Where I work we've used codepush to release fully fledge features, and entire user flows, and we've been doing so for 3+ years. As long of you don't change what the app is for or misguide users anything goes.

[@bburns]

Yeah was wondering about this - ota updates could completely change the app...

[@N.A._]

Wasn't this always possible but apple bans your app if you do it yourself, forcing you to pay an "authorized" code push service?

[@elvispalace]

nop. discord uses this feature a lot

[@ethestel]

What you're describing here is against Apple's App Store review guidelines (item 2.5.2).

[@808x86]

Is it server-driven UI? Where is the react UI coming from? From a server?

[@ifscho]

MS Code Push. Just need a way to keep track in the repo what was the last state of native dependencies.

[@nolanwesl3y]

I'm building an cross platform app with react native. sometime error is so dump work fine on web and not fine with mobile.

[@supercoolcat7692]

“The json wasn’t json, but structured markup.” Sounds a lot like HMTL

[@HandHoldHelp]

Wouldnt it be better to use CapacitorJS then?

[@51Grimz]

Can you please talk more about this model of shipping a JSON model that describes your UI? I found it quite difficult to work with but I'm hoping that your implementation has some improvements I might be able to leverage.

[@IncomingLegend]

I'm not a fan of the "server components" noise... we've been sending markup code from the server since the beginning of internet browsing, and we've never stopped doing it through PHP/Laravel, C#/ASPNET etc... the only difference that I see now is that the markup response is now automatically handled by a client library and makes it act like a SPA... its useless in my opinion...

[@pieflies]

I think you could do more to explain the benefits of server components over JSON API. The way I understood what you said is that you’re still doing the same amount of work with the same complexity of rendering different things for different people/scenarios, you’re just doing the work in a different place.

[@t1gr235]

From what I understand, it is doing the work in a different place. By offloading the work to the server, we can deliver the component to the client as needed, rather than having extensive 'if...else...' conditions within a single large component.

[@pieflies]

@@t1gr235 but those conditionals still have to exist on the server side don’t they? I guess it does make the app side potentially smaller, which probably has benefits in a lot of cases.

[@t1gr235]

@@pieflies yes, I think so

[@theangelofspace155]

​@@piefliesmaybe that you dont need to parse json?

[@AntoniGawlikowski]

What about the security of this solution? I mean if the server can send any arbitrary data and the app just renders what it receives, wouldn't that open a very compelling vector to use for malicious actors? It has to go through some stringent validation on the device and if it does, I'd imagine it would limit the power of this solution quite considerably. Am I misunderstanding this somehow?

[@qorzzz9252]

OTA updates are great but if I had to make a list of the 3 best aspects of react native, OTA updates by itself doesn't make my list. Here's my list for anyone wondering 1. Cross platform targeting (this is the core problem react native was built to solve) . 2. React Native compiles and runs JS (this is what enables OTA in the first place). 3. Fantastic tooling is available - Expo has improved my workflow 10x on everything from development to deployment. These 3 reasons make it a no brainer when deciding what to use for mobile development.

[@TimMattison]

When is Apple going to realize that this gets around their rules and bans it? They still have the interpreted code rules technically, right?

[@AndreiTelteu]

I am actually working on a open source solution to power react native apps with server-defined components. I am using acorn and astring to convert jsx and using eval to execute the code. What does react server components have to do with any of this ? How would RSC do to help this ?

[@pointer333]

Finally got my sub. I feel like the quality of your content has picked up lately. Very useful information. Thank you for that l, sir!

[@rbus]

Interesting. Gave React Native a whirl when it was just released and tackling a cross-platform iOS/Android app but ended up not using it cuz dev environments weren't up to snuff (having to work outside of Xcode), and Swift was new and really appealing so ended up just using the native tools for each. In retrospect, should have stuck with React Native to save time on maintaining the apps.

[@Calmac_]

Sweet sweet ASP VB (Server Components) 😂 We are going full circle - back to the 1990s! 🤘

[@dawidgrden2227]

So basically they can exploit our devices at runtime with real time updates ???

[@tonajki]

Can't wait for server components. Not being able to offload computationally heavy stuff is a real pain point for our team right now, makes our app choppy on older Android devices.

[@ConnorMoody]

Please never have ants crawl across the screen in your videos again

[@yohaneskustiadi9807]

i love react native, but right now im just stuck on my project using kotlin. sometimes kinda wanted kotlin can be used on react native

[@dalanxd]

Great vid as always, but it's important to say that everything you said about React Native's update system applies to Capacitor JS / Ionic So this is not unique to RN, it's something that happens when you build native with a JS framework on top that decides what to render

[@Rama-Rama74]

But the argument against that would be performance of a web App that runs on a Webview viz-a-viz that where the UI translates to the native API calls. In short, RN would do whatever a Capacitor App could do, better!

[@kyuss789]

It’s great till the OTAs fail to apply to all your users. Also good to note flutter is getting OTA as well. It’s a pretty important feature.

[@dongnez]

But I dont know how you can apply this in a real react native app. Every time I change the js I have to export the app again to visualize the real changes🤔

[@codingbyte4529]

I think expo go can do what he talks about

[@dylanzemek7069]

It’s a shame that ota is incredibly confusing to get up and running, I tried it recently and any ota update just white screens. They need to do a better job with branches and all the confusing stuff around it

[@jzea5605]

I heard so many reports of peoples app being taken down for violating App Store policies for using RN that can OTA. Is this still an issue?

[@rolangom1]

That's the greatest feature of all, that's why I still choose react native

[@EthanStandel]

Doesn't everything about this break every app store's TOS?

[@bdotexe]

No it doesn't. If you misguide your users via updates it does, for example if you upload an app for a blog, but sudddenly via updates you then change it into a game, add some kind of subscriptions for it. Since it wasn't the original app == ban.

[@danvilela]

Ping have mobile app? Where do you use react native?

[@browny99]

At what point do we just make a website and tell people to add it to their home screen like prusa does?

[@gsarnaudov]

OTA updates have been a life saver for so many of our projects. Are there any good alternatives to Microsofts App Center?

[@abulaman8713]

Hell i always wanted to do the last part, server deciding what exactly to render on mobile too. Groundbreaking 💯

[@SuperYoda7]

I also loved it ! But how do you do upgrades without going through the appstore and building the binaries again? Any repo, info or link is very appreciated.

[@alkinart7834]

This could be a game changer🤯

[@SXsoft99]

and then we have flutter, a mix of js+swirft+kotlin

[@huge_letters]

So Is the JS code for RN apps is not stored on the devices per se but on your server? So it's more like a web app but with a native layer which render your UI as a native app? Never done mobile dev so just curious how does all this works.

[@bdotexe]

The js bundle in the app is stored on the device, then your update is stored in a server somewhere, you download it to your device and replace the old bundle. Is a bit more complicated than that, but that's the tl:dr.

[@huge_letters]

@@bdotexe so JS bundle is not stored on the app store servers but in the servers you host yourself?

[@_gut11]

Trying to understand this too...

[@glaze4629]

@@huge_lettersYep, you either store the store on your own remote server or opt in to use expo's servers

[@Hexalyse]

Isn't a big upside of client component in react native apps the fact that the app can run offline ? I love Server Components for websites/web apps, don't get me wrong. But it cannot really be applied to all mobile apps, because it then means without an internet connection, your app will literally not work at all.

[@ritsu133]

why would want your app work without an internet, if it's for example food delivery app, or online shop? it will be useless app without an internet. 95% of apps like that and don't need this probably

[@Beyram1501]

I don't understand, react native updates don't go through app review?

[@shafu_xyz]

great insights!

[@CanRau]

Should be possible with Tauri as well right?

[@omtechofficial]

I thought those are real ants

[@TechBuddy_]

Lol 😂

[@dmz985]

So it's like an old-school server rendered website...? Might as well just use a web browser on mobile and optimize your web page for small screens

[@owencraston]

Is this possible right now? If so, can someone point me in the right direction on how I can get this done right now with react native?

[@urstrulypriyankrai]

I would love to see server components in rn

[@xxxxxx-wq2rd]

that's very useful to know!

[@gappalchemist]

Amazing 🎉

[@PhilipAlexanderHassialis]

So you get a native application on your device that will eventually be HTML-ish-or-something-like-it and then change the application's UI. Is this just browsers with extra steps or are we so far down the rabbit hole that we ended up where we begun? Yes, yes, native APIs and yes yes mobile browsers and their frivolous support and yada yada. But think of it just for a second from an outside perspective. Seriously, is this our life now? To take something that is more or less defined as an open standard by W3C and then re-engineer and bastardise and re-implement just to arrive at about the same starting point. What. The Actual. Fuck.

[@bj97301]

Nailed it!

[@CB-zs9ov]

Isn't PWA's meant for that?

[@giuliopimenoff]

It's a decent solution to the problem, but can you achieve "offline first" experience with that?

[@CottidaeSEA]

Can you achieve an offline experience with anything that is reliant on a remote server? Not really. People simply have to accept that if something relies on a server, you're screwed the moment the server goes down. I'm currently developing an app that will simply cry itself to sleep the moment the server doesn't respond anymore; *that is fine.* Well, not the server going down, but the app not responding *is fine.* Because the app is just kind of useless without the content stored on the server regardless. Sure, there is caching so navigating back won't break stuff, but nothing new will ever appear and the moment you bust the cache, that's it.

[@giuliopimenoff]

@@CottidaeSEA I see. yeah rn doesn't suit all use cases of course

[@CottidaeSEA]

@@giuliopimenoff I do have one app project, basically a sort of advanced todo app which stores data internally using SQLite, then syncs once it gets an Internet connection to my server, that stuff is absolutely possible to do at least. Still, that's because I am not reliant on the server, it mostly acts as a backup and isn't an integral part to the app. I mostly used it to test a couple of libraries that I am thinking of using in the other app I mentioned.

[@nikpolale]

I really don't see huge benefits in "server components" for react native. First of all, js doesn't really take much space as for the native app. Default react native app is 15mb minimum, depending on the device and features(expo is usually more). Because it needs all the native bindings. Not because of the JS. Thus, even if you bring all the logic to the server - ok, you save 300kb and now your app is 14.7 mb, and not 15mb. Not really a big benefit from my perspective Secondly, you make your app take up even more time to load. It's a common issue that react native apps are opened somewhat slower than really native apps. It's because all of the bindings and the fact it's not truly native. And most of the times the first screen is login screen or something like this. If you bring all the "UI"on the server - you need to wait extra time for server to respond. And what if it throttles for a second? Now you app takes 2s to open instead of 0.5 when you "just render" Maybe I'm just blind and don't see some obvious use cases, but can't see it drastically improving UX

[@nanonkay5669]

When is React Native going 1.0?

[@glaze4629]

At this pace, probably in 2-3 years

[@2penry2]

The walled garden sucks in app stores, especially when most of the native apps can be PWA's these days.

[@eero8879]

I used to like Android development when it was simple and straightforward. The API level was probably ⅓ of current :D These days it feels like too much crap to not use RN or something similar. Most apps could just be normal webpages though.

[@TurtleKwitty]

It's kinda funny you say all that as if only react native can do dynamic screens XD If RN can do it so can anyone, the real problem is that what RN does is actually not really allowed on the app stores but becasue its facebooks product they let it slide; if they didn't care about you doing dynamic changes with 0 review then there would be no review process for updating apps, but again becasue its facebook then they let it slide that youre entirely circumventing the process.

[@techjandro]

I mean, I know other companies and apps out there that are not open as RN that do the same, so it is not because is RN from Facebook in my opinion. It’s just difficult to control overall.

[@theangelofspace155]

At 4:41 I though he was going to say htmx 😢

[@AngeloTadeucci]

React native is still where I get the most pain with random errors when trying to run/build. Enjoying flutter a lot more, flame me Theo :D

[@CottidaeSEA]

@@JEsterCW If I had $1 each time I got an error while starting up my dev environment just to have it work on the next attempt without any modification, I'd already be rich. Oh, and the thing I dislike the most about React Native are the nondescriptive errors. I once missed a single import because of some naughty copy-paste I did and the app rightfully went apeshit and threw a red screen at my face, but the error messages gave absolutely no indication as to what was wrong.

[@bdotexe]

@@CottidaeSEA That is common if you have hermes enabled. If you disable hermes for dev environments errors are really clear.

[@CottidaeSEA]

@@bdotexe Oh, I'll check that out. How do I disable it, just doing something like "npx react-native run-android -- -PhermesEnabled=false"?

[@sylensdrake9706]

react native server components... no offline possible

[@dawidgrden2227]

I'm not mobile dev but this stuff is bonkers 2 me

[@Silverdagger258]

Although what is described here is a nice convenience, is it not at the same time a security risk? There is a reason the app gets reviewed before its published

[@carsonhawley8838]

As someone who's been stomped into the ground by clueless Apple reviewers, this live model really resonates with me, but given the huge opportunity for abuse (like injecting gambling components into your UI), I doubt Apple will let something like this through.

[@bdotexe]

Then don't use it for that? The guidelines are pretty clear for OTA updated on both play and app store.

[@rickdg]

Which means you can also code push to capacitor or cordova apps. Isn’t JS/CSS kind of awesome sometimes?

[@jgfjfgjfhjf]

Hey, you like bloated websites that don't quite work and take forever to load? Well, now your apps can do that too

[@gabrielmachado5708]

So, it looks like we are inventing HTML again

[@mzerone-g6m]

Liveview native you are wrong

[@Dev-Siri]

Aren't you at Las Vegas rn?

[@aryabp]

Face tauri dude

[@jacoblockwood4034]

Editor, please don't use the "spiders crawling on the screen" to represent a bug, I always think there are actually spiders there. One time there really was a bug crawling on my screen while watching a vid in fullscreen and I thought it was an effect, scared the crap out of me. I mean you don't have to remove it but it would be nice

[@funhaos]

Bruhh! Respectfully stfu 😂. This is the one loophole we have to bypass apples governance of iOS dev in 2023. ILY but 🤫😂

[@denysolleik9896]

Summarize this video.

[@beck4715]

expo good

[@ChaseMcDizzle]

facts@@beck4715

[@elvispalace]

​@@beck4715this