Mobile Development with Angular, Capacitor, and Ionic - AiA 378

Simon Grimm is a Creator, Indie Maker & Solopreneur. He is currently working at The Ionic Academy. He joins the show to talk about Ionic and building native mobile apps with Angular. He explains all about "Capacitor" and how it contributes to your web application.

Hosted by:

Show Notes

Simon Grimm is a Creator, Indie Maker & Solopreneur. He is currently working at The Ionic Academy. He joins the show to talk about Ionic and building native mobile apps with Angular. He explains all about "Capacitor" and how it contributes to your web application.

Sponsors


Promoted Links

  • The Ionic Academy
  • Unvoid - Angular Experts - Exceptional design and web development services with enormous expertise in Angular for companies that truly care about quality. unvoid.com

Social Media

Unvoid
Lucas Paganini
Simon Grimm

Picks


Transcript

 
Lucas_Paganini:
welcome to Adventures in Angular, the podcast where we keep you updated on all things Angular related. This show is produced by two companies, Top end Devs and Unvoid. Top and Devs, where we create top and devs who get top and pay and recognition while working on interesting problems and making meaningful community contributions. And Unvoid, which offers remote design and web development services with specialization in Angular and functional programming for companies that truly care about quality. In today's episode, we'll talk about native mobile app development with Angular. We'll talk more specifically about two technologies, Ionic and Capacitor. These two technologies allow us to bridge the gap between web development and mobile app development. My name is Lucas Paganini. I'm the CEO of Envoid and your host in the podcast. Joining me in today's episode is Armin Vardanian.
 
Armen_Vardanyan:
Hi everyone, happy to be back for another episode.
 
Lucas_Paganini:
Charles Maxwood from Top End Devs
 
Charles Max_Wood:
Hey everybody.
 
Lucas_Paganini:
And our special guest, Simon Green, the source of all the knowledge that we'll bring today about mobile app development.
 
Simon_Grimm:
Hey, hey, happy to be here. Glad you're having me on this panel. I love to be here.
 
Lucas_Paganini:
We're glad to have you. Thank you, Simon. OK, let's get started. So Simon, you are the expert about this. So I'm
 
Simon_Grimm:
Probably.
 
Lucas_Paganini:
not even going to pretend that I know what is the best introduction to this subject. What would you tell to the audience? Like imagine that they have no idea how they would do a mobile app using Angular. And they just got this requirement dropped in their desk like, hey, you need to do this mobile application and we want you to use Angular because I don't know, maybe we have an Angular Cubase and we want you to reuse. Or it's just the technology that all developers are comfortable, but you have no idea how to do that. What would you advise to a developer in such situation?
 
Simon_Grimm:
So there are actually two ways how you could do this, or actually three ways. The first way would be to learn Swift and Kotlin and write a native application, but probably we can discard that one.
 
Charles Max_Wood:
I don't know, that
 
Simon_Grimm:
The
 
Charles Max_Wood:
sounds
 
Simon_Grimm:
second
 
Charles Max_Wood:
like fun
 
Simon_Grimm:
one,
 
Charles Max_Wood:
to me.
 
Lucas_Paganini:
Ha ha.
 
Simon_Grimm:
I mean, it's possible with ChetGPT. By the way, last weekend I tried to just ask ChetGPT to write a Swift application for me, and it somehow worked. So I was able to piece that together, but I don't know how advanced I could go with just ChetGPT and no Swift knowledge. As an Angular developer, what you can do, I mean, of course, you can make your web application responsive. Then you have at least something that's usable on a mobile phone. But usually what people want is a native application. And about a native application, you got two ways. You can build a progressive web application with Angular pretty easily. And a progressive web application can actually be added to your home screen. And you can use it just like a native application. So that is definitely one easy way to go. However, if you really want to go to the native app store, you want to appear in the iOS app store, you want to appear in the Play Store, you're going to have to create a native mobile, like a real native mobile application that goes through the Apple submission and through Google. And to do that, what you can do is, I mean, this now sounds like very bad, but you can pretty much wrap your Angular application in a web view, put that into a native application, and run it on a native device. this might seem and sound like something really terrible that you might have done 10 years ago. And I assume everyone listening to this podcast now has some pictures in their mind. Especially this famous quote from Mark Zuckerberg when he said like betting on hybrid apps or mobile cross-platform apps was the worst thing we ever did at Facebook. So that was basically when everyone said, oh yeah, no cross-platform, that's not what we're going to do. But I mean, that's been so long ago. like 99% of the companies don't even have nearly the requirements that Facebook has. So for everyone else out there who's having an Angular code base, who has Angular developers, who's interested in native mobile app development, what I highly recommend is you pick Capacitor, which helps you to do this process of wrapping your Angular application in a web view. You can throw in Capacitor basically in any web project. This is actually not tied to Angular. You could do this with Vue, you could do this with vanilla JavaScript. And through Capacitor, I mean, you've probably heard about Cordova before. So Cordova was like the first idea to build cross-platform applications. And you can think of Capacitor basically as Cordova 2.0. Like don't tell it to the Cordova people. And like they're not affiliated with Capacitor. It's completely a different technology. But in terms of the general idea, it's the same thing. view, so you end up with an iOS project and you end up with an Android project in your code base. And from there, you can just use the native tooling and pick your iPhone, connect it to your computer, and then deploy the app. And we can talk later a bit more about the cool things of Capacitor. But in a nutshell, that's really the easiest step to go from, I have an Angular web application and I want a native application. Just install Capacitor at the native platform and just check it out on a device. Angular developers would be surprised how good the result actually is.
 
Charles Max_Wood:
I just want to clarify one thing real quick, because I know that not everybody stays current on mobile tools. If you've heard of PhoneGap, PhoneGap was taken over by the Apache Foundation and the name was changed to Cordova. So if you're thinking how does this fit into that, Cordova used to be PhoneGap.
 
Simon_Grimm:
Yeah.
 
Armen_Vardanyan:
I want to, because I worked with Ionic like five years ago, I guess, what I get is that, like the general sense of it is that it's sort of not like native-native, but it allows you to work with native tooling. Did that change in this last five years, that approach, and it is like more close to being like really native, or it's still a bridge between them? because that's what I got from your description.
 
Simon_Grimm:
Yeah, so you brought up Ionic, which is pretty much my main expertise area. I'm sometimes called Captain Ionic. That's also my nickname I had on Twitch before. I'm not trying. So if you don't know, I've been running the Ionic Academy, which is an online school focused on Ionic. So I've been pretty much an Ionic expert since Ionic 1. But I try to rebrand now as the cross-platform king. So I try to go from
 
Charles Max_Wood:
There you go.
 
Simon_Grimm:
just Ionic to also React Native. Anyway, so Ionic is interesting as Ionic offers kind of native components. So if you check out the Ionic website, you're going to see a lot of great screenshots of native controls, of sliders, of buttons, of navigation bars. And yes, you are still correct that these things are not native controls.
 
Armen_Vardanyan:
Thank you.
 
Simon_Grimm:
Like everything you see with Ionic, it's just HTML, it's in CSS. Everything you see inside an Ionic app is pretty much a web application. And while this sounds horrible, it actually feels and looks pretty good. So web browsers and native devices have come a long way. And like the performance of devices has a lot increased. You can't really compare this anymore with the PhoneGap stuff with a, I don't know, I used something called Titanium Studio 10 years ago. You can't really compare
 
Charles Max_Wood:
I remember that.
 
Simon_Grimm:
the current plot. Yeah, I wrote my bitula thesis about that.
 
Charles Max_Wood:
Oh nice.
 
Simon_Grimm:
Yeah, I've been into this very early.
 
Charles Max_Wood:
Yeah.
 
Simon_Grimm:
So everything you do with Ionic, it's just HTML and CSS, basically. It looks and feels like a native application, but under the hood, yes, it's definitely not native. However, you can bring up a lot of arguments like, what is actually a native app? And I always bring up the comparison like, your grandma would say everything
 
Armen_Vardanyan:
everything
 
