Simon Grimm is a Creator, Indie Maker & Solopreneur. He is currently working at The Ionic Academy. He joins the panel to talk about React Native and Capacitor. He starts by explaining how a "Capacitor" contributes to your web application. They talk about how to build web applications with a capacitor and how it differs from using a React Native. 

Welcome to React Roundup. I'm your host, Jack Harrington, for the day, and with me are my esteemed colleagues, Paige Neateringhouse.

 

Hello everyone.

 

and TJ VanToll.

 

Hey everybody.

 

And with us today is our special guest, Simon Grimm. And Simon

 

Hey.

 

is talking about React Native and Capacitor. That's very exciting stuff. I don't do a lot of React Native stuff, so I'm very excited about this. So why don't you tell us a bit about, well, I think we all know what React Native is. I'm hoping we all know what React Native is at least. But what is Capacitor, and how does it relate to React Native?

 

So I'm Simon and capacitor in general does not relate to any specific framework

 

Hmm.

 

and most people will actually assume that capacitor belongs to Ionic. So if you have heard about Ionic before,

 

Sure,

 

which is

 

yeah, yeah, yeah.

 

like another toolkit for building mobile applications with web technologies, most

 

With web,

 

people

 

right.

 

actually...

 

Embedded frame, web frames basically, yeah.

 

Yeah,

 

Okay.

 

and most people assume that, oh yeah, Capacitor belongs to Ionic, so you can build your Ionic application. And that's pretty much where it stops, I

 

No

 

guess.

 

need to know more, just there it is.

 

But you can throw in Capacitor basically everywhere. Just the other week, I've been now working together with Ionic. I've built a vanilla JavaScript app with Capacitor and then deployed it to my iOS device, and I had access to all the native device functionality. So that's the power of Capacitor.

 

Okay, well you skipped a part though where you tell us what capacitor is.

 

And you can... Yeah. So from a marketing perspective, Capacitor is, they say, a cross-platform native runtime for web apps.

 

Oh wow.

 

But basically, easily speaking, you install Capacitor in any kind of web project. You take your React project, you install Capacitor, and then you've got a few commands from the CLI. And then you can add an iOS folder, an Android folder. And those are going to be like native projects, like Android Studio project or an Xcode project. And basically, what Capacitor does, is it's building your web application, like your React application, and then it's displaying that in the native application in a web view, pretty much. So whenever you update your code, you just run an update command, it syncs your web files to the native files, iOS and Android, and then it deploys this and shows this in an application. So that's in a nutshell, Capacit.

 

nice but it's still running in a web frame inside of those iOS and Android applications. Okay, now I get yet.

 

So Yeah,  was going to ask, is this kind of like making your Android version and your iOS version so that you could deploy these to the app store and have them be native apps for an application?

 

Yes, 100%. So it just shows,

 

Thanks.

 

like it uses the native web view control on iOS. That's the WK web view, I think, at the moment. On Android, it's another web view component. And it's not like you see a browser in your application. Like this

 

No.

 

is no URL bar, nothing. It's just full screen, your application running as a native application. And because it's an Android Studio project or an Xcode project, from that point on, you can basically use the native tooling like you were an iOS or an Android developer. With an Xcode, you can directly deploy to a simulator or you connect to a device. You can build an APK in Android Studio and put this to a device. And of course, yeah, you can just submit it to the App Store at that point.

 

Yeah,

 

True

 

if you've

 

story,

 

used

 

really?

 

chord-

 

Yeah!

 

Sorry. But because I know the app, the Apple's not so happy about, at least they weren't happy about those kind of apps.

 

people get this wrong usually. Yeah, there was

 

Okay.

 

some bad press about WebView applications,

 

Yeah.

 

but yeah, most people stopped listening. Oh yeah, WebView is bad, we're not doing it anymore. By the way, that's pretty much what the whole internet thinks, since I think Mark Zuckerberg said that betting on the web was the worst thing they ever did at Facebook. I think at that point everyone thought like, okay, yeah, we're not doing cross-platform applications anymore, this not magzuckerberg.

 

Hahaha

 
Jack Herrington:

Hahahaha!

 

Yeah.

 

Just build your EBS, the user doesn't care about how you've built the EBS.

 

Okay.

 

Yeah. So I know Apple, what they specifically, like even from like a legal perspective, did not want people to do is they didn't want people to just create a lightweight wrapper of their website and then just throw it in the app store. And

 

Mm.

 

Yep.

 

so their terminology was they were explicitly trying to stop people from doing that. Their thought was your app should do something that warrants it being in the app store, which I think is totally reasonable, right?

 

Yeah.

 

If you are just wrapping your website, because

 

Hahaha!

 

it's probably just wasting your time. Usually if you're building an app, you should have some reason to do something above and beyond that. And that's where tools like React Native, like Capacitor and such allow you to do, is you can reuse some of the stuff you're doing on the web. Obviously, if you need to list something about your project or your whatever, you can do it in both places. But presumably, the reason you're building an app is you want something. Maybe it's you want to be able to use Face ID to make users' lives easier there. Or

 

Mm-hmm.

 

maybe it's you need to do something with a camera that you can't do on the web, but hey, you can do that in native. And projects like Capacitor allow you to mix and match, or at least that's how it was when I was involved in this world in the past.

 

