You can listen to the podcast and read the show notes here.
Michaela 0:01
Welcome back to the show today we're talking about progressive web apps, something that you might have been afraid of. But after this gentle introduction from Ray Camden, you are going to be all over them. And he's going to be speaking at into the box about this topic, and very excited to have him if you're not sure what a progressive web app is, will go into that. But it seems to be reliable, fast, engaging,
connectivity, independent, responsive, all kinds of good things will go into the details of what it is what technologies you might use to make it appear in your web app. So and if you don't know, Ray is the sub in senior developer advocate for off zero, extend. And he works on extend and service customization and a web in general. And he talks at all kinds of conferences, as well as into the box. So welcome, Ray. Thank you.
Raymond Camden 1:12
Thank you for having me. You're welcome. Always a delight. So what exactly is a web app, progressive web app progress, high level my level. So it is basically a set of expectations, certain functionality, I like to think of it, think of it like we used to think of web two point O web two point O was a big marketing term, like four or five years ago. And there were certain expectations about what a web two point O app was. It uses Ajax, and pretty much that was it.
So in my opinion, I happen to think of progressive web apps as a bit like that there are certain expectations about features that you should include. But you don't necessarily need to do everything that's under that umbrella,
Unknown 1:48
the
Raymond Camden 1:50
end result being essentially a much better web experience,
Michaela 1:55
a better web experience, both from the desktop and the tablet, mobile. Yeah, so
Raymond Camden 2:02
I think the focus is on mobile. And that's pretty much where everybody is. But it's definitely not just mobile, the improvements that you would make would hopefully make the experience better for every single person hitting your website,
Michaela 2:18
and how is it different from a mobile app, which is natively coated on a mobile device? Yeah, so
Raymond Camden 2:26
one thing I don't like to get into is, you know, mobile versus native, you know, to me, it's all about what's the appropriate use case for an application? Should this be native? Or should this be web based. And I think, because the web or web browsers were kind of sucky on on on mobile for a while, people defaulted to building native apps. That's why like, you go to a conference, a lot of times, they say, hey, installer, native application, and you have it for three days, and you forget about it until you find it, you know, like a year later to install it. So because you couldn't do so much on the web, people would build data. And I think what you're seeing now is that the web is capable of a of a heck of a lot more. And it's not that I would say, you know, don't build native, because native is horrible, or it's a lot of work, whatever, I would say, don't build native when it's not appropriate for what you're actually trying to do.
Michaela 3:28
So what if someone was trying to decide that way? What would be the criteria? Why, why would you do a progressive web app versus going down that native route? Well, as
Raymond Camden 3:38
I think the web has definitely some benefits in terms of how easy it is to get to, you don't have to install anything, a link, which has been around since web one point O days is all you need to actually get to it and have it running. So just the the ease of use, I think it's a great benefit in terms of what you need in terms of like, why I would not use the web, or why I would definitely need to go native. If I was building a game, certainly, you could do simple games on the web. But anything complex, I would definitely look for native outside of that the web really works well, for a heck of a lot of use cases, especially on the Android side. iOS is definitely lagging a bit behind. And my talk, I'll talk about what iOS is doing on the progressive front. And they're actually making moves. Like right now, unfortunately, they're making kind of bad.
Unknown 4:45
So yeah, that's what I'll say. But iOS,
Michaela 4:52
and also a is cross device compatible. So it can work on Android, it can work on iOS.
Raymond Camden 5:01
Yeah, absolutely. So that that's a big win there is, you know, writing something once and, you know, knowing that they'll work on desktop that work on mobile, you do have to think about Android versus iOS, some of the features that are included in that pw a umbrella of expectations are definitely not supported in iOS, right. Now, the good thing is that it's, it's in the name progressive, you build your application so that if they if those features don't exist, nothing breaks. So I can go to a progressive web app on a iOS phone, and I could still use it, I could still like, for example, for a conference site, I could still look at the schedule, that that still works fine. Maybe I don't have things like offline support.
Michaela 5:49
So it's great gracefully falls back to whatever feature set is on the device. Yeah,
Raymond Camden 5:54
now, that sounds somewhat similar to a responsive web app, how is a progressive web app different from a responsive web app. So a progressive web app should be responsive, responsive, in terms of how it renders on a mobile device responsive, and I'm going to dumb it down really, really simple, essentially means that when I look at your site, and different form factors, it responds nicely. So I'm not looking at a desktop site on mobile screen where all the UI which it's a real, real small and near impossible to hit, I have something that essentially kind of, reshapes itself to work well, on that form factor. Ideally, you have, essentially any one set of code where desktop, large tablet, like iPad, Pro, smaller tablet, iPad, Mini, small thumb, and it works well across all those devices.
Michaela 6:51
Sounds like a dream for the end users? Yes. So what exactly are the criteria for something to be oppressive web app, so you should in my sessions, so you can see them all, but I'll talk about a couple of them responsive is definitely
Raymond Camden 7:06
and one of them offline support is really kind of the big one being engaged Hubble. And by that it means having a way to bring the users back where it's appropriate. So for a male client, for example, letting you know, hey, you have new mail via notifications, for example, that's part of what you can support with a progressive web app. So it's, it's essentially, it's multiple things in that umbrella. The thing that I talk about in my session is that you don't have to do all them at once. If you do one thing to make your website better to make it, you know, approaching the Progressive Web App ideal, then you've done a great thing. And so I try to kind of break it down into, you know, here are the steps, here's what you could do, and definitely feel free to take one at a time.
Michaela 8:03
So you mentioned email, there is a female a progressive web app I'm imagining, yeah,
Raymond Camden 8:09
I swear, I remember seeing a tweet from about two weeks ago, where they have one obviously, it made they kind of web version that's mobile friendly for a long time now, but they also have their app. So I don't know if Google is planning on, you know, killing the native app and saying this to pw a who knows, but what they're planning. But yeah, I don't really have a good answer for
Michaela 8:36
what the status of their web client is. What are some famous examples of websites? We'd recognize that do this. Oh,
Unknown 8:49
I am joined a total blank on that. And we'll we'll come back later and fill it in, in the show notes. So that
Raymond Camden 8:56
Yeah, Dad? Dad? Yeah, I remember I gave this presentation last time. That was something I meant to include a one of my slides, and I hadn't done it yet. There's a couple of famous examples. I this. I'm drawing a blank of them right now. Yeah, no
Michaela 9:09
worries. We'll we'll put it in so people can find it on the show notes. The Terra tech site. Okay. So I think we covered why someone would care. Are there any other reasons why you should care about progressive web apps? If you're a web developer?
Raymond Camden 9:26
Well, it's, it's it's all about a better experience. And anything that you could do to make your site better for users, keeps them coming back makes your site more popular. And I may mean, you hopefully build a cipher for people to use. So anything that proves that is a good thing,
Michaela 9:47
right? So you've got people using it more, and they come back more, because you've got some of that engagement going on. And also, they don't have that frustration that when this, you know, they their net work signals out that the apps died, they can still interact, but maybe not the same full extent. So if they were using email, they could look at their email, maybe they compose a reply, but it isn't going to get sent until, you know, they reconnect.
Raymond Camden 10:17
Yes, yeah. So one of the biggest features people talk about is offline support, because that's pretty easy to show in a presentation. It's also a feature called background sync, where you can basically say, I have a bunch of that I made was offline, and I could tell the browser, I want you to see this, and the browser actually handles knowing, hey, now's a good time to sing some data. And I literally just worry about writing the function of what do I need to get, oh, here's a list of stuff I stored locally, I'll get the first 10. And here's my API endpoint, and I'll run it. But the actual the whole scheduling aspect the browser takes care of which is really powerful. And a lot of the progressive sessions I went to never mentioned that feature, there's a book that I recommend, that was like the aha moment for me, learning about progressive web apps that goes into detail about that. Also, push notifications is another feature that I never see mentioned. Now, I want to go back to a you're talking about the benefits, there's actually a website, p wha stats calm, and it's all like factoids that are like perfect for your manager. So if you attend my session, and you figure out, okay, it's, it's a week of dev time to actually add some of this stuff. And you can go to that site. And you could give them a factoid, like site, so and so had a 30% increase in engagement after making these changes,
Michaela 11:48
that that sounds very useful thing to have. So that the that background sync sounds exactly what Google Docs has done for a long, long time, it is that correct understanding of that feature, and progressive web apps? Yeah, I
Raymond Camden 12:03
don't know if they're actually using that particular spec. Because it is a specification in terms of service worker, which isn't covered my talk, I don't know, if they're using that, yeah, they,
Michaela 12:15
they may have coded their own flavor to achieve the same thing. But, but now
Unknown 12:20
you don't have to do that hard work. Because it it comes to you through the breath, what the browser does for you, Android only, unfortunately, but But again, I mean, if if you say, Hey, I can do this too nice. Wait, when you're on Android, you can do that I can also build a manual backup for iOS. Um,
Michaela 12:42
so you've decided you're going to do this, what are the preferred ways of building a progressive web app,
Raymond Camden 12:49
I don't know if there's a preferred way of doing it for all the different aspects. For example, the responsive part, there's been libraries for years on that you could just like use bootstrap for its sample. In terms of offline support, there's multiple libraries to make it easy. And actual code for a simple caching is, is not hard. But you can find libraries already, that will do a lot of that work for you.
Michaela 13:19
So you don't have to spend months coding you're recording or app to get us do this, it is a week or reasonable guests? Or is it I would say, it depends on what you have,
Raymond Camden 13:33
and how complex your site is ever, you know, talking about like a conference website, which is typically just a couple of pages, you know, schedule about the conference contact information and stuff like that, then you could definitely do it really quick.
Michaela 13:53
What, what kind of you sounds like you've done this a few times, is that right? Or you Hello, people ricotta web app to be progressive? Well, I
Raymond Camden 14:03
like from my own applications. I've i p, who did, you know, a couple of experience at doing it?
So it was it, you know, would if you if you had to describe how complex processes is something you only need a Jedi Master doing? Or is it something that a regular developer can do? You definitely don't need to be like a advanced JavaScript person. It is it's a bit complex, but it's not like scary complex, you know, I that would say, Take it slow. Understand your dev tools, for example, know how to debug. And again, these are all things I cover in the talk, be aware of those tools know how to test
Michaela 14:51
and and take it slow. And I think anybody could could do it. Is it realistic? If someone's coming to talk, they could go home the next week and get going on this. And beer? Yeah,
Raymond Camden 15:07
absolutely. Yes. I mean, so I went into learning about progressive web apps, because I've been hearing about it for over a year or so. And it seemed like a huge, huge, big deal. And when you break it down, and when you realize that you could do it in parts, it's, it's definitely feels a lot more achievable.
Michaela 15:31
So you can progressively code your progressive web app. Is that
anything else you want to say about jumping into progressive web apps? attend my session? give me feedback. Let me know what you think. And yeah, that's it. Now, I know you were into the box last year, what are you looking forward to at this year's event? The mariachi band hopefully. Yeah,
I'm pretty sure that will be there.
Raymond Camden 16:05
Well, that was my first time seeing one actually. And it was really cool.
Unknown 16:10
Anything else you liked about last year's event? Oh,
Raymond Camden 16:14
yeah, the sessions were good. I know, I saw some, some some command box stuff that I thought was pretty cool. And as you know, I said, I don't do a lot of cold fusion anymore. But command box is literally the best thing I've seen for CF in a long time. So I'll definitely if there's any sessions on that I'll have been
Michaela 16:35
tried to attend them that there's a whole day workshop. I believe I won't be there for the workshop. I
Unknown 16:42
think I get in that night. Well, there
Michaela 16:44
I that I think there is a command box session.
And I want to say there's some new features coming out for command box because I interviewed Brad wood who's the developer evangelist and one of the lead developers on it. I'm pretty sure there's something new exciting coming out. So cool. Well, thanks so much for coming on the podcast today. Ray.
Unknown 17:09
Thank you for having me.
