Flutter INSIDE React? react-native-skia is wild
ฝัง
- เผยแพร่เมื่อ 27 มี.ค. 2024
- I never expected to say it, but maybe Flutter was onto something. Seriously tho, very hyped on RN Skia and all the effort that went into it.
SOURCES
/ 1767220849445105740
• Time to Fly
shopify.engineering/react-nat...
shopify.github.io/react-nativ...
NOT TECHNICALLY SPONSORED BUT BUY TICKETS FOR CHAIN REACT
www.eventbrite.com/e/chain-re...
Learn more: chainreactconf.com/
Check out my Twitch, Twitter, Discord more at t3.gg
S/O Ph4se0n3 for the awesome edit 🙏 - วิทยาศาสตร์และเทคโนโลยี
CHAIN REACT IS COOL YOU SHOULD CONSIDER GOING
DISCOUNT (+ AFFILIATE) LINK: www.eventbrite.com/e/chain-react-2024-the-us-react-native-conference-tickets-795740971667?discount=theo
no (I also won't sub, but will keep watching)
@@alhazred3555 wow so brave
Womp womp
th-cam.com/video/Y-1wOuRdNwA/w-d-xo.htmlsi=7j0SMQdYtnbIpbcZ
Note to Theo: Next time, talk about what you really know about or do not say/keep things that are made to prove a point but aren't valid anymore / aren't based purely on feelings (which are mostly biased by your thoughts anyways) about facts: If you say "[...] with their Material UI kit that I know a lot of Flutter devs don't necessary enjoy", how much is "a lot", 50%, 20% 70%? Me, I love Material in general. This would mean I am just biased or I am part of a minority or one of us is wrong, I have a lot of other Flutter devs around me and pretty much all of them atleast like/use the Material toolkit. I actually did not found any source saying without much bias if Flutter devs use Material, in which case Theo should not have said that at all.
TL;DR: Fact-check all of what you say, please. If you don't, it makes your takes just awful / wrong and destroys your credibility on other things.
Now for my take: I always hated the way RN kept devs off of native stuff and their inconsistency between platforms, associated with Facebook absolutely wanting to build on top of JS to just have people to use their stuff resulting in the awful way RN works to communicate to the system. Flutter FTW.
Do you have any idea how much work that would take him? Why bother, when you can just throw half-assed opinion with cringe thumbnail and farm clicks?
Oh so every take he does? He is always critically misinformed and talks with the confidence of a senior dev specialist on every topic. The man has no sense of humility or awareness to just say “i dont think i fully understand this.”
man I am a software engineer and I mainly work in the web field I have also tried both RN and flutter. And this is a fact flutter is so much better to use. RN is just no where near and, js devs don't get triggered as I am one too and can everyone agree on one thing "js sucks".
It's time to make video: "I was wrong about Flutter" 😂
That's not really a question about being wrong about flutter.
Flutter is positioned as being suitable for web and desktop applications, but still, years in, hasn't traditionally had a good text-editing story, nor assistive technology story, because while it technically supports them, the first one is janky, and the second one is onerous to the point where few people properly do things like merging semantics for related content.
The difference is, with React, you can choose to render a text-focused context, or render to an OpenGL / WebGL / WebGPU texture...
the app designer gets to choose what they are doing, because they are libraries, not frameworks. So HTML / system-integrated font renderers for textual apps, and WebGPU for interactive apps is A-OK.
In Flutter, you don't get a choice. That means the renderer needs to do it all, and it needs to do it all perfectly, and as it stands, replacing Slack and Skype and Signal and Discord and Google Docs, and the like, with Flutter variants (or otherwise GPU textures) would be misery, either for the devs or the users. Definitely the users. Probably both.
@@SeanJMay 🤓
@@SeanJMay 🤓
@@coffee-is-power your argument is that I am intelligent...
What does that tell me about you?
Do you think Brawndo has the electrolytes that plants crave?
@@SeanJMay bro does not know what a joke is
Two finger scroll has been fixed in Flutter
Tbh, I used It as a feature.
JS developers seeing basic game engine features: Woah!
Game developers seeing basic UI features: Woah!
(To be clear, seeing tools become more useful is always great!)
I love how ridiculous the differences in the two worlds are. Things that are trivial in one are misery in the other.
I find myself wanting WebGPU to be available everywhere, so that I can make games and the like, rendering in WebGPU, with the UI in React portals, pinned to the screen, instead.
I became a Flutter dev because of the approach to rendering everything on an engine. Turned out there were a lot of drawbacks but overall it was a very positive experience for me. React Native adopting this is good for the industry. It seems like the interoperability makes it more attractive so that apps can be built without the drawbacks of forcing an engine to be used for everything. Great video. I will say, even though most of the comments are giving you shit without watching the whole video, it’s kind of deserved for giving Flutter so much shit without using it much lol
hi am curious what are those drawbacks that you encounter when it comes to rendering everything on an engine.
@@anonymously-rex-cole I would say that the problems I ran into have generally been fixed. I was an early adopter of Flutter so I was filing github issues back when it was having a lot of weird bugs that came from the inner workings of the framework years and years ago. You can chalk that up to early framework bugs but they were nonetheless related to the approach of rendering everything on the canvas. I would say Flutter is significantly more stable now and I barely have issues with that kind of stuff.
On the last project I did for a major company, we ran into one issue for getting the text to be sized proportionally across multiple devices. Even though that was more related to the package we were using to handle this, the package itself still needs to deal with rendering text on the canvas in order to handle that. We had to do some weird workaround to get that fixed but that was the only issue we ran into from the rendering engine. Everything else was fairly normal stuff.
In general I would highly recommend flutter for mobile development, it is a joy to code in and is my favorite UI framework. There are a lot of things it does I like over React Native and Dart is awesome. I would recommend against Flutter for web development because it still has a lot of quirks on the web that are not ideal.
6:01 The scroll with two fingers is a thing of the past, lol
just in case I tried it and didn't work
It's still quite recent. It was fixed in November 2023 after being a known bug for more than 6 years. It's still baffling that it took them this long to fix it.
@@refreshfr I'm not surprised because of how Flutter priorities what issues to resolve is crazy 🤣🤣🤣
i stopped the video to test it out in my app and it was fine lol
Its just an example, and proofs Theos point.
Btw. many Flutter apps have still this bug
3:00 Flutter preaches Material UI but you don't have to use it if you extend WidgetsApp Object then you can create your own UI if you don't want Cupertino (Apple's iOS-inspired).
This. Flutter is just UI framework. A lot of of the widget is just material design overlay on top of the low-level API.
Got your own button design? GestureDetector is right there for instance.
While it's true, first-party UIs tend to overwhelm the framework. See Angular and Flutter, where Material Design is the majority of the work done there.
If you learn either of those, you'll probably use Material Design since it's first-party and offers valuable components that can save the time to design them.
On the contrary, frameworks without a first-party UI library like SvelteKit inherently push you to make your own UI. You get more skilled in the framework when using SvelteKit than when using Angular or Flutter because of that.
@@NatoBoram I use WidgetsApp all the time and there are tons of times when my apps perform well compared to Material and Cupertino. Also, Both Material and Cupertino are just flavors of the Widgets package.
@@NatoBoram I feel like you jumped to conclusion on the last part, Material UI has a lot of experts and research building it, I agree that if you can make something better than that, you get more skilled in the framework, but so many people fail on doing UI and having an UX that is at least decent...
@@NatoBoram lmao, broski being delusional
Suddently Skia is “magic”…
Flutter team is however already leaving Skia in favor of Impeller, which they claim is much more performant...
🤣🤣🤣 Flutter is already moving from Skia to Impeller
The topic of Skia and React Native is not seen with the correct mindset, the exciting thing about Skia is how it allows the implementation of missing UI capabilities for RN, Flutter switching from Skia to Impeller is the equivalent of RN switching its old renderer to a the new one (I forgot the name), this comparision is not equivalent.
This isn't about speed of rendering. It's about having a GPU-accelerated option for drawing. React Native works in largely web-compatible ways (rasterize text that defers to the system for handling).
Flutter is bad with text apps.
React, without a GPU-based library, is bad at high-performance graphics rendering.
React has react-three-fiber and now react-native-skia, and GPU.js and others...
Flutter is still not good with text apps, and isn't nearly as good with accessibility as HTML. When do they upgrade _that_ part of the engine?
@@SeanJMay I believe Flutter has a lot of room for improvement, it's young and is based on low-level APIs which means it can fake it to look native. If Google doesn't trash it then there is a high possibility that it'll have the same UX quality as native.
@@glaze4629 Unfortunately, this was not a comparison. It was like; Flutter is moving away from Skia while RN is embracing it and in my head I asked a question "Could it be that Flutter was doing something wrong?
Even the biggest critics are finally coming around to Flutter. Also the 2 finger scroll was recently fixed, the text spacing is better, it's getting closer and closer to being indistinguishable on iOS with all the huge benefits of the things mentioned at the beginning of the video
tell me you dont believe this. bruh flutter still dosent use native components.
3:40 Flutter on Android also uses impeller now, no more skia for android or iOS in Flutter, 2 fingers scroll is fixed.
I thought impeller on Android was in beta and you had to toggle a flag to use it, did they already make stable? guess I'll find out in Google I/O
Love seeing how much people love Flutter in this comments section❤
A flutter dev here, and out of topic,
When building an apk with rive for flutter it makes the apk hell janky.
Saw the apk file size bump up to 80mb from 22mb just by adding the rive package to the project.
Why not just write an RN wrapper around flutter directly? 😂
Calm down guys, I can't like every comments
Just like the ones you can and I'll do the rest of the liking for you 🤣🤣🤣
😂😂😂
shut up website maestro
Flutter is just so simple and so powerful. Flutter haters probably didn't even built a single Flutter app...
Correct
Even if they have tried Flutter, it'll be on the surface and they'll come back to tell you how it's not customisable 🤣🤣🤣
When flutter uses skia -> Flutter has bad performance
When RN uses skia -> Very exciting stuff
The Irony!
This 👆🏾.... Now Flutter moved from Skia to Impeller and flutter is way too mature on this then RN. I want to see what they will say about "Flutter vs React Native" on up coming years.
Flutter's performance isn't bad... flutter's usability, when it comes to text and accessibility are bad.
Flutter performance is only bad compared to native apps on desktop/mobile.
Flutter usability in terms of text-editing is bad compared to native OS features, and especially bad compared to HTML. Flutter's accessibility is about the same as native, and worse than HTML.
Choosing to use a GPU texture as the output in React will make its speed better and its suitability for text worse. The difference is, with React, you get to choose when you use it and when you don't use it. You can't turn it off in Flutter.
And by the time Chrome replaces Blink with Skia (I feel like this has been and will be a very, very long road), it should be a worthwhile solution for text-based apps, because Google will have to fix all possible things you can do with text in a browser app, for that to hit mainline release.
Here is a library, React Native is not using Skia for everything, you can choose to use it when you need to render a custom component.
watch the video bro
@@diosupremo4928react native is a train wreck. Any RN code you write is a business liability in 6 months
I have been using skia in react native for the last few months and the performance from it has been out of this world. Also william has been my go to "youtuber "to learn from. Great guy great library
Wait 6 months when all of the dependencies crumble. RN really needs to fix their ecosystem breaking faster than a node app.
@@hamm8934 100% agree with you. especially with expo. Maintaining everything with a version update every 4 months is a full time job. on the other hand, what I get in return is worth it. The ecosystem and community are on another level.
flutter is moving away from Skia to use a more optimized renderer called Impeller. So flutter is a step ahead in this field imo. Performance of impeller are way better than Skia from what I have experience when flutter made the change
I fell from my chair when I saw you in the new Harry Mack video. This is easily a top 10 anime crossover episode.
Looks very promising! Looking forward to trying it out.
Oh damn oh damn oh wait damn. Time to build games in React Native with react-native-skia 😊
We embedded Unity into React Native, which is wild
Nice 👌
Skia + Remotion is so cool.
Still believe that video stack is highly underrated, but looks like things are slowly changing.
I have been using skia for a year for custom charts in react native, it is an awesome library. I am surprise this is your first mention about it. By the comments i think people understood that all in react native will be rendered by skia and it is not like that. By installing this library to a react native project you can make a Skia Canvas component and do skia stuff inside.
does instagram also use skia for the reels & stories ? Any insights on it would be helpful
React Native Turned Into Flutter? Nice! Will wait until React turns into Vue!
Even better, wait until it turns into Svelte!
With vue you can jsut use stuff directly there's not this brain broken notion that the only way to use a library is with xml, using webgl components has been a thing since the begining XD
@@NatoBoramsvelte is a knock off vue with daddy vercels money marketing it.
5:22 polished iOS experience, what is that?
I keep running into first party jank on my 6th gen iPad mini and iPhone 11 that I use for testing.
"Linux is only viable because of Electron." *React* is only viable because of Linux. Linux powers virtually every web server and cloud platform. Electron? You are acting like Discord and Slack are not available on a goddamn browser. Jesus Html Christ, what is it with this aggressive animosity towards Linux users??
Good luck using react native for a good multiplatform experience out of the box, I solved all my issues with flutter and I am much more confident that what I see on iOS will also be what I see on Android, this is much more valuable than just getting the fonts “natively” as I can still fix them and make them as I like them to look
wait.. didn't you tell Flutter is bad because of using Skia before?
using skia in parts that it makes sense != using skia in literaly everything😂😂😂😂
iOS doesn't support really fancy animations? Core Animation would like have to word.
Magic of React - react devs have a hammer and treat everything like nails.
Flutterphobia
Haha, for me I didnt like flutter because of the nested widget syntax. It's look unreadable
He needs to be canceled. He's a reac(t)ist.
@@ilahazs just extract it, the same thing you do with rn. And how come "),)" is worse than
@@jesrealibabao6235 Yeah that way gonna help, dunno but seems I'm more into xml/html like code
@@jesrealibabao6235 Also do you know how to change dart formatting from 2 spaces to 4 spaces? I already set it to 4 but dart keep revert it to 2
If you can't defeat them, join them, joke asides, the whole point of Flutter was being multiplatform and having one codebase, one language and one tool for everything (android, ios, windows, linux, web), so the costs of development would go down with it
agree
so is a point of react native.
@Cuwubiq But it doesn't make sense to me to bring an engine that has been hated on flutter+dart (which was created because google engineers hated javascript) on react native, what's the point of react native then? If you're still building the apps (that are not games) with the engine that you said was made for games?
@@Cuwubiq I'm getting the feeling that react native programmers think that react native devs can make a better job than google programmers did with Skia
@@s3rit661 Skia is not meant to replace the native components, its just a tool for those whose need Skia's advanced UI capabilities, its closer to an SVG canvas than it is to a renderer in the RN world.
10:05 It's not a really insane concept, video editing with code has been around for a while: See Vapoursynth (Doing it in Python) and Avisynth (Doing it in a really crummy bespoke language).
It's not like RN will use skia as a main tool to create UI. Native Components will always be the best, because SO Interface will understand better how your app works. But it's great to see RN receiving this possibility, there's some components that don't exist in native side, so you can create it
I used to hate react before watching this video. Now I see why the concept behind react's vdom is actually really cool. The ability to execute the vdom in any backend is never clicked on me before this video. Good one.
@t3dotgg editing for clarity - love the content, hate how some titles lead to comment sections where like 1% of comments are on-topic. would love if the title was something like “they put flutter IN react native?” bc i’m pretty confident it’d increase the number of on-topic comments. maybe to 2%. don’t hate the clickbait at all, i just think a slightly different framing would mean a more enjoyable comments section. the true problem here is people not watching the video and saying absolutely ridiculous shit, but one man can’t change youtube commenters altogether
Hes always been this way. Glad to see more are realizing this. Id say he was even worse at the beginning. He used to mock people in the comments and be vulgar. Hes only interested in viewer engagement and his career as a tech talking head.
Find it to be fun and at the end of the day we are learning bout this technologies and what people think bout em.
@hamm8934 youre talking about something completely different than what im saying. i’m a huge fan of his quippy, twitter-post tone, it’s really entertaining. im literally just saying “don’t feed the people who don’t take enough time to watch the video.” that’s the actual problem im pointing out. people don’t watch the video, get the wrong idea from the title, and then comment about things that no one is saying. in some cases, that will happen anyway. but the title makes it such that, on examples like this video, only like 1% of comments are actually on-topic
@@gofullstack agreed, love the content, edited my comment above to make sure i’m saying what i mean. i like quippy/clickbait titles, i just don’t want to draw in a bunch of completely off-topic commenters. it may be that any title about flutter is going to do that anyway, idk. at the end of the day the content is what matters imo, and it’s good.
@@zaccanoy its not that the viewers are being clickbaited and not watching the videos, its that theo has fostered this viewer base of divisive, misinformed, junior devs that talk crap - much like himself.
His thumbnails dont help, but there are far bigger problems that theo has fostered for viewer engagement. He feeds into software dev tribalism and misinformation so that his junior dev audience feels like they are the “right side” of a non-issue.
I am SO glad you are onto React Native now... I love you.
If Theo is Speed, React native is Ronaldo and Flutter is Messi.
you crushed it
Now its time to try out kotlin multiplatform
Vato, this is no new, just looks liks flutter element embedding without dart, which flutter released like a year ago , you just run flutter (skia) inside an html tag (was a div if im not mistaken)😂
19:10 Are we, the pretty-boy web technologies gang officially at war with the Android/Linux neckbeards now? If yes, I need to get back in fighting shape and boost my security.
have had quite bad exp with rive tbh. lottie, especially with the dotlottie is now for me the go to for micro interactions, not sure how you meant that lottie is a mess.
Two fingers test doesn't work anymore - bug fixed 😅
But when will we get a GSAP port for Flutter?
In 2024 which is good to learn flutter or reactnative?
u look like ur trying to be 16
Flutter on iOS has a 1 frame input lag over native (I tested this myself). Maybe Impeller fixes this too?
If you test this with, please let me know.
however honest question does the final client even care if true? I never cared about that stuff; always was like "it is what it is" but since I became a dev, i see people argue about thing, I didn't even know were an argument before
I’m currently avoiding skia a bc Im not big on animations right now.
what font is that ? 16:56
It's a font called Ellograph. Next closest match is Cartograph. Both paid and made by Connary Fagen
I moved away from next to sveltekit is it better to start my mobile app with flutter or kotlin or expo? which is easier to maintain? app is personal use not really going to deployed in google play
in my experience expo is great for prototyping, go with react native cli if you want the smoothest support for all libraries. it's up to you if you want to use flutter, i just like js/ts syntax. depending on how much time you want to sacrifice for learning, check all ways and choose the one that's the most comfy for you id say.
Expo
Getting more confusion. React Native or Flutter?
I'm a backed developer and new to react. Next goal is to learn mobile apps development.
Which one I should go for?
React Native or Flutter?
Flutter will get you moving faster
@@dontdoit6986 thanks bro
If you want employment, react. If doing your own projects, flutter
@@francisgeorge7639 I'm doing my own project which I want to make it as a brand.
Can you please explain a little why react for employment and flutter for own project?
ohhh, that is william? lol should've recognized it by his accent
what i want to know is why we are still building native apps when there is very good option like PWAs
Because Apple needs to figure their shit out?
@@theskyblockmanthey kinda did finally? You can do push notifications and have access to most native apis now
@@hamm8934 I meant Apple pretty much disabled PWAs for iPhone users in the EU, they then brought it back because the EU was mad but after this I don't think any company would want to build a product using PWAs if Apple wants to remove them so much.
@@hamm8934 Maybe rn, but I don't think anybody trust Apple to keep them, they already tried to essentially remove them in the EU and then use a law from the DMA to defend themselves, then the EU was mad and then they brought it back, if your whole product can just be rejected by Apple like this, I don't know if you would want to build your product on this.
I wonder what do you think about the jsi progress and how this is going to eliminate the need for any other native development platforms? (Sorta, not really)
The Flutter community accepts your implicit apology.
it's been quite a long time since I last checked on react native. Seems like it's time for me to check on it again, skia looks great with it. Let's see.
How do people watch such long videos ? I can watch only like 15 percent of it and I do that while driving
Let's wait to see when they adopt Impeller.
Since 3.16.0 flutter uses impeller instead of skia. they are switching the engine
React is a nice OS but it still needs a decent JS framework support
Neat! ❤
Still if there was one toolkit to be credited for the "viability" of linux it's definitely not electron, instead probably QT or maybe Java FX. The only relevant electron Apps are something like Slack or Discord, which are websites anyways.
But.. Flutter isnt using Skia any more 🤔
So RN is now using a rendering engine developed by google, might as well implement impeller lmao, flutter > rn
Flutter is useless
@@LEONARDO-xs2ke u dont get my point, or you just being ignorant, rn is adapting the very architecture that flutter has, isn't that frustrating you guys keep shitting on flutter and now even rn uses skia now😪
RN is not using SKIA, there is a library to use skia inside react native as components.
Somebody can make a react-native-impeller library?
Honestly, I would prefer a react-native-webgpu library. Though Use.GPU would probably be a smoother way to go about it.
But that's the thing, it's a library. Not a framework. Integrating any combination of the above should be straightforward, without sacrificing support for text manipulation or accessibility, where needed.
@@jesrealibabao6235 It's just a library. We have an option. You don't. RN is the future just because big companies work on it to make it better everyday. Can't say the same about flutter
isnt drawing text, icons like game way too much for android app??? flutter never mad made sense to me nither does this new RN skia
Hm "eat shit", interesting. 🤔
Double standard at it's best 😅
In all seriousness, I hate when people compare react native with flutter. Flutter is an UI toolkit that targets ios, android, web, macos, windows, linux, fuschia, embedded systems, etc. when react-native targets ios, android, and more recently web with expo. I have been making apps professionally for the last 6 years with native, react-native, and flutter. The DX flutter provides is second to none. It is the reason flutter has been crushing RN in all developer surveys.
so thats why many top companies (literally Alibaba and google😂) are using this wonderful cross-platform solution?
I am still waiting for the shadcn equivalent for react-native with tamagui instead of radix.
Gluestack is cooking something with nativewind
Official Flutter channel 2 finger scroll fix: th-cam.com/users/shortsYqN55I-w19E?si=5zFy0jqh2ujjBVcl
The most important thing that uses skia is probably chromium and by extension google chrome.
Wow we really hyping a a rotate?
16:58 What's the font name?
Ellograph
Ohh the irony!
Great title 😎
Its no secret is better than that ai channel that always start with This is amazing.
Thanks for the video Theo 🙌
Unpopular idea alert, seeing a TH-cam video progress bar inside a TH-cam video always confused me :] Would be great if the color is blue or purple or sth else :] TH-cam might not like it though.
Dart can compile to js. Imagine React Native with dart
avalonia is also using skia
13:27 it is the same shirt
man the word native really means something else in the world of mob dev. seriously, native apps mean for android it is made using kotlin/java and for ios swift. RN just renders ios components for ios and for android it does the android thing. And correct me if I am wrong but I have heard you dissing flutter for using skia. and does it matter so much for devs to have diff app ui look for ios and android . For me I want the ui to be same just like web no matter which device you use.
So this is what peak react brain looks like huh... you don't need react in any way for this but react demands more, always more. just use webgl, you don't react to make a couple structs to pass into a webgl context, you're allowed to just use stuff directly XD
i wish RN DX would become human like some day
Exactly this. Ecosystem breaks everything every 6 months, even with expo
@@hamm8934 i hate that you can't even find proper description how you should debug your RN App at some version, because they change so much
How long till someone asks when google is going to kill skya? I have to hear this question, but regarding Flutter, almost everyday...
it's not react, it's vdom and all the hooks rn have to translate it to another platform. react is not special more than any other vdom framework. It just have more money to port vdom to tv,mobile and console thanks to the rn engine.
It's still JS, Dart is a lot better.
Exactly!
Dart is dope good lenguaje...
I used to code on C++ Java and TS
Dart is like mixing Java and TS is the #1 motive I like flutter.
I was a JS fanboy but when I got to try Dart, I ended up liking it more.
I remember that I almost used skia.
If you make a career in UI, then learn the native approaches.
What I'm saying, don't use skia.
You can use skia if you just want to throw up a form to take in some user input, but for serious programming, then you need to go native code.
12:44 Ben Awad
just learn the damn dart already. why are they so obsessed to write everything in JS
benawad made voidpet
Common Flutter W
The biggest react fanboy
I feel the biased
flutter is almost done ditching skin for impeller, a better rendering engine
How about you just wait like 2-3 days before you react to an entire video of someone...so they can get traction in the algo and the bulk of the rev money. REGARDLESS of fair use and what is legal, the unspoken rule on YT is to give time before a react video (especially a year long documentary work) before you rob the traction. Morals matter and you failed. hard.
Reacting to a video about React Native. Really trying to show how much you like reacting, dont you? xd