React Native vs Flutter vs Native - Let's Talk Engines

yeah it's a rant about reality and i think that's the problem with flutter flutter devs don't live in reality they live in their own abstract skya world i is a developer of an application can push code that changes that application without apple or google reviewing it they don't even let you go to the site it's just a showcase cool this isn't a showcase for flutter for web because nobody ever wants to show off their flutter for web flutter is a mistake in almost every sense still and it's sad that it's as bad as it is it genuinely is a little sad but i want to take it a step further unless you really know what you're doing it is irresponsible to ship flutter it is actually harmful not just like as an elitist developer that has opinions but to your users in so many ways not using react native specifically is choosing to prioritize your beliefs over your users for one simple reason so clutter is harming your users not using rn when you can is ah i'm gonna reword this not shipping react native when you could is choosing to harm your users i am prepared to die on this hill now i know that's a bold way of putting this i don't care anymore i've talked to enough people working in enough other solutions that i am certain of this fact for one particular reason code push for those that don't know this the idea of code push is i is a developer of an application can push code that changes that application without apple or google reviewing it if i am building the twitch app and we ship a new chat feature and we screw it up we hit the wrong endpoint or something's wrong in the ui we formatted it incorrectly the process is i hit up apple i tell them to pull the update any users who have installed the update in that time they're on the bad version sucks but that's their lives now i go hack out the update send it to apple who has to re-review it realizes there's some other thing inside of the app that they don't like that they block on even though this update isn't a feature ad it's a bug fix but they happen to see a feature they don't like during the bug fix and now they block your update you can't get that update out to users then a week later you convince them to let you you finally get the update out and then after a month or two about two-thirds of your users have installed that update but for whatever reason that 100 to 5 000 users who happen to install the bad version don't have automatic updates on and never end up getting that update they're stuck on a legacy version and you can't do anything other than maybe lock them out on server side if you build that in yourself there is no way to trigger and update even a small bug fix on a user on their device without apple or google approving your app this is the problem with swift and kotlin native apps this is also the problem with flutter this is absolutely a problem with flutter you are wrong codemaster i've talked to a lot of flutter developers and every single one ships the entire flutter runtime and all of their flutter code inside of their app binaries there is not a meaningful code push solution in flutter right now that is false expo is the solution to this problem expo has solved this very well in react native land the reason why is important to understand so we're going to draw out how do i want to draw this the we're going to call this app ui at the top and bare metal at the bottom this guy will call it render land this is the stack of from the metal that is like the cpu and gpu on your phone to the app ui how things get rendered we have this the first level that's like the kernel or something just like a communication layer where software can access bare metal there's actually a render engine funny enough called metal by apple that is the next layer this is how you access the like gpu abstractions if you want to do native rendering as performant as possible then there is i'll say this is the ios render stack just to make it a little easier so i have to multiply it here is uikit which is the ui layer built on top of render engine that lets you render user interfaces this is where you say hey put a button at this point in the screen and then it renders in ios a button there in the screen this is the i guess i should put like uh objective c swift dev code so this code tells ui kit what to render which then in metal renders things using the computer in this case phone's hardware to then generate a ui that the user sees so this is the ios render stack as it's existed for a long time so let's draw out the react native stack which is a little different oh it's a little lower make this box a little longer so this is objective c swift bindings to ui kit i'll just call it objective c swift bindings and then up here javascript js that calls so this layer here is 95 plus of your rn code is this layer here whereas these objective-c swift bindings are mostly provided by rn you could argue that what react native is is these bindings directly to ui kit that you can call in javascript the important thing to note here is we are still rendering ui kit components we're still rendering native ui the react native bindings allow us to in javascript tell ui kit what to render this objective c swift bindings layer is very thin and is most of the native code that you ship i think it's incredibly important to understand this detail here the objective-c switch their swift bindings are what your js calls that then render a native button which means since this section doesn't change a whole lot you ship this in your app binary and if you swap out the js bundle here like let's say this is hosted on your server and you change it that is an update for the majority of what's happening on the mobile app you're able to change almost anything in that app remotely other than specific swift and objective-c bindings like if you want to add spotify native supporter you want to add a camera binding and you didn't have camera permission before you can't do those types of things but anything you have the objective-c or swift binding included in your binary for you can change so if you have a button that's not visible on small iphones it's a bug i've run into a billion times you can make that change fix it and ship it without making a native change because you're just in javascript land telling the phone where to put that button slightly differently so let's talk about flutter so in flutter we have to blow out a lot of this ui kit doesn't get used we have skya engine the skya rendering engine is an alternative to objectives or to the ui kit layer on ios this is a full abstraction almost like a game engine you can think of this like unity more like unity where this alternative engine has to emulate a lot of what ui kit does which means things like touch gestures things like scrolling things like screen reader things like image rasterization aren't using the os primitives anymore they're not using the things that apple or android provides they have been abstracted into their own engine in order for this to be performant the dart flutter runtime code has to be compiled in order to optimally control the skya engine there so this has to be compiled can't be server hosted and this is the selling point and the problem flutter has chosen to fully reject the native platform while eating all of the native problems because this abstraction isn't a separation and honestly what i'm going to do here to make this clearer is a separate box for this because these are abstracted this js binding layer is not as strongly attached to the objective c layer as these two are the because these are so directly tied it is impossible to swap out the meaningful code without shipping a new binary which means it's irresponsible to use this simply because app store reviews are going to slow down your process enough that if you make a mistake you can't meaningfully fix that i saw a comment along the lines of isn't this a rant about approval processes eh it's a rant about reality and i think that's the problem with flutter flutter devs don't live in reality they live in their own abstract skya world that doesn't embrace the importance of solving problems that users are going to have and solving the problems that developers experience every day as creators of applications and i can count actually sorry i cannot count how many times expo push and expo publish have saved my butt because we had a dumb mistake just got approved on apple and i had to go fix something quick it is essential to be able to do that if apple and google snap their fingers and let user developers just immediately ship updates that kind of helps but again since that code is on a device rather than on your server it is now impossible for you to guarantee a user's on the right version it is trivial for me to lock users out who are on old versions and update them if reasonably possible it is not that simple in flutterland you have to build your own version system in order to assert people aren't on old versions and we're just talking about the abstract like the harm this has to your ability to serve users through the app publication process let's go a step deeper which is skaia is a bad abstraction there there's a lot to dig into here but i'm gonna start with the things i have linked in my faq did you all know that since february last year there has been terrible stutter in flutter apps for ios that puts it below at 5 fps consistently because their sky abstraction is not actually metal compliant yet it does not work good on metal and the result is hilarious amounts of jank oh my god it's so bad it's so bad so an important thing to know about how flutter architecturally works is due to being a full new rendering engine they have to recreate all of the patterns and behaviors that we expect from applications one of which is every feature in ui kit so in flutter you have the option to use the material ui skin or the i think they call it cupertino or something for the ios skin and those skins for flutter are obsessive screen shotting of every piece of ui in ios and attempt to recreate that with the right pngs in their render engine you've effectively been forced to recreate all of ui kit to make anything work and that's why we have the like cringy fake pop-ups and that are so common in flutter apps i have a tweet so the app that inspired this is very specific it is the vidcon app was absolute trash uh this this god this is one of my best tweets this is uh i i don't think i'll ever top this tweet honestly anyways the vidcon app the amount of different ways this app broke was impressive what happened here was a keyboard reveal event got postponed while the sidenav came in the keyboard came out after and shifted the side nav into a state where you couldn't actually see what each of those menu items was it unrendered the text just entirely broken other really fun flutter things in a flutter scroll view due to how they implemented touch gestures if you use one finger it'll scroll normal speed if you use two fingers it scrolls double speed if you use three fingers it scrolls triple speed because it detects each finger and each touch event as a transformation and they had to write all of that code themselves and it's full of dumb bugs as a result because they threw away the two plus decades and thousands of man hours of work put into ui kit to make it so somebody who's blind can use their phone to make it so somebody who has like physical disabilities can use their phone somebody can manage their phone with a mouse can do all these things on a device reasonably and due to how much the flutter devs hate javascript they decided to throw it all away to make a point and it was a bad decision and it sucks because skya theoretically could be good for video games if you want to make a mobile game or you wanted to make some really fancy 3d animations and but their choice to re-implement everything is hilarious somebody in chat just said it's like re-implementing the dom and webgl it's time to talk about flutter for web is there an example showcase cool not much here there's no way this site is oh this isn't the site this is they don't even let you go to the site it's just a showcase cool this isn't a showcase for flutter for web because nobody ever wants to show off their flutter for web tldr on flutter for web it uses a canvas it doesn't use the dom it renders a single canvas and then it recreates the whole dom inside of it the minimum of scene for a flutter web like hello world is like five megabytes of it's i have not talked to a flutter dev who actually thinks flutter for web is shippable thankfully but it is an embarrassment it is not real technology much less usable it's like meme to your bad it's actually harmful flutter for if anybody tells you that they should that like flutter is a great thing compared to react you can use flutter for web it's fine you can now ignore their opinion forever because they are lying they just do not understand how bad things are it is i even think react native for web is too far in abstraction like give me my dom and let me manipulate it but this is this is the thing i really like about react native react native is not trying to abstract away the platform they are trying to build the best abstraction to the platform the actually a different way of doing this so the gap is between the js and the objective-c swift bindings there the gap here is that arrow wrong the gap here is much scarier it's between the native layer and skya it it's a mistake i i get the desire i understand why people wanted to move away because theoretically if you can rewrite the section here for other platforms so like for android or for web this is a nice abstraction it seems but this will never use the platform is the problem so because it has to be re-implemented on something relatively raw for the browser we have to reimplement this on canvas because it doesn't have a way to talk to a dom where in react native i can move this react native js layer to xbox to web to whatever and call a different native platform and it will render the different native thing react native is using the platform which is what's so funny about flutter to me is so many people recommend flutter because react native is slow it's an unnecessary abstraction flutter unless you have the abstraction and performance it gives you neither it's a lie the promise flutter is built on is a lie it is an abstraction from the native platform that is slower heavier and incomplete and that abstraction doesn't give you any meaningful wins other than a vague sense of multi-platform support for ios and android that is a half truth because of how bad the ios experience is flutter is a different way of building android apps with a lackluster render story deploy story development story user story on every other platform on android it's whatever and on every other platform it is a regression it is harmful to your users to bet on flutter yeah and rant the abstraction is bad and code push is huge code push is super important don't block users on apple google and the native platform is actually good rewriting ui kit is probably bad cool so these two points are the core if you want to be able to fix user problems without weeks of potential runtime blocking because of apple and google and you want to use the things that make the native platform great you should not use flutter you should probably use react native like yeah please use react native it's very good dart is pretty bad we'll don't even need to do that rant with everything else i just talked about thank you for watching that one i know y'all were not all fond of my last flutter rant and there were some things that i focused on too much for not great reasons and there was things i didn't focus on enough because i didn't realize how bad they were i think it's important to understand that code push is not something you should compromise on if you don't have to and the native platform is good and you should probably use it flutter's failure to embrace either of those points makes it a really bad bet and react native giving you a really good solution for both of those points makes it relatively safe to bet on right now for those reasons i do not recommend flutter and i do recommend react native native solutions are cool too but you don't have a good code push solution there make sure you check out how other companies are doing these things as well even meta has a crazy like sql light layer they use to command the or the messenger app for facebook and that seems to work really well for them there's a cool blog post if you google search for that generally it's important to understand the compromises that your technologies are making and i don't think flutter's compromises are understood well enough by its users react natives compromises are that you need that native binding layer to do things and javascript's not the fastest way to animate move things around etc but if you understand those reasons you can make some really cool things with react native all that said really appreciate y'all for watching the video make sure you subscribe if you haven't under 40 of y'all are subscribed to the channel so please fix that hopefully i'll grow them a ton leave a comment let me know what i should talk about in future videos shout out to dez for the awesome work editing keeping this channel alive for me thank you guys again peace

Channel: Theo - t3․gg

Views: 122,853

Keywords:

Id: 3_FcxGCCnUs

Length: 25min 14sec (1514 seconds)

Published: Sun Jul 10 2022