Flutter 2 was released recently, and Robin and Jamon discuss what’s different from Flutter 1, how it compares to React Native, and give their opinions on Flutter and Dart in general.
Flutter 2 was released recently, and Robin and Jamon discuss what’s different from Flutter 1, how it compares to React Native, and give their opinions on Flutter and Dart in general.
This episode brought to you by Infinite Red! Infinite Red is a premier React Native design and development agency located in the USA. With five years of React Native experience and deep roots in the React Native community (hosts of Chain React and the React Native Newsletter), Infinite Red is the best choice for your next React Native app.
Helpful Links:
Connect With Us!
Todd Werth:
Welcome back to React Native Radio Podcast. Brought to you by the internet, I assume. Episode 193, Flutter 2, how it compares to React Native.
Jamon Holmgren:
Hey everyone. Welcome to the React Native Radio Podcast, where we explore React Native together. I'm your host, founder and CTO of Infinite Red, Jamon Holmgren. I'm also on the React Native core team and primary maintainer of MobX-State-Tree. I'm joined by my astonishing cohost, Robin. Robin Heinze is a senior software engineer located in Portland, Oregon. She works at Infinite Red specializing in React Native. What's up, Robin?
Robin Heinze:
Oh, not much. I swear you've used astonishing before. Are you starting to recycle your words?
Jamon Holmgren:
I think I have. I think I have. It's actually hard because I don't have a list of them, so I just have to go and like ... Actually, no. They're always made up on the fly, right? I never actually go look them up.
Robin Heinze:
Okay. We need to turn to Twitter. We need Twitter to give us suggestions for-
Jamon Holmgren:
We do need ... Yes. This is what we need.
Robin Heinze:
... adjectives that Jamon can use to describe his cohost, because they're getting stale.
Jamon Holmgren:
They're getting stale. I'm starting to reuse them. Well, it shows that we have some longevity here in this podcast.
Robin Heinze:
True. It's ... Yeah.
Jamon Holmgren:
Harris and Adhithi could not make it today, so it's just Robin and me again. We don't have a guest on this particular episode, which by the way is sponsored by Infinite Red. Infinite Red is a premier React Native design and development agency located fully remote in the USA. We have years of React Native experience since it was released and deep roots in the React Native community. We're the hosts of Chain React, the conference, and publish React Native Newsletter to over 12,000 subscribers.
Jamon Holmgren:
Infinite Red is the best choice for your next React Native app. Hit us up at hello@infinite.red. You can email me directly jamon@infinite.red and learn more on our website infinite.red/reactnative. Don't forget to mention that you heard about us through the React Native Radio Podcast. We love hearing that. Also, Infinite Red is hiring React Native engineers. If you're a senior-level React Native engineer located in the U.S. or Canada, go to careers.infinite.red and fill out the fancy new form that I made.
Jamon Holmgren:
By the way, if you're not a React Native engineer and you're just checking out React Native Radio and your interested in it, but you are a senior-level developer, you can still go and apply. You don't have to be a senior-level React Native engineer to apply. We've opened it up a little bit beyond that. If you are a React web developer, for example, or you are just very good at JavaScript and whatnot, and you're interested in getting into React Native, let us know. All right. Let's get into our topic for today.
Jamon Holmgren:
Recently Flutter 2 was released and it made a big splash on Twitter. Flutter 2 released. There was an announcement from Google on their Google developer blog. I'm just going to go ahead and read the first couple of paragraphs of their announcing Flutter 2 blog post. They say, "Today, we're announcing Flutter 2, a major upgrade to Flutter that enables developers to create beautiful, fast and portable apps for any platform.
Jamon Holmgren:
With Flutter 2, you can use the same codebase to ship native apps to five operating systems, iOS, Android, Windows, macOS, and Linux, as well as web experiences targeting browsers such as Chrome, Firefox, Safari or Edge." I noticed they didn't put IE in there. Interesting. "Flutter can even be embedded in cars, TVs, and smart home appliances providing the most pervasive and portable experience for an ambient computing world."
Robin Heinze:
Let me ask the obvious question. Why are we talking about Flutter on a React Native podcast?
Jamon Holmgren:
Well, we are rebranding. We're going to be Flutter 2 Radio going forward.
Robin Heinze:
Surprise.
Jamon Holmgren:
Just joking. Clearly Flutter I think is probably the most viable cross-platform alternative to React Native. It's something that's been floating out there, like as we talk to clients, sometimes they ask, "Should we use Flutter? Should we use React Native?" That becomes the discussion. Rarely, but sometimes people will ask you, "Should we do Native or React Native?" Even more rarely something like Ionic, but Flutter is the most direct analog to it [crosstalk 00:04:50].
Robin Heinze:
This is about making sure we know what else is out there and what our competitor's doing.
Jamon Holmgren:
Yeah. I mean, really the point of this episode, I think, is we're talking to people who really haven't had time to go dig into Flutter and see what it's all about. They want to have the basics a little bit and they want to know what's new with Flutter 2. Let's start with, what are the differences between Flutter 2 and Flutter 1? I think we can keep this part short because we really want to talk about the differences between React Native and Flutter. I think the big one is that they're now saying that it's for all platforms.
Robin Heinze:
Web is just as prominent as mobile, basically.
Jamon Holmgren:
Yeah. Exactly. Flutter one was really focused on iOS and Android. There was some talk of Flutter for web, but it was a second-class citizen in a lot of ways. With this update, they're treating it as a first-class platform, from what I can tell.
Robin Heinze:
What's interesting is in preparation for this podcast I actually installed Flutter and did the demo app. The first thing you do when you get your app, initialize, you run flutter run, and I was expecting a simulator to pop up. What it actually did was open a browser, and so the web experience was actually the first one that I saw. I can definitely see that web is pretty prominent in this release.
Jamon Holmgren:
Yeah. I like that they are treating other platforms as first-class citizens now, because I do think that the benefit of using something like Flutter or React Native is really contained mostly in the ability to target other platforms. If we were just doing iOS, like we used to do in the old days, then I'd probably just be using Swift. But React Native, being able to target different platforms and now Flutter, that's a huge, huge deal. Yeah. I think that's the big one.
Jamon Holmgren:
We'll get into this a little bit later, but on web they're not really using the DOM per se, by the way, if you're a Flutter expert and we say something wrong, we're not Flutter experts here on this show. Feel free to correct us. You can tweet at us and let us know where we went wrong. From what I understand, it doesn't use the DOM, it uses canvas. It's like painting on canvas on, on the canvas HTML element rather than using DOM elements like React Native Web would.
Jamon Holmgren:
They also seem to have put together some partnerships. For example, Canonical, which makes Ubuntu. They are going to be building all of their apps in Flutter 2 and for Linux really. They're targeting Linux there. That seems to be a first-class citizen. On the Microsoft side, even though Microsoft is pretty heavily invested in React Native with the Office team specifically, sounds like Microsoft surface apps can be built using Flutter now.
Jamon Holmgren:
That's an interesting thing. Then Toyota also has some partnership where you can build automotive applications using Flutter.
Robin Heinze:
Oh, that's cool.
Jamon Holmgren:
They're reaching out into many different platforms. Whether those other platforms move the needle for you, I don't know, but they are something that they're trying to do. That's I guess the basics of the differences between Flutter 1 and Flutter 2, but I think what we're more interested in and also what our audience would be more interested in, is the differences between React Native and Flutter 2.
Jamon Holmgren:
I think the takeaway I've come out of researching this is that Flutter seems to be more about immersive apps where React Native seems to be more about traditional apps.
Robin Heinze:
Can you expand on what you mean by immersive?
Jamon Holmgren:
I think when you're trying to build basically the same experience across every platform, then Flutter does a good job because it's not using the DOM necessarily. Well, I should mention, by the way, it does have a way to target the DOM using web components but nobody seems to really use that. It's using canvas mostly. It's probably more comparable to something like Unity, like a game engine in some ways, because it is controlling the whole rendering experience, everything about it.
Jamon Holmgren:
When you build an interface, it's going to look the same across all of your platforms and you have a canvas, so you're just drawing on it. You can do whatever you want.
Robin Heinze:
Whereas React Native is more a tool to build what a native developer would already be building.
Jamon Holmgren:
Yeah. Exactly. Because it's using UI views, it's using the Android layout system. It's making those things closer to the same as much as it can. We talked about styling a few episodes ago and there are ways that it can try to make those things really converge. But at the end of the day, it's still using the target platform's rendering engines and building UIs for that. To me, that says more like traditional apps versus Flutter being more immersive.
Jamon Holmgren:
Again, this is something I haven't built an app in Flutter, so this is just my takeaway from having researched it for this episode.
Robin Heinze:
Then there's also probably the most obvious difference if you just take a look at a Flutter app versus a React Native app, which is Flutter uses Dart, which is a language that I think Google developed specifically for this.
Jamon Holmgren:
Dart probably unsurprisingly looks Javaesque in some ways.
Robin Heinze:
Yeah. It does. Very reminiscent of Java.
Jamon Holmgren:
I'm not really a fan, to be honest, just to throw a little bit of my opinion in here. I'm trying to be objective in this episode, but I'm going to throw in my opinion here and there. It's React Native Radio after all. I don't know, Dart, it's okay and it's fine. I can code in any language. It's fine. I'm not going to be like, I can't do this type of thing, but it's pretty Javaesque, and Java is just meh.
Robin Heinze:
Hey, it almost seems like it's targeting Java developers, whereas React Native is targeting web developers who build things in JavaScript.
Jamon Holmgren:
Yes.
Robin Heinze:
Even the fact that the recommended editor for building Flutter 2 apps is Android Studio. Let me tell you, it's really, really weird being in Android Studio and being able to select an iOS simulator as a device target. It's very, very strange.
Jamon Holmgren:
Wow. I didn't even think about that. Now you can build your iOS apps in Android Studio.
Robin Heinze:
Yeah. I mean, I'm not surprised. It is Google after all.
Jamon Holmgren:
Yeah. I guess so. I mean, there's real reasons why they're going this direction for sure. Dart is fine. It's has a lot of features. It's a relatively modern language. It's evolved quite a bit over its ... You know?
Robin Heinze:
Is it typed?
Jamon Holmgren:
It is. Yeah. It's type ... You know, I guess I should avoid being too critical, given that I haven't done a lot of work in that. But to me, the type system seems like Java's, which is one of those type systems that is more frictionless help. TypeScript to me is one of those things that it just seems like it helps you more than it causes problems in most cases.
Robin Heinze:
Java is typing for the sake of typing.
Jamon Holmgren:
That's what it seems like, and maybe I'm wrong. Maybe I'm going to get hate mail.
Robin Heinze:
Probably.
Jamon Holmgren:
My email address is Robin@infinite.red. The thing is, it's totally a ... I don't know, it's definitely Javaesque, but it is a capable language for sure. They've done some interesting things. Like they've certainly taken a page out of JSX's book here and they have these things called widgets.
Robin Heinze:
Which is pretty analogous to a component.
Jamon Holmgren:
Yeah. Very much so. I actually have a screenshot. You can't see it if you're listening to this podcast, but you can envision it in your mind.
Robin Heinze:
He'll tweet it out after the-
Jamon Holmgren:
I'll tweet it out. Yes.
Robin Heinze:
... episode's released.
Jamon Holmgren:
You're using this build function and that build function will ... It's a build method, I guess. It returns basically children widgets. You have things like you can ... The one I'm looking at right here returns a material wrapper, I assume material UI, and then has a child of center and a child of column. Then you can give it a property of main axis alignment .space evenly I guess. I don't have that in my screenshot.
Jamon Holmgren:
Then in the children, you have a button and an onPressed property, which calls a method and a text element, which shows a variable string there.
Robin Heinze:
There's a lot of really familiar concepts.
Jamon Holmgren:
Yeah, for sure. I mean, I can't really say that I prefer JSX over this necessarily. I mean, JSX when I first saw it-
Robin Heinze:
[crosstalk 00:14:17] we're just not used to like ... if it's not what you're used to.
Jamon Holmgren:
When I first saw JSX I was repelled. I was like, "I don't want to code in XML. What is this?" Ironically, because in Android layouts are done in XML, in real XNL. Yeah. It's not bad. It's fine. You can totally read it. Just like React Native, you have the full power of Dart within your components. It's not like a templating system. You actually do have the full power of the language inside of there. That's kind of an interesting thing. It's actually pretty similar in a lot of ways.
Robin Heinze:
Just looking at the code that comes with a freshly initialized demo app. I mean, it's just very familiar. There's a lot of really familiar things. Like I see set state, I see increment counter. I mean, I see a lot of things that most app developers would be pretty comfortable with.
Jamon Holmgren:
Yeah. That makes sense to me. From that standpoint, it's pretty familiar, but yeah, definitely you're working in Android Studio, you're working with Dart. By the way, Dart, it is very fast. It's built for speed. It also has-
Robin Heinze:
Hence, the name. That's a very apropos name.
Jamon Holmgren:
I guess, so. Yeah. They also have FFI support, so they can call out to C APIs.
Robin Heinze:
What is FFI? I'm actually asking for listeners who maybe don't know what FFI is because I don't. You're looking it up, aren't you?
Jamon Holmgren:
I am. I actually don't know what it stands for.
Robin Heinze:
Let the record show Jamon had to google it.
Jamon Holmgren:
I have to google a lot of things.
Robin Heinze:
Don't we all.
Jamon Holmgren:
FFI is foreign function interface, according to Wikipedia. Mostly your FFI'ing into C but basically it's like we have two different languages and we need to call a function in the other language.
Robin Heinze:
That sounds like native bridging, kind of.
Jamon Holmgren:
It is. Yeah. Except for the bridge in React Native specifically is actually passing like a string that gets reinterpreted. Serialized on the JavaScript side, sent over and then unserialized and then, what method do we call now? Where FFI allows you to literally pass the execution path to the other program.
Robin Heinze:
Interesting.
Jamon Holmgren:
Yeah. It's very fast. It's extremely fast. Ruby, for example, has Ruby-FFI, which is always a pain to compile for some reason when you're running bundle, but that allows you to call out to C functions. A lot of things that need extra speed are written in C and RubyGems. Anyway, Flutter has that ability and that's pretty cool. By the way, React Native is getting that ability with the new architecture, which is not ready yet, but hopefully will be sometime this year.
Jamon Holmgren:
We'll be doing an episode to cover that, for sure. Yeah. It's familiar syntax. It has a lot of features. Native code integration beyond FFI, Flutter sends messages to its hosts, which its host could be iOS or Android, of course now web or whatever, over what they call a platform channel. The host listens on the platform channel, receives a message and then calls into platform-specific APIs using the native programming language and sends a response back to the client.
Jamon Holmgren:
This actually sounds a lot like the React Native bridge, this part of it. You'll see something called a method channel when you're calling back and forth between native code and Flutter. However, you can add native views to Flutter view hierarchies, but it comes with performance implications. React Native views are native views. You can add a native view to a React Native view without any performance problems.
Jamon Holmgren:
It's just natural. It works really well. There's no difference in performance there. With Flutter, if you're doing a native view, then you're going to have some problems. That's something-
Robin Heinze:
Well, because you're having to integrate a native view into this canvas system, right?
Jamon Holmgren:
Yeah. They do something funky with how they do their view hierarchy to make that work. Yeah. This is a problem of building their own view hierarchy within their host platform.
Robin Heinze:
Because there are some things that you just have to go native for.
Jamon Holmgren:
Yeah. Again, this is my understanding. I could be wrong about it, but in my research, that seems to be the case. Basically, the thought that I have coming away from this is that the native integration in React Native is more mature and better. That may not be the case, but that seems to be what it is for me. Most of the time people are just writing Dart and they're not really dropping down into native. However, it does compile to native code.
Jamon Holmgren:
This reminds me of an old system I used to use called RubyMotion, which allowed you to compile Ruby code into native code. Flutter does allow you to compile Dart into native code, and that's different than React Native. React Native, you compile a JavaScript bundle, which does communicate, but it's running in JavaScriptCore or Hermes, which is JavaScript engine. Then it communicates to the native layer. You're not compiling native code. That is something that is a difference there.
Robin Heinze:
Yeah. Definitely.
Jamon Holmgren:
I'm not really sure. Some people think native code always equals speed and that's not always the case. There were some places where React Native could beat RubyMotion for sure, even though RubyMotion compile to native code. When you hear it compiles to the native platform, don't automatically assume that that's speed. I do think that Dart and Flutter have pretty good performance overall. You were playing around with Flutter. Did you get a chance to dive in and actually build any components or anything?
Robin Heinze:
I wasn't able to actually build any components just because the amount of time it would've taken to learn Dart. That's where I stopped, but it was definitely interesting going through the installation process and getting the environment set up and comparing that to what you have to do to get React Native running. It's a bit of a different experience. Obviously, it's not Java script, so it's not through npm. I actually just downloaded a zip file and then added some things to my shell path. Pretty standard.
Robin Heinze:
Then what was actually cool is you immediately run flutter doctor and it walks you through getting everything you need for your environment, like Xcode.
Jamon Holmgren:
Oh, that's nice.
Robin Heinze:
Xcode, Android Studio, all of the various Android SDK stuff. Surprisingly, when I first ran it, almost everything was already checked so the environment is pretty similar to what you need for React Native. I didn't have to do much. I had to upgrade Xcode, which I was actually needing to do for our React Native project anyway. I had to install a couple of Android tools that I didn't already have, but otherwise pretty similar needs.
Robin Heinze:
If you're already set up for React Native, it should be pretty easy to get set up for Flutter. The app initialization was really fast. I don't remember what the command was, but just like Flutter and then whatever it was, was instantaneous, which was pretty neat.
Jamon Holmgren:
Yeah. It is cool.
Robin Heinze:
Then I just ran flutter run and it brought up the web version of the demo app. In order to get the iOS and Android to run, you have to have the simulator or the emulator already open. Then assuming you have both of those open, as soon as you run flutter run, it makes you choose. Choose whether you're going to run on ... It detects what's open and says, "Hey, do you want to run on iOS or Android or web?" Then in order to edit code, it recommends using Android Studio, which I did.
Robin Heinze:
There's a plugin specifically for Dart, which is really neat. Just like in Android Studio, you can select which device to target. Like I said before, it was really, really strange selecting an iOS simulator in Android Studio, but somehow it knows.
Jamon Holmgren:
Yeah. That's cool. For package management, it looks like there's a website called pub.dev. It's a npm repository thing. You can use that to download packages for Dart and Flutter. That's interesting. I don't know how many packages they have and what the quality is obviously. That's a big question mark in my mind, is whether they compare to React Native's ecosystem or not. I suspect due to market share that it's probably behind to some degree, but that's just an assumption.
Robin Heinze:
Considering there's a lot of React Native packages, which are simply React packages that they share a lot of the same ecosystem.
Jamon Holmgren:
Yeah. When we get into the more opinion-heavy part of our podcast here, we're going to be talking about that.
Robin Heinze:
I will say in terms of state management, Flutter does have a normal, simple state management, just like React Native does. There's also Redux for Flutter and MobX for Flutter. You can use your favorite state management solution on Flutter. I don't think there's MobX-State-Tree for Flutter, but MobX original.
Jamon Holmgren:
That's interesting. That's really interesting. Yeah. Getting crossover ideas between the two. I actually think it's been amazing that React Native has had an alternative out there, because I feel like that pushes the core team to deliver the type of experience that will compete with-
Robin Heinze:
Absolutely. I mean, for a long time, it was just, well, we're miles above Cordova and PhoneGap so you get complacent. Having a competitor that's offering a pretty similar experience.
Jamon Holmgren:
I want that flutter doctor experience in React Native.
Robin Heinze:
Yeah. I thought that was really, really helpful. I mean, there's obviously lots of tutorials and things out there to help you get your React Native environment set up. I know Infinite Red even has a course about it, but having it just be so integrated in the CLI itself was pretty neat.
Jamon Holmgren:
There is a React Native doctor. I don't know if you've used that in the past at all.
Robin Heinze:
Does it just tell you what you're missing or does it actually have-
Jamon Holmgren:
I'm running it right now so I'm going to see what-
Robin Heinze:
... commands to help and stuff? Clearly we use it a lot.
Jamon Holmgren:
Yeah. I'll see what it tells me [crosstalk 00:25:17].
Robin Heinze:
What was neat is I had some SDK licenses that I needed to accept and I could actually accept them through the Flutter CLI.
Jamon Holmgren:
Oh, that's cool.
Robin Heinze:
It was just like in line.
Jamon Holmgren:
Yeah. Rather than having to open up Android Studio and Xcode to do that. Yeah. Yeah. I feel like Google is very good at that sort of thing. Making things and scripting things.
Robin Heinze:
They have a lot of development power behind that kind of tooling.
Jamon Holmgren:
Yeah. Totally. Yeah. React Native doctor. I ran it just now actually, and it says I had Node.js, Yarn, Watchman, and then I have an X by the JDK. My version apparently is too far behind. I need to update my JDK. Android Studio is checked off, but my Android SDK is the wrong version apparently. Everything else looks good. ios-deploy, there's a warning. Guess I don't have that. I have not actually tried this. I can hit F to fix.
Robin Heinze:
Is this something that's been added since we-
Jamon Holmgren:
It must have been added more recently.
Robin Heinze:
... first started doing it? Yeah.
Jamon Holmgren:
All right. Folks-
Robin Heinze:
Fun fact.
Jamon Holmgren:
Yes. Fun fact. Your expert React Native hosts here have just discovered that React Native doctor gives you some really cool tools. Run it, npx react-native doctor. It does look like it updated a couple of things. It couldn't fix the Android SDK, but there are some cool things there. Yeah. Let's talk about why React Native versus why Flutter 2, in our opinions. What are the big factors that ... Obviously we're React Native fans, but what are the big factors that play into these decisions?
Robin Heinze:
Well, I mean, React Native has ReactJS as a community and a tech stack behind it. I mean, you get the entire ReactJS community when you get React Native.
Jamon Holmgren:
Yeah. I think that's a big one, because nobody's like, "We need a mobile app and we're already Dart developers, so let's do Flutter." It just doesn't happen.
Robin Heinze:
Yeah. There's tons-
Jamon Holmgren:
I don't know. Maybe? But-
Robin Heinze:
There's tons of people who know React and JavaScript.
Jamon Holmgren:
Right. Yeah. It's just a natural step to go from ReactJS, to React Native. We found that people ... I would say most React Native developers came from ReactJS. Not only that, but if a web developer reviews a pull request into a React Native repo, they're going to be able to read it. I think that's big. I think that's actually the biggest thing. I've said this before. I don't know how fair it is, but I say it because it sounds cool.
Jamon Holmgren:
I say that Flutter is better at all the things that don't matter. One of the big things that matters is that community, and the community is just massive. ReactJS is the biggest web framework in the world now and React Native plays right off of that.
Robin Heinze:
The amount of big-name companies that have put themselves behind React Native and are using it in their products is huge.
Jamon Holmgren:
Yeah. Microsoft is rebuilding Office in React Native. They're investing very heavily into React Native. I see them in the discussions with the core team, Discord, Microsoft developers, all the time interacting in there. They're heavily invested in it. That's a huge one. I know Microsoft is doing some stuff with Flutter, but it does seem to be more of an experiment more so than ... Clearly rebuilding Office, that's a big investment into React Native.
Robin Heinze:
Right. That's not really experiment territory. That's commitment.
Jamon Holmgren:
Totally. Twitter.com uses React Native Web. That's a big vote of confidence there for that technology. The creator of React Native Web works at Facebook now. Shopify has gone all in on React Native. Discord is fully React Native. If you use their mobile app, that's a React Native app. I use Discord a lot. That's been a great app. I know Walmart is pretty deep into it as well. Uber Eats, and of course, Facebook and Instagram are using it all very heavily.
Jamon Holmgren:
On the Flutter side, obviously there's Google, and there are a few other big-name companies that are using it, but the list is not as big. There's also the third-party modules, which we talked about before, npm modules that you can use. JavaScript, even just JavaScript modules. We used Ramda for a while, which Ramda is just a JavaScript thing. It wasn't built for React Native, but we could use it in React Native if we wanted to.
Jamon Holmgren:
Not every JavaScript package will work in React Native clearly, but a lot of them do. That's really cool. The ones that can't can be often ported more easily to that. I think that Flutter will always be behind in that regard. I can't see any way that they would catch up with the third-party modules that are available.
Robin Heinze:
The JavaScript community likes to build modules.
Jamon Holmgren:
They sure do. I started one last night actually. I started making one.
Robin Heinze:
There you go.
Jamon Holmgren:
MobX-State-Tree and ... Just a little aside. MobX-State-Tree and Firestore and making those things work together automatically so that if you updated your store, it would actually update on someone else's device who is also monitoring the same bit of data. Basically, it's like updates across devices. It's very cool, but that is a future episode. I think another thing with React Native is the fact that you can drop down to native really easily, is really big.
Jamon Holmgren:
That's something I've been passionate about. The idea that when you need to drop down to native, just do it. Drop down, write some objective-C, write some Java and move along. It's okay. It's totally fine to do that. Even if you had to do that for 10% of your app, you're still saving 90%. For me, that's a big, big advantage. I know that Flutter, you can do that. It's just that it's not as natural, I don't think. I also think once the new architecture lands that the gap's going to widen there.
Jamon Holmgren:
I do think that both are viable options though. I think that Flutter isn't that far behind in a lot of things, and it's certainly good enough. There are some things that it's just really good at. It's way better. Some of the developer experience things are just better overall and they've really focused on it at Google. I think there's an argument to be made that you could go with Flutter instead of React Native.
Jamon Holmgren:
You're going to have a little harder time finding engineers who want to do Dart or who know how to do Dart. Wouldn't you agree with that, Robin?
Robin Heinze:
Yeah. You may be able to draw some from the Java community, but in my experience, a Java developer is more likely to want to do Android. P Android.
Jamon Holmgren:
Yeah. Yeah. That is true though. There are a lot of Java developers out there and you could pull from them for sure, but you're pulling from one group. The web community is just so much bigger and is continuing to grow. Yeah. I think that's my opinion. Overall, obviously React Native is still my jam. I really love React Native, and I love the direction we're going with it as a community and whatnot, but-
Robin Heinze:
You do a whole podcast about it.
Jamon Holmgren:
Yeah. Right?
Robin Heinze:
I think it's pretty clear where you fall.
Jamon Holmgren:
React Native core. We do Ignite, Chain React. We do all this stuff with React Native so we're pretty heavily invested. You can take that with a grain of salt, obviously. I think for the audience that we're speaking to here, which is React Native developers, this hopefully gives you a little bit of a taste of what Flutter 2 is all about. I'm certainly not trying to disparage the work that's done in it. It's some amazing stuff that I think will push React Native itself, and in some cases exceed it.
Jamon Holmgren:
We need to make sure that as a community we're stepping up and providing that experience that is at least as good. Yeah. It's pretty exciting to see these types of technologies popping up all over. Well, I think that we can call that a wrap. A little bit shorter episode this time. We're going to go ahead and bring back our weird bugs part of the episode, which we do have time for today. Robin, I see you have some notes here. Do you have a weird bug?
Robin Heinze:
I had a weird bug this week.
Jamon Holmgren:
Okay. I want to hear about this.
Robin Heinze:
It was one of those bang your head against the wall because you can't figure it out and then it just clicks and you're really excited. I had a component in our app that was using a library called ... I think it's called React Native Card Flip, but it's basically just a little component that lets you specify a front and a back. If you tap on it, it will flip. It'll animate like it's flipping over. What was happening was you would flip it and it would work and you would flip it.
Robin Heinze:
If you kept flipping it, eventually it would start to duplicate. You would flip it, but it would create a new card in front of the original card and then keep just stacking. I am like, "Think this is weird."
Jamon Holmgren:
It's a card trick.
Robin Heinze:
After putting console logs all over the place, and not figuring out why it was doing it, I realized actually from my logging that once the page first rendered, the front and the back component never re-rendered, even when one was displaying, the other one didn't unmount. They were both staying rendered. I was like, "That's weird." It was not really what I expected. That was my first clue. Then I decided to add some debug styling, so some borders, border red, background yellow.
Jamon Holmgren:
[crosstalk 00:35:22]. Yeah. Yeah.
Robin Heinze:
Some fun borders. What I noticed was when the back of the card was showing, you could actually see the front of the card behind it and so the touchable area, there was just a little area around a close icon on the back of the card. Then behind it, you were actually seeing the touchable area on the front of the card. If you didn't exactly hit the close icon, what you were doing was actually tapping the front and so telling the card to flip to the back, even though the back was already showing. It was just adding cards.
Jamon Holmgren:
Oh my goodness.
Robin Heinze:
It got backwards, like reverse of itself. What I did was just make sure that the back of the card was completely covering the front and so you were always touching the correct touchable area, and I fixed the bug.
Jamon Holmgren:
To me that just, it shows how much of our profession is just smoke and mirrors. We're trying to make this feel like a card flipping, but clearly there's something in the background that's not being rendered, that's being covered up and it's all just smoke and mirrors.
Robin Heinze:
Yeah.
Jamon Holmgren:
That's so funny.
Robin Heinze:
It's surprisingly frequent that the thing that helps me figure out a bug is adding weird, crazy color borders.
Jamon Holmgren:
Yeah. Yeah. Exactly.
Robin Heinze:
And console logs, like the-
Jamon Holmgren:
Console logs. Yeah.
Robin Heinze:
... basics.
Jamon Holmgren:
Oh man. Yeah. Debugging. Oh, fun. Fun, fun.
Robin Heinze:
Fun. Fun.
Jamon Holmgren:
Very cool. Nice. Well, I think we can call that an episode. Where can people find you, Robin?
Robin Heinze:
I'm @robin_heinze, with an E at the end on Twitter.
Jamon Holmgren:
Perfect. I'm @jamonholmgren. You can find React Native Radio @ReactNativeRdio. As always, thanks to our producer and editor, Todd Werth, our transcript and release coordinator, Jed Bartausky, and our social media coordinator, Missy Warren. Thanks to our sponsor, Infinite red, check us out, infinite.red/reactnative. Special thanks to all of you listening today. Make sure to subscribe if you haven't. Send this episode to someone who's maybe curious about Dart or Flutter 2 or alternatives and see what they think.
Jamon Holmgren:
Also, if you're a senior-level React Native engineer or someone wanting to get into React Native as a senior-level engineer located in the U.S. or Canada, go to careers.infinite.red. We'll see you all next time.
Robin Heinze:
Bye.