React Native’s Secret Superpower

Поделиться
HTML-код
  • Опубликовано: 29 сен 2024

Комментарии • 141

  • @samuelgunter
    @samuelgunter 11 месяцев назад +262

    Write Once, Debug Everywhere

    • @XavierGoncalves89
      @XavierGoncalves89 11 месяцев назад +30

      Write once, cry every time

    • @thedavistheory7674
      @thedavistheory7674 11 месяцев назад +7

      Are we talking about java?

    • @samuelgunter
      @samuelgunter 11 месяцев назад +55

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

    • @maxwebstudio
      @maxwebstudio 11 месяцев назад

      😂

    • @patrickisboard
      @patrickisboard 11 месяцев назад +5

      + ", write workarounds for every platform";

  • @808x86
    @808x86 10 месяцев назад +1

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

  • @SXsoft99
    @SXsoft99 11 месяцев назад +1

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

  • @danvilela
    @danvilela 11 месяцев назад

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

  • @mzerone-g6m
    @mzerone-g6m 11 месяцев назад

    Liveview native you are wrong

  • @mouhibsahloul2577
    @mouhibsahloul2577 11 месяцев назад +93

    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
      @grimm_gen 11 месяцев назад +8

      And Expo espesially makes this so easy!

  • @romeorichardson3138
    @romeorichardson3138 11 месяцев назад +135

    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
      @jocke8277 11 месяцев назад +4

      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
      @kabal911 11 месяцев назад +4

      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
      @twitchizle 11 месяцев назад +4

      ​@@kabal911 hey thats me. 🙋‍♂

    • @askeladden450
      @askeladden450 11 месяцев назад +2

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

    • @pacifico4999
      @pacifico4999 11 месяцев назад

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

  • @RaulMartinezRME
    @RaulMartinezRME 11 месяцев назад +16

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

    • @JEsterCW
      @JEsterCW 11 месяцев назад +1

      this

  • @EvanBoldt
    @EvanBoldt 11 месяцев назад +7

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

  • @11vag
    @11vag 11 месяцев назад +13

    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.

  • @MrStupiuno
    @MrStupiuno 11 месяцев назад +11

    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.

  • @N.A._
    @N.A._ 11 месяцев назад +10

    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
      @elvispalace 11 месяцев назад +4

      nop. discord uses this feature a lot

  • @PhilipAlexanderHassialis
    @PhilipAlexanderHassialis 11 месяцев назад +2

    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.

  • @tmoran
    @tmoran 11 месяцев назад +13

    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
      @CottidaeSEA 11 месяцев назад +1

      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
      @bdotexe 11 месяцев назад

      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
      @bburns 9 месяцев назад +1

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

  • @elvispalace
    @elvispalace 11 месяцев назад +5

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

    • @Mosopia
      @Mosopia 7 месяцев назад

      yeahhhh! Expo is giga chad

  • @magne6049
    @magne6049 11 месяцев назад +4

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

  • @VeitLehmann
    @VeitLehmann 11 месяцев назад +7

    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!

  • @ethestel
    @ethestel 11 месяцев назад +1

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

  • @IncomingLegend
    @IncomingLegend 11 месяцев назад +2

    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...

  • @dawidgrden2227
    @dawidgrden2227 11 месяцев назад +1

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

  • @nolanwesl3y
    @nolanwesl3y 11 месяцев назад +1

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

  • @TimMattison
    @TimMattison 10 месяцев назад +1

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

  • @dalanxd
    @dalanxd 11 месяцев назад +15

    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
      @Rama-Rama74 6 месяцев назад

      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!

  • @jamonh
    @jamonh 11 месяцев назад +13

    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.

  • @AntoniGawlikowski
    @AntoniGawlikowski 11 месяцев назад +2

    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?

  • @omtechofficial
    @omtechofficial 11 месяцев назад +6

    I thought those are real ants

  • @pieflies
    @pieflies 11 месяцев назад +6

    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
      @t1gr235 11 месяцев назад +1

      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
      @pieflies 11 месяцев назад

      @@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
      @t1gr235 11 месяцев назад

      @@pieflies yes, I think so

    • @theangelofspace155
      @theangelofspace155 11 месяцев назад

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

  • @HimalayanSheep
    @HimalayanSheep 11 месяцев назад +3

    Wouldnt it be better to use CapacitorJS then?

  • @EthanStandel
    @EthanStandel 11 месяцев назад +12

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

    • @bdotexe
      @bdotexe 11 месяцев назад +3

      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.

  • @nikpolale
    @nikpolale 11 месяцев назад +1

    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

  • @randyrips
    @randyrips 11 месяцев назад +3

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

  • @thisweekinreact
    @thisweekinreact 11 месяцев назад +2

    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

  • @TurtleKwitty
    @TurtleKwitty 11 месяцев назад +5

    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
      @techjandro 11 месяцев назад

      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.

  • @epiclifesociety
    @epiclifesociety 11 месяцев назад +2

    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.

  • @51Grimz
    @51Grimz 11 месяцев назад +2

    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.

  • @ConnorMoody
    @ConnorMoody 11 месяцев назад +1

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

  • @sylensdrake9706
    @sylensdrake9706 11 месяцев назад +1

    react native server components... no offline possible

  • @kyuss789
    @kyuss789 11 месяцев назад +2

    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.

  • @dylanzemek7069
    @dylanzemek7069 11 месяцев назад +3

    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

  • @tonajki
    @tonajki 11 месяцев назад +2

    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.

  • @AndreiTelteu
    @AndreiTelteu 11 месяцев назад +1

    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 ?

  • @dongnez
    @dongnez 11 месяцев назад +2

    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
      @codingbyte4529 11 месяцев назад +1

      I think expo go can do what he talks about

  • @rbus
    @rbus 11 месяцев назад +2

    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.

  • @jzea5605
    @jzea5605 7 месяцев назад

    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?

  • @jgfjfgjfhjf
    @jgfjfgjfhjf 4 месяца назад

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

  • @ifscho
    @ifscho 10 месяцев назад

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

  • @qorzzz9252
    @qorzzz9252 11 месяцев назад +4

    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.

  • @alkinart7834
    @alkinart7834 11 месяцев назад +1

    This could be a game changer🤯

  • @funhaos
    @funhaos 11 месяцев назад

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

  • @nanonkay5669
    @nanonkay5669 11 месяцев назад +1

    When is React Native going 1.0?

    • @glaze4629
      @glaze4629 11 месяцев назад

      At this pace, probably in 2-3 years

  • @eero8879
    @eero8879 11 месяцев назад

    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.

  • @dmz985
    @dmz985 11 месяцев назад

    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

  • @supercoolcat7692
    @supercoolcat7692 11 месяцев назад

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

  • @SuperYoda7
    @SuperYoda7 10 месяцев назад

    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.

  • @Calmac_
    @Calmac_ 11 месяцев назад

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

  • @yohaneskustiadi9807
    @yohaneskustiadi9807 10 месяцев назад

    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

  • @huge_letters
    @huge_letters 11 месяцев назад +1

    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
      @bdotexe 11 месяцев назад

      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
      @huge_letters 11 месяцев назад

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

    • @_gut11
      @_gut11 11 месяцев назад

      Trying to understand this too...

    • @glaze4629
      @glaze4629 11 месяцев назад

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

  • @2penry2
    @2penry2 11 месяцев назад

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

  • @gsarnaudov
    @gsarnaudov 11 месяцев назад

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

  • @abulaman8713
    @abulaman8713 11 месяцев назад

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

  • @Beyram1501
    @Beyram1501 11 месяцев назад

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

  • @owencraston
    @owencraston 11 месяцев назад

    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?

  • @aryabp
    @aryabp 11 месяцев назад

    Face tauri dude

  • @Hexalyse
    @Hexalyse 11 месяцев назад +3

    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.

    • @fghdfghdfgghdstwesdfjtykjyfgk
      @fghdfghdfgghdstwesdfjtykjyfgk 10 месяцев назад +1

      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

  • @browny99
    @browny99 11 месяцев назад

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

  • @rolangom1
    @rolangom1 11 месяцев назад

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

  • @dawidgrden2227
    @dawidgrden2227 11 месяцев назад

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

  • @CanRau
    @CanRau 11 месяцев назад

    Should be possible with Tauri as well right?

  • @AngeloTadeucci
    @AngeloTadeucci 11 месяцев назад +7

    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

    • @JEsterCW
      @JEsterCW 11 месяцев назад +4

      lmao, i just commented and u spread pure fax. Im also moving to flutter from react native cause flutter just works, react native likes to do backflips on neck when you didnt even do anything, which is tough and I tried to use flutter and the performance and DX is such a lovely 0 random shitty errors amazing devtools and many more, what else? also no limitations to the look of ui this is it

    • @CottidaeSEA
      @CottidaeSEA 11 месяцев назад +3

      @@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
      @bdotexe 11 месяцев назад

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

    • @CottidaeSEA
      @CottidaeSEA 11 месяцев назад

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

  • @xxxxxx-wq2rd
    @xxxxxx-wq2rd 11 месяцев назад

    that's very useful to know!

  • @theangelofspace155
    @theangelofspace155 11 месяцев назад

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

  • @CB-zs9ov
    @CB-zs9ov 11 месяцев назад

    Isn't PWA's meant for that?

  • @urstrulypriyankrai
    @urstrulypriyankrai 11 месяцев назад

    I would love to see server components in rn

  • @carsonhawley8838
    @carsonhawley8838 11 месяцев назад +6

    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
      @bdotexe 11 месяцев назад +3

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

  • @shafu_xyz
    @shafu_xyz 11 месяцев назад

    great insights!

  • @giuliopimenoff
    @giuliopimenoff 11 месяцев назад

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

    • @CottidaeSEA
      @CottidaeSEA 11 месяцев назад

      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
      @giuliopimenoff 11 месяцев назад

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

    • @CottidaeSEA
      @CottidaeSEA 11 месяцев назад

      @@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.

  • @gappalchemist
    @gappalchemist 11 месяцев назад

    Amazing 🎉

  • @bj97301
    @bj97301 11 месяцев назад

    Nailed it!

  • @JEsterCW
    @JEsterCW 11 месяцев назад +1

    All cool, but I'm still moving to flutter after 2 years with react native cause flutter just works and react native feels like beta for years with alot of limitations and random erros for no reasons this technology maybe will be something okey-ish in 5 years for now its still trash.

  • @pointer333
    @pointer333 11 месяцев назад +1

    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!

  • @rickdg
    @rickdg 11 месяцев назад

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

  • @jacoblockwood4034
    @jacoblockwood4034 11 месяцев назад +2

    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

  • @Silverdagger258
    @Silverdagger258 11 месяцев назад

    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

  • @Dev-Siri
    @Dev-Siri 11 месяцев назад

    Aren't you at Las Vegas rn?

  • @gabrielmachado5708
    @gabrielmachado5708 11 месяцев назад

    So, it looks like we are inventing HTML again

  • @denysolleik9896
    @denysolleik9896 11 месяцев назад

    Summarize this video.