Yeah, exactly. So, so far I just said you can wrap your native app with Capacitor and build, build it for iOS or Android. But the cool thing is that Capacitor has some plugins like camera, geolocation, file system that you can then use in your app and that will use the underlying platform SDK on Android and iOS. So basically like Cordova did in the past. So Capacitor is kind of a, like an evolution to Cordova because the IONI company saw a lot of problems with Cordova in the past. and then they just created Capacitor. By the way, coming back to this, the regulation from Apple, there were actually two specific things they didn't wanna have. So they didn't wanna have these like 100 apps that all look like Joey's pizza from your next doorstop.

 

Yeah

 

Like everyone was just putting up a different primary and secondary color and all the apps looked the same. So they were running those applications. And also at the same time, they don't want you to load your whole HTML from a remote server. Because in that case, Apple can't check your stuff. do, they are very strict with checking and submissions. But if you just do it like that and just submit a shell, you can do pretty much everything you want in that app. So that's definitely also something they wanted to prevent.

 

I don't know why you're harshing

 

I mean...

 

on Joey's pizza, by the way. That's just rude.

 

Yeah.

 

I think we have a Joey's Pizza in Germany as well, but it's not the same as you have

 

Mm-hmm.

 

German pizza, I don't know.

 

it.

 

So Simon, let's go back a little bit. You said that you have built a vanilla JavaScript application that is using the plugin. So what kind of an application did you build and wrap with Capacitor?

 

So this was more like a demo, and it was actually kind of painful. So at that point, I understood why we have JavaScript frameworks.

 

Oh, I see. Yeah.

 

Like, if you want to display a list and render items and attach click listeners, and then you want to update

 

good luck.

Yeah. Oh, God.

the list.

 

document.create.

 

Yeah,

 

an element. I think God Yeah.

 

but I made this specifically to show that Capacitor does not belong to anything. You can just drop this into anything. You can drop this into a view project. You can drop this into a jQuery project or anything, and then just use your preferred UI with Capacitor. So within that vanilla JavaScript project, I just executed the camera, snapped some pictures, saved them with a file system plug-in, and then displayed a list. So nothing really fancy in that application.

 

Nice. But I mean, that's, that's a great example of how flexible it can be, which is really what most web developers are looking for at the end of the day. I mean, I love my react specific stuff, or, you know, if you're building a Svelte project or whatever, but if there is a simple way to just bring in a package and it just, and it works, that's, that's fantastic.

 

Yeah, and for whatever reason, most of the React community doesn't seem to know or to care about Capacit. I don't know. I mean, React Native is great. No problem about it, but have you tried Capacit?

 

Well, maybe we can dive into that a little bit more. Cause I think like if today, if you are a React developer and you think like, oh, I need a native app, right? My business people came to me or whatever, right? I decided I'm going to iOS or Android. So help our listeners understand what are situations where they should lean towards React native and what are some situations where they should lean towards capacitor. And then I guess to take the full end, what are some situations where they should go like full native, right? to like an actual iOS and Android dev team. Cause I think that's probably the most realistic situations for our listeners of the show. So maybe you could just lay out the thought process. What do you have sort of going on in your head?

 

Yeah, sure. So last year, I tried to understand the differences between the most common approaches, which I think are React Native, Flutter, and Capacitor. So I think we have to mention Flutter in terms of cross-platform

 

Yeah,

 

apps as well, because

 

of

 

it's

 

course.

 

just super popular at the same time.

 

Mm-hmm.

 

Now, what I found is that with Capacitor, what you can very, very fast and easily do is your team already has a React website. You have a lot of React code in your company, an app for that. Just install Capacitor and give it a try. You're going to see that in half an hour, maybe an hour, you're going to have your UI inside a native application. And actually, that is sometimes enough. Now, I think for most internal enterprise applications, this would be the perfect way to go. Because here's the thing. If you're using React Native, you're actually not really using React Web. There's not the DOM you used to have with React Web. So So if you write a React Native application, yeah, you might use some hooks and some logic you've developed with React. But this is not like complete code sharing. But within a capacitor project, you could actually really achieve that dream of write once, deploy everywhere. Because there's really nothing fancy. And with capacitor, actually, I mentioned the plugins before. So all these plugins usually have an iOS and an Android implementation. But most of them actually also have a web implementation, just keep running your React Live Reload or whatever you got open and develop in the browser. And those APIs will actually still work. They have a little fallback to use the camera or to

 

Hmm

 

use the file system. And you just can't continue working with that. Now, when should you not use Capacit? That's a good question. I think, first of all, if we're talking about game development or anything that's really close to the metal where you really need those native SDKs, I think none of the approaches really works. can't do this very well with React Native. Maybe you can do it. Maybe you can do it with Flutter. But actually, I think in that space, Unity is also very popular, and especially game development.

Oh, yeah

 

Mm-hmm.

 

Yeah.

 

So in those cases, I would go that route. If you now say, well, all these web apps, they have this web-ish look, yeah, OK, I can understand this. If you develop a React website and then just put it into a small container, maybe your application mobile and it is a bit responsive, but usually it won't really look like a native application. So if you need a better UI for native that's looking fancy, that's looking more native, I think in that case I would go for React Native. I just felt also I've been developing pretty much the same application with Capacitor, React Native and Flutter. I mean the Capacitor application worked great. might use Capacitor and you might not even notice it. So it really depends on your target audience. But if they expect like a lot of fancy things and cool native transitions, you are probably better off with something like React Native. So it's really like a spectrum and you need to think about what is my target user? I always said when people say, yeah, Capacitor, these are not native apps. I say, does your grandma care about how your application was built?

 