Simon_Grimm:
they can
 
Armen_Vardanyan:
they can install from the app
 
Simon_Grimm:
is a
 
Armen_Vardanyan:
store
 
Simon_Grimm:
native
 
Armen_Vardanyan:
is a native
 
Simon_Grimm:
app. And
 
Armen_Vardanyan:
app.
 
Simon_Grimm:
if my Ionic app can become part of the app store and people, regular people can install it, that's a native app to them. They don't
 
Armen_Vardanyan:
They
 
Simon_Grimm:
discuss
 
Armen_Vardanyan:
don't discuss
 
Simon_Grimm:
like, is this
 
Armen_Vardanyan:
like this.
 
Simon_Grimm:
React Native or is this Flutter or is this a cross-platform or hybrid stuff? Like you notice if the app is shitty, okay, then we have a problem. But you can so
 
Charles Max_Wood:
Uh
 
Simon_Grimm:
build
 
Charles Max_Wood:
huh.
 
Simon_Grimm:
a bad app with Swift,
 
Armen_Vardanyan:
Thank
 
Simon_Grimm:
you
 
Armen_Vardanyan:
you.
 
Simon_Grimm:
can also build a bad app with Kotlin or with Flutter. Like if you don't understand how stuff works, how you may build a performant app, then you're going to have a problem anyway. But if you know what you do, you can build Ionic apps that are just as fine as other applications. Probably not games, so there are limitations,
 
Armen_Vardanyan:
Thank you.
 
Simon_Grimm:
but for many, many cases, Ionic would be great. You brought up Ionic just for reference that people know what Ionic is. People assume that Ionic is this big cross-platform framework, while actually Ionic itself is Tailwind, like Ionic is just mobile UI components. And there is the Ionic company behind all of that. And they also have Capacitor,
 
Armen_Vardanyan:
So they have to have some
 
Simon_Grimm:
and
 
Armen_Vardanyan:
time,
 
Simon_Grimm:
they have Stencil,
 
Armen_Vardanyan:
they have stencil,
 
Simon_Grimm:
and they have AppFlow,
 
Armen_Vardanyan:
they have airflow,
 
Simon_Grimm:
and they have tons
 
Armen_Vardanyan:
they
 
Simon_Grimm:
of
 
Armen_Vardanyan:
have tons
 
Simon_Grimm:
enterprise
 
Armen_Vardanyan:
of enterprise
 
Simon_Grimm:
services.
 
Armen_Vardanyan:
services.
 
Simon_Grimm:
So the Ionic universe is really big. But Ionic framework itself
 
Armen_Vardanyan:
So,
 
Simon_Grimm:
is pretty
 
Armen_Vardanyan:
it's
 
Simon_Grimm:
much
 
Armen_Vardanyan:
pretty
 
Simon_Grimm:
just
 
Armen_Vardanyan:
much
 
Simon_Grimm:
like
 
Armen_Vardanyan:
just like...
 
Simon_Grimm:
a UI layer on top of your Angular application or your React application.
 
Armen_Vardanyan:
I see. That's
 
Charles Max_Wood:
Yep,
 
Armen_Vardanyan:
really
 
Charles Max_Wood:
makes
 
Armen_Vardanyan:
interesting,
 
Charles Max_Wood:
sense.
 
Armen_Vardanyan:
but yeah, for me kind of like another question arises. So any interesting like recommendations or experiences about improving the performance, like something that is kind of related to Angular and also related to porting it to like, are there specific things that are not like the same stuff that we are doing in the people need to keep in mind when developing these kinds of apps with Ionic and Capacitor using Angular.
 
Simon_Grimm:
So mostly, you will encounter the same performance problems that you will also encounter with an Angular web application. So if you do tons of things in the bootstrapping process, if you put HTTP blocking logic in the constructors of your Angular pages, if you have giant modules and you don't have lazy loading enabled, pretty much all the best practices you have for Angular also apply in that case for building native applications. need to learn when they get into mobile is usually that the simulator or the emulator, you can run for iOS or something. They usually are a lot more performant or work completely different than a phone device. So
 
Charles Max_Wood:
That's so true.
 
Simon_Grimm:
yeah, you
 
Armen_Vardanyan:
Yeah.
 
Simon_Grimm:
can really get into strange places. It's pretty much like in the past when you had the Angular Surf and then the Angular build command suddenly brought up problems you never saw before. So that's like using a real device or a simulator. it's pretty much just a web application. And the only difference is that usually inside these apps, you're going to add something like Capacitor, which wraps your native application in this web view container, but at the same time gives you access to stuff like the camera, the file system, SQLite database. So Capacitor acts as the bridge between your JavaScript code and the underlying platform. So with just one API call, you can just bring up the camera or catch push notifications. So that is the second area why you actually add capacitor to your project.
 
Armen_Vardanyan:
You
 
Lucas_Paganini:
Thank you.
 
Charles Max_Wood:
So.
 
Armen_Vardanyan:
mentioned like lazy loading when you were talking about performance improvements. I want to understand like under the hood how these applications work. Like when we have pages, I imagine we have like the same routing that we have in Angular applications and we don't we just don't have this URL bar at the top of the page, right? So,
 
Simon_Grimm:
Yeah.
 
Armen_Vardanyan:
but I thought that, I mean I was under the impression that when we built this of apps, the JavaScript code that exists inside of it with different modules or components that are routed through our routing configuration, that we don't really need lazy loading. Maybe I'm just misunderstanding how it works under the hood. Aren't those files and those and that JavaScript code already in the system? Like doing your days loading.
 
Simon_Grimm:
Yeah, I mean, the files already exist, but you still need to open them up and load them up. It's probably a bit faster on the web, because on the web, you're right. You would have to make another HTTP request, while inside the native app, you pretty much have them as static files next to each other. Still, you usually follow that pattern, also because it's a cross-platform application. web, so
 
Armen_Vardanyan:
Yes.
 
Simon_Grimm:
you don't really want to have some differences in your code base there.
 
Charles Max_Wood:
What?
 
Lucas_Paganini:
So in the case
 
Charles Max_Wood:
What?
 
Lucas_Paganini:
of lazy loading, it's more about the cost of compiling the code, not necessarily the HTTP request because we don't have that, but it's still the cost of compiling the code that you might not need at this moment.
 
Charles Max_Wood:
It does have,
 
Armen_Vardanyan:
Thank you.
 
Charles Max_Wood:
it's running some kind of web server on your phone or whatever, right? Effectively on the other system, right?
 
Simon_Grimm:
Yeah, I mean, it's not a static, static Angular build that you're
 
Charles Max_Wood:
Right.
 
Simon_Grimm:
running and serving. So it's still an Angular application that's served by a little
 
Charles Max_Wood:
Right.
 
Simon_Grimm:
server.
 
Charles Max_Wood:
Right. So one other thing that I'm wondering about a little bit is that there's kind of a different look and feel between an Android phone and an iPhone, right? So kind of the native look and feel for an iOS app. If I'm just, you know, starting out and using kind of the basic view components or whatever you want to call them for an iOS, right? It's going to look different. It's different from an Android app. Does Ionic account for that or do they just kind of expect you to style it so that it doesn't really adopt some of those, I guess, natural or native ways of doing some of those things?
 
Simon_Grimm:
Yeah, so I only is pretty good in that area. I think, I think actually I only is best and better than Flutter and React Native in regards to this adaptive styling. Cause if you, if you just use like, well, what can we use like an ion header element or an ion
 
Charles Max_Wood:
Mm-hmm.
 
Simon_Grimm:
toolbar, which is usually what you see at the top of an application with the title
 
Charles Max_Wood:
Right.
 
Simon_Grimm:
and the menu button or back button or some, some stuff
 
Charles Max_Wood:
Uh-huh.
 
Simon_Grimm:
like that. So if you just use this ion toolbar element, what will happen is that when the platform and is basically adding to your body tech class iOS. That's pretty much
 
Charles Max_Wood:
Mm-hmm.
 
