React Native’s Secret Superpower

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

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

  • @samuelgunter
    @samuelgunter Год назад +260

    Write Once, Debug Everywhere

  • @mouhibsahloul2577
    @mouhibsahloul2577 Год назад +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 Год назад +8

      And Expo espesially makes this so easy!

  • @romeorichardson3138
    @romeorichardson3138 Год назад +134

    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 Год назад +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 Год назад +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 Год назад +4

      ​@@kabal911 hey thats me. 🙋‍♂

    • @askeladden450
      @askeladden450 Год назад +2

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

    • @pacifico4999
      @pacifico4999 Год назад

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

  • @11vag
    @11vag Год назад +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.

  • @VeitLehmann
    @VeitLehmann Год назад +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!

  • @elvispalace
    @elvispalace Год назад +5

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

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

      yeahhhh! Expo is giga chad

  • @MrStupiuno
    @MrStupiuno Год назад +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.

  • @randyrips
    @randyrips Год назад +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.

  • @magne6049
    @magne6049 Год назад +4

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

  • @epiclifesociety
    @epiclifesociety Год назад +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.

  • @EvanBoldt
    @EvanBoldt Год назад +7

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

  • @thisweekinreact
    @thisweekinreact Год назад +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

  • @jamonh
    @jamonh Год назад +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.

  • @RaulMartinezRME
    @RaulMartinezRME Год назад +16

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

  • @N.A._
    @N.A._ Год назад +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 Год назад +4

      nop. discord uses this feature a lot

  • @tmoran
    @tmoran Год назад +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 Год назад +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 Год назад

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

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

  • @qorzzz9252
    @qorzzz9252 Год назад +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.

  • @dalanxd
    @dalanxd Год назад +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 8 месяцев назад

      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!

  • @AntoniGawlikowski
    @AntoniGawlikowski Год назад +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?

  • @51Grimz
    @51Grimz Год назад +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.

  • @rbus
    @rbus Год назад +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.

  • @ethestel
    @ethestel Год назад +1

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

  • @IncomingLegend
    @IncomingLegend Год назад +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...

  • @supercoolcat7692
    @supercoolcat7692 Год назад

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

  • @JungleShowdown
    @JungleShowdown Год назад +3

    Wouldnt it be better to use CapacitorJS then?

  • @pieflies
    @pieflies Год назад +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 Год назад +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 Год назад

      @@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 Год назад

      @@pieflies yes, I think so

    • @theangelofspace155
      @theangelofspace155 Год назад

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

  • @808x86
    @808x86 Год назад +1

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

  • @tonajki
    @tonajki Год назад +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 Год назад +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 ?

  • @kyuss789
    @kyuss789 Год назад +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.

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

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

  • @Calmac_
    @Calmac_ Год назад

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

  • @SXsoft99
    @SXsoft99 Год назад +1

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

  • @dawidgrden2227
    @dawidgrden2227 Год назад +1

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

  • @TimMattison
    @TimMattison Год назад +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?

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

    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?

  • @dylanzemek7069
    @dylanzemek7069 Год назад +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

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

    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.

  • @yohaneskustiadi9807
    @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

  • @nolanwesl3y
    @nolanwesl3y Год назад +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.

  • @dongnez
    @dongnez Год назад +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 Год назад +1

      I think expo go can do what he talks about

  • @gsarnaudov
    @gsarnaudov Год назад

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

  • @abulaman8713
    @abulaman8713 Год назад

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

  • @EthanStandel
    @EthanStandel Год назад +12

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

    • @bdotexe
      @bdotexe Год назад +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.

  • @rolangom1
    @rolangom1 Год назад

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

  • @danvilela
    @danvilela Год назад

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

  • @alkinart7834
    @alkinart7834 Год назад +1

    This could be a game changer🤯

  • @browny99
    @browny99 Год назад

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

  • @PhilipAlexanderHassialis
    @PhilipAlexanderHassialis Год назад +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.

  • @huge_letters
    @huge_letters Год назад +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 Год назад

      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 Год назад

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

    • @_gut11
      @_gut11 Год назад

      Trying to understand this too...

    • @glaze4629
      @glaze4629 Год назад

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

  • @dmz985
    @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

  • @CanRau
    @CanRau Год назад

    Should be possible with Tauri as well right?

  • @Beyram1501
    @Beyram1501 Год назад

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

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

  • @Hexalyse
    @Hexalyse Год назад +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 Год назад +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

  • @urstrulypriyankrai
    @urstrulypriyankrai Год назад

    I would love to see server components in rn

  • @nikpolale
    @nikpolale Год назад +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

  • @2penry2
    @2penry2 Год назад

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

  • @pointer333
    @pointer333 Год назад +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!

  • @CB-zs9ov
    @CB-zs9ov Год назад

    Isn't PWA's meant for that?

  • @owencraston
    @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?

  • @nanonkay5669
    @nanonkay5669 Год назад +1

    When is React Native going 1.0?

    • @glaze4629
      @glaze4629 Год назад

      At this pace, probably in 2-3 years

  • @omtechofficial
    @omtechofficial Год назад +6

    I thought those are real ants

  • @TurtleKwitty
    @TurtleKwitty Год назад +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 Год назад

      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.

  • @shafu_xyz
    @shafu_xyz Год назад

    great insights!

  • @giuliopimenoff
    @giuliopimenoff Год назад

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

    • @CottidaeSEA
      @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
      @giuliopimenoff Год назад

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

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

  • @ConnorMoody
    @ConnorMoody Год назад +1

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

  • @xxxxxx-wq2rd
    @xxxxxx-wq2rd Год назад

    that's very useful to know!

  • @sylensdrake9706
    @sylensdrake9706 Год назад +1

    react native server components... no offline possible

  • @bj97301
    @bj97301 Год назад

    Nailed it!

  • @AngeloTadeucci
    @AngeloTadeucci Год назад +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 Год назад +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 Год назад +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 Год назад

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

    • @CottidaeSEA
      @CottidaeSEA Год назад

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

  • @dawidgrden2227
    @dawidgrden2227 Год назад

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

  • @theangelofspace155
    @theangelofspace155 Год назад

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

  • @gappalchemist
    @gappalchemist Год назад

    Amazing 🎉

  • @rickdg
    @rickdg Год назад

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

  • @Silverdagger258
    @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

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

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

  • @carsonhawley8838
    @carsonhawley8838 Год назад +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 Год назад +3

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

  • @Dev-Siri
    @Dev-Siri Год назад

    Aren't you at Las Vegas rn?

  • @mzerone-g6m
    @mzerone-g6m Год назад

    Liveview native you are wrong

  • @jacoblockwood4034
    @jacoblockwood4034 Год назад +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

  • @aryabp
    @aryabp Год назад

    Face tauri dude

  • @JEsterCW
    @JEsterCW Год назад +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.

  • @gabrielmachado5708
    @gabrielmachado5708 Год назад

    So, it looks like we are inventing HTML again

  • @funhaos
    @funhaos Год назад

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

  • @denysolleik9896
    @denysolleik9896 Год назад

    Summarize this video.