Ha ha ha

 

Yeah.

 

like...

 

No.

 

Yeah, his does.

 

I always think too, it comes back to me, if you think about the famous Mark Zuckerberg quote when he said, well, HTML5 was a bad bet for us, you have to realize in that case, Facebook had the biggest engineering budget almost in the world.

 

Yeah.

 

So it was a bad bet for them only because they could afford to

 

Yeah.

 

put an army of talented iOS and Android engineers there is because

 

Mm-hmm.

 

they're operating at an enormous scale. Chances are you listening to this aren't operating at that scale, right? You probably

 

I'm sorry.

 

don't

 

I'm

 

have

 

sorry.

 

the budget to pay armies of iOS and Android engineers to like really polish a smooth experience. And libraries like Capacitor absolutely lets you just get up and running way faster. And hey, if you decide for whatever reason this isn't good enough, you know, for whatever, it's not like you've totally invested a ton either because Capacitor, I totally agree, easy to get up and running. So you can just sort of see what you're working with. It's a really low investment. It's skill sets you already know. And then you could

 

Mm-hmm.

 

take that as a starting point and go from there.

 

Yeah, that's what we actually haven't even touched, like the whole idea of closed platform and just writing the code with web technologies. So, uh, we talked about w in which case you can use REC native or in which case you should just use capacitor. But if you have a team of just web developers, they already know this stuff. Like they can do this. They don't need to learn anything iOS or Android related. They can just get started. But of course, yeah, if you, if you're Facebook, if you got like 50 iOS developers just waiting to

 

Hahaha

 

create an app. Yeah, of course. It's always the best.

 

Yeah.

 

Yeah, I think it's interesting. I think when you think about like, like Flutter versus capacitor versus,

 

Dirt.

 

well, yeah, there you go. Versus react native, it I think the capacitor to react native might be safer. Because if you think about it, like, okay, so capacitors going, we're going good. But we're like, yeah, we need some some native feeling stuff, right? You could potentially in capacitor code, put it into another library, like maybe the API handlers or the form validation stuff or whatever, right. And then you can reuse that in a React Native context. Whereas if you go with like a Flutter, you know, you're kind of stuck in the Flutter ecosystem until you

 

it.

 

don't want to use that anymore.

 

Simon, you should quickly just define what Flutter is for people.

 

Oh yeah.

 

I'm also curious if Flutter is still Dart only, because it was the last time I looked at it years ago.

 

Yeah, I've definitely used it with Dart. So Flutter is Google's answer to the whole cross-platform fun where you need to write cross-platform applications with Google's own language Dart, which isn't actually too bad.

 

It's nice. It's a nice upgrade.

 

It's nice. If you've developed for five or 10 years with some languages, it's not too hard to get into anything unless it's like Haskell or some crazy stuff.

 

Ha ha ha

 

Hehehehe.

 

Like.

 

Oh god.

 

But in terms of popularity, you can just check out the latest JavaScript Developer Survey. Usually Flutter and React Native are pretty much at the same satisfaction level. So it is actually very popular. In terms of the community, I don't know, I've found a lot more content around React, of course, and React Native.

 

Yeah.

 

But Flutter is definitely going strong in terms of numbers. I think they're just working on a new Dart version as well that will come out this year. They just released a new Flutter version. The cool thing about Flutter is it looks really good. I don't know if you've seen applications from Flutter. Google is very good at that marketing thing. They definitely got this figured out. You go to the Flutter documentation and they got specific guides. Coming to Flutter from React Native, coming to Flutter from this,

 

Yeah.

 

coming to Flutter from that. They exactly

 

guys.

 

know what they're doing. And I think Capacitor might invest a bit more Thanks. It's not me, it's not me.

 

Nyeh, well there's

 

Uhhhhhh

 

you! Oh, okay, alright.

 

Just for clarification,

 

I-

 

I'm not part of the Ionic company or Capacitor. I'm just a content creator and using Capacitor and enjoying it. So I'm not affiliated with them.

 

Okay. There you go. All right. And just for a point of clarification, flutter is very much like Oh, Dart is very much like JavaScript or TypeScript just kind of cleaned up a little bit. Like there's some little rough edges that we had before. There you go. But it compiles into jobs, JavaScript and TypeScript in that context. Like if you use it for the web, it's going to compile into JavaScript.

 

So. Yeah, it's exciting.

 

If you use Dart for the web,

 

Yeah.

 

oh yeah, that's gonna be painful.

 

Okay, well it works. I believe it actually technically speaking it works

 

Oh, man. I don't  know if it works, to be honest with you.

 

at one point in time.

 

It does work, yeah.

 

Okay.

 

The problem is the output of your Dart Flutter application for the web, at least the last time I checked, is just a huge canvas where they render every pixel of your application with their SkyR rendering engine, which is probably not the best thing for accessibility.

 

Yeah, I was just gonna say that's not really screen reader friendly.

 

They look good, like for marketing pages, you could probably do this, but I don't know if you're willing to do this. But everyone's going into that route, like React Native, Expo is also trying to get better native app and then deploying it to the web, which is kind of interesting. Like everyone's working. We're going back to the server with JavaScript. Like everything's just going in circles. I feel.

Should just go back to PHP.

  

So  I want to push you on Flutter a little bit more, because if you haven't been able to tell, I'm not a fan of Flutter.

 

Time is a flat circle. Really.

 

Hmm

 