Simon_Grimm:
what they do. On Android they add class MD for material design.
 
Charles Max_Wood:
Okay.
 
Simon_Grimm:
And what Ionic did is like all of these Ionic components are web components by now and so they just have all the styling bundled into them. So they have a styling for material design and they have a styling for iOS and that's the same for pretty much every component. Yeah, I think basically for every Ionic component that And therefore, if your Ionic app runs on Android, it will look like an Android app. On iOS, it will look like iOS.
 
Armen_Vardanyan:
When you say
 
Charles Max_Wood:
One.
 
Armen_Vardanyan:
that components
 
Charles Max_Wood:
What?
 
Armen_Vardanyan:
are web components now, it doesn't mean I can reuse them in another framework-based codebase. Can I use them in a React app and do the same thing but without Angular?
 
Simon_Grimm:
Yeah, so in the first versions, Ionic was heavily tied to AngularJS and then Angular, I think until Ionic 3 or something. But then they changed their whole internal approach and pretty much rebuilt all their components. Like I said, these items, cards, toolbars, all the components they offer. They created their own tool called Stencil. So maybe people have
 
Charles Max_Wood:
Mm-hmm.
 
Simon_Grimm:
heard about Lit Elements. That's the Google thing for web components, but Stencil is from the It's actually pretty nice. And they rebuilt all their components as web components. And since that time, it's actually really the case that you can now use React and you can use Vue with Ionic and you can just import the specific elements that you need. Or you could also just use JavaScript and have an import at the top for some Ionic components because yeah, they're just web components at this point, which is pretty nice.
 
Armen_Vardanyan:
Yeah, that's pretty cool. There are definitely lots of stuff changing in those like four years.
 
Simon_Grimm:
Yeah.
 
Charles Max_Wood:
Yeah. So one other thing that I was wondering about, because we're talking about mobile apps, but I seem to remember seeing this with React Native and some of the others, is that you're not simply limited to mobile apps, but you can also export to desktop apps using Electron or things like that. So is that a capability in Ionic? Can I build desktop apps or things like that with Ionic.
 
Simon_Grimm:
Honestly, I haven't done anything related to Firestick or Apple TV. I don't know exactly how that works. But the headline,
 
Charles Max_Wood:
I'll ask
 
Simon_Grimm:
the marketing
 
Charles Max_Wood:
uncle Google,
 
Simon_Grimm:
headline,
 
Charles Max_Wood:
but yeah.
 
Simon_Grimm:
yeah, as to GPT, the headline was usually that IONIQ runs everywhere the web is. So I don't know
 
Charles Max_Wood:
Uh-huh.
 
Simon_Grimm:
if there is the web on the
 
Charles Max_Wood:
They
 
Simon_Grimm:
Apple
 
Charles Max_Wood:
have
 
Simon_Grimm:
TV.
 
Charles Max_Wood:
browsers on those, but I don't know if... I would
 
Simon_Grimm:
B-
 
Charles Max_Wood:
imagine that they have the WebView component. So just to give a little bit of background, I've done some iOS development as well with Swift. And the reason that you can get away with doing this kind of thing with Ionic is because one of the components that you can add to your view in iOS is this Web component, you know, where you load a web page. And so effectively what they're doing is they're saying, The entire app is this web component instead of just the tiny piece that I'm customizing because it's easier to do something off of some kind of web server internal to the phone or not. And so, yeah, I just don't know if those capabilities exist on the Fire Stick. I know that they do on iOS or
 
Simon_Grimm:
Hmm.
 
Charles Max_Wood:
on TV OS. So I would imagine
 
Simon_Grimm:
That's interesting.
 
Charles Max_Wood:
you can put it on Apple TV.
 
Simon_Grimm:
I haven't checked that out. But I can definitely confirm, yeah, you can build a desktop application with Capacitor. So with Capacitor, you can add either iOS or Android as a platform. And there's also a community package for Electron. And then you can just go ahead and build your app with Electron just fine. As far as I know, there's also coming up a community package about Tori. So Tori gets a lot of attention as also a cross-platform tool. So maybe in the future we're going to see something like Tori integration for Capesita as well. I don't know if it would get anything, but Rust gets all the fame lately and Twitter is full of everyone's loving Rust.
 
Lucas_Paganini:
Yeah, Simon, we have mentioned so many technologies up until this point, and I'm afraid of maybe someone at the audience feeling like they are lost in the amount
 
Simon_Grimm:
I'm going to go. I'm
 
Lucas_Paganini:
of
 
Simon_Grimm:
going
 
Lucas_Paganini:
things
 
Simon_Grimm:
to
 
Lucas_Paganini:
that
 
Simon_Grimm:
go.
 
Lucas_Paganini:
we mentioned. So I would like to take a quick step back and ask you, I mean, I don't want you to list all of the technologies that exist for cross platform development because we don't even have time to say all of them. all those names that are way too many. But I do want to know the ones that you actively recommend as modern solutions and when you would use each. For example, you did mention Flutter, but I wonder what is the case where you would use Flutter versus using Capacitor versus using Ionic versus using a native solution. would you go into each of these solutions and what are the solutions that exist in your recommended tool belt?
 
Simon_Grimm:
Yeah, great question. I'm happy you didn't ask what's the best cross-platform tool because basically every week I get the question, what's the best thing? And the answer is usually, it depends. So it really depends on your use case. There's a reason why we have all these different tools. And they all serve for a somewhat different purpose. So I would say the easiest way, if you have a React codebase, if you have an Angular codebase, something like this on the web native, you can just install a capacitor and bring it very, very quickly into a native application. And for some this will actually be enough. However, if you have, for example, if you want to develop a game, that's certainly not the route I would go. I think for game development what still stands out is Unity.
 
Charles Max_Wood:
Mm-hmm.
 
Simon_Grimm:
That's definitely an area I'm not really into, so I've never done anything. I think I just did one tutorial with Unity. I think Capacitar and this whole having a cross-platform base for your web and native application is great for a lot of internal enterprise tools. You don't really care about how they look internally. Most of the time, they just need to display tables or data or perform
 
Charles Max_Wood:
Thanks for watching!
 
Simon_Grimm:
crud operations. And nobody in the company does really care about how they look. Look at SAP and how that stuff looks. Nobody cares about how it looks. In many cases, Capacitor would really be the best thing for that because you have just one code base to maintain and really that's it.
 
Charles Max_Wood:
Poor SAP.
 
Simon_Grimm:
If you want something that feels maybe more native, like people say this is a bit more native, then I would go React Native. The thing with React Native is React Native is not like React on the web. I mean, the audience here is mostly Angular developers, but maybe you've checked this out. So on the web, you can use React and pretty much use the same elements like in Angular. You have a diff element. You have an input. I mean, you have to say class name instead of class to apply a CSS class, which I still don't understand. But pretty much, that's it. But if you write React Native applications, it's actually very different. Like the element, you use a view. You use a text area. You use a scroll view and stuff like that. web code and put it into React Native. It just won't work because there's not the React DOM you're used to from the web. So in that case, you're actually kind of rewriting your app again. So you can share your React logic if you have like modules or hooks or stuff like that. You can of course share that in a repository. But in the end, people usually say that React Native is a bit more performant than Capacitor apps and works a bit better because they don't run WebView that Ionic runs into because it's really just a web application. But again, it works in a lot of places. Great with Capacitor. So React Native feels a bit faster, a bit more native. However, if you want probably to have the most unique app experience, I would go Flutter. But there are a lot of other problems related to Flutter. So Flutter is completely different from which is Google's language. So that might already scare off a lot of people. Then if you check out Flutter applications, it's totally not looking like a web application because you have a giant tree of widgets and you style the widgets directly in line. And it's just like I made the comparison before. If you write web applications with HTML and CSS, I sometimes feel like Bob Ross and an artist and doing a bit of padding here in there, but if you do Flutter application, you feel like a robot. You're just hammering down the widgets and the lines, and you've got unbelievable big indentation if you don't know how to do it. It feels a bit more also like SwiftUI. I think in SwiftUI you also do everything like that, Chuck. You've done SwiftUI before?
 
