Prerequisites & Course Repo

[00:00:00]
>> Maximiliano Firtman: So pre-requisites, just a web app development experience will work. So if you have already created an app in any platform, it doesn't matter any library, if you're a backend developer it's gonna be fine. If you just understand the basics of HML, CSS, and JavaScript, you're good to go.

[00:00:17]
Some basic JavaScript, we will write some JavaScript, but it's not going to be a big deal. You will have also some snippets to copy and paste in case you don't wanna write it. It's a good idea to have a Chromium desktop web browser that I'm pretty sure that if you're a developer, you already have.

[00:00:32]
It can be Google Chrome, Microsoft Edge, Opera, or another one. Not because we will focus on Chrome, because it has the best debugging tools for PWAs ever compared with Firefox or Safari. It's much better. So of course, if you have Safari on the Mac or if you have Firefox on any platform, it's fine and we will see how that works there.

[00:00:57]
But for debugging purposes, probably we will focus on Chromium. A code editor, I will use VS Code but of course, you're free to use whatever you want. Some optionals that I will explain later. If you're on a Mac, you may wanna install Xcode. I mean, it's not mandatory but we will use that for simulating in iOS and iPadOS.

[00:01:22]
So I will show you how you can use the iOS simulator, the iPadOS simulator. Also, you have the visionOS simulator if you want, that's for the Apple Vision Pro. And you can see and test your PWA there, okay? So I will show you how to do that. And also optional, Android Studio.

[00:01:40]
For the same thing, this is not macOS, it can be macOS, Windows, or Linux. Also, even Chromebooks depends on the Chromebook you have. You can install Android Studio, and I will show you later how to enable and set up Android emulators. So then you can also test even if you don't have a device, you can test on those operating systems and see how your web app is installed.

[00:02:06]
How your web app works offline and how your web app integrates with your operating system, okay? But that's optional, if you don't have it or if you don't wanna install it right now, it's fine. So this is the repo that we will use today, github.com, Firtman that's my last name, frontendmasters-pwa.

[00:02:26]
>> Maximiliano Firtman: There, have in mind there are several branches. The main branch that you have actually has the final code, so here I am in the repo. So if you're in the main branch, this is actually a final code, that's something that we will get at the end. So if we wanna start from scratch and follow along the course, go to the starting-code branch, and you can fork this one or just download the Zip file and start with that.

[00:03:00]
Remember, this is Vanilla JavaScript so there will be no dependencies. You don't need to run npm install, you don't need anything. It's just HTML, JavaScript. And you have also, by the way, a copy of the slides there in case you wanna follow along.
>> Male Speaker: Why is it worth learning PWA apps when true Cross Mobile solutions like Flutter exist?

[00:03:21]
>> Maximiliano Firtman: Okay, so that's a good question. First, we are talking about different, let's say nature. First, you mentioned Flutter, okay? Flutter these days is actually compiling as an Android native app. So you can compile an Android native app and go to the App Store, you can compile an IOS app, but also you can compile a PWA app.

[00:03:44]
And actually, let me tell you something, in Google I/O 2024 so that's the annual event. There was only one Flutter session, What's New in Flutter. And the What's New in Flutter session actually was under the web track, not the mobile track, which was actually really weird. Actually, the web track was actually following the web app PWA, Chrome thing and Flutter was actually there.

[00:04:16]
I mean, this is not information, it's my opinion. I think that Flutter as a platform to create native app for the store, might not have the brightest future, I think they're trying to push Flutter as a PWA platform. As a way to create PWA. It creates PWA with web assembly this day, so it complies to web assembly.

[00:04:38]
So actually, if you're using Flutter, you may wanna also learn PWA. Because everything that we will see today will actually be on top of your Flutter application in case you wanna compile your Flatter to the web platform. But anyway, I think that we may go back to that question at the end of the workshop, okay?

[00:04:59]
And see the reason, okay? Because forget about the PWA part of Flutter, let's go back to the original question of being native. The first situation is that you are forced to go to the App Store, which might be something good but also sometimes it's a problem for several reasons, legal reasons, business reasons.

[00:05:22]
You have to share 30% of the money you're making if you're making money with the contents of the app, with Google or with Apple. It can be 15%, it depends on the case. But anyway, on the web platform you don't need to. So I think that let's go back to that question after the workshop and see if we can together find an answer.