I do agree. The output of Flutter is kind of nice, and it's because they have their own rendering engine. So they're not restricted by the DOM on the web. They're not restricted by Android or iOS's layout system, because they just forgo it. They're painting their own pretty picture. But because of that, I found the constructs for building up a UI awful. So for anybody who hasn't tried it before, you're giving up JSX, right? You're in Dart. So you're constructing this incredibly verbose thing of widgets where there's no CSS. So all your style things are just inlined and stuff, which to me, and this was three or four years ago, so that's why I'm curious your take on this, but it was just like my UI tree just became a hot mess of garbage. like a main unmaintainable nightmare. So

 

Yeah, it's fine.

 

I'm curious what you think like an updated take on that.

 

Yeah, as far as I know, you need to be really careful and structure this into subcomponents and extract in widgets. That's what they call this with Flutter.

 

Hmm.

 

It's not components,

 

Okay.

 

it's widgets. So everything is a widget in Flutter. Even your text element is a widget. And you should split up everything into their custom widgets. I know exactly what you mean. Your DOM is getting unbelievable long. And when I used Flutter for a week just to test it, I felt in comparison to HTML and CSS, I feel like an artist. flutter and dart I felt like a robot. Like you're just

 

Mmm.

 

bumping out those lines of widgets and putting everything into

 

Hehehe

 

it.

 

Yeah.

 

That's definitely how I felt. Yeah, I think everyone just should try it out at least because I think

 

Yeah,

 

some people

 

I-

 

will prefer this and I think this is actually also how Swift UI is becoming these days. It's pretty much the same approach, isn't it?

 

Yeah, it's similar.

 

Yeah.

 

I agree with that. I think part of my bias here is that we're coming from a web developer perspective. So I think somebody new would look at the DOM and HTML and CSS and go, what in the hell? Who came up with these ideas? There's a lot of really strange things going on there, too. But if you have a React background, you kind of know the warts of the web and web technologies. Whereas with Flutter, it's like you're where you don't know the best practices, you don't know these things for structuring. And I think that's one reason to like, at least to me to lean towards a capacitor to a React Native. But I totally agree with your point. Like, I think everybody should try Flutter, just take a few days. If nothing else, it's like, it's fascinating to see how they approach the.

 

Yeah, exactly. And as you said before, the output looks really good. So I guess that's what attracts

 

Yeah.

 

most people. But the thing is, people always say like, oh, Flutter apps, they look so native. While this is actually totally not native, what they're doing. You described it with their custom rendering engine. It's completely not native. Like, I don't know. This is like a magic.

 

But it's like, that's what Unity does too, right? Like, so, I mean,

 

Oh yeah.

 

Unity games feel people use it because it's high performance. Well, they're not using, like, their whole thing is they're abstracting away the platform, right? They're just, most games, if you run a game, you're not getting native buttons anywhere. No, it's just some

 

Nah.

 

like,

 

No.

 

some magic bytecode that's running under the hood that's making that possible. So it's kind of, it's just, I find the whole thing kind of fascinating.

 

This is, by the way, one thing people kind of hate about Flutter. And there was a video from, which is this opinionated creator, Theo? TheoPing or something? Where he was

 

Hehehe

 

really, I don't know, can I swear where? Oh, you got opinions about him. Oh, that's interesting.

 

No, no, no,

 

OK,

 

no,

 

That's

 

no, no,

 

a

 

Tia's a

 

very,

 

friend of mine, but okay, go on.

 

oh.

 

yeah. Yeah, he was roasting Flutter.

 

I'm sorry.

 

But

 

I'm sorry.

 

his whole argument was pretty much made up because Flutter does not have this hot code push, which means, for example, You can submit your app to the App Store. Your app is on a phone. And usually, if you want to update your native apps, you need

 

Hmm

 

to submit a new app, go to the submission. It takes a day, and then your app is released. But in a lot of cases today, you can use hot code replacement. So it exchanges the JavaScript and HTML bundle of your application with a service. And that is not possible with Flutter. So for Flutter applications, you definitely always need to go through the store and submit an application to fix a critical bug. was basically that you can't use Flutter because they don't have it. And I think that's overlooking a few things. Like some companies just want a good-looking React, a good-looking cross-platform application. I've worked with companies which don't care about code push. So you can't just say Flutter is bad because it doesn't have one specific thing. That's all I got to say about

Theo today.
 

It is a big concern, though. I would say it's a fairly big concern. I mean, I remember when I worked at Walmart Labs and we had critical patches. Like, there are tickets, basically, that you have with Apple where you can say, OK, it's really bad, I need this reviewed right now and out. But you only get like three of those a year, depending on who you are. And so it's a big deal. And I actually am kind of surprised that Apple allows hot code, or the code push like that, because of the auditing that they want to do on the app.

 

Yeah, I'm also not sure, but it works. And it's legally definitely allowed to some degree. I've seen it work. I don't know exactly what their guideline is, but hey, Apple is also allowing web push notifications. So they're moving in the right direction now.

 

yeah, that's true.

 
TJ VanToll:

Yeah,

 

That's true.

 

it falls under the same guideline you mentioned earlier. And I've got some of this background because when I worked at Progress and we made Native Script, we had a legal team and they obviously cared about this stuff a whole lot because if we're pushing out a feature that everybody would get rejected. And essentially, the Apple policy, it fell under what you said earlier that you just can't fundamentally change the purpose of the app.

 

Hmm.

 