Charles Max_Wood:
a sum, not a ton. But yeah,
 
Simon_Grimm:
Yeah.
 
Charles Max_Wood:
it's completely different from what you do with Angular or any of the web
 
Simon_Grimm:
Yeah.
 
Charles Max_Wood:
frameworks.
 
Simon_Grimm:
Yeah. But I mean, you can create very performant and very great applications with Flutter. You just need to check out the Google, their preview of Flutter applications. Like, Google is very good at marketing. So they're
 
Armen_Vardanyan:
Thank
 
Simon_Grimm:
doing
 
Armen_Vardanyan:
you.
 
Simon_Grimm:
a pretty great job with their documentation. And yeah, you can create great applications. But then there are trade-offs again.
 
Armen_Vardanyan:
Thank you.
 
Simon_Grimm:
For example, in Flutter applications, you don't have this adaptive styling we talked about with Ionic. and Android, Android. But with Flutter, you basically settle on one UI and UI paradigm and then you have either
 
Armen_Vardanyan:
Thank you.
 
Simon_Grimm:
a iOS looking app or a material design looking app. But in some cases, people actually don't want this. They don't
 
Armen_Vardanyan:
They don't
 
Simon_Grimm:
want their
 
Armen_Vardanyan:
want
 
Simon_Grimm:
app.
 
Armen_Vardanyan:
their everything
 
Simon_Grimm:
They
 
Armen_Vardanyan:
to be
 
Simon_Grimm:
say,
 
Armen_Vardanyan:
saved.
 
Simon_Grimm:
okay, my application should look like, I don't know, Chuck's Pizza Store and it should look exactly the same on iOS and Android. So if you and then you just want your brand to look the same on both platforms, you actually don't care about how iOS looks or how Android looks. And in those cases, of course, Flutter totally makes sense because that's not a problem for you. So my recommendation is definitely Capacitor, React Native, and Flutter. I would say Capacitor gives you the most code sharing. Flutter is probably on the other end of the spectrum, giving you the most native app, although it's not really rendering to native, so don't want to get too technical. And React Native is pretty much in the middle, like giving you a good chunk of cross-platform ability and also being pretty native at the same time once you do it.
 
Charles Max_Wood:
Mm-hmm.
 
Simon_Grimm:
So that's how I try to look at it in general.
 
Charles Max_Wood:
Yeah, I'm going to throw a few resources out at people. Um, so we at top end devs back when we were devchat.tv, we started the react native radio podcast. We turned it over to, um, now I can't remember the name of the company, but, um, anyway, great guys. Uh, they're still running it. If you want to go pick that up. Yeah. And you'll hear me on a bunch of the early episodes there, but, um, they do a terrific job and then, um, another podcast for flutter is the flying high with Now, he mostly does video interviews, so you can find it on YouTube as well, but he does have audio version that you can get if that's your cup of tea. And I actually helped him start that. I don't run it or anything, don't have any vested interest in it, but yeah, that's another good resource. And it's interesting that there are all these options out there for people who are looking for this. And it also looks like... website that Simon runs and it looks like you
 
Simon_Grimm:
Yeah.
 
Charles Max_Wood:
have a Flutter Basics course. So that's another
 
Simon_Grimm:
Yes.
 
Charles Max_Wood:
resource for people if they're looking for that kind of a thing. But
 
Simon_Grimm:
and
 
Charles Max_Wood:
yeah,
 
Simon_Grimm:
React
 
Charles Max_Wood:
I mean,
 
Simon_Grimm:
Native and Capacitor.
 
Charles Max_Wood:
yeah.
 
Simon_Grimm:
Everything's on galaxies.
 
Charles Max_Wood:
There's a ton of good stuff. One question that I wanted to ask, and you kind of mentioned this earlier, was that capacitor, you know, in a lot of cases you could just bring capacitor into the mix for your existing app, you know, and this is an Angular show, so I'm not going to worry so much about React or whatever else.
 
Simon_Grimm:
Yeah.
 
Charles Max_Wood:
But if I wanted to bring in capacity, you said that that can often just work. I have a really good friend. He actually does this with Vue, and it's Vue on Cordova. And so it seems like you don't need Ionic. Ionic just gives you some
 
Simon_Grimm:
Yeah.
 
Charles Max_Wood:
of the nice stuff and some of the cross-platform, hey, this looks like an Apple app versus an Android app. Is that the case, or am I misunderstanding is available
 
Simon_Grimm:
No,
 
Charles Max_Wood:
there.
 
Simon_Grimm:
no, that's definitely completely true. Ionic is just like a great UI toolkit with great UI components like lists, cards, toolbars,
 
Charles Max_Wood:
Mm-hmm.
 
Simon_Grimm:
switches, buttons, and stuff like that. But if you don't need that or if you've built that yourself, then cool. Yeah, as I said, you can just add capacitor to your view application. Something I also did successfully in the past, which might be interesting for the listeners, is in a lot of cases, Angular is used with Angular Material. Angular material is also pretty good on the as a native application So that interface works very well because you also got the draw component, which is think the side menu You got some toolbars. I think with Angular material And yeah, that's what I tried and that worked pretty well I mean the only thing that you don't really have in those cases where you just add capacitor to your existing app is like the native feeling. For example, Ionic wraps your whole Angular router with their own Ionic router so they can animate the page transitions, which means if you go from a list to a details page, the very classic case, normally you see the next page appears either on Android, I think from the bottom, or on iOS from the right-hand side, and then you can also use swipe to go back. So these are things that Ionic brings to the table, like these really kind of oh yeah, this is really a native app. This is not a cross-platform or a hybrid app. And I don't know about the app of your friend. You can certainly do this on your own. But usually on the web, you just have links. You don't really care about the page transition so much. So maybe you have some angle animations with a little fade. But I mean, people will notice in most cases that that is not a native application. And that is certainly just a web view or a small web application. So you just need to try this out and see how it works for you. As I said, maybe in some cases you don't really care about the page transitions or having a swipe to go back feature. But if you build business to customer B2C apps, you usually want to give your customers something that looks good. Otherwise, you have really bad chances to stick out in the app store because people are used to a certain level of app quality in 2023. You just can't do a fart app or do something
 
Charles Max_Wood:
Ha ha ha 
 
Simon_Grimm:
random anymore and hope that people will download it.
 
Charles Max_Wood:
Well, the other thing is that because a lot of Apple apps, they work with SwiftUI and they normalize a whole bunch of that stuff, right? Like the way you swipe or the different gestures and things on your phone. And Android does the same thing with other swipes and gestures and stuff. If yours doesn't do it, then yeah, sometimes that causes people to kind of stop and go, what's wrong with this?
 
Simon_Grimm:
Yeah, definitely. But again, if this is an internal application and you just don't have the resources to build something great, but you still want to get something in the hands of your hundred, I don't know, sales people, then well, just go with that. I mean, they won't complain.
 
Charles Max_Wood:
Well, the other thing is that I would feel badly if somebody felt like they had to do all this stuff in order to launch their app. If you're interested in building a mobile app, go build one. It doesn't have to be perfect. It doesn't have to have all these features. And then as you kind of move along, you may figure out, okay, maybe I do want to pull in some of these other features. Or maybe you just want to start with Ionic and see what you get for free.
 
Simon_Grimm:
Yeah, I mean, I mean, that's what attracted me to IONIQ and in general, cross-platform development from day one, that you can just with web technologies build native mobile applications.
 
Charles Max_Wood:
Mm-hmm.
 
Simon_Grimm:
And if you just take one thing from this podcast episode today, I hope that's the message that every web developer can today build a native mobile application. Really, everyone. It's not that hard.
 
Charles Max_Wood:
Yep.
 
