Progressive Web Applications and Offline Project: Frontend Grocer

[00:00:00]
>> Mike North: Let's talk a little bit about this example project that you checked out. And part of the reason that Steve and I spent so much time building this thing was a lot of the example PWA apps out there are really rudimentary. It's almost like TodoMVC, in a PWA sense.

[00:00:19] And the whole point of building rich experiences like this is you should be able to do something that's a little bit complex, right? That maybe it holds some state, and the user can go offline and they can still do almost everything that they were able to do while online.

[00:00:36] They should be able to reconnect to the Internet and sync their data, and they should be able to get notifications. We're not looking just to make a fast booting, single-page app. We're looking to do things that specifically were just not possible in classic web application land. And we're gonna do, not just one or two things, not just, it works offline but it's still mostly just a web app, we're gonna hit all of those different boxes.

[00:01:08] So this will feel like where those superhero abilities can be taken advantage of. This will feel like a native app. And the idea here, if you've ever used something like Instacart or a grocery delivery service of sorts, you have different categories of groceries here. And you can add some stuff to a cart and increase the quantity and you can see a total price.

[00:01:31] And then you can check out and at that point, the contents of your cart become an order that has been placed. And there are entire businesses that are a much prettier, richer-looking version of this. But it involves holding state. It involves retrieving data from an API. It involves pre-fetching a lot of stuff in the background.

[00:01:55] So some of these categories have hundreds of grocery items, and we don't wanna download 600 or 700 images in advance just so that we can take advantage of them offline. So we're going to really pour a heaping helping of PWA sauce on this thing. And what we're starting with is really a classic, single-page app.

[00:02:17] This one happens to be built with React, but the intent is that it's sort of a generic view layer. You're not going to be touching the components. We're gonna be working exclusively in vanilla JavaScript modules. So the only thing that you really need to know is JavaScript fundamentals.

[00:02:40] And we may introduce a couple concepts, like if you're not used to promises, we're gonna dive into those pretty deeply just to make sure everyone's on the same page. But other than that, you should see this app evolve from a conventional 2011 style mobile web experience to something that when you show people, they will not believe that this is purely built using web technology.

[00:03:05] We're gonna touch so many different areas. And if you can't tell, I am super excited to be able to guide you through this non-trivial example. If you don't, like listening to all of the wishes you had for things that could be done in the browser, if you don't get to have a little taste of something that gives you new ideas about the way you could take your product in a new direction, we have not done our job properly.

[00:03:37] I mean, we're tasting the whole buffet here of PWA technologies.