JavaScript file and he needs to update it to like parse the strings so the app doesn't crash or something like that. They're cool with that.

 

Sounds like me.

 

But if Jack changes the Walmart website to be a gambling site because of Kotlin push, then Jack's gonna get a phone call from somebody at Apple because they're really not cool with that. But wouldn't Jack do that.

Ha ha ha

All right, so let me ask a question. You said that other options are things like Cordova and things like Expo and stuff like that. So let's say that you had a Cordova app already. Is it possible to change, to decide that you wanna use Capacitor instead and kind of rework it? Is that something that you can do or do you really kind of have to start from the beginning again and rebuild it?

 

I mean, Cordova sits pretty much at the same spot, like Capacitor, between your web code and the native code. So yes, in general, you can replace it. You can actually, so there's also a reason why I tell people who were using Cordova and loved it, you can actually use Cordova plugins with Capacitor. So they made this backwards comfortable. It works pretty good in most cases, only if they're like Cordova plugins, which some magic hooks or something because that doesn't work with Capacitor very well. They have a bit different philosophy on that. That means there's no reason today to use Cordova. This was also, I think, coming out from the survey about JavaScript that people don't want to use Cordova anymore. The plugins in the community, you just see these outdated plugins last commit four years ago and you already know that you're up for trouble on that day if you're using a plugin like that. But in general, you would have added Cordova to an Angular project, or can you do it with React, actually? I've never seen somebody use a React and Cordova together. I think you can, right?

 

Yeah.

 

Yeah,

 

Yeah, yeah,

 

but it's not cool.

 

Well, you know.

 

But yeah, it's web-ish.

 

Yeah, exactly.

 

But in those cases, yeah, you can actually do this fairly easy, given the fact that you can use most Cordova plugins with Capacitor. So you just need to change this. In short, Cordova did something. They had a config file in your project. And in that config was all the plugins, all the settings, all the specific hooks you want to execute. And then you run a build command, and it regenerates your iOS and Android project based on that config. However, if any of you have used Cordova, you know that this is going to be really painful if there are problems, because there's a lot of magic involved in that process. And Capacitor put away this config file They just want to generate your native project, and then you can work in those native projects. They're not regenerated by some kind of magic, and they're not overwriting some settings. So you can really go into Xcode and put in app icons or splash screens or put in that you want to use a specific version of Swift or something, and those settings won't be changed. So that is the big philosophy shift from Codover to Capacitor.

 

Okay, so I've, I've done react native in my time. And I gotta tell you going from like, if I let a react native project sit on the shelf for six months, then upgrading react native. I mean, it bit it bit rots faster than roadside strawberries. I mean, it's so bad. Like, you have to read basically rebuild the entire application. If you let it go for too long. So how is capacitor in terms of rev to rev to rev is pretty stable. Because that was a serious, like, Serious drama.

 

end.

 

I mean, the good thing is the API of Capacitor is pretty slim. There's not a lot to it.

 

Hmm.

 

We got the plugins, but the core of Capacitor, there's not a lot to it that you can actually use from it. So there are now, at version, what is Capacitor? Three, four-ish? I think four. I think we're at Capacitor four. And there were major changes in the last versions, but that was just the big Angular change eight years ago. now at a pretty stable point. They put away all the plugins, they are not in the core bundle anymore, they are all their own plugins. So I think actually you're pretty safe with that. You're going to have more problems updating your React version, I guess.

 

Okay. Yeah, fair enough.

 

or your iOS and Android versions. Because lots of times, once you go native, and that applies regardless of the choices we're talking about here today, you've got a new set of problems just because, at the end of the day, you're building an iOS and an Android app. And no matter whether you choose Capacitor, React Native, True Native, something on, there's Xcode is gonna be there under the hood, Android Studio is gonna be there, 

 

Oh yeah.

 

and they have to like those processes. So actually, I'll turn that into a question to you, and because I've been out of this world for a few years, what sort of advice do you have to people? I'd say it looks like web developers, right, that are stepping into this space. Do you have like anything you've learned, any tips you have for like the way your brain has to work different once you start building native apps?

 

Well, you certainly have to follow a different source of news. You can't just listen to the web news anymore.

 

Oh, yeah.

 

You really need to tune into a few channels. This can just be a few major channels. But if there is an Android change that you can't build with a specific SDK version anymore, you will just be lost. You build your project, you submit it, and you get random errors. And you're totally lost. So you kind of need to stay on top of the news for iOS and Android. If iOS says, oh, this web view is now deprecated, and you're still using it. So you definitely need to listen to other news as well. It's definitely getting harder. And I would always try to stay somewhat up to date. I've seen applications where they skipped all the news for years, and then they had to update six major versions and do a lot of things to their code. And that is usually not a great idea. So if it's possible for you, it's usually less effort. If you just follow the major versions and then take a week, a week, it depends on your code base. Just try to stay somewhat up to date. It will definitely be very helpful for you in the future.

 

I remember things like I was still involved with the native script project when I, the iPhone first came out with a notch and just like, it's just like little things like that, right? Cause you think like on the web world, those, those aren't situations you have to deal with, but a native apps, it's like, Oh, well when they did the notch, there were new APIs for making sure your layouts like went around the notch correctly.

 

Oh yeah.

 

Ha ha ha.

 

And so we had to like scramble because we were like, okay, we have to tell people cause there we have customers and users that are out there. to deal with a notch, right? How are you going to rebuild and get a new version out so that your most expensive users that are rushing out to buy the iPhone, I don't

 