Lucas_Paganini:
And Simon, how would you, for example, which differences in terms of features can we expect from a hybrid mobile development solution such as Capacitor instead of a progressive web application? Like, what can we do with Capacitor that we can't do with a progressive web application besides not being featured in the App Store because that is definitely the most visible aspect of it, is you can't really tell people, hey, just go to the App Store and download. But besides that, are there other features that developers should consider when making that decision of going to a progressive web application route versus a mobile app?
 
Simon_Grimm:
I mean, in general, the distribution of a progressive web app is still a bit clunky, I'd say, especially on iOS. I mean, on Android, you can install it pretty easily, as far as I know. On iOS, you have to go through this dance of share, add to home screen, give it a name, and then add it. So basically, nobody of my friends who is not in tech knows about PWAs on iOS. I think it's just a thing that doesn't exist. But again, if you're in a company, and somebody tells you, hey, go to this link three steps, then it's no problem to install it. The difference is the lines are actually, yeah, they're getting closer. So in the past, one heavy limitation was that for progressive web apps, you couldn't do push notifications on iOS. And in some business cases, push notifications are 100% a fixed requirement and a total showstopper if you can't implement it. However, just lately, I think just a few weeks ago, Now also has web push support, which means you should be able to get push notifications working in the Progressive Web App in the near future. Besides that, there are just a few things. So I assume in the Progressive Web App you can't use local notifications as well. You also don't have access to the underlying SQLite database. So normally, native iOS and Android applications. SQLite database where you
 
Charles Max_Wood:
Mm-hmm.
 
Simon_Grimm:
can write easy SQL code into, which is pretty helpful. But if you have a Progressive Web App, as far as I know, just use index.db or fallback to local storage, however you implement it. So there's another little limitation. Besides that, I mean, Progressive Web Apps are great, but we've been talking about Progressive I mean, at least in my circles, they're not the cool thing. Some companies use it very successfully, because then you can skip the App Store. But in other cases, again, if you would do anything like for customers or consumer-facing applications, and people on iOS don't know about it. As you said, you can't bring your PWA into the App Store. But I don't know where this is going in the next time. Apple is opening up a tiny bit. Didn't they also talk about like a different kind of app store or something else to install apps on iOS? I think they were definitely open to like new things, but might take a few more years until that's reality.
 
Lucas_Paganini:
Where they really open or is any
 
Simon_Grimm:
Great.
 
Lucas_Paganini:
government forcing them to be open? Because
 
Simon_Grimm:
I'm done.
 
Lucas_Paganini:
I can't
 
Simon_Grimm:
Hahaha.
 
Lucas_Paganini:
imagine Apple being so open about the app store. They have like a huge
 
Simon_Grimm:
Yeah.
 
Lucas_Paganini:
amount of money going from the cuts that they take from the app developers. So, yeah.
 
Simon_Grimm:
I
 
Armen_Vardanyan:
Uh...
 
Simon_Grimm:
can't recall the exact headline right now, but there was something going on that they wanted to allow, like, have a less strict app review check and just like a loose check for applications so you could easily build applications for iOS, but you might be right that this just might be a EU thing or I don't know which country may have brought up that.
 
Armen_Vardanyan:
All right.
 
Simon_Grimm:
I don't know. Is the US banning TikTok? I don't know. So many politics
 
Armen_Vardanyan:
Hmm.
 
Simon_Grimm:
going on lately. Chuck, can you still use TikTok?
 
Charles Max_Wood:
Yeah, I was on it yesterday. I just realized I'm
 
Armen_Vardanyan:
Bye.
 
Charles Max_Wood:
the only one here from the US. Yeah. There are so many things going on around that. I don't even know if it's worth going into. And I hate getting into politics because everybody has feels about it. But yeah. Anyway.
 
Armen_Vardanyan:
Hi,
 
Lucas_Paganini:
Yeah.
 
Armen_Vardanyan:
Simon. I have a sort of reverse question of what Lucas asked you. So what about the browser APIs that we have in, like we could use in JavaScript applications or Angular applications? For example, I can access the user's camera on their laptop if they give me permission on the web. If I port that code to like a capacitor and try to build it into a mobile app, What will happen when I try to access that camera? Will it try to access the native front-facing camera? Will it be handled under the hood? Or I would need something to make it work?
 
Simon_Grimm:
So if you just continue to use your JavaScript code that you've been running on the web, some things will work and some things won't work. That's because some stuff is just not working in Safari, usually. I think
 
Armen_Vardanyan:
No.
 
Simon_Grimm:
on Android, most of the stuff that you run on the web will work. But on Safari, you usually have some privacy issues. Again, this
 
Charles Max_Wood:
Uh,
 
Simon_Grimm:
is getting
 
Charles Max_Wood:
Safari.
 
Simon_Grimm:
better.
 
Charles Max_Wood:
Sorry.
 
Armen_Vardanyan:
The Internet Explorer of our days.
 
Simon_Grimm:
Yeah, exactly. it's getting better but for example what you said with the with a camera that was a problem in the past so I had a tutorial about this and like using the camera stream but on native devices it was just not working because of some some permissions that were not granted with Safari however if you use capacitor capacitor has a bunch of plugins so for example if you want to use the camera you can just install the capacitor camera plug-in and what these plugins do is they will use the SDK, like the native version of the camera, so the iOS SDK and the Android SDKs. But at the same time, if you continue to use this on the web, they also have a third implementation for the web. And within the capacitor plugin, you can usually check out the source code, and they say if this will work on the web or not. And then the plugin has an implementation that is usually just using the browser APIs, because yeah, you're right. The browser APIs are great. do everything today from geolocation. I think you can even use the Heptix sensor already. I don't know.
 
Armen_Vardanyan:
I was
 
Simon_Grimm:
What's
 
Armen_Vardanyan:
on
 
Simon_Grimm:
the
 
Armen_Vardanyan:
the...
 
Simon_Grimm:
site again? Can I use something? Can
 
Charles Max_Wood:
Yeah,
 
Simon_Grimm:
I
 
Charles Max_Wood:
caniuse.com,
 
Simon_Grimm:
use?
 
Armen_Vardanyan:
I was on the...
 
Charles Max_Wood:
I think.
 
Armen_Vardanyan:
yeah Yeah, that's the one.
 
Simon_Grimm:
Thanks.
 
Charles Max_Wood:
Yep.
 
Armen_Vardanyan:
Now, I think I don't know about haptic feedback, but you definitely can use like mobile events. There is stuff for Angular material, has Hemer GAs or something. Yeah, so definitely that is in the web now. But what
 
Simon_Grimm:
Yeah,
 
Armen_Vardanyan:
about
 
Simon_Grimm:
for these
 
Armen_Vardanyan:
some,
 
Simon_Grimm:
gestures, right.
 
Armen_Vardanyan:
yeah, what are like more commonly used web APIs that might not be like, can I use like local storage in the capacitor? Will it work the same
 
Simon_Grimm:
Yeah.
 
Armen_Vardanyan:
way?
 
Simon_Grimm:
Yeah, yeah, definitely can use that. Again, you can try, first of all, pretty much every of these, and you would then encounter a problem if it's not working on native. But usually, like 90% of the time, I think what you can use on the web, or I think actually 100% of the time, the web APIs should work just fine unless Safari has a problem with them. So definitely check out whatcanius.com. Or if you're building a progressive web app, I think there's also a specific other page can I, what progressive web app can do today. You might want to put something like that in the show notes.
 
Armen_Vardanyan:
Thank you.
 
Simon_Grimm:
There's a second page where you can download a progressive web app and check out all the native features. So that's very impressive as well. But again, if you otherwise need these native functionalities, you can usually use capacitor plugins. There are like 10, 15 core plugins, or a keyboard and stuff like that. And then they have community plugins, where the community has created plugins. And people looking at that might say, oh, there are not too many plugins. And yeah, that's definitely the case. There won't be a plugin for every possible native use case you have. But that's because Capacitor is still quite early. I don't know. It's like three, four-ish years old. So
 
Charles Max_Wood:
Mm-hmm.
 
