[00:00:00] SY: Okay. So we are all sold out of early bird tickets to Codeland, but regular tickets are now available. They start at 99 bucks and they get you talks, a workshop, great food, great people, all in New York City on July 22nd. Go to codelandconf.com for more info. That’s codelandconf.com. Link is in your show notes.
[00:00:29] (Music) Welcome to the CodeNewbie Podcast where we talk to people on their coding journey in hopes of helping you on yours. I’m your host, Saron, and today, we’re talking about Progressive Web Apps. So I’ve been hearing about Progressive Web Apps, also called PWAs, for a while. But with all the new buzzwords, it seemed to pop up all the time. I kind of ignored it and hoped it was something I didn’t have to learn. But the way Frances explains it, it doesn’t seem that bad.
[00:00:58] FC: I’m Frances Coronel. I am a Software Engineer on the Customer Acquisition Team at Slack and I work on all things Slack.com.
[00:01:05] SY: It actually sounds like a really helpful way of building for mobile without building a mobile app and a great way to make tech more accessible to folks who only have mobile phones and maybe don’t have the fastest internet. What are Progressive Web Apps and how do you make one? We’ll talk about all that and more after this.
[00:01:29] As you know, I’m a podcaster, and I love talking to people and hearing their stories, and I love it so much I actually host another podcast called Command Line Heroes. It’s produced by Red Hat. And in that show, I get to talk to tons of people doing incredible work in open source. But besides awesome interviews, it’s also got sound effects, background music, you know, creative audio stuff. So if you’re looking for some more awesome tech podcasts to fill your feed, check out Command Line Heroes. Go to redhat.com/commandlineheroes. Link is in your show notes.
[00:02:05] If you’ve got a personal project, a small business or a big business with lots of data, Linode offers you secure hosting for all your infrastructure needs. They are a Linux cloud hosting provider where you can get a new server up and running in under a minute. Plans start at one gigabytes of RAM for just five bucks a month. And with the promo code CodeNewbie2019, you can get a $20 credit. So go to linode.com/codenewbie and give it a try. Also, they’re hiring. Check out their jobs at linode.com/careers. Links is in your show notes.
[00:02:41] If you’re listening to this, you’re already on your way to changing your life through code. At Flatiron School, you might end up with a job, a promotion or a better salary. But that’s just the start of changing your career, your life, and the world. On campus or online, you’ll join a community of learners that are empowered to change their future in the rapidly growing tech field. A bold change begins with a single step. To take yours, go to flatironschool.com/codenewbie. Link is in your show notes.
[00:03:15] DigitalOcean provides the easiest cloud platform to deploy, manage, and scale applications of any size. They remove infrastructure friction and provide predictability so you can spend more time building what you love. Try DigitalOcean for free by going to DO.co/codenewbie and get $100 in infrastructure credit. Link is in your show notes.
[00:03:39] SY: So what are Progressive Web Apps?
[00:03:41] FC: So Progressive Web Apps are essentially like web applications, but they have all the right vitamins. That’s how the creators sort of described it. So essentially they act like a native mobile app would. They can have web push notifications. It works offline. You can download it to your home screen.
[00:04:01] SY: Oh wow!
[00:04:02] FC: But it is made using the three elements of the web or the three building blocks of the web: HTML, CSS, and JS. So you’re using all the same technologies that you would if you were building a regular web application, but instead it performs like a native mobile app would, which is what makes them so powerful.
[00:04:21] SY: Okay. So does that mean that Progressive Web Apps are meant to be used on my phone?
[00:04:28] FC: Yes. They are meant to be like first like very mobile friendly and I think that’s kind of the strategy a lot of sort of tech standards are going towards like everything should be mobile-first and it should be ready for mobile before we even tackle like the desktop or tablet sizes because most users across the world, more of them have access to a mobile device than any other kind of device regardless of their background or what privileges they grew up with.
[00:04:56] SY: So when people say mobile-first, I’ve always found that to be confusing, I guess, because I have a smartphone, I have my computer, and I use both, but when it comes to doing work-work, I use my computer and I do my social media on my phone and I’ll do Google Maps on my phone, things that you need to be done kind of on the go. But when I think about the bulk of my work, that’s still done on the desktop for me. So when we talk about mobile-first, do I feel differently because I’m in the US or is it my particular workload, I’m just like way behind the times or where’s that disconnect coming from?
[00:05:35] FC: So yeah, you make a fair point. I think Progressive Web Apps right now, we haven’t seen that many that are really like heavy and sort of, “Oh, this would just be something I would use on desktop.” It’s like supposed to sort of travel with you regardless. Like for example, a website, it’s going to work for you regardless of what device you’re on. It’s the same thing with Progressive Web Apps. It’s just that we’re not using iOS technologies or Android technologies like Swift or Kotlin. We’re using the web technologies that actually more people are familiar with to create a very similar experience. So it’s not like mobile-first doesn’t necessarily mean that we’re focused just on mobile, it just means that it’s optimized for mobile because that’s kind of the strategy all companies want to have since most users have mobile devices.
[00:06:27] SY: When you say most users have mobile devices, do you mean over having laptops, like mobile devices are more popular than laptops?
[00:06:33] FC: Right. Exactly. And more people are spending time on mobile devices as well. Not necessarily in the US, but globally more people not just have access to like a mobile device, but they are actually spending more time like on the mobile web or in their mobile apps versus like on desktop.
[00:06:52] SY: Okay. That makes sense. So when I think about having a Progressive Web App instead of I guess a traditional web app, it makes sense from the developer’s perspective because every time I think about building a mobile app, I’m like, “Oh, man, I got to learn Swift and like Android.”
[00:07:10] FC: Exactly.
[00:07:11] SY: It seems like I have to learn all these things before I can do anything. But what you’re telling me is if I do a Progressive Web App, then I can just use the stuff I already know, the HTML, CSS, and JavaScript, and still make a cool app. So it makes total sense for the developer. Are there any benefits though to the user?
[00:07:28] FC: So this is actually what excites me the most about Progressive Web Apps. It’s not so much the technical side of things but more so like the user impact. The thing with native mobile apps, right, is that on average the native mobile app is much larger in size. So it takes a lot more time to download, you’re going to need more storage space, you’re going to need a better network connection. If you’re on 3G, like most of the world is or even lower like 2G, it’s going to take up a lot of bandwidth. And if you’re on a limited data plan, that can really eat up a lot of it and that’s why a lot of folks usually don’t download as many native mobile apps like in emerging markets like Brazil and India. So when we’re looking at those kinds of markets, the Progressive Web Apps make a lot of sense because it’s the mobile web. It’s not a native mobile app. So you’re downloading a lot less. A clear example that I can point out that I remember off the top of my head as I actually looked up the sizes for the Twitter PWA, which is called Twitter Lite.
[00:08:28] SY: And PWA stands for Progressive Web App?
[00:08:31] FC: Yes, that’s correct. So the Twitter PWA is about 600 kilobytes and the Twitter IOS app is about 200 megabytes while the Android Twitter app is about 150 megabytes. So compared to that, the Twitter PWA is extremely small in comparison and this means so much for users who may not have the bandwidth or storage space that users like us in America have privilege and access to.
[00:09:06] SY: So if the Progressive Web App version is so small, why are the native apps so big? If I can have the PWA version and I’m assuming it has similar, if not, the same functionality, why are the native ones big in the first place? Why don’t we just make those smaller?
[00:09:25] FC: A lot of it comes from the bulk operating system like what it requires. Like for example, the mobile web that requires like the browser, right? So the browser is already taking up a lot of that space, but it’s built in, like every mobile operating system is going to have its own browser.
[00:09:43] SY: It’s already there. Yeah.
[00:09:44] FC: Right. So essentially what you’re doing when you’re downloading that PWA to your phone or installing it to the home screen is you’re basically saving a cached version of that browser state. Yeah. So it doesn’t require as much as the native apps do. I believe it requires just more from the operating systems itself. So that’s why they’re a lot bigger.
[00:10:07] SY: Okay. So we have our Progressive Web Apps, which take up a lot less space, and that’s obviously great because we have limited finite space on our phones. And also depending on our internet speeds, it will be a lot faster to get onto the phones as well. In terms of usability, are there any advantages to having a Progressive Web App over a native app?
[00:10:34] FC: The experience is supposed to mimic basically the native mobile app experience, right? But the thing there is that it’s not entirely the same. For example, if I wanted to download the Twitter mobile app, I know where to go. I go to the Google Play Store if I’m on Android or I go to the iOS App Store if I’m on the Apple Operating System. But for PWAs, it’s not as clear. You would really just go to the URL of that website and then it would prompt you to download it or rather install it to the home screen. It’s all based on mobile web functionality rather than like the built-in sort of operating system structure, which is actually really key to those companies because they make so much money off those mobile apps within those stores.
[00:11:24] SY: Wow!
[00:11:24] FC: Yeah. So it’s a little bit different because the usability is not exactly the same for the user. They have to go to the URL and then they’re prompted and then it acts exactly as the native mobile app at that point.
[00:11:39] SY: Yeah. I was wondering about that. I was wondering can I still get it from the app store or is there like a PWA app store? I was wondering how that works.
[00:11:47] FC: Yeah, exactly. So I think that’s one of the drawbacks actually of PWAs is that there’s not a centralized place where you can find all of them right now. I think Google is experimenting with this with their Play Store. But to be fair, Google is the one that spearheaded sort of this new standard and they’re the big player behind it. Although I will say that Microsoft and Apple have been contributing their fair share of like development towards the standard, which is sort of unprecedented since it’s kind of rare to see that a lot of tech companies are working and actually towards the same thing essentially.
[00:12:23] SY: It’s interesting that you frame it that way because I didn’t think of it as it being a standard. It sounds like you should have a mobile, a mobile app, or a mobile website that is cached. You know what I mean? Like when I think of standards, I’m thinking of accessibility standards or CSS standards. You know what I mean? Like things that have more like protocols and rules. You know what I mean?
[00:12:50] FC: Yes.
[00:12:50] SY: So when we talk about Progressive Web Apps being a standard, what does that actually mean?
[00:12:55] FC: Yeah. So great question. So like you were saying those all require like something in order for the standard to be fulfilled. PWAs are the same way and there’s actually this new auditing tool and it’s built-in right into the Chrome DevTools, which if you’ve used Chrome before, if you go to the developer tab, you’re going to see in the Audit Tab, I believe. The default testing tool is Lighthouse and this is relatively new but basically anyone who has the Chrome browser and uses it and is a little bit familiar with the DevTools can use Lighthouse to audit a website and one of the metrics that they score is PWA.
[00:13:37] SY: Oh, wow!
[00:13:38] FC: SO that’s like a score. Yeah. And they also have accessibility, they have SEO, they have performance. So in terms of standards, there are a few things that need to happen in order for your website to actually be recognized as a full, a hundred percent PWA.
[00:13:54] SY: Oh, wow!
[00:13:55] FC: So I can I can dig into those two if you want.
[00:13:57] SY: Yeah. I would love to hear what kinds of things that needs to have. What does that look like?
[00:14:01] FC: So the first thing is security. It has to be HTTPS and that just means that it’s less likely that there will be attacks on your website if it’s fully secured. The second thing beyond security is also the index.html or like the base file for your website needs to have a few things in the head section in order for it to be recognized as a PWA. So there’s quite a few lines that go into that but basically it’s saying, “Hey, you know, this is a PWA and we’re proving it through the HTML” and like with the specific line. So I would recommend going to the Google web developers’ website to look up those specific ones, but it’s basically a few lines of code that you would need to add to your head to make sure that any browser regardless of what it is Chrome or whatnot have you recognizes it as a PWA. Third thing is it will need a manifest.JSON located in the root. So I’m getting a little technical here.
[00:15:09] SY: What’s that do? Yeah. What is that about?
[00:15:10] FC: Yeah. So it’s a JSON file that essentially will define all the images that would show up in your phone. So like for example, when you’re doing native app development, you have to get all those different sizes for your app icons so that it shows up regardless of like the phone or whatever structure the operating system has it shows up correctly.
[00:15:31] SY: That’s super annoying.
[00:15:33] FC: Yes. It’s the same thing you have to do with manifest.JSON. It’s just like a lot cleaner and easier to digest because it’s just a JSON file and all those images and all those different sizes are defined and they have a preset number of images at different sizes that you’ll have to add into there.
[00:15:52] SY: Okay. So in my… not PWA, in my regular app, if I don’t have a manifest.JSON, where do I keep that information? Because I still need those images, right?
[00:16:04] FC: Yeah. So I played around with Xcode before, but they have like a specific place where you upload all those images in, yeah, and then it lives somewhere in that Xcode project at least for iOS and I’m sure it’s similar with Android as well.
[00:16:20] SY: Okay. Cool. So here, it’s just that that specific place is now called manifest.JSON?
[00:16:26] FC: Exactly.
[00:16:26] SY: Okay.
[00:16:27] FC: And it’s supposed to live at the root and then also it gives you the opportunity to describe what the app is about, like a description, title. You can also specify a background color or a theme color if you want and this will actually change what happens when you load up the app from your home screen.
[00:16:46] SY: Okay. Cool. What else? What else makes it a Progressive Web App?
[00:16:51] FC: Yes. So the fourth and most important thing and this is what PWAs are most known for from a technical perspective are service workers. So service workers essentially are JavaScript configuration files that also live at the root of your app. Usually they call it sw.js. The most popular library for setting this up is called Workbox, which unsurprisingly is also created by Google. And so that essentially will set up a JavaScript configuration to cache important files from your application. And then if the user is offline, it will get those cache files instead. And once they’re back online, it will get any updates. So the user will always have the most updated files. Otherwise, it’ll just rely on the cached versions of those files.
[00:17:48] SY: Interesting. Okay. And tell me why because you said that that is the most important thing. Why is that so important?
[00:17:57] FC: So before it was very difficult to do this. For this, it will work regardless of what device you’re on to provide an offline-first experience, which is great because before it just wasn’t very easy to get this configured, whereas now it’s almost like a one-line addition to have a default configuration setup so that it caches the most important files like CSS, JS, your base HTML page, so that it can at least show something even if you’re offline, which is great because a lot of folks even in more like privileged countries like ours in the US, if we’re traveling or on the airplane, for news apps that are PWAs, it will cache like the stories that you’ve clicked on already and you can actually go back and read through those again. Other news apps will like have an option “Save for later.” So that would be sort of an offline instance or opportunity as well.
[00:19:00] SY: Interesting. So it sounds like the Progressive Web App has two components that are important and really useful. One is the idea that I don’t need to have a particular device as long as the website I want to go to has a PWA version, then it will work and it’ll be great and everything will be awesome no matter what device I’m on. And then the other side of it is it seems to be really good with offline stuff such that it’s not only great for many different types of phones, but it’s also great for different internet speeds and offers convenience in that way too.
[00:19:37] FC: Exactly.
[00:19:40] SY: Interesting. So as a developer, how would I make a Progressive Web App? Because you said that I can only use HTML, CSS, JavaScript. So is there a framework or is there like some rules or something that I need to use to structure it in any particular way? Yeah, where would I even begin?
[00:20:05] FC: Right. Okay. So not necessarily CSS, by the way, that was just like, “Oh, the building blocks of the web,” but more so those four things that I mentioned before. As long as you can configure those in some way in your web app and it’s platform and framework agnostic by the way, so it doesn’t matter what your setup is as long as you can add HTTPS, you can make modifications to the base HTML file, you can add an sw.js file in the root for the service worker and also the manifest.JSON in the root. As long as you can do those four things, you will pass the PWA sort of audit using Lighthouse.
[00:20:50] SY: So if I do not pass my audit, what does that mean? Do I get in trouble with Google or something?
[00:20:58] FC: If you don’t pass every critical part of the audit, the user won’t be prompted to install to home screen.
[00:21:05] SY: Okay.
[00:21:05] FC: They just treat it like a normal website.
[00:21:09] SY: Okay, interesting. And so as the user that means I can’t put it on my home screen and I can’t pretend that it’s an app?
[00:21:15] FC: Exactly. And this is definitely something you’ll find when testing the PWA is if you’re missing one little thing like that it just won’t work.
[00:21:24] SY: Okay. So it’s interesting that Progressive Web Apps was coined or it came about in 2015, but the whole mobile-first idea has been around for, well, I don’t know how long it’s been around, but I feel like it’s been around forever. We’ve always been talking about mobile-first.
[00:21:41] FC: Definitely.
[00:21:42] SY: Yeah. What prompted PWA and why did it even come into existence especially at that point?
[00:21:47] FC: I think part of the reason why it came into existence and I’ve looked into this as well is because Google and other big tech companies were looking for a way to make their products, ergo get more money, like just more accessible to emerging markets. And so like the countries I mentioned before, Brazil and India, those are two of the biggest countries in the world, but they don’t have the same privileges that the US and other sort of more developed countries have where we have a very fast network connection, lots of storage space. So taking that into consideration, I think they created the standard so it would provide an easy way to sort of break into those markets where the users could have the same exact like experience as those who could afford to get the native mobile app version.
[00:22:39] SY: So does that mean that Progressive Web Apps, the predominant users of them are people in developing countries and folks who don’t necessarily have the best internet speeds or don’t have laptops? Is that the predominant customer base for that?
[00:22:58] FC: I would argue not necessarily. They’ve actually seen a lot of great success in non-emerging markets like Europe. So yeah, there are a lot of other companies that have sort of created their own PWAs in developing countries and seeing like a lot of success. So Trivago is a popular hotel booking website in Europe and they saw 40 percent increase in engagement from their PWA and there are also many others out there. So it’s used across many different kinds of markets. It’s not specific to like, “Oh, it’s just for sort of communication apps or it’s not just like for news apps.” It’s for any kind of application and all of them have seen a lot of success not just in emerging markets, but also in developed countries and markets like ours.
[00:23:49] SY: Okay. Very cool. So how hard is it to make a Progressive Web App? Because when you mentioned those four things, none of them seem too bad. They seemed pretty doable. Like I feel like I could roll up my sleeves and make my first PWA. But in reality, is it more complicated than it seems? Yeah, what’s that process like?
[00:24:11] FC: So if I go back to like when I was first starting out, I would see this as pretty intermediate to advanced. I would be like, “What? How do I add HTTPS?” Sort of just from the ground up. Right? Like if you’re using a CMS like Squarespace, WordPress, Weebly, what have you, you’re going to get this automatically. But if you want to add it in, some development platforms will give it to you very easily like GitHub Pages if you’re creating a project on there. But for more advanced instances like a company app, there would be more nitpicky stuff involved to adding in that certificate that’s going to work and not like add any insecurities later. But the manifest.JSON, I think that’s quite simple regardless of where you are. It might be sort of tricky to make sure what keys you have to have. But you can easily look that up. Let’s see what else. The index.html changes, those are pretty simple too. You’re just adding in lines of HTML to show that this is a PWA. And then the last part, the service worker, that I would argue is the hardest part, also the most technically interesting part of the PWA. So they give you a couple of options to like setting it up. You can use this npm custom script, you can use a gulp configuration, and npm is the node package manager that most folks get familiar with in the beginning after they’ve downloaded any package for their project, assuming it’s a web project. Gulp is a build management system that you can use to compile and sort of manage all the different files that you have and optimize them in whatever way you want. Webpack is a JavaScript-build configuration system as well. And within that, I would import the Workbox Library. And then I would import that into my webpack.config.js file in the My Root and essentially just call the workbox.generate.sw function and it would generate that sw.js file for me.
[00:26:24] SY: Okay.
[00:26:24] FC: So I just went through the entire process right there of pretty nitpicky of like generating the service worker. I would say that’s the most tedious part and definitely if you’re not familiar with webpack, npm, or gulp it would probably be a little more difficult to onboard, but I would also say that the tutorials that are in line are really good. It shouldn’t be impossible even if you’re a brand-new beginner.
[00:26:50] FC: Yeah. Even the last thing that you mentioned, they’re not things that I’m familiar with, but I like that there are not that many steps. I like that there are a few steps and I feel like if I took an afternoon maybe and learned about them and got a little bit comfortable, I feel like I could make it happen. It doesn’t feel too bad. It doesn’t feel like too many steps. It might take a moment to understand it or to know what I’m actually doing, but doing it doesn’t sound too bad. Okay.
[00:27:22] FC: Yeah, for sure.
[00:27:24] SY: Coming up next, we dig into Frances’s story of becoming a developer and how she first heard of Progressive Web Apps. She also shares some tips on how you can get started and gives advice on when you should start after this.
[00:27:38] We’ve talked about open source a bunch of times on this podcast, but frankly, open source is so big and complex and fascinating that it needs its own show, and it has one. It’s called Command Line Heroes. It’s produced by Red Hat and it’s hosted by me. That’s right. I’ve got another tech podcast talking to incredible people about all things open source. We talk about the history of open source, the introduction of DevOps and then DevSecOps, and we even do an interview with the CTO of NASA. And that’s just the beginning. We also dig into cloud and serverless and big data and all those important tech terms you’ve heard of, and we get to explore. If you’re looking for more tech stories to listen to, check it out at redhat.com/commandlineheroes. That’s redhat.com/commandlineheroes. Link is in your show notes.
[00:28:30] DigitalOcean is the easiest way to deploy, manage, and scale your application. Everything about it was built with simplicity at the forefront; setting, deploying, even billing. Their support is amazing. They’ve got hundreds of detailed documents and tutorials. So if it’s your first time deploying an app, they’ve got great tools and community to make it nice and easy. Try DigitalOcean for free by going to DO.co/codenewbie and get $100 in infrastructure credit. Link is in your show notes.
[00:29:01] Ready to change your life? Well, Flatiron School designed a school just for you. Flatiron is a global school with immersive and online courses designed for passionate people like you. If you’re looking to excel in a new, rewarding career, you can start right now. Check out Flatiron School’s free 75-hour boot camp prep, where you can learn JavaScript, Ruby, and do some interview prep. Flatiron School has helped thousands of students from all backgrounds invest in themselves by learning online or in person. By the way, did you know that they’re now part of WeWork, which means they now offer classes at a growing number of WeWork locations around the world. So go to flatironschool.com/codenewbie to learn more. Link is in your show notes.
[00:29:50] Linode is giving you a chance to try their powerful servers built for all your infrastructure needs. They’ve got nine data centers worldwide with new data centers opening up this year in India and Canada. Getting started with a shiny new server takes less than one minute, so you can get up and running in no time. And you can get a $20 credit by using the promo code, CodeNewbie2019. Just go to linode.com/codenewbie for more info. That’s linode.com/codenewbie. Link is in your show notes.
[00:30:22] (Music) Tales from the Command Line. It gives us a chance to dig into one particular part of the episode and hear a different perspective from a really experienced developer in the field, Scott McCarty.
[00:30:32] SM: Yeah. My name is Scott McCarty. I am a Principal Product Manager and I focus on containers, like all the technology within containers that enables Red Hat Enterprise Linux and OpenShift.
[00:30:45] SY: Let’s begin. So Progressive Web Apps, when you think about mobile, how has mobile changed over time?
[00:30:54] SM: The funny part is like fundamentally it hasn’t changed completely. The orthodox is still the same like you’re trying to collaborate with other people in different channels, be them text or audio. I would say, though, it has gotten a lot easier. Like it’s definitely gotten a lot easier, the apps are way better. I mean back in the day, they were nasty on like PalmPilots and we would do all kinds of hacky things to make them work and we were always hacking with everything.
[00:31:20] SY: What made them nasty?
[00:31:21] SM: There was nothing easy, like for example like Shazam, right?
[00:31:24] SY: Yeah.
[00:31:25] SM: Like nothing like that even existed, right? Like back then we would do all kinds of hacky things like plug the PalmPilot in and root the phone and then like find some special app that would share the internet with your laptop, things like that.
[00:31:37] SY: So as a developer, how has it changed?
[00:31:40] SM: Well, so specifically there are developers for mobile I guess is what I would say.
[00:31:46] SY: That’s a thing.
[00:31:47] SM: Yeah, that’s a thing, like back then it was not a thing. There was no app store. There’s no way to publish anything.
[00:31:53] SY: Yeah. Yeah.
[00:31:54] SM: It was just like, “Hey, go download this file and install it on your PalmPilot.” So like I think developers back then had to think about how people are going to share the apps. I don’t think it was really thought about the same way as it is now.
[00:32:04] SY: Yeah, and that’s the thing because when I think about mobile and I think about smartphones, I immediately think of the app store as being this huge thing that brought about a different wave of mobile. I don’t know if that’s actually accurate or that’s just them doing really good marketing. So in your experience, was the app store as big of a phenomenon as they make it seem?
[00:32:27] SM: So in marketing, there’s this concept of like building the message and moving it around. There two different distinct work streams, if you will. And so I would say like PalmPilots and the Palm phones that I used which were way before the app store model basically had the same functionality. You would go to like websites and find stuff and people would talk about it on forums and stuff. You had to be cool and smart and kind of in the know to do it. And then when the app store came out, it brought it to the masses so it moved it around, but I would also say it changed things in both positive and negative ways. Like I’ll give you an example.
[00:33:03] SY: Yeah.
[00:33:04] SM: The old version of Google Maps, I loved, like I honestly think it was like feature complete and we should have just stuck with that and never used another app ever, instead they’ve built a new version because they were probably looking for new ways to extract value or new ways to leverage some other API and there were all these product requirements that would never exist unless you were deployed at scale. And so you have to have all these other little like micro-transaction features built in that generate revenue. And so like now there’s like recommendations for restaurants and this and that and blah, blah, blah, and all these little things that probably generate money, that did not exist at all until the app store model. Again, if product is free, you are the product.
[00:33:47] SY: So do you remember your first time working in mobile?
[00:33:51] SM: When we say the word mobile, like have I ever been a mobile developer? Like that’s how I would interpret that question and I’ve never been a mobile developer.
[00:33:58] SY: Have you dabbled in mobile?
[00:34:00] SM: Oh, yeah, I’ve dabbled and then I also worked on the backend of mobile stuff. So I’ve worked at like large web properties, I worked at Alltel in network operations and I think people underappreciate how much backend staff supports.
[00:34:14] SY: That’s a good point.
[00:34:16] SM: This is the DevOps thing, right? Like people underappreciate how much the backend people were doing to like support the front-end people.
[00:34:22] SY: Tell me a little bit more about this backend because that I confess I haven’t really thought much about that myself. Let’s take Angry Birds maybe, if we take like the Angry Birds game, what might the backend DevOps-y part of that look like?
[00:34:40] SM: You know Angry Birds was like their 50th game?
[00:34:43] SY: Oh, really?
[00:34:44] SM: Many of those games required very little back end because it was probably very few users using it and then one day they came up with Angry Birds, put it out there and it exploded overnight.
[00:34:54] SY: Yeah.
[00:34:55] SM: One can very easily reverse engineer the back end of that was really, really, really hard to deal with because it was probably not a skill set that they had immediately.
[00:35:04] SY: True.
[00:35:05] SM: And so in a very quick amount of time they had to figure out how to scale the database on the back end. They had to scale the network connections, figure out how to make sure the web servers all talk to each other the right way so that they’re not like using up network traffic. Each game has to spin up and spin down and you have to keep track of the state of the game.
[00:35:22] SY: So you mentioned scale a bunch of times, but I know that scaling is a huge problem, a huge pain point, something that’s very complex. But when I think about scaling, it sounds like I take a thing and then I make it bigger, like it sounds like it’s such a simple idea. What makes it so complex and sticky and tough to do?
[00:35:44] SM: So the analogy I would use because my undergraduate was in anthropology and computer science, is brain size. If you look at the brain on a fish, if you just make it larger, it’s not as smart as a human. Scaling something up, basically just turning on more copies of it, does not equate to being able to handle the traffic in a way that makes sense. So like the system gets more and more complex. So if you look at the human brain, it has way more different specialized components in the brain to handle different things. Memory. It has the old limbic system. It has a frontal cortex. The same is true when you’re scaling up an app, right? Like it’s not just making it larger, you have to add all these components. Maybe you have to go figure out how to break up the database and shard it. When you scale them up, they each require a very different subject matter expertise to figure out how to do and you might have like 30 or 40 different subsystems that you have to scale up in completely different ways to make the game actually scale. And so video games are actually a very good example of how hard it is to scale things up. It’s not super simple.
[00:36:48] SY: So at what point do these problems become problems? Are we talking about a hundred gamers? Are we talking about tens of thousands, millions? Like at what point does the, “Oh, I’ll just add some more resources,” no longer work?
[00:37:01] SM: Depends on how complex the game is, right? Like if it’s a super complex war strategy game it’s going to take less users to cause you to have to scale some component of the system up than like a very simple game like chess or checkers or something like that. But any game, if you get into the tens of thousands of users, you’re going to start to see some of the subcomponents start to break down and need to scale. The problem being that you might have to scale up two or three of them simultaneously and figure it all out like literally in hours because your game got onto the front page of the iTunes Store and now your game it literally has 200 times as much traffic as it had the day before. First impressions are forever, right?
[00:37:42] SY: Yeah. Yeah. So I want to tie this back to careers and jobs. So the problems that we’re talking about, you mentioned DevOps a couple times, what are the roles that involve dealing with these problems? Is it a back-end engineer? Is it something more specific? What are we talking about?
[00:38:00] SM: Yeah. In my experience, again, depending on the scale, you’ll see just like you have to scale up the application, you have to scale up the different subcomponents of the application. You have to scale up the subject matter experts. If it’s small, you might have just developers literally using a cloud provider for their back-end. It’s very common in early startups to not have a single person dedicated to operations and then I would say a milestone is you end up with one ops person. And then once you have one ops person, next thing you know you have three or four or five, maybe seven, maybe ten, and the next thing you know you start needing specialists in certain areas, like there’s a particular person that knows about caching really well and how to cache things the right way and then there’s a person that understands relational databases really well. In fact, some companies are so big they have entire teams dedicated to tuning the database. I have a friend actually that works for Quora and Quora has a huge, very, very, very technical team dedicated to just scaling up the relational database on the back end. And so it’s interesting to watch how different companies will scale up different ways kind of based on the architecture of their app.
[00:39:11] SY: So for these subject matter level experts, are we talking about, you know, I’m a DevOps engineer, but I specialize in relational databases or do I get a I get a whole new title?
[00:39:23] SM: Yeah. Typically, they will call them like DBAs.
[00:39:26] SY: That’s a database administrator?
[00:39:27] SM: Yeah, exactly. And it’s funny because it sounds like an old word.
[00:39:30] SY: It does.
[00:39:31] SM: It’s funny. We’re like, “Oh, I want a newer sounding title than that.”
[00:39:35] SY: Yeah, Database Ninja, that’s what we need.
[00:39:38] SM: Yeah.
[00:39:40] SY: Right on brand. So going back to a Progressive Web Apps, when we talk about taking our normal web apps and making them Progressive Web Apps, are we talking about the back end at this point or are we talking about mobile kind of “traditional mobile developers”?
[00:39:56] SM: Well, something like progressive apps actually require both. We talk about asynchronous and synchronous connections to a server, right? And even though HTTP is asynchronous by nature, it’s still relatively synchronous. So when you do Progressive Web Apps though, you may like cache stuff locally and so like there’s a lot of front-end changes that are required to do that. So like, you know, typically like Google Docs is the example that I think of. You know, I cache, I like hit a button and it like caches the document locally on my phone, at some point it gets synchronized I go to my computer and the doc is the same and I’m like, “Oh, that’s cool.” But on the back end, a lot of stuff happened. At that same time if that like Google Doc was shared with a bunch of other users, they could have been interacting with it in semi real-time while you were interacting with it on a plane and when you land the back-end system has to reconcile the changes that you made and the changes that all those people made. That can be really, really difficult. In fact, it can be impossible. And so yeah, that requires front-end changes and back-end changes and they have to basically know how to talk to each other in a nutshell to make sure that all happens right.
[00:41:07] SY: And now back to the interview. I want to switch gears a bit and hear a little bit more about you. How did you get into Progressive Web Apps?
[00:41:19] FC: So I think I first heard about them like two years ago, and just like for some background on my story, I first started learning how to code my senior year of high school in late 2012. I decided to major in computer science and then I also even got a master’s in computer science because I was like, “Why not?” That’s a privilege that I have for sure, like being able to have that more formal sort of path to becoming a developer, but I was also really cognizant of all these other informal paths that were coming in to play. And even in my CS degree for undergrad, I was feeling like, “I don’t know if this degree is going to prepare me for like day one of the job.” So I even like myself decided to do a coding boot camp in New York City called Fullstack Academy and that was so amazing. I learned so much and that was actually how I got my first part-time job because during the coding boot camp you were required to give a presentation on something you learned about and so I gave a presentation on web design and that went so well that I decided to apply to speak about it at a conference. When I was speaking about web design at that conference, someone in the audience like really liked it and basically said, “Hey, you know, we’re hiring at my software development agency. Would you like to interview?” And that was how I got my first part-time job. So it was like full circle.
[00:42:47] SY: Very cool! Yeah.
[00:42:49] FC: It was amazing and that’s kind of how I got started. So that was back in 2015 and then since then I’ve had jobs and now I’m at Slack. So that’s a little bit of context.
[00:43:01] SY: So at what point in your coding journey with the boot camp and the part-time job and the talk and all that, at what point did you first get introduced to Progressive Web Apps?
[00:43:11] FC: So it was a little bit after I graduated from the coding boot camp. I think it was my first part-time job. My boss basically mentioned something about Google, like is, talked about Progressive Web Apps for the first time at like one of their conferences, and he basically gave me the lowdown of the standard, this new standard and I was like, “Huh, okay, that’s fun.”
[00:43:35] SY: Whatever.
[00:43:37] FC: I was still really new to like web development in general. So I wasn’t ready to like jump into something completely different. But then when I looked it up later at his past, I guess, I realized that it wasn’t as complicated as I thought or as he made it sound. And I basically was like, “Okay, let me just see how long this takes me,” because I had a personal website and it didn’t take me that long to figure it out. I think it took me four days.
[00:44:06] SY: Oh, wow!
[00:44:07] FC: I think I ended up doing it for every like little website project I was working on at the time and even open source stuff that I had on GitHub I would just sort of, “Let’s make this into a PWA,” because frankly it wasn’t taking me that long. So I was like, “Why not?” And then Lighthouse also came into the picture and now it’s a default auditing tool. So anyone can sort of test their website now automatically with Chrome DevTools and I tried that out and I wasn’t getting the scores I wanted for other stuff, but I was getting that 100 for the PWA and that was really satisfying little by little for sure. It was just like one website, it was my personal website, and then it was the next website, and then it was the next one until I felt compelled to like sort of make this into a talk. Twitter did like a big blog post on this like their Twitter Lite version and I thought like, “Oh, this is gaining traction.”
[00:45:02] SY: You mentioned Twitter Lite, which sounds like a not full version of Twitter. So when you do Progressive Web Apps, do you generally have to cut back on the features that you could include? Does it end up usually being a lighter version of the real application?
[00:45:25] FC: So this is something that between Apple, Microsoft, and Google, those big giants, they haven’t fully reached sort of consensus on which features to support yet, I guess. So the thing is like with Android, everything that an Android native app provides, I think 99 percent of it will also be available to a PWA. But with iOS, it’s a lot more limited. Now they’re getting better at this. So I would say like about 75 percent of the features you can access with a native IOS app you can access with an iOS PWA app, but it’s not everything, local storage, native app, push notifications instead of just web ones. Different APIs, like the payment API, for example, if you wanted to pay an app using…
[00:46:18] SY: Like with Apple Pay or something?
[00:46:19] FC: Exactly. Like all those different APIs that are built into the operating system, I would say not all of them right now are accessible at least for iOS.
[00:46:28] SY: That’s a good point because when I think about apps, in my mind, they live on their own, like they’re on their own little island and they have all the tools that they need and I forget that they’re actually talking to the phone itself a lot, you know, whether it’s notifications or access to my contacts or saving to my photos album, you know, there are so many things that it needs to have access to the actual phone to do a lot of stuff. So, yeah, I get what you’re saying. Each phone has to approve those things in order to get all the functionality out of an app.
[00:47:05] FC: Exactly. So Apple is trying to get better at this and offer everything to the PWA, but they’re not at a hundred percent yet. I don’t think any of the companies are at a hundred percent yet except for Google, which is like almost there. So yeah, that’s also a drawback too if you like use a lot of different things or depend on a lot of that. It might not be the best option yet until they get to that point where all the things that a native app has access to, a PWA has access to as well.
[00:47:41] SY: You mentioned earlier that the PWA topic may not be something that new newbies want to learn at that stage. It might be a little bit more intermediate. And even when you came across it the first time, you’re kind of like, “Okay, whatever. You know I got other things to worry about.” Do you have a recommendation on when might be a good time to look into this topic and maybe build your own PWA?
[00:48:09] FC: I would say when you’re first building out your own personal website because I feel like that’s a great sort of beginner project for anyone trying to get into web development. That would be a great time to just open up Chrome DevTools and run Lighthouse, see what happens, you’re going to get your score for performance, for accessibility, for a search engine optimization, and then you’re also going to get your score for PWA, and you can see right from there that you may not even be missing as much because for the most part a lot of websites do have HTTPS. You might have already some of the things that are required for the head because some of them are actually like default stuff that are required like the viewport tag, for example. You might have some of that. And so the only things that are missing now are the service worker and the manifest.JSON. Then at that point, I would say like maybe not everyone gets to that point because you have to be more familiar with like build systems and JavaScript too. I think I would say though just trying it out and seeing almost how close you might be would be a great first step and you can do that with a number of different auditing tools, not just Lighthouse. You can just like actually do it online too and see kind of where you are at with your personal website.
[00:49:31] SY: Yeah, I like that. And I love the personal website as a very safe playground to try a bunch of things and especially Chrome has a lot of tools built in for you to get started, it seems it’s like a really great way to get started. If I wanted to learn more about Progressive Web Apps and just have a better feel for how they work and how I can get started and get a little more comfortable with the technical aspects of building one, where might I go? Do you have any recommendations on how people can learn more about it?
[00:50:03] FC: So off the top my head, Microsoft and Google both have really good standalone documentation sites for Progressive Web Apps. They have a lot of like actually hands-on tutorials where you can open them up in Glitch and that’s very beginner friendly.
[00:50:21] SY: Very cool. So now let’s do some fill in the blanks. Are you ready?
[00:50:25] FC: Uh-hmm.
[00:50:25] SY: Number one, worst advice I’ve ever received is?
[00:50:29] FC: If I work hard and learn all the right skills I will get the job that I want.
[00:50:35] SY: Oh, interesting, and that’s some pretty common advice too. I feel like everyone says that, right? Why was this bad advice? Tell me.
[00:50:42] FC: So this is something my parents, I think it’s partially because they’re immigrants, they both came here when they were really young, they both worked extremely hard to provide for me and my siblings. So I think they’ve always had this mentality that like if we work hard and we learn what we need to learn we’re going to get the job that we want, but I don’t think that’s really the case, especially in the tech industry. We’ve seen there are some issues with discrimination and racism and I’ve experienced that firsthand even though the recruiter might have told me, “Hey, we don’t have any feedback for you.” And I felt like I aced the interview process. And so there’s that one specific time where I felt like I did everything I could to succeed but then I found out that the other interviewee knew the manager. And so I was like, “Oh, okay.” So that’s a little bit of nepotism there and you can’t do anything around that. It’s like who you know at that point. So that’s like it’s a very common piece of advice like who you know might matter more than what you know. And so I think I knew that early on, but it’s just something I wanted to just iterate again.
[00:51:55] SY: Yeah. It’s one of those things where it’s not that you shouldn’t work hard because if you don’t well, then you have like no chance, but it’s good to know that it’s not the only thing and a lot of times for better or worse other factors weigh more than maybe they should. So yeah. Number two, my first coding project was about?
[00:52:19] FC: So even though I would say probably the first one was my personal website, I would also argue I think the most legitimate one I worked on for the first time was one that I worked on actually at my coding boot camp. We were tasked with creating this e-commerce store and my team made it about robots, like selling robots, like we were pretending it was the future. There was so much work done into that and I was working for the first time with like a pretty large team of people and I feel like that’s really when like, “Oh, okay, this is what it’s really like to work on a big legitimate project.”
[00:52:57] SY: Number three, one thing I wish I knew when I first started to code is?
[00:53:00] FC: I wish I had met people earlier on. I just like kind of learned to code online for a good year and a half before I went to any meetups or anything like a social gathering for people who are in the same boat as me because I didn’t know anyone that was learning to code. Even in high school like, “What?” Like people just weren’t interested in that. And so I really didn’t like meet other developers really until like a year and a half in and at that point I was just doing everything online. It would have definitely accelerated things if I had just gone to like a meet up or found a group of people who I could share things with and like ask things, being around people who are way more advanced than I am so that I could learn faster.
[00:53:51] SY: How do you think it would have accelerated things?
[00:53:55] FC: So one of the first thing like perceptions or stereotypes, I guess, that I realized early on which was not real is that developers are just super smart.
[00:54:08] SY: We’re not.
[00:54:10] FC: Or just like geniuses or whatever, not at all, like of course, but that was the perception I had like for a good year and a half because I didn’t meet any developers. So yeah, they were so welcoming, down to earth, they were like relatable. They weren’t socially awkward or whatever perceptions people have of developers like from the ’90s or what have you. It was just not the case. So could have learned things faster.
[00:54:38] SY: Yeah. I love meeting with developers and when they don’t know things it’s one of my favorite things. I’m like, “Yes! It’s not just me. I’m not the only one who doesn’t know things. This is great.” So when you say that it was about a year, a year and a half before you actually collaborated with people, does that include online collaboration, like you weren’t working with folks just virtually either?
[00:55:02] FC: So I was only taking online courses through platforms like Codecademy, Code School, Treehouse, and I wasn’t really tapping into that like I guess social aspect and I also, I don’t know, personally find it a little hard to get connected to people online through those kinds of platforms. I think that’s something I could have taken advantage of, but I don’t think the platform was really meant for that. I think when I started like learning about meetup groups, that’s when I felt like there was this more intimate connection that I could take advantage of where I felt like almost, yeah, like a personal intimate connection with people who were in the same boat as me or who were way more advanced than me and could teach me and sort of accelerate my learning path.
[00:55:46] SY: Yeah. Yeah. Yeah. That makes a lot of sense. Well, I’m glad that you got out the house and you went to some meetups and you found some people and the acceleration began. That’s wonderful.
[00:55:57] FC: Indeed.
[00:55:58] SY: Well, thank you so much, Frances, for sharing all your knowledge about Progressive Web Apps and telling us about your story. You want to say goodbye?
[00:56:05] FC: Yeah. Thanks, Saron. I really appreciate it. This was a super fun interview. I really hope that listeners sort of remember that your experience is not like everybody else’s and it’s very unique to who you are and where you grew up. Part of the reason why I love the web is because it’s one of the most successful platforms and I think PWAs are just trying to make the web even more accessible. So cheers.
[00:56:31] SY: Absolutely. Cheers indeed. And that’s the end of the episode. Let me know what you think. Tweet me at CodeNewbies or send me an email, hello@codenewbie.org. For more info on the podcast, check out www.codenewbie.org/podcast and join us for our weekly Twitter chats. We’ve got our Wednesday chats at 9 P.M. Eastern Time and our weekly coding check-in every Sunday at 2 P.M. Eastern Time. Thanks for listening. See you next week.
Copyright © Dev Community Inc.