Hahaha

 

know, 10 or whatever, whatever it was, don't have a weird looking app, right? So it's just like little stupid stuff like that. Lots of times these are trivial. Like you said, I tend to agree that these usually aren't huge time investments, but if you're not up in that world, if you're just letting your project sit for six months, you are going to miss things like that.

 

And you definitely need a feeling for native applications in case you target like end users and not just building an internal enterprise tool, because you need to know how it feels, how the scrolling feels on some pages, how people handle the status bar on different devices with different colors, like these are specific things. And then the whole build process, of course, of submitting applications, which is usually pretty scary to people. I actually don't know why, like the first time, yeah, but it has a lot easier with Xcode. Like Xcode pretty much takes care of everything today. And especially by the way, if you're using React Native and Expo, like I've been just building an application over the last days and using Expo and the Expo application services, it's just too easy to submit my application. Like I feel even bad about this.

 

That's good to hear. It didn't used to be so easy. I remember complaining about that all the time. So they've automated a lot of it out. So you just basically do most of the submission from Xcode.

 

Yeah, well, with Xcode, exactly. You can even generate like your provisioning profiles. You can generate an entry in App Store Connect and all these things. You can just do this with a wizard in Xcode today. And it usually also manages all your provisioning profiles. I never went into my developer profile. Yeah, it brings up bad memories.

 

Oh god. Ugh, god I hate those things. Gahhh. Oh lord. You know.

 

Yeah, exactly.

 

It's usually managing that. And Expo, by the way, with the application, Enterprise Services, it's also super easy. They ask you everything on the command line. Do you wanna log in? Yes. Should we generate a profile?

 

Ugh. Ha ha ha

 

Yes. Yeah, take my key, take everything. Just upload them app.

 

Make it happen!

 

Yeah.

 

Just make it happen!

 

I'm glad to hear that because that was awful. And it was, Android has similar processes, but it was always easier on Android. Like Android always felt like a walk in the park after you went through the pain that was iOS.

 

Which is by the way funny, in the past it took like a week to submit your iOS application and the last time I submitted one it was actually live after one day and the Android review took a few days. So yeah, things are changing.

 

Let's snap in.

 

Wow.

 

Oh, okay. Nice. Yeah.

 

So Simon, going back a little bit to talk about, you know, staying up to date, do you have any recommendations for how you stay up to date with the changes that are happening? Like are there specific newsletters that you're a big fan of or, you know, like how do you keep up with the news and the changes?

 

Yeah, so I would definitely recommend everyone to subscribe to my newsletter, which goes out every week. But of course, I'm following these companies. I've been following the Ionic framework very closely, which is the parent company of Capacitor. I've been definitely following the React Weekly newsletter since quite some time from Sébastien. I think

 

Yeah,

 

he's

 

Sebastian.

 

from France,

 

Yeah. That's a good one.

 

stay up to date with everything regarding React and he also covers React Native.

 

Mm-hmm.

 

Um, besides that, I'm just following the usual stuff like JavaScript weekly. And, uh, I think that's the major one. And of course the Syntax Podcast, uh, for everything else.

 

I must be the only person that doesn't listen to syntax. I guess I should.

 

It's pretty good. Wes and Scott are a good team.

 

Well, Paige, we know that when we do Friends of Flutter, we're not inviting either of these guys, though. Like, they're

 

Ha ha ha

 

not showing up on that podcast.

 

No dude, have the enemies of flutter, cawcast,

 

TJ is going to end up being the anti-Flutter guy. We'l bring  on the exactly enemies of Flutter podcast.

  

Right. TJ will be there to downcast everything.

 

yeah, again.

 

There you go.

 

I'm sure it's fine. It's just not for me.

 

Ha!

 

That's, which is fine.

 

No, but rendering on a canvas, that's...

 

I mean, once again, it comes down to like your grandma won't care about if it's Flutter or React Native. So if you have developers who for whatever reason learned Dart for six years, then go ahead and build Flutter applications. I guess they're super fast with Dart and Flutter and they can ship something awesome.

  

No, come on, man Really?

 

Yeah, if you just want like a really slick animation for like something like an ad to get people to do something, like, I mean, there's worse ways of doing it.

 

Definitely.

 

What I don't understand is that people always seem to discount the fact that like, you with react native, you could very easily just create another component that's Android and another that's it's react and then just bring those in and have those be native. And so if you want to do like the hyper slick animation at one point or another, you can just bring in a component just to do that. Right. And so you're not like, it's not an either or sort of thing. It's it's, you know, you still have access to the native API's. work that hard to get there.

 

By the way, if we talk about that, Flutter is really bad about doing an adaptive UI. You can just do the material theme, or you can use the cappuccino theme. But if you want to do if-else, your application already looks horrible with a widget tree. If you do an if-else in all the places to build adaptive components, it's getting even worse. So I think.

 

Yeah, that's actually I was going to say that about Flutter. It's like I know my product manager and I know my designer, you know, the ones that I work with. And if I were to like be, you know, we just can't do that in Flutter. Just, you know, you want that to be mocha red or whatever. And it's like that. Nope. No, we don't have control over that sort of thing. That's just part of the frameworks as I guess they're going to be like, huh? No. Whereas I felt that way with with Flutter. I didn't feel that way with HTML. whatever they asked me to do, no matter how, whatever, you know, I could, I could event, I could if I pushed hard enough get it to do whatever I was going to do, you know, customize the CSS or whatever, you know, there's always a ways around it, always escape hatches.

 