Simon_Grimm:
it doesn't have a huge community yet. time you can still use old Cordova plugins. So for everyone who's been coming from PhoneGap Cordova you can be really happy and relaxed about this as you can still use 99% of Cordova plugins with Capacitor. So that's a big win.
 
Lucas_Paganini:
Simon, I would like to understand a bit more about how this plugging ecosystem looks like in the actual code. So my question specifically is, I have played with React a lot, but it's definitely not my biggest area of expertise. I am much, much more comfortable in Angular development, but I did notice something really interesting with React, which was the way that Next.js creates bridges between the browser APIs on server side. You might be wondering why, what does that have to do with anything, but I'm going to get there pretty quickly.
 
Simon_Grimm:
Yeah.
 
Lucas_Paganini:
But the idea is with Angular, you always need to use the Angular interfaces so that you have a bridge between the different environments. So if you want to, for example, make sure that your application renders. correctly in the browser and in the server side, you need to make sure that you're using the Angular APIs and not the native browser API. So you can't just do document create element. You need to use the Angular renderer to create the element dynamically, because that way it will also work in other environments. In React, it's different. The bridge is more transparent. So different ways, different frameworks for React, but in next you don't need to do anything different, you just simply do your document create element, you just use the normal browser APIs and next JS will create a bridge between the browser APIs and the server-side rendering such that it works transparently. Now what I would like to know is how do those plugins work in in capacitor. So for example, if I want to create an abstraction to get the webcam stream, would that be more of an angular experience in the sense of I would create a service that detects the environment. So if I am running in the browser, I use the browser
 
Simon_Grimm:
Thank you.
 
Lucas_Paganini:
APIs. If I'm if I'm running on iOS, I call the iOS plugin, or is it more transparent like Next.js with React in the sense of I just use the browser API for the webcam, and then Capacitor automatically creates a bridge between that and the iOS and Android plugins. How would that be done?
 
Simon_Grimm:
So if you create your own capacitor plug-in, what you basically do is you create three folders, one for iOS, one for Android, and one for web. And in the iOS folder, you're going to have a Swift project, a little Swift project with a few helpers from capacitor. You're going to have a Kotlin project in the Android folder. And then the web folder, you pretty much just have a TypeScript file. And in that TypeScript file, you can do the whole implementation for the web however you prefer it. the browser APIs, you can just build it however you want. When you then build out that plugin and maybe even create like an npm repository or package, you just install this in your Ionic app when you have Capacitor enabled or a new Angular application and from there it is just one line of code like capacitor.getCamera or capacitor.takePicture and another hood capacitor will then check like the and either use your iOS implementation or there's the source for the web. So if you author the plugin, if you write it, you need to have some experience. If you really want to develop your own native plugins, you actually need to understand Swift and how to build Android stuff. I mean, it's not too hard, especially just put it into JetGPT, honestly. I've seen examples of this on Twitter where people have done this. They said, hey, please write me a capacitor plugin that will access the Stripe SDK or something. And the output was a totally fine Swift implementation of that plugin. We are at that point in 2023 or beyond where we can just do this. And once you got that, I mean, in your code, it's just one line of calling the plugin, capacitor will under the hood handle all the rest of like using the right implementation of the plugin. That's the cool thing. It's just the same API, whether your app runs on the web native you don't have like if platform is iOS use this call if platform is Android use that you just say capacitor dot capture image and capacitor will handle all the rest
 
Lucas_Paganini:
So just to make sure that I get this right, if I have to create my plugin from scratch, then sure I will have to create the web implementation, the iOS implementation, and the Android implementation.
 
Simon_Grimm:
By the way,
 
Lucas_Paganini:
But.
 
Simon_Grimm:
quick addition, you don't have to. You can also
 
Lucas_Paganini:
Yep.
 
Simon_Grimm:
create a plugin which only has iOS or only has Android in case you just want to capture
 
Lucas_Paganini:
Mm.
 
Simon_Grimm:
something. That's just for reference. You don't have to add the code for all three. I mean, people will be happier if you share it on GitHub and you have implemented it for all platforms, but you do you if you just want to capture one platform.
 
Lucas_Paganini:
Gotcha, gotcha.
 
Charles Max_Wood:
Mm-hmm.
 
Lucas_Paganini:
But in the case of, I'm using a plugin that was already created, I'm not creating my own plugin. So let's say that I want a plugin that allows me to interact with the webcam. But I don't want to do this if iOS, if Android, and I don't even want to do the if web, I just want to have a single API. So I could simply do capacitor dot the plugin API methods and capacitor would automatically use the web implementation if it is on web and the iOS and the Android accordingly.
 
Simon_Grimm:
Yes, yes, correctly.
 
Lucas_Paganini:
Nice. Nice.
 
Simon_Grimm:
Yeah. I mean, under the hood, like the plugin creators, if you're a capacitor plugin creator, you, I think, write one interface file, which defines the functions. And then you implement them in your native code with some bridging functionality if you want to. And then, again, you install it like an NPM package at this point. In the beginning, capacitor had a lot of plugins bundled. But now, they're all just their separate package. at Capacitor slash keyboard, and then you just npm install them, import them. And yeah, just say like keyboard dot, I don't know, height or something, whatever you can do with the keyboard. I don't know. Yeah. You can control the keyboard like when it shows or when it hides.
 
Lucas_Paganini:
Awesome.
 
Charles Max_Wood:
Cool.
 
Lucas_Paganini:
Simon, there is just so much, so much
 
Simon_Grimm:
Yeah.
 
Lucas_Paganini:
to talk about, but we're getting close to the end of the show. So let's start wrapping up. But the good news is that if the audience does want to dive deeper into that, then I understand that you have a lot of content about this, and even paid content that is extremely premium. Maybe do you want to talk a bit more about this and give your shameless plug and promote your content?
 
Simon_Grimm:
Yeah, love to. So I've been using Ionic basically since version one, and I'm an Ionic developer expert. And since, yeah, it's been today, or the start of April. It's been six years since I started the Ionic Academy. So for everyone who knows things, I want to check out Ionic. You can go to ionicacademy.com, which is my online school, to help everyone learn Ionic. I got, I think, 50 or 60 plus courses, quick wins, templates. We have a Discord channel. And there's new content coming out every month, because there's just so much. We've been just basically scratching the top layer of Ionic and Capacitor. There's so much more to all of this developing native applications, the release process, and everything that comes and follows with building native applications, or making sure that it's cross-platform and runs everywhere. So if you want to learn more about that, check out Ionic Academy. And if you're also interested in the other stuff we talked before, like React Native and Flutter or modern web stuff, please also take a look at my latest project, which is Galaxies.dev, the place for the modern web developer with cutting-edge topics. We're going to have a SvelteKit course, we're going to have Astro course, Ionic, Flutter, Next.js, all the latest and greatest things will be on Galaxies, so Ionic Academy will stay focused on Ionic, and Galaxies will always be about everything beyond that. And of course, check out YouTube. Sometimes even Sunday live streams on Thursday on YouTube. You can also find me with a handle at galaxies underscore deaf. So Thanks for having me
 
Lucas_Paganini:
This man is
 
Charles Max_Wood:
Nice.
 
Lucas_Paganini:
a content machine.
 
Simon_Grimm:
Ha ha
 
Charles Max_Wood:
Right?
 
Simon_Grimm:
ha.
 
Lucas_Paganini:
Yeah. And by the way, galaxies.dev looks sharp. Looks so good.
 
Simon_Grimm:
Thanks, thanks.
 
Lucas_Paganini:
Yeah. Ha
 
Simon_Grimm:
I'll tell my designer.
 
Lucas_Paganini:
ha. Awesome. Chuck, what do you have for us?
 
Charles Max_Wood:
Oh man, so many things. So,
 
Lucas_Paganini:
Susus.
 
Charles Max_Wood:
are we doing the promo or the picks or both?
 
Lucas_Paganini:
promos.
 
