Building and Distributing PWAs: Tools, Techniques, and Insights - JSJ 638
In today's episode, they delve into the fascinating world of mobile web development with our esteemed guest, Maximiliano Firtman, a seasoned web developer from Buenos Aires, Argentina, who has over two decades of experience.
Hosted by:
Steve Edwards
Steve Edwards
Special Guests:
Maximiliano Firtman
Maximiliano Firtman
Show Notes
In today's episode, they delve into the fascinating world of mobile web development with our esteemed guest, Maximiliano Firtman, a seasoned web developer from Buenos Aires, Argentina, who has over two decades of experience.
Join them as Maximiliano takes you on a journey through the evolution of web and mobile development, starting from the early days of pure HTML and classic ASP, progressing through the milestones of Perl, PHP, and eventually into the realm of mobile technologies. He provides an insightful look at how mobile development has transitioned from early platforms like WML and BlackBerry to the modern era of Progressive Web Apps (PWAs).
Together with Steve, they unpack the benefits and challenges of bringing the open web into the mobile space, discuss the impact of mobile performance on user experience, and explore various tools and best practices for developing efficient, fast-loading PWAs. From understanding the role of service workers and web manifests to exploring innovative APIs and caching methods, this episode is packed with invaluable knowledge for any developer aiming to enhance their mobile web development skills.
Whether you're interested in optimizing web performance, getting hands-on with PWAs, or curious about the future of mobile app distribution, this episode has something for everyone. Tune in now to uncover actionable insights and expert advice on staying ahead in the ever-evolving landscape of mobile web development.
Socials
Picks
Transcript
Steve Edwards [00:00:06]:
Hello, everybody, and welcome to this episode of JavaScript Jabber. My name is Steve Edwards coming from a very frigid Portland, Oregon. And with me today, I have Maximiliano. I guess you go by Max. Right? Yeah. First line. First line. First line.
Steve Edwards [00:00:22]:
He's coming to us from Buenos Aires, Argentina. So Max, why don't you tell us a little bit about yourself and your history and what you do?
Maximiliano Firtman [00:00:30]:
Yeah. Sure. Well, thank you for the invitation. So, yeah, I can go by Max. I'm a mobile web developer. That's how I define myself today. I've been doing web development for 20 something years, before. Then I started doing mobile around 2, 001.
Maximiliano Firtman [00:00:45]:
So before the iPhone, before the Android. In in the middle, I've been doing lots of, workshops, trainings. I offer a couple of books, mostly on mobile and web, both technologies. These days, I'm more focused on PWAs, progressive web apps, as well as web performance.
Steve Edwards [00:01:03]:
Okay. So let's go back a little bit. You said you've been doing this for about 24 years. So if you're like me, that means you started doing web development when the first tools you're either handwriting HTML and CSS, or maybe you were using tools like Microsoft FrontPage Mhmm. Or Dreamweaver. What were you using when you started out? So when I
Maximiliano Firtman [00:01:23]:
started, I was using edit from MS DOS. K? That was my first website. Windows 3 dot 1, I think. I, didn't have Windows 95 yet. So then, yes, I moved into front page, but my first websites were pure HTML. There were no CSS at the time. And, yeah, then I moved into front page 98, I think. And then I was a Green River user for a couple of years, before going back to a simple editor.
Steve Edwards [00:01:50]:
So what was your first scripting language?
Maximiliano Firtman [00:01:52]:
Was it ASP? Yeah. It was ASP, the the classic ASP before PHP. But, yeah, ASP, I think I did something on Perl before that, but, most of the time was ASP.
Steve Edwards [00:02:03]:
ASP. Yeah. I started
Maximiliano Firtman [00:02:04]:
I think about 98, probably.
Steve Edwards [00:02:07]:
Yeah. Where I started was 98 with FrontPage, and I I went down the PHP route on MySQL. And I can remember doing my first website in straight HTML just using a JavaScript goodies or HTML goodies
Maximiliano Firtman [00:02:21]:
Mhmm.
Steve Edwards [00:02:21]:
And using the the web space provided by my hosting provider, which was AT and T Broadband at the times.
Maximiliano Firtman [00:02:28]:
My first 2 websites were hosted in GeoCities.
Steve Edwards [00:02:31]:
Oh, there you go. That's old school for those of us who remember GeoCities. Okay. So you started doing web development, and then when did you start doing it, say, professionally? Or
Maximiliano Firtman [00:02:42]:
I think it it was immediately because I started doing, HTML. Before that, I was doing some clipper apps, like some software for MS DOS. But I started professionally doing web pretty, fast. I think it was my 3rd website was the first 1 I started to receive some money from it. So it's probably 1997 or 96. Something like that. But, yeah, here I am still working on the same HTML language.
Steve Edwards [00:03:09]:
Exactly. I can remember when the Internet first started coming out, like, 92, 93, I think. I remember my using my friend's dial up connection taking Mhmm. Let's download a photo and he's yelling at me because I'm using up all his hours and so you started getting into mobile. So I remember the first iPhone coming out around 2, 008, somewhere around there, if I remember right.
Maximiliano Firtman [00:03:30]:
Because I
Steve Edwards [00:03:30]:
just remember where
Maximiliano Firtman [00:03:31]:
It was the 707 was the first 1. I had started 6 years before that. So I started with WML. So it was, and WML and WML script. So there were 4 websites for for WAP patients. Then I moved into to Java, micro edition. Then I did BlackBerry, Symbian, and many other platforms before the iPhone and Android. But, yeah, iPhone started in 2007, and then we started seeing Android in the market as well.
Steve Edwards [00:04:02]:
Right. Okay. So mobile development. So, so what's been what have you worked on over the years with the mobile development? Were you just basically doing websites that you could see on a phone? And what was the progression from doing that into doing mobile specific apps like we see today?
Maximiliano Firtman [00:04:18]:
Mhmm. I like to see that I always try to offer services or products over mobile. And then the technology that I was using, might be different. So sometimes it was a website or or or web web based technology. Sometimes it was native. So I've been working for probably 15 SDKs, for doing native as well. But I always try to bring the web into the mobile space. So I always like the idea of, of the web, the open web, and bringing that into the the mobile space.
Maximiliano Firtman [00:04:49]:
So, yeah, I did PhoneGap. Before that, I did, some other web solutions available for some platforms like BlackBerry. These days, it's mostly about PWAs or or progressive web apps, but I'm also doing workshops and and delivering trainings on native television. Next week, I'm traveling to the Bay Area to to deliver a training for a company, and it will be, Swift and Objective c. So I'm also a native developer, but I part of my heart is with the web. So I always try to, to bring the web, into the mobile
Steve Edwards [00:05:22]:
space. Okay. Yeah. So going back a little bit, I can, I can recall I was doing a Drupal development for for a number of years as people have heard me mention? And when I first started getting to mobile development or when sites that I was working on needed to do that, the way we did it was separate themes. So you had 1 for for desktop, and then you'd create a whole separate theme for mobile that was designed differently and so on. So you're basically maintaining 2 things for 2 different presentations for the same content. And then you started getting things like Bootstrap. I believe that was what the first sort of framework that came out that was it was initially Twitter Bootstrap that was designed to accommodate for you whether you're on a desktop and in a mobile.
Steve Edwards [00:06:02]:
Is that, your recollection in terms of the progression?
Maximiliano Firtman [00:06:05]:
So, yeah, I have I have other other other things before that. So I I think if you remember, the first the first thing was was a mobile version of the website that was completely in a different language. That was WML. After that, we had the first iPhone. With the first iPhone, we started to support the desktop web on mobile. So it was the first time you can actually render a desktop website on a mobile device, and then we had the pinch gesture to zoom in. Then we moved into this idea that, yeah, maybe we need to do something special. And we have the most usually m.
Maximiliano Firtman [00:06:39]:
So m. Cnn.com, like a separate HTML version. And then responsive web design appear. That's what you are paying. So the idea that 1 code can serve different platforms. The problem was that we didn't realize that responsive web design had a very high cost in web performance for mobile devices. So then that's why after a while, we started to see different approaches, not just responsible design.
Steve Edwards [00:07:07]:
Okay. So the cost was in what? The extra Java JavaScript or the extra code that was needed to handle the responsive changes?
Maximiliano Firtman [00:07:14]:
Yeah. It's it's JavaScript, but it's also CSS and resources. So just to give you a unknown idea. But if you have different CSS files with even with a media query, the browser needs to download all the CSS files even if the media query is false. Regarding web performance, the browser will not render any pixel on the screen, at least at the time, if all the CSS was not downloaded and parsed. So talking about mobile phones and cellular networks and probably slow 3 gs networks at the time, that was a problem because then the mobile phone needed to download and parse a lot to CSS that we'll never use, and that lead to some performance issues on on mobile devices and and conversion problems. That's why a lot of big companies have to move back to the m dot version at the time because they were having money problems. So they were having less users, less visits because basically people were not waiting for the page load.
Steve Edwards [00:08:15]:
I mean, that's still a problem. Anytime I hear a discussion about developing for mobile and performance, you mean, places like maybe if I'm sitting here, you know, my desktop with my powerful Imac and, you know, nice speeds and something's gonna be pretty quick for me or on, you know, on a phone, on a new Android or Samsung or iPhone or whatever. But in a lot of other parts of the world, you know, maybe you have older phones and you've got slower downloads, and and so it's always an issue of of dealing with performance if you want your customers to be able to see see your site. So
Maximiliano Firtman [00:08:46]:
there are a couple of, views on on on on this, this problem on the network. Let me let me tell you this first. Let's say that everyone is in 4 g. Let's say that. Of course, it's not true, but let's say that everyone is in 4 gs LTE. The problem with that is that we are thinking about the bandwidth. And, yeah, 4 gs is better than 3 gs and 2 gs. But in terms of latency, it's better, but it's 10 times bigger than the latency that we have at home on a cable or DSL connection.
Maximiliano Firtman [00:09:15]:
And the latency is the time that it takes to get the bytes from the server per TCP packet. So even those 4 gs lucky users that today is around 45% of the users worldwide, Even those users, they have a big latency on every TCP packet. So that's the problem. That's why we still have a performance issue. And let me tell you this. So I'm traveling a lot. I've been to 72 countries so far, 72, and different cities. And sometimes I'm in the middle of Silicon Valley.
Maximiliano Firtman [00:09:47]:
I remember this, having my latest iPhone with a 4 g data plan, and I was being downgraded to 2 g. So this is still something that happens when you get out of the city. Sometimes you get out of main cities and you are in 3 g or 2 g. But even in 4g, k, we need to remember the latency. That's the biggest problems that we have.
Steve Edwards [00:10:11]:
So no matter where you are, you can still have a slow connection even if you're in in an area that has 4 g
Maximiliano Firtman [00:10:17]:
Yeah.
Steve Edwards [00:10:17]:
Just a little bit outside of town. Okay. So the solution is PWAs then, is that sort of seen as as the solution from a performance standpoint for some of these issues? Or I guess, let's go this way. What is a PWA? Can you give me a definition? I've heard various I know there's a various rules that you have to have, but what is it that makes up a PWA, and what is the benefit of a PWA?
Maximiliano Firtman [00:10:41]:
Okay. Let me give you my definition because there is no definition. So that's the first thing. There is no real definition of PWA. But a PWA is just a design pattern, like responsive design. It's a design pattern, a set of best practices, In this case, you create web apps that are installable, and they can work offline and fast on several operating systems. So it's not that they can act as a normal website inside the browser or Chrome inside the browser window. And also they can be installed.
Maximiliano Firtman [00:11:12]:
And after they are installed, they have a first class experience on that OS, meaning the stand alone Windows on Mac OS, Linux, or Windows, or meaning being an APK, an Android package, an Android, or being in a stand alone app on iOS. So that's a PWA. So it's a website using new APIs and new solutions from from browsers, vendors, will let us install the app and make that app available offline. And after it's installed, it looks like any other app on the system. That's roughly the idea. So it's a design pattern.
Steve Edwards [00:11:47]:
So then if it's going to be able to run locally with the idea that it doesn't have an Internet connection in offline mode, so that means that it's generally gonna have some sort of local data storage?
Maximiliano Firtman [00:12:00]:
Yeah. Exactly. For that, we have the service worker. So if you have heard about service worker, it's a JavaScript file that we set in our web app and that service worker will be responsible for caching and serving those files when the user is offline, but also when the user is online. Because maybe we are online, but, yeah, we wanna be fast. We wanna react like a native app. So that's the service worker will serve those files locally. In fact, I usually want like to say that the service worker is like a web server that we are installing in the client written in JavaScript.
Maximiliano Firtman [00:12:36]:
A service worker is mandatory for a PWA. So it's it's the brain. It's the brain of of a PWA.
Steve Edwards [00:12:42]:
Okay. So that's a service workers and it's purely JavaScript then?
Maximiliano Firtman [00:12:46]:
Yes.
Steve Edwards [00:12:46]:
Okay.
Maximiliano Firtman [00:12:47]:
And it's currently compatible with all the browser. It's available. That API is available on on the latest version of every major browser, Safari, Edge, Chrome, and Firefox, and Opera.
Steve Edwards [00:12:59]:
Okay. So it's in the browser, but if you're running okay. Now I'm confused. So if it's a browser standard, but if you're running natively somewhere, then you don't have a browser.
Maximiliano Firtman [00:13:10]:
The browser is always there even if you don't see the browser. So on a PWA on a PWA, when even when an APK is installed APK is the Android package on Android. So when you install a PWA on Android, you actually get an APK cache. But inside that native package, the only thing that is a store is a URL. And Chrome or the browser you're using is the 1 that is going to render your app without the browser UI. So in full screen mode or a standalone mode, but this is still the browser.
Steve Edwards [00:13:41]:
Okay. So your your app is being rendered. So is the rendering handled by the native libraries or the native toolkits for, you know, rendering a toolbar or a window, or that's still all the browser? That's why I'm
Maximiliano Firtman [00:13:55]:
No. It's it's all the browser. It's not like React Native or Native script. In those cases, you you use JavaScript, but then the will render on the screen native components from the from the SDKs, from iOS or Android. A PWA will use Shaft HTML and CSS to render the content on the screen or SVG or or web web content in general. You can use WebAssembly if you want, but you cannot access native API. So if you want to access the file system, for example, you need to wait for the browser to have support for that API.
Steve Edwards [00:14:31]:
Oh, okay. I see. So it's basically you are using the browser in both places whether you're using it on the browser or on the phone, the browser's running. Okay. That makes a little more sense. So are there any other additional pieces of code or files that you have to have for POWA other than than your service worker?
Maximiliano Firtman [00:14:50]:
Yeah. You need at least 1 more 1 more file. It's, known as the web app manifest. It's just a JSON file that you link in into your HTML document. The JSON file will have the metadata for the OS, for example, that includes the app name, the icons, and other metadata that is useful for that OS in particular. It's it's not a standard from the W3C, so it's not OS specific, but the browser will use information from that manifest to actually, integrate with the OS when that app is installed. So let me tell you this. That's not the only way that we have to distribute an app, the browser.
Maximiliano Firtman [00:15:27]:
Today, you can actually distribute officially PWAs on some app stores, for example, Google Play Store. So there is a way that we have, an official way from from from the Chrome team. If you have it, you create what I like to to call ABWA launcher, and that's an native APK that will not contain your JavaScript or HTML files, will not contain the files, which has contained the URL. Then the user will download the app from the store, like any other app from the store, but then Chrome, yeah, invisible Chrome, because the user is not actually seeing any Chrome user interface, Chrome will take care of downloading the resources, updating the resources when when resources are changing, server file, and rendering the app on the screen.
Steve Edwards [00:16:11]:
Okay. So you provide a URL that has all the resources for your particular application that you have to store somewhere, manage somewhere? Yeah. The service worker
Maximiliano Firtman [00:16:19]:
the service worker, that that little piece of JavaScript that we write with with the PWA will be responsible when you open the app for the first time to cache all the resources that are needed, later. That cache is not the normal standard cache that if the user clears the cache will be deleted. So it has a different life cycle.
Steve Edwards [00:16:39]:
Mhmm.
Maximiliano Firtman [00:16:39]:
You can even request, with some JavaScript APIs. You can request a way for the so the browser will not delete those files. So a way to to guarantee that those files will be there no matter what.
Steve Edwards [00:16:52]:
Okay. Yes. It's a separate cache, so it's not gonna get cleaned out automatically and you're gonna lose all of your application. Right? Exactly. So when you're hosting these files, these resources that the service worker is calling, is that something you store, like, in a GitHub repo somewhere?
Maximiliano Firtman [00:17:06]:
It's just HTTP. So wherever wherever you wanna score. You you just need HTTPS. So Okay. Sounds good. Standard hosting. You can still use FTP servers if you want.
Steve Edwards [00:17:17]:
And Amazon has 3 bucket or Dropbox or whatever.
Maximiliano Firtman [00:17:21]:
Static static assets like like a normal website. So we are not changing the foundations of how the web works. It's just a website that is used in a new API. And when that API is there, then that app can be installed.
Steve Edwards [00:17:35]:
Okay. So if I'm loading a PWA onto my, say, onto my computer, onto my desktop, you said the service workers, you know, work in Safari, Chrome, Firefox, Edge, and so on and so forth. Which browser is it using for doing all the rendering?
Maximiliano Firtman [00:17:50]:
So that's a good question. So the answer is it depends on how are you installing or how or from where are you installing the app. So to install a PWA today, you have a couple of options. Typically, you're installing a PWA from a browser. The browser is going to be the engine. So if you have 2 browsers on Android, for example, Firefox and and Chrome, and you install the same PWA twice, you cannot do that with Chrome. But let's say you can. You will have 2 instances of the same the same PWA using 2 different browsers.
Maximiliano Firtman [00:18:22]:
I mean, it's not common on Android that that will happen anyway. So the answer is that it will use the engine that you used to install the app. Okay. What happens with what what happens with the store if you are installing the app from the App Store, in this case, Google Play Store for Android. Let's talk about Android only for now. So in that case, it will use your default browser. I mean, the browser needs to support the new service for PWS. Chrome is supporting that service, and also Samsung Internet Browser.
Maximiliano Firtman [00:18:49]:
And Firefox is about to to support that pretty soon. So if you are a Firefox user, then you should install apps, PWAs from the store. And by the way, as a user, you don't know if it's a PWA or not. But if you're a Firefox user, then that PWA will use the Firefox engine.
Steve Edwards [00:19:07]:
Okay. So I know yeah. It just depends on however you download it then. So going to this scenario where you said maybe you could have 2 instances of the same PWA on a phone, does that mean they both would have their own local data stores then?
Maximiliano Firtman [00:19:22]:
Well, it depends on the engine. On iOS, for example, each instance will have its own separate storage. So for example, Tinder, Tinder dotcom. I'm not sure if you know that. I haven't used Tinder, but, anyway, you know Tinder. Tinder is PWA.
Steve Edwards [00:19:36]:
Okay. Yes.
Maximiliano Firtman [00:19:36]:
Tinder if you go to Tinder.com, you can actually install it from from your iPhone, Android, or desktop computer. And on iOS so every time you install Tinder, you would have a different instance. And you can have 1 account per icon because each instance we have its own login storage, cookies, index. Ev, and even its own storage for for the files. On Android, let's say if you use Chrome, you won't be able to install more than 1 because Chrome is actually creating an APK, an APK. You want to install another 1. But if you use other browsers, you can actually have more than 1 instance. And in this case, you will use the end shine of each browser, but, of course, it's not shared with the others.
Maximiliano Firtman [00:20:15]:
K? Does it make any sense?
Steve Edwards [00:20:17]:
So, sandboxed is what it is.
Maximiliano Firtman [00:20:19]:
Yeah. Exact exactly. But let me let me add this because that's important. On Android and desktop, Windows, Mac, Linux, and Chrome OS, when you are installing a PWA with Chrome, the storage of that that app is shared with the normal Chrome, which means that if you are already logged in in tinder.com, the website, you are also logged in in tinder.com, the app, because it's it's the same Chrome engine, and it's sharing the storage.
Steve Edwards [00:20:51]:
Okay. Yeah. That makes sense. If I'm writing a PWA, progressive web app, what are the different tools that I can use to do it? For instance, could I use, like, a Vue, Angular, React framework with something like React Native or some of the native scripts? Is it only for, you know, Swift or Objective c or the tools used for Android? What are the different tools that you can use to write PWA?
Maximiliano Firtman [00:21:17]:
Okay. You will definitely use, tool chains from the web space, not from the native space. So no Objective C, no Swift, no React Native. You can use Angular, React, JS, or Vue. In fact, the CLIs from these tools create PWAs for you if you enable, in the case of Angular, it's an schematic. It's like a plug in. So if you enable a PWA plug in, Angular will create a PWA and the service worker for you. And the same, you see if you just create React app to create React apps.
Maximiliano Firtman [00:21:52]:
So it's always on the, on the web space. So this is we're talking about W3C APIs. Everything is done with JavaScript and and web technologies and browser engines. So it's on that side. In the case that you want to publish your PWA in the Google Play Store, to create that launcher, you might wanna use Android Studio. That's the, say, the native SDK for native apps, but also there are some freeware and open source tools on the web that will do that for you. Microsoft has launched PWA Builder, pwabuilder.com, and that website will create that launcher for you. So you don't even need to get into native tools.
Maximiliano Firtman [00:22:34]:
You just use Visual Studio Code or whatever editor you're using. You publish that on any hosting or Cloud based provider, and that's all you need.
Steve Edwards [00:22:45]:
It's pretty transparent to create your your launcher. So you got all these different tools, but it's definitely web based. Okay. Alright. That makes sense. Anything I'm missing in terms of building page viewways?
Maximiliano Firtman [00:22:57]:
I think we've covered the what do you need? So it's a web app and then the service worker, that metadata. We we talked about publishing the PWA, so you install it from the browser. That's I think that's the trickiest part today. So, in terms of how users will know about the installations, how users know about PWAs. Today, if you're using Chrome on desktop, maybe you have seen this, maybe not, but sometimes when you're on a website that is actually a PWA, you will see a little install button that appears in the omnibox. The omnibox is the URL bar. So in the URL bar, an install icon with a plus sign will appear when you are in a PWA. So that's how users will know, oh, this website is a PWA.
Maximiliano Firtman [00:23:42]:
I can actually install it. This is something that is still unknown from a user's point of view, and so not every user knows about this and how are you installing a website. So this is something that is getting better with time with new browsers. Now Now you can actually create your own install button in your own user interface. So you can have a button somewhere in your URL saying, hey, do you want to install the app? Click here, and that will trigger the installation dialogue. This is a tricky part from a marketing point of view because users sometimes don't know about this. Despite that, technologies are pretty mature, so and and this is for for for for basic app. Now you can use web share, Well, you can use web payments, request payment API.
Maximiliano Firtman [00:24:27]:
So all the web APIs available out there are available on on PWAs. So not every app can be a PWA because sometimes you actually need some native SDKs, but a lot of apps can be PWA. So if your app is just consuming web content or web services, which has downloading JSON files from the server and rendering that from the sprint, maybe it's a good candidate for a PWA because it's just a website, basically. So if you need to go native with some hardware access, well then we need to check if the web technologies and web APIs are mature enough for, for that particular project.
Steve Edwards [00:25:05]:
So I wanna come back to the local storage real quick. What are the common tools or is there 1 over the other that are used for your local storage? Is it just like a local storage in a browser type thing? You're talking like, you know, databases that you can like MySQL Lite, for instance, is the 1 that comes to mind, or what are the options for that?
Maximiliano Firtman [00:25:24]:
So for PWA, we are running under the browser umbrella. Right? So that means that we can only use APIs available from the browser. So that means that takes, SQLite or MySQL out of the equation. So what do we have right now? If we have 1 storage known as cache storage, that storage is for the actual files of the app. So the resources of the app, the HTML, the CSS, and JavaScript, and images. On iOS, we have a limit of 15 megabytes. On all the other platforms, there is no limits. So you can actually install as many spaces as you want from the storage.
Maximiliano Firtman [00:26:03]:
Then we have the data storage. So the actual data that the user is, generating or downloading from from web services. In that case, we can use IndexedDB, that is a NoSQL database, well known in the in the web space today, or local storage is for more simple key value storage that is very limited in in space. So we have 1 storage for the actual app and another storage for the data.
Steve Edwards [00:26:30]:
Are the limitations the same for the data storage as for the app storage in terms of 50 megs on iOS?
Maximiliano Firtman [00:26:36]:
It's similar. So, you have another 50 megs on on Index.uv for iOS. In terms of, let's say Android, Chrome based, typically you can request more space with user permission. And right now, it's a percentage of your available space. So if you have a device with no space, no available space in the memory or a computer with no space in the hard drive, maybe the space that you have will be just 2 megs or something like that. If you have enough space, it's pretty unlimited, to be honest, today. It sounds scary that, every website can store, as much as they want, but that's basically how it works today.
Steve Edwards [00:27:19]:
Are you able to access, like, an SD card that's in a mobile device or is it strictly the internal storage that's on the phone itself?
Maximiliano Firtman [00:27:26]:
So today, it's a complete so it's an agnostic API. So you just store somewhere you don't know where. It's up to the browser. So it's a sandbox, so you don't know exactly the real file system. Chrome is working on a new API that is called the native file system API. It's currently in beta, so it's they're testing that, and it would come in the next next 1 or 2 versions of Chrome only on the Chrome side. And with user permission, you can actually access the real file system. So you can actually create a text editor or visual studio code that is basically JavaScript.
Maximiliano Firtman [00:28:01]:
It can be directly a website or a PWA. You don't actually need a a native wrapper with that API. That's coming. It's not exactly today. So the storage that you have available are storage that are agnostic from the real file system. You just have to store somewhere. You have an API, you store, you retrieve, but you don't know exactly from where.
Steve Edwards [00:28:22]:
Which is the point of an API in the first place. Right? You just give it what you need, and it handles everything behind the scenes. So okay.
Maximiliano Firtman [00:28:28]:
Exactly. Yeah.
Steve Edwards [00:28:29]:
Okay. That makes sense. I'm just curious. Since you've been doing this for a while, can you give us some examples of PWAs that you worked on, you know, just in a generic sense in terms of functionalities maybe that are sort of cool or unique?
Maximiliano Firtman [00:28:41]:
Well, in terms of functionality, I've been working on PWAs for games, for apps that are taking QR codes. Apps that are, for example so when you order a pizza or something like that, you know, you have maybe a small pizza place that you have in town, you don't need an native app and hire a Java developer or a Kotlin developer for Android or a Swiss developer on iOS, but you want to have an older app, well, maybe PWA is just web, so it's simple to maintain for for small businesses. That's 1 example. But I've been working for a lot of, con I've been consulting for a lot of big companies doing doing PWAs. Today, there are big names doing PWAs, like Google Maps, Twitter, Tinder, as I mentioned before. A lot of newspapers are also having PWAs. I remember 1 that is in the store. It's 1 800 Flowers in the US.
Maximiliano Firtman [00:29:35]:
Yes. 1800 Flowers. They used to have a native app on the Google Play Store, and then replace that with a React based PWA in the store. So if you go now to the store and download that app, you will actually see a PWA. You don't know that as a user, just an app, but it's the same code base because it's not the same code base. It's actually the same URL that the 1 that when you go to the website. That's a big advantage.
Steve Edwards [00:30:00]:
Oh, yeah. So, right, once used multiple places. I could see yeah. Definitely used. So another way that I know that you can, you know, write web apps and use them on computers or so on is something like Electron. Mhmm. You know, Slack, you know, is the classic example that's written in Electron. Have you ever compared, like, performance or any other characteristics between the 2?
Maximiliano Firtman [00:30:22]:
Well, most of the time I mean, as a general rule, PWAs will run faster. Why? Because you're not actually shipping a Chrome engine. With Electron, you're actually shipping a Chrome engine and also a Node engine. That means that when you have a PWA, you're actually going to use the enshyme that you have installed in your browser. That is being evolved with time. So Chrome, every couple of weeks, you get a new version. So your PWA will always use the the the latest version of the engine. So that's why it's typically faster.
Maximiliano Firtman [00:30:54]:
But compared with Electron, I think Electron might disappear in the future if we have a lot of, new APIs coming to the web. And Chrome is working on that with something known as PreCheck Fugu. PreCheck Fugu, it's the PreCheck word that they're trying to bring all the API from the native world to the web, so then we don't need Electron or PhoneGap anymore. We don't need to wrap web into a native container that might have security issues because we are not in control of the engine. Today, electronics are still needed for some reasons because sometimes you need to actually execute native code, for example, for accessing the file system. So that's why now they are creating new APIs. But, yeah, that's Chrome. On the iOS worm or Mac worm, things are moving slower.
Maximiliano Firtman [00:31:40]:
So, So, yeah, you can install PWAs, but they're not adding so many APIs. They are usually on Twitter. The the, the web key guys, they tend to be more how how can I say this? It should be more, critical saying, like, we don't wanna push too hard on APIs. We wanna be more private. We wanna we wanna be more, let's say, slower. They wanna be slower in terms of implementation of APIs. So we have, like, kind of a race here between Chrome and Safari. Chrome is trying to push the limits of the browser a lot, and Apple is trying to play safe.
Maximiliano Firtman [00:32:17]:
So at at that point, it depends on the platform that, you wanna target.
Steve Edwards [00:32:23]:
Okay. Yeah. That makes sense. Pretty consistent with what we tend to see from Apple anyway. Okay. Anything else you wanna cover that I have failed to bring
Maximiliano Firtman [00:32:32]:
up? No. I think the best way to try PWAs is to test 1. Just go with a browser to 1 of the PWAs. There is a place, Appscope, just Google Appscope, a guide of PWAs available. So you just go and install 1 so you can actually experience that a lot. That's the best way to experience a PWA. Just use your iPhone, add to the home screen a PWA, use your Android or and try 1 so you can share experience, how it looks like and what you can do with it.
Steve Edwards [00:33:01]:
Oh, okay. So, yeah, here's AppScope, a ppsc0.pe.
Maximiliano Firtman [00:33:05]:
Yeah. Okay. The URL, it's actually Appscope. So they're using dotpe as their domain.
Steve Edwards [00:33:10]:
Right. Exactly. Okay. That's brilliant. Okay. So noticing here that you've got quite a number of books, especially, it looks like you write a lot for O'Reilly. Yeah. I'm using the high performance mobile web, programming for the mobile web, web mobile.
Steve Edwards [00:33:25]:
So which one's your most current?
Maximiliano Firtman [00:33:27]:
The last 1 is is free. So it's a dollar for free on my website. It's, hacking web performance. And the previous 1 is high performance mobile web. So my books the latest books were more targeted on on web performance for mobile
Steve Edwards [00:33:41]:
devices. The hacking mobile web. Okay. Yeah. So your site is firt.mobi. That's
Maximiliano Firtman [00:33:47]:
correct. Yep.
Steve Edwards [00:33:49]:
Okay. Cool. So we'll put that in the show notes for sure. And then it looks like they could see links to all your articles and books and other stuff. Well, great. Thanks. I've learned a lot. Okay.
Steve Edwards [00:33:59]:
Great. Great. And mobile apps. I've been pretty desktop focused, so it's good to learn more about the mobile apps. So now let's go into pics. Are you aware of pics or what we do for pics? Just anything that you wanna talk about that you think is cool, whether it's technical or nontechnical, a movie, a book, a tool, something that's been really useful or interesting to you lately.
Maximiliano Firtman [00:34:21]:
Let me think about that. Why you think I'm gonna
Steve Edwards [00:34:23]:
go ahead and do mine real quick. My pick for today is an oldie but a goodie, and it's called the club. And the club is basically a thing you can put on your car steering wheel, sort of deter fees from it. And it's a particular interest to me because I bought my kids a car a couple years ago, and it's a 2000 Honda Civic. And here in the US, those cars made around then were very easy to steal because of the keys and are just really poor security. It's easy to break in. So last December, my daughter had it stolen from work, and we found it a couple days later. Some guy was just living in it.
Steve Edwards [00:35:00]:
And then last week, my son's been driving it, and it got stolen from in front of our house in the middle of the night. And we just found it last night and got it back. In both cases, they forgot to put the club on. Every other day, we've had the club on there, and people say, oh, it really doesn't work. Professional thieves can get past it. And that may be true. But for the casual thief, it's gonna stop them. But in both cases, the 1 times that they didn't put the club on is when it got stolen.
Steve Edwards [00:35:25]:
When a club's on there, it never have any problems even for a car like that. So there's a few different versions of the club out now. It's, you can get red and yellow versions and 2 hooks and 1 hook and so on. But my son, in this case, he put it on but didn't lock it, which really didn't make it very useful. So I got him a club now that auto locks. So when you put it on the steering wheel, on your spreader part, it automatically locks and you don't and then you have to use the key to unlock it. So that's my vote for the club. It's certainly, never never had a car stolen when the club has been on it and properly locked.
Steve Edwards [00:35:57]:
So, Max, what's your pick? You got any? I think I will go back
Maximiliano Firtman [00:36:00]:
to the PWA. So I will I will, not talk about cars. I'll go back to PWA. So something I've been trying, going back to the PWA thing, it's a new tool from Google known as Yamma, so LLAMA. It's a CLI that they, some GitHub, is open source, that will create a PWA launcher for you. So you have a PWA or a website, and that CLI will create an Android project that will actually be ready for the Play Store. So you don't need to know anything about Android development. It's like a shortcut to your PWA.
Maximiliano Firtman [00:36:35]:
It's only 1 month old or something like that.
Steve Edwards [00:36:39]:
Yeah. I'm looking at Skye. It's on NPM.
Maximiliano Firtman [00:36:41]:
Yes. It's on NPM.
Steve Edwards [00:36:43]:
Chaos Llama.
Maximiliano Firtman [00:36:44]:
Oh, maybe it's not that 1.
Steve Edwards [00:36:45]:
0, no. No. No. It's not. That's for AWS. Let me find another 1 here. Okay. We'll find it and put it in the show notes.
Steve Edwards [00:36:50]:
But awesome. So is that your only pick?
Maximiliano Firtman [00:36:53]:
It's Yamapak. Yeah. Yamapak. That's it. And I'm pasting the URL right now.
Steve Edwards [00:36:57]:
Okay. Awesome. We will put that in the show notes. Alright. Well, thank you very much, Max. Very good to hear from you from down in Buenos Aires. Oh, where can people get a hold of you if they want a hold of you? Whether it's Twitter or GitHub or what's the basic plus that get a hold of you?
Maximiliano Firtman [00:37:11]:
Typically, Twitter. I'm f filth, FIRT, on Twitter. So 4 letters. That's a simple username. The same as my this was Ferdman is my my last name. So it's the first 4 letters of my last name. FIRTFIRT
Steve Edwards [00:37:24]:
on Twitter. Alright. All right. Well, thank you, Max. And we will see you around the Internet.
Maximiliano Firtman [00:37:30]:
Yeah. Sure.
Steve Edwards [00:37:31]:
Thank you, Steve. Alright.
Maximiliano Firtman [00:37:32]:
Bye bye.
Hello, everybody, and welcome to this episode of JavaScript Jabber. My name is Steve Edwards coming from a very frigid Portland, Oregon. And with me today, I have Maximiliano. I guess you go by Max. Right? Yeah. First line. First line. First line.
Steve Edwards [00:00:22]:
He's coming to us from Buenos Aires, Argentina. So Max, why don't you tell us a little bit about yourself and your history and what you do?
Maximiliano Firtman [00:00:30]:
Yeah. Sure. Well, thank you for the invitation. So, yeah, I can go by Max. I'm a mobile web developer. That's how I define myself today. I've been doing web development for 20 something years, before. Then I started doing mobile around 2, 001.
Maximiliano Firtman [00:00:45]:
So before the iPhone, before the Android. In in the middle, I've been doing lots of, workshops, trainings. I offer a couple of books, mostly on mobile and web, both technologies. These days, I'm more focused on PWAs, progressive web apps, as well as web performance.
Steve Edwards [00:01:03]:
Okay. So let's go back a little bit. You said you've been doing this for about 24 years. So if you're like me, that means you started doing web development when the first tools you're either handwriting HTML and CSS, or maybe you were using tools like Microsoft FrontPage Mhmm. Or Dreamweaver. What were you using when you started out? So when I
Maximiliano Firtman [00:01:23]:
started, I was using edit from MS DOS. K? That was my first website. Windows 3 dot 1, I think. I, didn't have Windows 95 yet. So then, yes, I moved into front page, but my first websites were pure HTML. There were no CSS at the time. And, yeah, then I moved into front page 98, I think. And then I was a Green River user for a couple of years, before going back to a simple editor.
Steve Edwards [00:01:50]:
So what was your first scripting language?
Maximiliano Firtman [00:01:52]:
Was it ASP? Yeah. It was ASP, the the classic ASP before PHP. But, yeah, ASP, I think I did something on Perl before that, but, most of the time was ASP.
Steve Edwards [00:02:03]:
ASP. Yeah. I started
Maximiliano Firtman [00:02:04]:
I think about 98, probably.
Steve Edwards [00:02:07]:
Yeah. Where I started was 98 with FrontPage, and I I went down the PHP route on MySQL. And I can remember doing my first website in straight HTML just using a JavaScript goodies or HTML goodies
Maximiliano Firtman [00:02:21]:
Mhmm.
Steve Edwards [00:02:21]:
And using the the web space provided by my hosting provider, which was AT and T Broadband at the times.
Maximiliano Firtman [00:02:28]:
My first 2 websites were hosted in GeoCities.
Steve Edwards [00:02:31]:
Oh, there you go. That's old school for those of us who remember GeoCities. Okay. So you started doing web development, and then when did you start doing it, say, professionally? Or
Maximiliano Firtman [00:02:42]:
I think it it was immediately because I started doing, HTML. Before that, I was doing some clipper apps, like some software for MS DOS. But I started professionally doing web pretty, fast. I think it was my 3rd website was the first 1 I started to receive some money from it. So it's probably 1997 or 96. Something like that. But, yeah, here I am still working on the same HTML language.
Steve Edwards [00:03:09]:
Exactly. I can remember when the Internet first started coming out, like, 92, 93, I think. I remember my using my friend's dial up connection taking Mhmm. Let's download a photo and he's yelling at me because I'm using up all his hours and so you started getting into mobile. So I remember the first iPhone coming out around 2, 008, somewhere around there, if I remember right.
Maximiliano Firtman [00:03:30]:
Because I
Steve Edwards [00:03:30]:
just remember where
Maximiliano Firtman [00:03:31]:
It was the 707 was the first 1. I had started 6 years before that. So I started with WML. So it was, and WML and WML script. So there were 4 websites for for WAP patients. Then I moved into to Java, micro edition. Then I did BlackBerry, Symbian, and many other platforms before the iPhone and Android. But, yeah, iPhone started in 2007, and then we started seeing Android in the market as well.
Steve Edwards [00:04:02]:
Right. Okay. So mobile development. So, so what's been what have you worked on over the years with the mobile development? Were you just basically doing websites that you could see on a phone? And what was the progression from doing that into doing mobile specific apps like we see today?
Maximiliano Firtman [00:04:18]:
Mhmm. I like to see that I always try to offer services or products over mobile. And then the technology that I was using, might be different. So sometimes it was a website or or or web web based technology. Sometimes it was native. So I've been working for probably 15 SDKs, for doing native as well. But I always try to bring the web into the mobile space. So I always like the idea of, of the web, the open web, and bringing that into the the mobile space.
Maximiliano Firtman [00:04:49]:
So, yeah, I did PhoneGap. Before that, I did, some other web solutions available for some platforms like BlackBerry. These days, it's mostly about PWAs or or progressive web apps, but I'm also doing workshops and and delivering trainings on native television. Next week, I'm traveling to the Bay Area to to deliver a training for a company, and it will be, Swift and Objective c. So I'm also a native developer, but I part of my heart is with the web. So I always try to, to bring the web, into the mobile
Steve Edwards [00:05:22]:
space. Okay. Yeah. So going back a little bit, I can, I can recall I was doing a Drupal development for for a number of years as people have heard me mention? And when I first started getting to mobile development or when sites that I was working on needed to do that, the way we did it was separate themes. So you had 1 for for desktop, and then you'd create a whole separate theme for mobile that was designed differently and so on. So you're basically maintaining 2 things for 2 different presentations for the same content. And then you started getting things like Bootstrap. I believe that was what the first sort of framework that came out that was it was initially Twitter Bootstrap that was designed to accommodate for you whether you're on a desktop and in a mobile.
Steve Edwards [00:06:02]:
Is that, your recollection in terms of the progression?
Maximiliano Firtman [00:06:05]:
So, yeah, I have I have other other other things before that. So I I think if you remember, the first the first thing was was a mobile version of the website that was completely in a different language. That was WML. After that, we had the first iPhone. With the first iPhone, we started to support the desktop web on mobile. So it was the first time you can actually render a desktop website on a mobile device, and then we had the pinch gesture to zoom in. Then we moved into this idea that, yeah, maybe we need to do something special. And we have the most usually m.
Maximiliano Firtman [00:06:39]:
So m. Cnn.com, like a separate HTML version. And then responsive web design appear. That's what you are paying. So the idea that 1 code can serve different platforms. The problem was that we didn't realize that responsive web design had a very high cost in web performance for mobile devices. So then that's why after a while, we started to see different approaches, not just responsible design.
Steve Edwards [00:07:07]:
Okay. So the cost was in what? The extra Java JavaScript or the extra code that was needed to handle the responsive changes?
Maximiliano Firtman [00:07:14]:
Yeah. It's it's JavaScript, but it's also CSS and resources. So just to give you a unknown idea. But if you have different CSS files with even with a media query, the browser needs to download all the CSS files even if the media query is false. Regarding web performance, the browser will not render any pixel on the screen, at least at the time, if all the CSS was not downloaded and parsed. So talking about mobile phones and cellular networks and probably slow 3 gs networks at the time, that was a problem because then the mobile phone needed to download and parse a lot to CSS that we'll never use, and that lead to some performance issues on on mobile devices and and conversion problems. That's why a lot of big companies have to move back to the m dot version at the time because they were having money problems. So they were having less users, less visits because basically people were not waiting for the page load.
Steve Edwards [00:08:15]:
I mean, that's still a problem. Anytime I hear a discussion about developing for mobile and performance, you mean, places like maybe if I'm sitting here, you know, my desktop with my powerful Imac and, you know, nice speeds and something's gonna be pretty quick for me or on, you know, on a phone, on a new Android or Samsung or iPhone or whatever. But in a lot of other parts of the world, you know, maybe you have older phones and you've got slower downloads, and and so it's always an issue of of dealing with performance if you want your customers to be able to see see your site. So
Maximiliano Firtman [00:08:46]:
there are a couple of, views on on on on this, this problem on the network. Let me let me tell you this first. Let's say that everyone is in 4 g. Let's say that. Of course, it's not true, but let's say that everyone is in 4 gs LTE. The problem with that is that we are thinking about the bandwidth. And, yeah, 4 gs is better than 3 gs and 2 gs. But in terms of latency, it's better, but it's 10 times bigger than the latency that we have at home on a cable or DSL connection.
Maximiliano Firtman [00:09:15]:
And the latency is the time that it takes to get the bytes from the server per TCP packet. So even those 4 gs lucky users that today is around 45% of the users worldwide, Even those users, they have a big latency on every TCP packet. So that's the problem. That's why we still have a performance issue. And let me tell you this. So I'm traveling a lot. I've been to 72 countries so far, 72, and different cities. And sometimes I'm in the middle of Silicon Valley.
Maximiliano Firtman [00:09:47]:
I remember this, having my latest iPhone with a 4 g data plan, and I was being downgraded to 2 g. So this is still something that happens when you get out of the city. Sometimes you get out of main cities and you are in 3 g or 2 g. But even in 4g, k, we need to remember the latency. That's the biggest problems that we have.
Steve Edwards [00:10:11]:
So no matter where you are, you can still have a slow connection even if you're in in an area that has 4 g
Maximiliano Firtman [00:10:17]:
Yeah.
Steve Edwards [00:10:17]:
Just a little bit outside of town. Okay. So the solution is PWAs then, is that sort of seen as as the solution from a performance standpoint for some of these issues? Or I guess, let's go this way. What is a PWA? Can you give me a definition? I've heard various I know there's a various rules that you have to have, but what is it that makes up a PWA, and what is the benefit of a PWA?
Maximiliano Firtman [00:10:41]:
Okay. Let me give you my definition because there is no definition. So that's the first thing. There is no real definition of PWA. But a PWA is just a design pattern, like responsive design. It's a design pattern, a set of best practices, In this case, you create web apps that are installable, and they can work offline and fast on several operating systems. So it's not that they can act as a normal website inside the browser or Chrome inside the browser window. And also they can be installed.
Maximiliano Firtman [00:11:12]:
And after they are installed, they have a first class experience on that OS, meaning the stand alone Windows on Mac OS, Linux, or Windows, or meaning being an APK, an Android package, an Android, or being in a stand alone app on iOS. So that's a PWA. So it's a website using new APIs and new solutions from from browsers, vendors, will let us install the app and make that app available offline. And after it's installed, it looks like any other app on the system. That's roughly the idea. So it's a design pattern.
Steve Edwards [00:11:47]:
So then if it's going to be able to run locally with the idea that it doesn't have an Internet connection in offline mode, so that means that it's generally gonna have some sort of local data storage?
Maximiliano Firtman [00:12:00]:
Yeah. Exactly. For that, we have the service worker. So if you have heard about service worker, it's a JavaScript file that we set in our web app and that service worker will be responsible for caching and serving those files when the user is offline, but also when the user is online. Because maybe we are online, but, yeah, we wanna be fast. We wanna react like a native app. So that's the service worker will serve those files locally. In fact, I usually want like to say that the service worker is like a web server that we are installing in the client written in JavaScript.
Maximiliano Firtman [00:12:36]:
A service worker is mandatory for a PWA. So it's it's the brain. It's the brain of of a PWA.
Steve Edwards [00:12:42]:
Okay. So that's a service workers and it's purely JavaScript then?
Maximiliano Firtman [00:12:46]:
Yes.
Steve Edwards [00:12:46]:
Okay.
Maximiliano Firtman [00:12:47]:
And it's currently compatible with all the browser. It's available. That API is available on on the latest version of every major browser, Safari, Edge, Chrome, and Firefox, and Opera.
Steve Edwards [00:12:59]:
Okay. So it's in the browser, but if you're running okay. Now I'm confused. So if it's a browser standard, but if you're running natively somewhere, then you don't have a browser.
Maximiliano Firtman [00:13:10]:
The browser is always there even if you don't see the browser. So on a PWA on a PWA, when even when an APK is installed APK is the Android package on Android. So when you install a PWA on Android, you actually get an APK cache. But inside that native package, the only thing that is a store is a URL. And Chrome or the browser you're using is the 1 that is going to render your app without the browser UI. So in full screen mode or a standalone mode, but this is still the browser.
Steve Edwards [00:13:41]:
Okay. So your your app is being rendered. So is the rendering handled by the native libraries or the native toolkits for, you know, rendering a toolbar or a window, or that's still all the browser? That's why I'm
Maximiliano Firtman [00:13:55]:
No. It's it's all the browser. It's not like React Native or Native script. In those cases, you you use JavaScript, but then the will render on the screen native components from the from the SDKs, from iOS or Android. A PWA will use Shaft HTML and CSS to render the content on the screen or SVG or or web web content in general. You can use WebAssembly if you want, but you cannot access native API. So if you want to access the file system, for example, you need to wait for the browser to have support for that API.
Steve Edwards [00:14:31]:
Oh, okay. I see. So it's basically you are using the browser in both places whether you're using it on the browser or on the phone, the browser's running. Okay. That makes a little more sense. So are there any other additional pieces of code or files that you have to have for POWA other than than your service worker?
Maximiliano Firtman [00:14:50]:
Yeah. You need at least 1 more 1 more file. It's, known as the web app manifest. It's just a JSON file that you link in into your HTML document. The JSON file will have the metadata for the OS, for example, that includes the app name, the icons, and other metadata that is useful for that OS in particular. It's it's not a standard from the W3C, so it's not OS specific, but the browser will use information from that manifest to actually, integrate with the OS when that app is installed. So let me tell you this. That's not the only way that we have to distribute an app, the browser.
Maximiliano Firtman [00:15:27]:
Today, you can actually distribute officially PWAs on some app stores, for example, Google Play Store. So there is a way that we have, an official way from from from the Chrome team. If you have it, you create what I like to to call ABWA launcher, and that's an native APK that will not contain your JavaScript or HTML files, will not contain the files, which has contained the URL. Then the user will download the app from the store, like any other app from the store, but then Chrome, yeah, invisible Chrome, because the user is not actually seeing any Chrome user interface, Chrome will take care of downloading the resources, updating the resources when when resources are changing, server file, and rendering the app on the screen.
Steve Edwards [00:16:11]:
Okay. So you provide a URL that has all the resources for your particular application that you have to store somewhere, manage somewhere? Yeah. The service worker
Maximiliano Firtman [00:16:19]:
the service worker, that that little piece of JavaScript that we write with with the PWA will be responsible when you open the app for the first time to cache all the resources that are needed, later. That cache is not the normal standard cache that if the user clears the cache will be deleted. So it has a different life cycle.
Steve Edwards [00:16:39]:
Mhmm.
Maximiliano Firtman [00:16:39]:
You can even request, with some JavaScript APIs. You can request a way for the so the browser will not delete those files. So a way to to guarantee that those files will be there no matter what.
Steve Edwards [00:16:52]:
Okay. Yes. It's a separate cache, so it's not gonna get cleaned out automatically and you're gonna lose all of your application. Right? Exactly. So when you're hosting these files, these resources that the service worker is calling, is that something you store, like, in a GitHub repo somewhere?
Maximiliano Firtman [00:17:06]:
It's just HTTP. So wherever wherever you wanna score. You you just need HTTPS. So Okay. Sounds good. Standard hosting. You can still use FTP servers if you want.
Steve Edwards [00:17:17]:
And Amazon has 3 bucket or Dropbox or whatever.
Maximiliano Firtman [00:17:21]:
Static static assets like like a normal website. So we are not changing the foundations of how the web works. It's just a website that is used in a new API. And when that API is there, then that app can be installed.
Steve Edwards [00:17:35]:
Okay. So if I'm loading a PWA onto my, say, onto my computer, onto my desktop, you said the service workers, you know, work in Safari, Chrome, Firefox, Edge, and so on and so forth. Which browser is it using for doing all the rendering?
Maximiliano Firtman [00:17:50]:
So that's a good question. So the answer is it depends on how are you installing or how or from where are you installing the app. So to install a PWA today, you have a couple of options. Typically, you're installing a PWA from a browser. The browser is going to be the engine. So if you have 2 browsers on Android, for example, Firefox and and Chrome, and you install the same PWA twice, you cannot do that with Chrome. But let's say you can. You will have 2 instances of the same the same PWA using 2 different browsers.
Maximiliano Firtman [00:18:22]:
I mean, it's not common on Android that that will happen anyway. So the answer is that it will use the engine that you used to install the app. Okay. What happens with what what happens with the store if you are installing the app from the App Store, in this case, Google Play Store for Android. Let's talk about Android only for now. So in that case, it will use your default browser. I mean, the browser needs to support the new service for PWS. Chrome is supporting that service, and also Samsung Internet Browser.
Maximiliano Firtman [00:18:49]:
And Firefox is about to to support that pretty soon. So if you are a Firefox user, then you should install apps, PWAs from the store. And by the way, as a user, you don't know if it's a PWA or not. But if you're a Firefox user, then that PWA will use the Firefox engine.
Steve Edwards [00:19:07]:
Okay. So I know yeah. It just depends on however you download it then. So going to this scenario where you said maybe you could have 2 instances of the same PWA on a phone, does that mean they both would have their own local data stores then?
Maximiliano Firtman [00:19:22]:
Well, it depends on the engine. On iOS, for example, each instance will have its own separate storage. So for example, Tinder, Tinder dotcom. I'm not sure if you know that. I haven't used Tinder, but, anyway, you know Tinder. Tinder is PWA.
Steve Edwards [00:19:36]:
Okay. Yes.
Maximiliano Firtman [00:19:36]:
Tinder if you go to Tinder.com, you can actually install it from from your iPhone, Android, or desktop computer. And on iOS so every time you install Tinder, you would have a different instance. And you can have 1 account per icon because each instance we have its own login storage, cookies, index. Ev, and even its own storage for for the files. On Android, let's say if you use Chrome, you won't be able to install more than 1 because Chrome is actually creating an APK, an APK. You want to install another 1. But if you use other browsers, you can actually have more than 1 instance. And in this case, you will use the end shine of each browser, but, of course, it's not shared with the others.
Maximiliano Firtman [00:20:15]:
K? Does it make any sense?
Steve Edwards [00:20:17]:
So, sandboxed is what it is.
Maximiliano Firtman [00:20:19]:
Yeah. Exact exactly. But let me let me add this because that's important. On Android and desktop, Windows, Mac, Linux, and Chrome OS, when you are installing a PWA with Chrome, the storage of that that app is shared with the normal Chrome, which means that if you are already logged in in tinder.com, the website, you are also logged in in tinder.com, the app, because it's it's the same Chrome engine, and it's sharing the storage.
Steve Edwards [00:20:51]:
Okay. Yeah. That makes sense. If I'm writing a PWA, progressive web app, what are the different tools that I can use to do it? For instance, could I use, like, a Vue, Angular, React framework with something like React Native or some of the native scripts? Is it only for, you know, Swift or Objective c or the tools used for Android? What are the different tools that you can use to write PWA?
Maximiliano Firtman [00:21:17]:
Okay. You will definitely use, tool chains from the web space, not from the native space. So no Objective C, no Swift, no React Native. You can use Angular, React, JS, or Vue. In fact, the CLIs from these tools create PWAs for you if you enable, in the case of Angular, it's an schematic. It's like a plug in. So if you enable a PWA plug in, Angular will create a PWA and the service worker for you. And the same, you see if you just create React app to create React apps.
Maximiliano Firtman [00:21:52]:
So it's always on the, on the web space. So this is we're talking about W3C APIs. Everything is done with JavaScript and and web technologies and browser engines. So it's on that side. In the case that you want to publish your PWA in the Google Play Store, to create that launcher, you might wanna use Android Studio. That's the, say, the native SDK for native apps, but also there are some freeware and open source tools on the web that will do that for you. Microsoft has launched PWA Builder, pwabuilder.com, and that website will create that launcher for you. So you don't even need to get into native tools.
Maximiliano Firtman [00:22:34]:
You just use Visual Studio Code or whatever editor you're using. You publish that on any hosting or Cloud based provider, and that's all you need.
Steve Edwards [00:22:45]:
It's pretty transparent to create your your launcher. So you got all these different tools, but it's definitely web based. Okay. Alright. That makes sense. Anything I'm missing in terms of building page viewways?
Maximiliano Firtman [00:22:57]:
I think we've covered the what do you need? So it's a web app and then the service worker, that metadata. We we talked about publishing the PWA, so you install it from the browser. That's I think that's the trickiest part today. So, in terms of how users will know about the installations, how users know about PWAs. Today, if you're using Chrome on desktop, maybe you have seen this, maybe not, but sometimes when you're on a website that is actually a PWA, you will see a little install button that appears in the omnibox. The omnibox is the URL bar. So in the URL bar, an install icon with a plus sign will appear when you are in a PWA. So that's how users will know, oh, this website is a PWA.
Maximiliano Firtman [00:23:42]:
I can actually install it. This is something that is still unknown from a user's point of view, and so not every user knows about this and how are you installing a website. So this is something that is getting better with time with new browsers. Now Now you can actually create your own install button in your own user interface. So you can have a button somewhere in your URL saying, hey, do you want to install the app? Click here, and that will trigger the installation dialogue. This is a tricky part from a marketing point of view because users sometimes don't know about this. Despite that, technologies are pretty mature, so and and this is for for for for basic app. Now you can use web share, Well, you can use web payments, request payment API.
Maximiliano Firtman [00:24:27]:
So all the web APIs available out there are available on on PWAs. So not every app can be a PWA because sometimes you actually need some native SDKs, but a lot of apps can be PWA. So if your app is just consuming web content or web services, which has downloading JSON files from the server and rendering that from the sprint, maybe it's a good candidate for a PWA because it's just a website, basically. So if you need to go native with some hardware access, well then we need to check if the web technologies and web APIs are mature enough for, for that particular project.
Steve Edwards [00:25:05]:
So I wanna come back to the local storage real quick. What are the common tools or is there 1 over the other that are used for your local storage? Is it just like a local storage in a browser type thing? You're talking like, you know, databases that you can like MySQL Lite, for instance, is the 1 that comes to mind, or what are the options for that?
Maximiliano Firtman [00:25:24]:
So for PWA, we are running under the browser umbrella. Right? So that means that we can only use APIs available from the browser. So that means that takes, SQLite or MySQL out of the equation. So what do we have right now? If we have 1 storage known as cache storage, that storage is for the actual files of the app. So the resources of the app, the HTML, the CSS, and JavaScript, and images. On iOS, we have a limit of 15 megabytes. On all the other platforms, there is no limits. So you can actually install as many spaces as you want from the storage.
Maximiliano Firtman [00:26:03]:
Then we have the data storage. So the actual data that the user is, generating or downloading from from web services. In that case, we can use IndexedDB, that is a NoSQL database, well known in the in the web space today, or local storage is for more simple key value storage that is very limited in in space. So we have 1 storage for the actual app and another storage for the data.
Steve Edwards [00:26:30]:
Are the limitations the same for the data storage as for the app storage in terms of 50 megs on iOS?
Maximiliano Firtman [00:26:36]:
It's similar. So, you have another 50 megs on on Index.uv for iOS. In terms of, let's say Android, Chrome based, typically you can request more space with user permission. And right now, it's a percentage of your available space. So if you have a device with no space, no available space in the memory or a computer with no space in the hard drive, maybe the space that you have will be just 2 megs or something like that. If you have enough space, it's pretty unlimited, to be honest, today. It sounds scary that, every website can store, as much as they want, but that's basically how it works today.
Steve Edwards [00:27:19]:
Are you able to access, like, an SD card that's in a mobile device or is it strictly the internal storage that's on the phone itself?
Maximiliano Firtman [00:27:26]:
So today, it's a complete so it's an agnostic API. So you just store somewhere you don't know where. It's up to the browser. So it's a sandbox, so you don't know exactly the real file system. Chrome is working on a new API that is called the native file system API. It's currently in beta, so it's they're testing that, and it would come in the next next 1 or 2 versions of Chrome only on the Chrome side. And with user permission, you can actually access the real file system. So you can actually create a text editor or visual studio code that is basically JavaScript.
Maximiliano Firtman [00:28:01]:
It can be directly a website or a PWA. You don't actually need a a native wrapper with that API. That's coming. It's not exactly today. So the storage that you have available are storage that are agnostic from the real file system. You just have to store somewhere. You have an API, you store, you retrieve, but you don't know exactly from where.
Steve Edwards [00:28:22]:
Which is the point of an API in the first place. Right? You just give it what you need, and it handles everything behind the scenes. So okay.
Maximiliano Firtman [00:28:28]:
Exactly. Yeah.
Steve Edwards [00:28:29]:
Okay. That makes sense. I'm just curious. Since you've been doing this for a while, can you give us some examples of PWAs that you worked on, you know, just in a generic sense in terms of functionalities maybe that are sort of cool or unique?
Maximiliano Firtman [00:28:41]:
Well, in terms of functionality, I've been working on PWAs for games, for apps that are taking QR codes. Apps that are, for example so when you order a pizza or something like that, you know, you have maybe a small pizza place that you have in town, you don't need an native app and hire a Java developer or a Kotlin developer for Android or a Swiss developer on iOS, but you want to have an older app, well, maybe PWA is just web, so it's simple to maintain for for small businesses. That's 1 example. But I've been working for a lot of, con I've been consulting for a lot of big companies doing doing PWAs. Today, there are big names doing PWAs, like Google Maps, Twitter, Tinder, as I mentioned before. A lot of newspapers are also having PWAs. I remember 1 that is in the store. It's 1 800 Flowers in the US.
Maximiliano Firtman [00:29:35]:
Yes. 1800 Flowers. They used to have a native app on the Google Play Store, and then replace that with a React based PWA in the store. So if you go now to the store and download that app, you will actually see a PWA. You don't know that as a user, just an app, but it's the same code base because it's not the same code base. It's actually the same URL that the 1 that when you go to the website. That's a big advantage.
Steve Edwards [00:30:00]:
Oh, yeah. So, right, once used multiple places. I could see yeah. Definitely used. So another way that I know that you can, you know, write web apps and use them on computers or so on is something like Electron. Mhmm. You know, Slack, you know, is the classic example that's written in Electron. Have you ever compared, like, performance or any other characteristics between the 2?
Maximiliano Firtman [00:30:22]:
Well, most of the time I mean, as a general rule, PWAs will run faster. Why? Because you're not actually shipping a Chrome engine. With Electron, you're actually shipping a Chrome engine and also a Node engine. That means that when you have a PWA, you're actually going to use the enshyme that you have installed in your browser. That is being evolved with time. So Chrome, every couple of weeks, you get a new version. So your PWA will always use the the the latest version of the engine. So that's why it's typically faster.
Maximiliano Firtman [00:30:54]:
But compared with Electron, I think Electron might disappear in the future if we have a lot of, new APIs coming to the web. And Chrome is working on that with something known as PreCheck Fugu. PreCheck Fugu, it's the PreCheck word that they're trying to bring all the API from the native world to the web, so then we don't need Electron or PhoneGap anymore. We don't need to wrap web into a native container that might have security issues because we are not in control of the engine. Today, electronics are still needed for some reasons because sometimes you need to actually execute native code, for example, for accessing the file system. So that's why now they are creating new APIs. But, yeah, that's Chrome. On the iOS worm or Mac worm, things are moving slower.
Maximiliano Firtman [00:31:40]:
So, So, yeah, you can install PWAs, but they're not adding so many APIs. They are usually on Twitter. The the, the web key guys, they tend to be more how how can I say this? It should be more, critical saying, like, we don't wanna push too hard on APIs. We wanna be more private. We wanna we wanna be more, let's say, slower. They wanna be slower in terms of implementation of APIs. So we have, like, kind of a race here between Chrome and Safari. Chrome is trying to push the limits of the browser a lot, and Apple is trying to play safe.
Maximiliano Firtman [00:32:17]:
So at at that point, it depends on the platform that, you wanna target.
Steve Edwards [00:32:23]:
Okay. Yeah. That makes sense. Pretty consistent with what we tend to see from Apple anyway. Okay. Anything else you wanna cover that I have failed to bring
Maximiliano Firtman [00:32:32]:
up? No. I think the best way to try PWAs is to test 1. Just go with a browser to 1 of the PWAs. There is a place, Appscope, just Google Appscope, a guide of PWAs available. So you just go and install 1 so you can actually experience that a lot. That's the best way to experience a PWA. Just use your iPhone, add to the home screen a PWA, use your Android or and try 1 so you can share experience, how it looks like and what you can do with it.
Steve Edwards [00:33:01]:
Oh, okay. So, yeah, here's AppScope, a ppsc0.pe.
Maximiliano Firtman [00:33:05]:
Yeah. Okay. The URL, it's actually Appscope. So they're using dotpe as their domain.
Steve Edwards [00:33:10]:
Right. Exactly. Okay. That's brilliant. Okay. So noticing here that you've got quite a number of books, especially, it looks like you write a lot for O'Reilly. Yeah. I'm using the high performance mobile web, programming for the mobile web, web mobile.
Steve Edwards [00:33:25]:
So which one's your most current?
Maximiliano Firtman [00:33:27]:
The last 1 is is free. So it's a dollar for free on my website. It's, hacking web performance. And the previous 1 is high performance mobile web. So my books the latest books were more targeted on on web performance for mobile
Steve Edwards [00:33:41]:
devices. The hacking mobile web. Okay. Yeah. So your site is firt.mobi. That's
Maximiliano Firtman [00:33:47]:
correct. Yep.
Steve Edwards [00:33:49]:
Okay. Cool. So we'll put that in the show notes for sure. And then it looks like they could see links to all your articles and books and other stuff. Well, great. Thanks. I've learned a lot. Okay.
Steve Edwards [00:33:59]:
Great. Great. And mobile apps. I've been pretty desktop focused, so it's good to learn more about the mobile apps. So now let's go into pics. Are you aware of pics or what we do for pics? Just anything that you wanna talk about that you think is cool, whether it's technical or nontechnical, a movie, a book, a tool, something that's been really useful or interesting to you lately.
Maximiliano Firtman [00:34:21]:
Let me think about that. Why you think I'm gonna
Steve Edwards [00:34:23]:
go ahead and do mine real quick. My pick for today is an oldie but a goodie, and it's called the club. And the club is basically a thing you can put on your car steering wheel, sort of deter fees from it. And it's a particular interest to me because I bought my kids a car a couple years ago, and it's a 2000 Honda Civic. And here in the US, those cars made around then were very easy to steal because of the keys and are just really poor security. It's easy to break in. So last December, my daughter had it stolen from work, and we found it a couple days later. Some guy was just living in it.
Steve Edwards [00:35:00]:
And then last week, my son's been driving it, and it got stolen from in front of our house in the middle of the night. And we just found it last night and got it back. In both cases, they forgot to put the club on. Every other day, we've had the club on there, and people say, oh, it really doesn't work. Professional thieves can get past it. And that may be true. But for the casual thief, it's gonna stop them. But in both cases, the 1 times that they didn't put the club on is when it got stolen.
Steve Edwards [00:35:25]:
When a club's on there, it never have any problems even for a car like that. So there's a few different versions of the club out now. It's, you can get red and yellow versions and 2 hooks and 1 hook and so on. But my son, in this case, he put it on but didn't lock it, which really didn't make it very useful. So I got him a club now that auto locks. So when you put it on the steering wheel, on your spreader part, it automatically locks and you don't and then you have to use the key to unlock it. So that's my vote for the club. It's certainly, never never had a car stolen when the club has been on it and properly locked.
Steve Edwards [00:35:57]:
So, Max, what's your pick? You got any? I think I will go back
Maximiliano Firtman [00:36:00]:
to the PWA. So I will I will, not talk about cars. I'll go back to PWA. So something I've been trying, going back to the PWA thing, it's a new tool from Google known as Yamma, so LLAMA. It's a CLI that they, some GitHub, is open source, that will create a PWA launcher for you. So you have a PWA or a website, and that CLI will create an Android project that will actually be ready for the Play Store. So you don't need to know anything about Android development. It's like a shortcut to your PWA.
Maximiliano Firtman [00:36:35]:
It's only 1 month old or something like that.
Steve Edwards [00:36:39]:
Yeah. I'm looking at Skye. It's on NPM.
Maximiliano Firtman [00:36:41]:
Yes. It's on NPM.
Steve Edwards [00:36:43]:
Chaos Llama.
Maximiliano Firtman [00:36:44]:
Oh, maybe it's not that 1.
Steve Edwards [00:36:45]:
0, no. No. No. It's not. That's for AWS. Let me find another 1 here. Okay. We'll find it and put it in the show notes.
Steve Edwards [00:36:50]:
But awesome. So is that your only pick?
Maximiliano Firtman [00:36:53]:
It's Yamapak. Yeah. Yamapak. That's it. And I'm pasting the URL right now.
Steve Edwards [00:36:57]:
Okay. Awesome. We will put that in the show notes. Alright. Well, thank you very much, Max. Very good to hear from you from down in Buenos Aires. Oh, where can people get a hold of you if they want a hold of you? Whether it's Twitter or GitHub or what's the basic plus that get a hold of you?
Maximiliano Firtman [00:37:11]:
Typically, Twitter. I'm f filth, FIRT, on Twitter. So 4 letters. That's a simple username. The same as my this was Ferdman is my my last name. So it's the first 4 letters of my last name. FIRTFIRT
Steve Edwards [00:37:24]:
on Twitter. Alright. All right. Well, thank you, Max. And we will see you around the Internet.
Maximiliano Firtman [00:37:30]:
Yeah. Sure.
Steve Edwards [00:37:31]:
Thank you, Steve. Alright.
Maximiliano Firtman [00:37:32]:
Bye bye.
Building and Distributing PWAs: Tools, Techniques, and Insights - JSJ 638
0:00
Playback Speed: