 So the next talk is progressive apps ready to take over the world. I will show some examples from my little app. I'm Jarek Lipski. Well, I have a little company together with a better person. Clouder. Okay. Maybe I can put it closer. Okay. So my name is Jarek Lipski. I live in Paris. I'm from Poland. I currently have a little company. We develop progressive web apps as our specialty. We do other things too. So first question for you. What are the progressive apps? Who knows what are progressive web apps? Just a bit more than that. But yeah, good point. Okay. And who is actually developing progressive web apps? Okay. Quite a few people. Okay. Interesting. So yeah. So there are actually many definitions of progressive web apps I chose just a random one. It's a set of technologies and it's a bit blurred. The lines are not completely clear. This is just an addition to a web app, we can say. It's a progressive enhancement. Yeah. So the typical stuff that we, when we think about progressive web apps are, for example, that they are available offline, they load fast, they use HTTPS always, they are responsive. I will talk about this later. You can install them, you can launch them from your home screen from your mobile device. And other things and push notifications, I will not talk about this. Okay. So now a little demo. Yeah. So actually before the demo, I wanted to show that I have a question. Who is another question for you? Who is using FOSDEM mobile app here? All right. Almost everyone. Great. Who use this one? Who use the Sergerner? Okay. A couple of people. Great. Thank you. So now I would like to invite you actually, if you want of course, to visit this link at the bottom, HTTPS Sergerner Rocks. If you have a minute and take a look, and at the end of the talk, I will ask you for some feedback if you can. I mean, if you are interested, I will be talking, I will not be waiting here, right? I will continue, but yeah, if you want to play with it, I will be very happy. And yeah, I can talk with you later. It's open source. It's a little app that I created a couple of years ago. Okay. So yeah, so a little demo. So maybe I'll do a short demo on this. Oh, actually, does it work? No, it's not that. Not you. Sorry. Yeah, so this is actually my phone, right? So actually I wanted to show you a demo on my phone. Yeah, so first thing, I will talk about this later. Well, first thing that will happen, well, I can just visit the link, right? I hope I don't have any further Sergerner Rocks. I can just visit my link, and that's how it will look. So it's a website, basically. It's loading the entire Foslum schedule. That's why it takes a bit. Yeah, and that's how it looks. I can click on a keynote, I can click on it. Oh, we'll come back to this later, this thing that I just appeared. Stay tuned. There are a couple of things. One killer feature, actually, here, that I consider a killer feature, is the fact that you notice that there's a lot of things happening at Foslum. And for me, the only way to actually enjoy, actually, the second Foslum, 2013, I think, that's 2012, so the second Foslum I arrived, I discovered mobile apps, and this actually allowed me to, before coming here, to take a look on the program and actually decide what I want to see. So for me, the killer feature here in this app is the fact that you can bookmark things, right? So you can click on a link, and I can bookmark it. So for example, I wanted to bookmark the last one, so I bookmark it, and then I can take a look at my bookmarks during the day, and I can only choose from the talks I already preselected. So I have some time to actually read the description, because each of those talks, I can read the full description, let's close this, I can read the full description, I can get a bit more informed. By the way, there are also links at the bottom, you can also submit feedback from this app. It's not directly from this app, but yeah. I invite you to send feedback also through this, through the app. So yeah, so that's it for the short demo. I will come back to this later. So, coming back to my app. Oh yeah, let me just finish, because it's actually a progressive app. So the thing that is actually interesting is that I can use, I can visit the same site on the desktop, right? And I have, this is the same app. I have a different interface, because the device is so different that we decided to change completely the interface for the desktop, but yeah, this is the same app. It's basically a website. As I was saying before, right? The progressive apps are basically websites, right? As in the definition. Okay, let's see, how are we with the time? Okay, great. So, so yeah, a bit of stats. Okay, so yesterday we had about 600 visits. It's the same as last year. It's like 30% more than the last year, but this is not the best metric. So I actually have 165 users who added more than five bookmarks, I consider them active users. I can track it somehow. I will tell you later about this. Actually, you can be completely anonymous with this app, or you can decide to log in, and then, well, I obviously wouldn't track you, but yeah, this way, actually, I can also anonymously see how many bookmarks people add. So I can see this. And the second letter, use it, is that actually in December, I also adapted it to another conference. So very quickly, very easily. Basically, this is one function that converts the schedule to a common format. And this way, I can use it for a different conference. And I changed the interface a bit with the configuration file. So that's actually for FlowCon, which is for process geeks, for software process geeks, agile, this kind of stuff, but cool people. Also geeks, not like those corporates. You know, yeah, care-archical managers and stuff. No, no, no, those people are very nice. Recommend in Paris. Okay, so enough about my app. So I want to talk about just the three things about Progressive Web Apps. I wouldn't give you full overview of Progressive. It's much broader subject. We just have 20 minutes. So I just focus on those three things. I invite you to talk about the others. Obviously, what is missing here, well, one thing I wanted to talk about that I removed in the end, it was about persistent storage. So you can actually store stuff persistently on a device. So basically, it works like a mobile app. So there's no need to register. There's no need to create an account or anything. I can just run my app and store my data there, right? It's actually possible. It works across platforms as well. So I can actually never contact any, I mean, I can just download my app and just use it, never connect to the network again. And another thing that is missing here is push notifications. We all hate them. Sometimes they are useful. Actually, for a conference could be, for example, useful if there's an emergency or there's something that could be actually useful to do. I haven't implemented them in the app yet, but I probably do it. Okay, so let's talk about those three things. So the offline first. So the app actually is offline first. So, well, maybe a bit of technology. Okay, so let's talk about service workers for a bit. So actually, service workers are just our proxy, basically a proxy between your app and the network that allows you to store the data in the proxy. So never contact the network again, for example. Offline first is just one of the options. Actually, you can have all the mixes. So actually, that's what I did in this app. So I'm actually pre-caching all the resources or the static stuff, or we call it shell. I pre-cache all the HTML, CSS, and images, and everything. The first time you visit site and then it shouldn't be requested again unless it's updated. I will talk about this update in a second. So this is actually, I consider it static, right? Then there is another very interesting resource that is not so static, which is actually a schedule which is changing a lot more than I would hope so. I mean, I would need to probably change up the app a little bit. But for this resource, I use a special strategy because in the service worker, we can have different strategies, right? There is a good resource about this. At the end, I send a link. I add it a link. So actually what happens here, if you follow the numbers, right? So the first, I have my browser, my page, will request the service worker for a schedule. And then the service worker will check if the schedule is already in cache. And if it's already in cache, number three, it will respond. At the same time, it will send a request to the network to check if there's a new version. So this way, you can have your schedule immediately visible. I don't have to wait for a network if I'm on a GPR or something, or 3G. But in the background, the schedule will actually update. And if it updates, that's actually, this is also pretty cool. What we can do, what I can do is I can catch the signal, this, oh, exactly, this is because it's changing all the time. So I can show you a quick demo. So actually this message that you see here, the new schedule is available is actually this. So in the background, I actually send a request. The schedule itself is about, is couple of megabytes. So it's pretty big JSON file and also pretty expensive to parse. So that's why I, yeah, so I make this request in the background. So user can actually, I can either force the user to refresh, but that could be a bit abrupt. Maybe I will do it later. Or I can actually show a message to ask the user, do you want to refresh the schedule now or not? So I can quickly refresh. It's a bit slow, to be honest. I need to put it in another thread, probably. So now the schedule should be updated. The schedule itself, right? The toxics are descriptions, videos, links, et cetera. And the third thing, and the third types of resources, I would like to consider, discuss here, are the resources that are actually real time. So this is another killer feature I didn't tell you about. So I'm not caching them at all. So there is a little thingy. I noticed that it's not completely clear what it is. That's why UX, UI is very important. But actually, oh, okay, let's continue like this. So UX, UI is actually this little thingy, this little symbol, means that the room is full. Actually, yeah, that means that I won't, well, we can also check this room. But this thing is actually coming from FOSDEM. There's a FOSDEM API that shows you the room is full or empty. The little thingy, yeah. It tells you that the room is full, right? It should be some, I try to save space here. That's why it should be some information about this. But this is another cool thing, and this is actually real time. So if I lose connection, this will stop updating, basically, or disappear, I don't remember exactly. Okay, so this is about offline, ah, the second offline first, a cool thing about offline first, I wanted to show you, is actually the fact that I can, I can search. So I never considered this, but actually, I didn't show you this, but I should actually go offline, right? Well, you're talking about offline first. So, yeah, sorry, I forgot to do it. So basically, I'm offline, right? So I can search for progressive web apps, and the search works, because it's fully, I have all the index on the local device, right? Whoops. So I can search locally without any access to network. You can search for JavaScript. So this is pretty cool. Actually, the way I did it, is actually pretty simple. I just searched in the JSON file. I do some simple rankings, so the title is more important than the other things, but that's very simple. You can actually, you can have full search engines in JavaScript on the client side. Okay, enough about the front end, about the offline first. Now something about installation. So how the progressive app actually installs? This is pretty magical. Actually, the first time you visit a website, the site installs itself, and the user has nothing to do with it, actually. Then there's something that we more consider as an installation. It will be, we call it add to home screen. So actually, I wouldn't show you this because it's not so simple to show, but there could be a little banner here that I'm implementing, that will ask you to add something to the home screen. It basically works on every platform. So it works on, well, I will show you where it works, actually. This is it. So on Chrome, it works everywhere, even on desktop. So you can add an app to the desktop, on Linux as well. On Firefox, it works only on Android. And on Safari, it works on iOS. And actually, the biggest group of my app users actually use iOS, use iPhones. This is pretty interesting because I suppose the Android app is good enough so everybody is sticking with the Android app, the native one. But iOS users seem to like my app. That's cool. So little demo very quickly. So yeah, so basically, yeah, I have wet hands, sorry. So yeah, so the add to home screen basically will add something like this to my screen if I click it, right? And then it will start behave to a normal app. So yeah, it's actually, I'm actually fully offline, right? So it's actually parsing the schedule because it's pretty big. I should probably optimize it a bit. So the app fully works, right? I can add my bookmarks even and it will stay offline in my device and they will synchronize. The way I do it, I use the proprietary software, sorry for that, I use Firebase. I could actually implement it with another one, with the paste, but I haven't had time yet to do it. So yeah, so this is how it looks. So it looks pretty native, right? It looks pretty like an native app. Yeah, you know, it stays as an app. I can switch to it, et cetera. Okay, how much time we have, four minutes. So the last, yeah, sorry, yes, 10 minutes left. Oh great, because yeah, there's also another five minutes for questions, yeah, cool. I will try to leave some room for questions because I'm really interested. So if you have some questions, feedback about the app, I'm really interested. Okay, and what is also cool, well what is also important is actually we need to update those progressive apps sometimes. So here is actually another, yeah, sorry, it's not very visible. So it says, new version is available and I can click refresh. So basically what happens with the service worker is that if the service worker detects a new version, it downloads itself, but it doesn't activate itself. It will activate itself next time I visit the site. So what I can do, I can detect this information, there's new version available, and show a message to the user, oh, there's a new version, refresh. All right, if you want to refresh immediately. So actually, this is pretty cool. I saw some discussion yesterday on the, false them, meaning these, that there could be some issue with the native, one of the native mobile apps because, because something, the room names don't match exactly to what's encoded in the app. And it's difficult to update a mobile app, the native app, a day before conference because even if you do it, even if you release a new version, users will not download it. And here, I can make a new change and you immediately see this five minutes later with the continuous integration, it will automatically pop up. So actually it behaves like a web app, like a website. So there's no problem of versioning, there's no problem of, this is a big selling point of progressive web apps. So they are always up to date, always fresh. So this is, yeah, so for example, that's why this is one of the use cases for progressive web apps for me, conference apps. So the stuff that changes quickly that you need to maybe adapt very quickly or that you use only for a few days and then forgets. So I don't need to install anything native on my phone, I just install a little web app or even not install. If I prefer, if I can prefer, I can add it to my home screen. If I prefer, I can just use it as a website. This is pretty cool. Yes, and the next subject off. Yeah, sorry, the order is the new worker. So yeah, actually my little note here is here, I will try to switch it on. It's actually, the battery is actually dead. So oh yeah, it's starting up. So actually this is the evolution of the design of the interface. I wouldn't show you the intermediate step. So actually the Sojourner app is a descendant of an old app for Nokia N900 that I discovered a couple of years, I still have it in Nokia. I still sometimes use it, so actually and the first progressive app that I developed was actually based on this interface, was very similar to this one. And then I collaborated with a designer and I really suggest you to do it because especially for mobile devices, the user experience is very important. We have a very limited screen space, right? Well, there are normal people out there. I mean, I know FOSDEM is a bit special, so yeah, you would accept the interface like this, but normal, what does colors mean? What does it do? But yeah, definitely normal users much more prefer something more beautiful. Yeah, so I definitely recommend you that look into the design and actually that's what differentiates your, why can I say product, your projects, right? It's often, I mean, often we forget about this aspect. It's really important. One thing, one important mention I wanted to make is that if you know a bit about the, well, about the front end, right? So there are design systems. There is this idea to, for example, follow Google guidelines that are, that are Google for its material design and Apple, for example, has human interface guidelines and there's another thing from Microsoft. So the question is if I develop a Progressive Web Apps, what should I do, right? The Progressive Web Apps can work anywhere. We'll work on Safari on an iPhone, we'll work on my Android, we'll work on a desktop. What do I do? Which interface, which standards do I adapt? And that's a very good question. Actually, yes, you could implement different interfaces for different devices, but that's a mess. That's like a direction going to the native apps, right? This is the same direction that developing separate apps for each platform. Well, if you want really good experience, then yes, perhaps you could do it. But what I really recommend you to do is actually develop your own style, develop your own identity, visual identity, and try to follow it. So actually, the more you diverge from the standard material design or something, the better you look because it will be yours, right? It will be yours or your company, right? Obviously, we live in the commercial context too. So actually, good idea for me is try to diverge, to create something different. Not try to replicate exactly the standard to interface guidelines from anyone. So I think it's an interesting advice to try to make it different because the more it's similar, but because it will look like material design, but it's slightly different. It's called uncanny valley, right? It looks slightly different, so it feels wrong. So it's better to make it completely different than if it's right. So I didn't completely achieve it. I'm actually basing my design on material design, but pretty much modified. Yeah. So, okay, so just to finish, okay, we are running out of time. So are progressive apps ready to take over the works? The answer is, it depends. There are some use cases that they are much better in. I think conference is a good example. I think progressive apps give us more power as a front-end developer. If you are a front-end developer, give us more, it's just a continuation of the more features to the front-end. And I see them also as a descendant of stuff like Firefox OS. I was a big fan of this one. And the idea to write apps in the web technologies. So I find it interesting. In relation to free open source, I think progressive apps could be a step to break the Android versus iOS dual poly. Because if at some point, all your apps, all your important apps are web apps, then you don't care what device you use. It's like, for me, for Linux, I can many users, I can just propose Linux because most of the stuff they use on the web, the most of the apps they use on the web. So I think if we can get more progressive web apps, then perhaps it would be easier to switch between Android, iOS, and maybe some free open source system that will emerge, right? There will be no friction. Friction will be lower to switch because if I lose all my apps, if I switch the operating system, it sucks. So obviously there are use cases for native apps, so I'm not telling you to only use progressive apps, but it's developing, it's an interesting technology. Okay, that's all I wanted to say. Thank you very much. So if you have any questions or feedback, yeah, please should now or later, if you have time. Do you have some questions? Hi. There are a couple of difference between native application and PWA, such as speed and removing cache, how to solve it? You mean, yeah, I mean, if you want to write an AR, VR app, for example, they even start us for this, right? But if you try to do something that requires native power or write a game, I would stick to the native apps, unfortunately, right? So far, but you know, the web is progressing, like we just saw what you can do with JavaScript, right? You can write games in JavaScript too. So basically it's just a web app, yeah? So, well, they are ready, they are getting ready, yeah? But yeah, they will not, I think this is a wrong distinction, actually I have a text here saying, why progressive apps versus native is the wrong question to ask. Let's not, I wouldn't ask this question. I think, let's use the best tool for the target task. Cheers. Do you use web sockets behind notifications or just like querying all the time the server? No, no, the notifications actually is a mechanism built into the service worker, so the service worker knows that the new version is available and it will send something in my, so it's all happening in the front end. Okay, but... I make an HTTP request to check if the new version is available. I'm sorry, it's querying all the time. Wait. Is it a web socket client behind or just? No, it's not web socket, but if you ask about the schedule, yes, actually it's polling, it's polling every minute, but actually it's not downloading the whole thing because it's checking the e-tag, you know, the last modified e-tag, yeah? Okay, just tag, okay. Yeah, yeah, so it's checking the header, right? I send a check some or it's modified. Okay, I download the whole thing, so it's not... I think it will be better if you use web socket client, just subscribe for changes and server will notify you about each change. You are right. I was thinking about something even better, right? I'm actually using Firebase, as I said, if you know this technology, right? So I could put the whole schedule in Firebase and Firebase, well, it's a real-time database, so push me that data. Okay, I got it. But I wanted to increase the dependency on Google, so that's why I keep it minimal. Only to, Firebase is actually used for bookmarks to actually synchronize them between devices because if I can actually log in in this app, I didn't show you that. I can log in and then I can have my bookmarks between all the devices the same. I will show it very quickly. Is it okay? It doesn't answer your question? Yeah? Try my best. Yeah, so there are very good resources about this. I didn't include them in the talk, but yeah, it's approaching. So actually, you have notifications, you have geolocation, you have camera. You cannot ask Bluetooth, as far as I know, for example, from the web yet, right? So obviously, there will be things that you couldn't do and it's like a website basically, right? But as usual, it keeps surprising me how much you can do in each next year, right? But it's really evolving. Like last two years ago, there wasn't a two-home screen on iOS. In 2019, 2018, it was added. It's evolving very quickly, so yeah. Yeah, so just to prove it very quickly, I can actually log in, right? I cannot do my, oh, it's not here. Yeah, so I can actually log into this app and then synchronize bookmarks between devices. Okay, I think we run into this. Are there any specific frameworks that make it easy to write progressive web apps? Yeah, good question. I use Workbox. That's the library, very popular one. Sorry, yeah, sorry. So me, in terms of technology, I use Vue.js here. But yeah, the library that actually enables progressive apps is called Workbox. Sorry. Okay. Thank you. Thank you. Thank you.