Well, that actually brings up a question I had for you too in capacitor, because you do have access beyond the plugins as well, right? So like, let's say I'm a company and I mostly need just web technologies, but there's this one iOS API that's like mission critical to my app. Is there a way in capacitor that I could write like either like a custom plugin or some way of accessing

 

you

 

that like one native API so I could bring it into my app, but build the rest with totally web tech tech.

 

Yeah, sure. Yeah, you can build your own capacitor plug-ins, just like they built camera fail system, geolocation plug-in. There are already, well, I wouldn't say a ton of community plug-ins. There are quite some community plug-ins, but capacitor has been popular since, I don't know, maybe for two years, three years now. So the community is very small. Like if you compare the numbers of Cordova plug-ins to capacitor plug-ins, you're gonna see a huge gap between them. But you can definitely build plugins. I did this before in a tutorial and it's actually quite easy. And honestly, using ChetGPT, it's becoming even easier. Like you can just go to ChetGPT and save write me a capacitor plugin that uses the Stripe API on iOS. It will do this just perfectly for you without any experience.

 

Hehehe

Wow.

 

Yeah, I've been

 

getting It.

 

following what I call, and I want to make a video about this. I will call this AI-driven app development, like not test-driven development, but AI-driven. Like I use Mid-Journey for the UI and then chat GPT for everything else and bouncing between them.

 

What this is gonna do is people are gonna read that, and then they're gonna end up in my Discord channel or my Discord server asking me like, how does this code work? And I'm like, did you write this code? And they're gonna be like, okay, goodbye.

 

Oh. prompt engineering.

 

You know, and like zoom off to some other way to get support because that's the thing. You have to know how this stuff works if you put it into production. I get it, it's cool, but. Ugh.

 

Is, uh, do you find that you have you having used it for a while? Have you worked on like refining the, like how you prompt chat chat GPT? Like, cause I've like, when I've used it before, it's helped me out, but only in like isolated scenarios, right? Like I need, I have like a specific problem and it helps me out there. But if I had asked broader questions, I get something just, just like really vague and not really actionable. So I just be curious, since it sounds like you've played with this, like for like for me

 

Yeah,

 

specifically

 

yep.

 

like how can you make my life easier?

 

Exactly, I'm trying to get more into this and it's really looking like prompt engineering is a new job or a new job feel like, you know find so much about this

 

Yeah.

 

And what I found is definitely that you need to give chat GPT some kind of context like You're an expert Programmer with react and we are writing a cool application for kids Let's do this and really it sounds stupid But I've been doing it like that and it kind of worked It's not working great for very specific things, but for example, when I started this app, I said, okay, here we go. I need an initial screen. It has an image at the top, then it has a headline, some text, and a button at the bottom. And just prints me out the text with all the CSS. I can do this myself, of course, but it's taking maybe 10 minutes. I've saved those 10 minutes. And you do this a few times per day, you're going to save a few hours.

 

Yeah. But you know how to write that, and you know how to maintain that. And if it doesn't work, then you know how to debug that. What's happening is like, well, no, but the basics of debugging are clearly underrated skill nowadays. But I think,

 
Paige Niedringhaus:

Mm-hmm.

 
Simon Grimm:

Yeah. Sometimes. 

 

I think though, I almost view it like the co-pilot assistant type thing. I think as long as you have a general idea, sometimes you can get by with, sure, if you have absolutely no clue what you're doing, I couldn't give this to my kids and they're not going to build a successful web app with it. But I could totally see how a tool like this can help me expand what I'm capable of or how fast I can do things though, for sure.

 
Jack Herrington:

OK. Oh yeah.

 

Mm-hmm.

 

Yeah, copilot has been interesting. It works in some cases. For example, you have a variable, you want to map about it and you just start map and it already puts in like the div with a title and the name and yeah, oh yeah, they'll give me that code.

  

Yeah,  exactly.

 

 Simon Grimm:

That looks good.

 

Yeah, oh, I'd use that every day. Every day I'd use that, yes.

 

Hehehehehehe

 
Simon Grimm:

Yeah, but I tried to use it, for example, with the web framework Astro, which is pretty new. And so it's not really included in the data set of, you just get the wrong answers. Like all the APIs are deprecated. But I want to make a self-experience out of this. React Native application, I don't know, sometime next week on a stream. And I will ask ChetGBT to transform this into a Swift Native application. I haven't done Swift for eight years, so I don't know a lot about it anymore. And I'm curious to see if this works. Like I know programming and I'm curious if I can get ChetGBT to help me write a native Swift application.

 

Yeah.

 

Right,

 

Okay, yeah, interesting to see. Oh, we will pay attention to your comment, which we will link to in the show notes. Are there any questions we should have asked you but didn't as we transition into our picks for

 

I just want to mention one last thing. So we talked a lot about Capacitor. I just want to say that if you also want a great looking native UI, I would certainly recommend you also check out Ionic.

 

Mm.

 

Once again, I'm not part of the Ionic company, but their toolkit to building mobile applications is actually how I got started seven, eight years ago. So for the last seven years, I've been building Ionic Angular applications. And they have a great adaptive UI. And just taking your React code and building a native application usually doesn't look very well. unless you know what you're doing or you just want something custom, but you want cool adaptive controls and stuff. Certainly also check out Ionic, which is a great combination with Capacitor.

 

You should

 

Awesome.

 