Charles Max_Wood:
All right, so a couple of things. One is I'm going to be at JS Nation and React Summit. That is at, I think it's like the 31st of May through like the 5th or 6th of June. It's going to be in Amsterdam. So if you're going to be there, let me know. I'm working with the conference organizers to snag a room and see if we can, you know, get a bunch of people together and have some food and chat. I'd love to meet whoever. Dan Shapir from JavaScript Jabber apparently is going to be there as well, so we'll actually meet in person for the first time at the conference. It should be awesome. I'm really looking forward to that. I'm probably going to be dropping some bonus content on the JavaScript Jabber feed as I talk to people from those. That's the one big thing I've got coming up. The other one is that, and I've mentioned this a few times, but starting I'm going to be putting out or be doing the game dev meet up. So Simon mentioned if you want to build a video game, you might want to use Unity. I'm going through Jason Wyman. That's game.courses. I'm going through his course. If you go to topendevs.com slash game dev, you can sign up for the course. Use the promo code JavaScript5 because he gave me a code for JavaScript Jabber, but whatever. Use it. That'll give you 20% off. Then you know, I'm just gonna be getting on and talking about hey, we did this going through the course blah blah blah and Eventually, I'd like to build my own games and then finally for top end devs calm I Don't know if you can see the video but Before I had the green screen partially behind me kind of like it is now and then I had like a Star Wars Poster that you could see over on this side I've hasn't moved, but everything else has. I'm just getting the final things in place and I'm going to start recording videos as well. The approach is a little different from galaxies.dev. My deal is is that I want you learning something new every day. I want you leveling up every day. So we're going to have series probably starting out. I'm going to do a couple of cutting edge topics like machine learning or things like that. Then we'll probably have some more mundane, regular ones, Ruby's kind of an easy one for me to hit. We'll be doing the game dev one. So yeah, however you wanna grow that. That's the other thing we're working on. And then the last thing is, is that I just got a confirmation from Bruce Tate, who wrote seven languages in seven weeks. Here, I'll even hold it up because I got it yesterday in the mail. That's gonna be our book club book starting in May. And we're gonna be writing, learning seven languages in seven weeks. And it's gonna be awesome. He's gonna come to some of those, So if you want to pick up, I think those Ruby and Erlang and some of the other ones are a little less well-known I think I oh and prologue are in there. But yeah, if you're
 
Simon_Grimm:
you
 
Charles Max_Wood:
looking for ways to challenge the way that you write code and think about code Yeah, we're gonna be doing that for seven weeks currently we're reading the Compound effect by Darren Hardy and that just talks more about building momentum in your life And so anyway lots of stuff going on, but those are the biggies
 
Lucas_Paganini:
Nice. Awesome. Armin, how about you?
 
Armen_Vardanyan:
Man, I don't do nearly like the quarter of what your guys are doing right now, but I will just say, hopefully, I will soon have something exciting to promote. I'll just wait for like two or three weeks maybe.
 
Charles Max_Wood:
Awesome.
 
Simon_Grimm:
Hmm.
 
Lucas_Paganini:
And you can tell me later, right? I don't have to wait that much.
 
Armen_Vardanyan:
Well, I'm not sure it will be, but yeah, even when it arrives...
 
Lucas_Paganini:
Okay. Okay. Um, I love that you mentioned that you, you don't do as much as them because I love that at least I have someone that I can relate to because it's, I, I
 
Simon_Grimm:
Hahaha
 
Lucas_Paganini:
keep having those existential crisis here. Like what am
 
Simon_Grimm:
..
 
Lucas_Paganini:
I doing with my life? I don't seem to be producing even half of these guys. So yeah, man. Thanks.
 
Armen_Vardanyan:
No wait, I don't have an essential crisis, I'm pretty fine with just drinking beer in the evening.
 
Lucas_Paganini:
Oh
 
Charles Max_Wood:
Hahaha!
 
Lucas_Paganini:
man. Okay. I think I need more beer then. Anyways, my promo is just going to be my company. So as mentioned in the beginning of the episode, I am the CEO of Unvoid. And Unvoid is a company which provides remote development and design services specialized in Angular and functional programming. So we work into models. We work in project outsourcing and staff augmentation. In other words, that means that you can either give the entire project, just throw it at us and we will manage the entire thing and just deliver the results to you and keep you updated on how things are going. So you don't have to worry about anything in the process. But if that's not your thing, if you want more control over the process and actually manage the individuals yourself, We also offer that so we can also, in a flexible way, extend your team, extend your staff with our developers, which are specialized in Angular and functional programming. And that way you can solve the challenges that you have. You can later on decrease that investment. Anyways, it's a much more flexible, cost-effective and fast solution than trying to hire developers and manage everything, including the hiring process yourself. So if you're interested in something like that, go check out on void.com where you can reach out and contact us and then we'll see if what we have to offer makes sense for your needs. And even if it doesn't make sense, reach out. Like worst case scenario, we learn more about each other's, about what we do and then you leave the conversation. how you can deal with your current situation, even if you don't hire us. So yeah, that's unvoid.com. If you're interested in Angular experts. Awesome. Now we get to pics. So Simon, do you have anything that you want to bring to the audience? It can be something that isn't even related to web development, whatever you think it's cool. Maybe you want to bring something and say, like, hey, I really like this thing and I'd like to share.
 
Simon_Grimm:
Okay, I was just looking around. I recently already used one item, one Lego item, so I'm gonna use that again. I'm gonna promote something else, which I've been using for probably 10 years. I don't know, it's called the Five Minute Journal. So every morning you put in like three things you're grateful for and three things that would make the day great. And then you have like a little mantra you're gonna say every day. And every evening you check in and write down three things that have been great about today. I would write in. I've been guest on the Adventures in Engelar podcast. And then it just helps you to like live a bit more happy life, be more grateful for what you get going on. So the five minute journal, I think pretty much everyone has this on Amazon or like a copycat of that, or just bring up your notebook and put in like five things you're grateful for. It can really help.
 
Lucas_Paganini:
Awesome. Awesome. I love the gratitude wave that that helps a lot, especially to control anxiety, because a lot of times
 
Simon_Grimm:
Yes.
 
Lucas_Paganini:
I get stressed about the problems that I have. And the solution to me is exactly, uh, gratitude. So it's like, instead of stressing about the problems that you have, realize what you have already achieved and how lucky you are, not how unlucky you are. Like you are lucky to have those problems and have the tools to deal with them. So awesome.
 
Simon_Grimm:
Right. Right.
 
Lucas_Paganini:
Cool. How about you, Jack?
 