give us too, you mentioned be streaming this. What are some great places? Like if people wanna check out that stream, where do they go? You should give us your shameless plugs here.

 

My shameless plug. Yeah, you should also check me out on YouTube at Galaxies.dev. You can also find this as my new platform, which I released about a month ago or two months ago. Yeah, Galaxies.dev,

 

Congrats.

 

Nice.

 

which is an

 

Awesome.

 

That's a sweet

 

online...

 

domain name.

 

It really is. Good Lord.

 

Yeah, it took quite

 

Yeah.

 

some time. Yeah, we made

 

Oh.

 

this into a like a Star... Well, not Star Wars, but Galaxy theme.

 

No, no, don't. We don't say Star Wars. I mean, we

 

No?

 

don't want Disney on our. No, no, no.

 

No?

 

Disney Disney lawyers will be all over our grill.

 

Thanks for watching!

 

They don't do anything like that. It's

 

I

 

us. Some light sword dueling thing.

 

Well, I won't show anything about Star Wars.

 

Ha ha ha!

 

You can check me out at

 

Good

 

galaxies.dev.

 

thing we're on video now.

 

Galaxies.dev and on YouTube, which has handles now, it's also galaxies underscore dev. You're going to find usually weekly live streams on Thursday. And if you want to support me, check out galaxies.dev. And of course, if you're really interested into Ionic, I run the Ionic Academy, which is also an online school to help everyone with Ionic. All the questions. 60 video courses at this point. I've

 

Woo!

 

been running this for, yeah, it's like pretty

 

Wow.

 

much today six years, I think, that I started the academy. So, nice anniversary here.

 

That's awesome

Oh, wow, Simon.

 

Nice.

 

Okay.

 

Congrats.

 

Thanks.

 

Yeah. Well, let me do a hard transition then into pics. So you can wrap this has been super fun. I gotta say.

 

Thanks.

 

Okay. Yeah, let's do pics. How about TJ? You want to start us off with a pic?

 

Sure, my pick is a pick update from last week.

 

Hmm

 

So last week, my pick was this book for those of you watching on YouTube, Stephen King, November, I'll try to hold it straight, November, 1963, it's like a 10 year old Stephen King book. I finished it off finally. My final review to anybody who's, I'm sure everybody listening has just been absolutely on the edge of their seats, but it's good, but he could seriously have used an editor because you can see this thing is like

 

Oh

 

thick

 

yeah.

 

and there's times where you wanted him get moving a little bit, but

 

Hehehehehe

 

I like the way it wrapped up. With Stephen King, you kind of know what you're getting, right? It's like a classic Stephen King book, and I think it's like you either like him or hate him. So I usually like his stuff, so I enjoyed it. So that'll be my pick again for this week.

 

Awesome. Page?

 

My pick this week is going to be an everyday sunscreen because if you know me at all you can see that I'm fair, that I have red hair, and if I pretty much look at the sun I start to get a sunburn. So it's really a necessity for me. So the one that I'm going to pick is called Unseen Sunscreen by Supergoop. It's a little bit more expensive than, you know, what you might typically pick up at the grocery store at Walgreens or something like that. is non-greasy, it doesn't leave you looking shiny, it doesn't give you a white cast that you might get with some of the mineral-based sunscreens. So if you need something for every day that's just really, you know, lightweight, doesn't feel like you're wearing sunscreen, I would definitely say give it a try because it absorbs easily, it doesn't leave you, like I said, looking shiny afterwards and doesn't make you break out. So I'm a big fan of it.

 

Very nice. Okay. Simon, what do you got for us?

 

I got a special pick for you, the LEGO.

 

Oh yeah.

 

There it goes. If you're just listening, this is now the point where you definitely need to go to YouTube and check out this episode.

 

Yes,

 

And you're going to see an epic bell rock made with LEGO bricks. And by the way, this is just the first half of that. So there's a whole package where you can actually build a bell rock and Gandalf.

 

yes, yes, yes.

 

Yeah, absolutely.

 

Right.

 

So everyone, do we get into problems? Because now we got LEGO as well.

 

No, no, no, no, no.

 

Is LEGO fine?

 

Lego likes this. Yeah, Lego likes this sort of stuff. Yeah, yeah, Lego's

 

We like Lego.

 

Yeah?

 TJ VanToll:

Yeah.

 

good.

 

sponsor this.

 

Yeah. There he is, exactly. There you go. I'll take a Lego sponsorship anytime.

 

So for anyone who likes LEGO, and you can also do this pretty nicely with children. So my four-year-old daughter is really helpful in building these little things with me. So highly recommend it for everyone.

 

Aww. Yeah, for your four years old as well past the ingestion phase. So you know, they're not gonna eat the Legos, which is a plus. Yeah. Well, I'm gonna wrap up our picks by actually layering on top of what what Paige talked about being a ginger myself. So it's interesting, we have two gingers on the podcast. Two things to point out one gingers have souls. Just FYI, I just put them out there. Just one man renewed, you know, and then two, if you are fair skinned, glasses because the inside of your eyeballs are the same stuff as your outside so you want to make sure that you're protecting your eyes and you can really get you know so just get good polarized sunglasses definitely worth the extra money you're gonna spend on that correct your eyes there you go all right well this has been really fun and I hope to see y'all on the next react roundup thank you Simon

 

Thanks for having me, it was a pleasure.

 

Yeah, okay. See you next week.

 

See you then.

 

Bye everybody.

 
Simon Grimm:

Bye.