Charles Max_Wood:
All right, I've got a couple of picks. One is I'm gonna pick an old standby that I love to death. So there are a bunch of us that get together periodically and play board games, and one of the board games that we go to on a regular basis is Shadowhunters. Came out in 2005. And effectively, if you played, sorry, I think I'm getting a cold. Anyway, if you've played like Werewolf, it doesn't suck. And what it is, is you have shadows and you've got hunters and you have neutral characters. And so the shadows are trying to kill the hunters, hunters trying to kill the shadows, and then the neutral characters are just trying to survive. And so the win conditions for the shadows and hunters are eliminating each other and the neutrals all have their own. So one of them is like you have to be the first to die, right? And so if they kill you off the game's over and nobody else won, right? If you're not the first to die, then I think there's another win condition where you have to, I can't remember, but you know, and then another one, it might be if you collect a certain number of equipment items, which are just cards, right? Then you win. And so you spend a lot of time trying to figure out who everybody is in the game, right? One of the characters just has to be alive at the end of the game, right? And so a lot of times they just kind of sit back don't really attack other players. But what you do, you roll the dice, you go to whatever area you roll, you have to move, so if you roll where you're at, you have to roll again. But then you usually will get a card, or you can steal an equipment from somebody, or whatever that area lets you do, and then you can attack people who are in the area you're in, and then it's the next person's turn. And you have a four-sided die and a six-sided die, and when you roll them to attack, numbers, right? So if you roll a six and a one, you hit them for five damage, which is a lot. If you roll two of the same number, then you don't hit them at all. Anyway, it's really fun. Play with a bunch of my friends. We're pretty aggressive. Like I've played this with other people and they'll sit there and try and figure out who everybody is before you really see people get attacked. What we tend to do is we tend to kill everybody, you know, attack everybody up to a I don't know if I want to kill them because they really could be on my team, right? And so, but then as people figure out, oh, that person's not on my team, then they go out and they'll actually, you know, try and wipe them out. But you also have different abilities that different characters have. So some of them are just once per game. You can blah, blah, blah, right? You can do damage to a certain person a certain way. Others of them, you can, they have an ongoing effect. So like the werewolf, if you attack the werewolf, the werewolf can attack you back, which is not something anybody else can do. and you successfully attack somebody, you heal yourself. Right? And so anyway, just as examples. But anyway, it's a fun game. Board Game Geek ranks it at a 1.8 weight, 1.82. So it's pretty easy for the casual gamer to play. Unfortunately, it is out of print. So if you want to go buy it for yourself, it's going to cost you a pretty penny because you have to buy it from somebody who bought it, you know, back in the day. which is very similar. The main difference is that instead of attacking people in the area you're in, you can only attack people who are the next area clockwise from you. You can attack them. Other than that, the characters are basically the same, the gameplay is basically the same, and anyway. So it's, yeah, it's more or less the same game, and that one was done on a Kickstarter and and you can't find it, that's a good way to go. That's not gonna cost you $200 for the game because it's out of print. Beyond that, I already mentioned the video or the video game course. It's awesome. So definitely go pick it up if you're interested in that. And besides that, I ordered this and I'm still curious to see how it goes because it's supposed to show up today. magic. ATEM mini HDMI live switcher. And what it does is it, so you'll see the green screen behind me. What it does is it'll actually allow you to like, when I'm live. So right now the way that the green screen works is I record with the green screen behind me and then I have to edit in whatever the background is, right? Unless I'm using like Zoom or something, which kind of does a crappy job at it. But the ATEM, Blackmagic ATEM, switch it and it does a really good job of filtering the background and stuff. And so when I'm recording the videos and stuff for my courses, I want to give a little bit of flavor and so I might show something from one of my favorite sci-fi shows or movies or you know Marvel or something right and so just you know kind of give people a little bit of flavor. A lot of the courses I mean it's gonna be recording in my screen but I like having a little corner of it. It's my face and so you can see me talk and stuff like that or if I'm doing YouTube or Instagram or something like that, same deal. So I'm really excited to get it. I was hoping it would be here today, but it doesn't look like that's gonna happen. It's been shipped, but it's not here. So anyway, those are my picks.
 
Lucas_Paganini:
Awesome. I'm interested in that black magic too. I'll check it out. I think that's the one that Jack Harrington mentioned in the
 
Charles Max_Wood:
Yeah, he's
 
Lucas_Paganini:
React
 
Charles Max_Wood:
the one
 
Lucas_Paganini:
Roundup.
 
Charles Max_Wood:
that's what he has. Yep. He
 
Lucas_Paganini:
Nice.
 
Charles Max_Wood:
recommended it. And then I went and spent money on one.
 
Lucas_Paganini:
Nice. I might do the same. So he should get a referral link. Cool.
 
Charles Max_Wood:
Yeah, I'll post one to the chat and we'll put it in the show notes. I do use the Amazon affiliate links and just to be clear, it doesn't cost you anymore, but I do get a percentage if you buy it through my link.
 
Lucas_Paganini:
Armin, how about you?
 
Armen_Vardanyan:
I'm not that into poor games. I don't like games in general. I play some video games sometimes. I'm gonna pick a TV show. Not a very obscure one. I mean, people who know me know that I'm a big fan of Breaking Bad. I'm not gonna pick Breaking Bad because I'm on my third rewatch of Better Call Saul. And man, this show never sees this too amaze me. I very rarely do rewatches, almost all the movies that I say oh you know I love this movie I really love it I've actually just seen those movies once and in the case of TV shows it's even worse like I have lots of TV shows they're just abandoned and not because I didn't like them but just that you know I will watch them someday but Barak all soul for me is kind of like even better than Breaking Bad I hope that some Breaking Bad fans that are listening to us can forgive me for Although it's not that of an unpopular opinion, like if you go on to the barricade, soul subreddit, lots of people are like, yeah, you know, this is definitely hitting differently than, you know, Breaking Bad did back in the day. And it's just everything great that was in the Breaking Bad show, like maximized to the top. I'm really amazed how the show doesn't get like formal stuff that they didn't get anything significant like last year and I think the last thing that is up online is the Emmys soon and then they don't get anything there they that would be really unfair in my opinion like they get lots of episodes like on IMDB they have like 9.9 ratings 9.8 ratings and so on So yeah, I will definitely pick Barakos all this time. I'm on a rewatch spree at this moment.
 
Lucas_Paganini:
Nice. I had that on my watch list, but honestly, never got to it. There are just so many things in the watch list.
 
Armen_Vardanyan:
Well, if you watch Breaking Bad,
 
Lucas_Paganini:
I've watched Breaking Bad, but
 
Armen_Vardanyan:
then you gotta
 
Lucas_Paganini:
I never
 
Armen_Vardanyan:
watch
 
Lucas_Paganini:
got.
 
Armen_Vardanyan:
Barrick or Thol. You just have to
 
Lucas_Paganini:
Okay, so I think now the challenges I need to convince my girlfriend to watch Breaking Bad first and then we can get to Better Call Saul. I'll do that.
 
Armen_Vardanyan:
guess why I am rewatching barricade soul because I convinced my girlfriend to watch breaking bed with me and now
 
Charles Max_Wood:
Thanks for watching!
 
Lucas_Paganini:
Ha
 
Armen_Vardanyan:
she wanted
 
Lucas_Paganini:
ha ha!
 
Armen_Vardanyan:
to watch barricade soul with me
 
Lucas_Paganini:
Make sense, make sense.
 
Armen_Vardanyan:
Yeah.
 
Lucas_Paganini:
Since we're talking about TV shows, my pick is gonna be a TV show. And I just started, so I can't say if it's gonna remain interesting. I just watched the first episode, but it's a TV show about Uber and how it all started. Oh, well, at least in the Hollywood version started. I'm pretty sure that a lot of things were extrapolated. But in any case, it's pretty interesting. It really keeps you engaged in the story. It's called Super Pumped. And you can watch it on Amazon Prime, although it's not available for the regular Amazon Prime subscription. I think you get, you need to get the Paramount plus extension. And then you have to pay a little bit It's not so fun to me because I really didn't want to pay for another streaming service. But anyways, I really wanted to watch this. So I started and the first episode is really engaging. I won't say that it's super... I mean, it's definitely not very close to reality, but it's really engaging. You really want to keep watching and understand. how they built this empire. And it's really interesting about Uber because it's not just a startup that rise to the top. They also have all this controversy surrounding cabs. And there are a lot of places where it used to be illegal. There are places where it's probably still illegal to have the service that they provide. So the drama is not about building the application. The drama is about the politics of getting that
 
Charles Max_Wood:
Mm-hmm.
 
Lucas_Paganini:
approved and making sure that they can use it without being screwed by all the governments in the entire world. So it's a really interesting story. I am digging that. Again, if it turns out to get boring after a few episodes, don't say that it was my fault. Because I'm telling you. watch the entire thing yet so I don't know if it stays good but I'm liking it so far I would recommend it from what I've seen. So yeah, I think that's it. Simon, again, thank you so much for coming to the show. You brought up so many contributions and I think you can come back 100 times and we will still have things
 
Charles Max_Wood:
Right?
 
Lucas_Paganini:
to talk about.
 
Simon_Grimm:
Thanks, I can do, no problem.
 
Lucas_Paganini:
Thanks, that was awesome. Alright, thanks everyone and I will see you next week.
 
Charles Max_Wood:
Max out everybody.
 
Armen_Vardanyan:
Bye.
Album Art
Mobile Development with Angular, Capacitor, and Ionic - AiA 378
0:00
1:14:36
Playback Speed: