 I'm going to talk today about open event web app, but we have a word in front of it that is progressive open event web app. So you might be using open event web application throughout this conference. If you are using this, can you believe or a good question will be, can you tell me how much time it will take to design this website? Anyone, any random guesses? Six months, good. Anybody else want to take it up? Who thinks less than six months? Then, OK, everybody thinks less than six months. Then what time do you think? How much time it takes to design this web application? Three months. Less than three months. Who is going to have less than three months? OK, you two guys. What do you think? Two weeks. Oh, that is too much less, OK. How many of you think less than two weeks? OK, 10 days. Oh, shit. How many of you guys think less than 10 days? Anyone else who thinks less than 10 days? This application, less than 10 days. Nobody thinks, right? What do you think? 40 days. OK. If I give you some comment that this took two minutes to design this whole web application, would you like to design your web application for this event or not? So whenever you are organizing an event for a conference, for a meetup, you just want to use a generator, which we have designed in Google Son of Code 2016. And you have to put your data into it, and it will design a web application in two minutes for you. So you can host your event for free. You can give your custom domain into it and host it on your own domain. Or you can use our existing domain to host it. It's all about you. I have done this project in 2016 and then mentoring this project from two years. At this time, we are going to make it progressive. Progressive because after analyzing our users, we found out that this is going to be a crucial need to work this application offline in each of your mobile phones. So this is about me. So I'm a web developer in Fawcetia from past two years. I'm a product engineer in coding blocks that is a startup based in New Delhi, India. I teach students at weekends. I teach, obviously, coding to students. I was GSOC student in 2016 with Fawcetia and mentoring constantly with Fawcetia from past two years. Apart from that, I love to contribute to organizations like Cloud CV, which are having interest in AI and ML. And I am a contributor to NASA as well in an OpenMCT project. Let's take a glimpse of how this whole OpenEventWebApp works. And also, if you want to generate your application that can run in two minutes, that can give you the whole website in two minutes, how you are going to do that. Is the internet working? Wait. So let's see how OpenEventWebApp works. So you have given your API link and then you click hit. So this is the whole website for you in just two minutes. Now, if you give your link to it, the API endpoint, then it will generate a website for you. Now, the question is, how are you going to have this API endpoint? For that, we have a separate project. You have to go to our project just to fill a simple form, add your speakers, add your sponsors, add your sessions, and then you have an API endpoint which you can plug in into the OpenEventWebApp project and you have the app ready in front of you just two minutes. Again, coming to the point, OpenEventWebApp was prepared in 2016. Then why we are going to make it progressive? We are going to make it progressive because we have analyzed it in conferences that there are issues in internet connections and people found it difficult to find schedules. So we thought if it is progressive, then everything will be offline sync. So you can watch the schedule on your phone, whether the internet is present with you or not. Obviously, we found it very challenging and we are still doing it. It has not yet completed. Today, I'm going to tell you what is left and what we are already done. So let's start with a PWA process flow. So what is a PWA? It's a progressive web application. It's just a simple web application which you make and then you add some with some tools, you add some code, extra code to it so that it can work like a native app on your mobile phones. Starting with process flow of this progressive web application, it starts with a cup of coffee when you have a cup of coffee in your hand and you are still thinking, what can I do? And the first thing you have to analyze is you have to analyze. So you have to analyze first what you are going to do. For analyzing, I'll be covering what you can do for analyzing. There are a variety of tools present in the internet. You can take one tool and analyze your existing web application. So here we are seeing you have a whole website ready with you. Now it's your time to make it a progressive web application. The first phase comes out to be analyzing your existing web application. The second point after analyzing is prioritizing. Now you know that this application is good. That much good for progressive web application. You have a lot of feedback when you want to change it to a progressive web application. You have to prioritize what you are going to do first and what you are going to do next. The third point comes out to be the tools. Which tools are you going to use to make it a progressive web application? The fourth point comes out to be the implementation. After you are ready with your tools, now is the phase where you can go and implement directly. And the next time, whenever you do it, you have to re-evaluate whatever you have done before. So talking about some small concepts which are related to PWA and which is better to understand first before you go to PWA is whenever you talk about PWA, the Progressive Web Application with someone, you always talk about these three major concepts. Or somebody will come out to you and tell, OK, my website is going to be a PWA. So he is talking about you these three main concepts always. The first one comes out to be Service Worker, which is a misconception among all developers that the Service Worker is the only thing which you can do for progressive web application. But this is not the end of the story. A Progressive Web Application contains all these things while the Service Worker is just 10% or 15% part out of it. We have push notifications feature. So in your native mobile Android app, if you are an Android developer, you must have seen notifications all around. But can you generate notifications for a web application? A web application that works on your browser but also works on your mobile and you are having push notification for it with the same code. With PWA, we can do that. And this is very easy. It is just a tool. You have to integrate and get your all work done. Add to home screen feature. A PWA consists of add to home screen feature. You have a mobile. And you have an icon right there. Just click that icon and it flashes up with an app, just like a native Android app. You have now an icon in your mobile that can open your web application. STTPS. Don't forget this. This is going to be very important. For security, it is already written in the whole documentation of Progressive Web Application that you cannot host your web application on STTPS. You need to go for STTPS. So even if you are testing it locally, you have to make it sure that it is STTPS. How many of you believe in performance of a web application? Nice. Why don't you believe in the performance? Why don't you believe? I'm just going to put my hand up. OK. So performance is the crucial factor whenever you talk about a web application. Whenever you test a web application, you come out with some statistics saying, OK, this is 15% good. It is 30% good. And then you iterate, iterate, iterate to increase its performance. When you talk about specifically for progressive web application, your performance factor is the most important factor. And that's why I have took that in the front. So whenever you talk about this performance factor, your progressive web application grows exponentially better. So this is performance. These are the four concepts. And then comes out to be two more important concepts. One is the user experience. And the second one is the measuring your progressive web applications. User experience, the most important stuff, whenever you are doing anything on mobile, it should be responsive. There should not be any junk in the code. It should be very fast on the first load. Lot of things you have to talk about when you are talking about user experience. User experience starts from making a thing responsive when you are making a website, but when you talk about specifically for progressive web application, instead of just thinking about responsiveness, you have to think in deep with the performance whenever your page is loading. So you have to make sure that your first load should be very fast. It should be very fast so that users should not wait for more than 30 seconds for the first load. And 30 seconds is a crucial time for me, at least, on the mobile. And it is obviously because you cannot load each and everything in a shortest span. So you have to take something as a priority to load at the first instance and then take the other things for the second instance. And that's how you take everything step by step, step by step, and give a better experience to your user. Measuring the application time to time is always very important. If you are making stuff but not measuring it at time to time, you don't know what needs to be improved. So measuring a web application is going to be very important for you. We come to our second part. After grabbing up coffee, after just analyzing, now we learn how to analyze. The best tool to analyze, the Lighthouse. So Lighthouse is the most important tool right now for all the developers to analyze their web applications. This is very simple. That's why it is very easy to integrate your web application into it and then get the whole report what is bad and what is good inside your web application. In Chrome latest versions, if you have seen the audits tab in the inspect integrated in it, just need to go to audits, run a Lighthouse script on your website, and you get the whole report of the Lighthouse in front of it, in front of you. So what else, apart from Lighthouse? So apart from Lighthouse, there are other tools that are present on internet, starting from web page test, page speed insights, Chrome DevTools. Chrome DevTools helps you for the speed of your website and also counting the number of HTTP requests. But the profiling it gives is something that is not that much understandable in comparison to Lighthouse. The Lighthouse is for the developers who are not much into the depth and front end development, but they want to know what is good and what is bad in their websites. Web page test helps you in caching and to analyze your time of your first load. So I'll suggest before you are going to change your existing website into your web application, into your progressive web application, go through all these tools, generate a report for yourself, take a PDF out of it, share with others to just get the insights from them, what is better, what needs to be improved, and then start taking your web application into a progressive web app. If you think that you have a slow Wi-Fi or internet issues, then comes out to be the use of service workers. A service worker is just a background script. It works at background and helps you to cache your data. If you are making a lot of HTTP requests which you don't want to make, actually, you can directly write a service worker script and that will cache your HTTP request data. And next time, you are not going to make HTTP requests if the data is already present with you. That's how you save a lot of load whenever you make a progressive web application to work offline. Next time, if the data is not present and if you don't have an internet connection, the data is already cached. So you can directly, with the use of service workers, you can directly take that data and have it displayed on your app. Using Lighthouse, we analyze the open event web app which we have worked on in 2016. So in the last year and this year, we have analyzed our open event web app to check what is left and what we need to improve. So we started with a performance matrix where we started with a matrix of Lighthouse right now and then we take a snapshot of all the details that Lighthouse tools gives to us. So if you are running your website through the Lighthouse tool, you'll get the whole report like that where you can judge your performance, your progressive web app capability for your existing website, your accessibility, your best practices, and your SEO improvements. This is not that much detail, but if you see the actual Lighthouse tool, this report is off two to three pages where it tells you each and every line specifically where you need to improve and where not. It directly tells you, OK, this is going to be a progressive web app if you fulfill these five or 10 requirements. And then you go through each and every requirement, complete that, and again test and analyze if that fits up for your progressive web application or not. So here you can see the time to load and it comes out that the time to load, the first load was at 4.7 seconds instead of the 941 milliseconds. These are the snapshots of the website whenever you run it through the Lighthouse tool. The second point after analyzing comes out to be prioritize. How you are going to prioritize things? The prioritize things happens in this order for us when we have analyzed our website, the OpenEvent web app, and started to take it to progressive web application. It's starting with optimizing images, which includes compression and lazy loading of images because if you have seen the OpenEvent web application, it contains a lot of speaker images. So you can't load all of them in one go. If you load, it will increase your first load time. So you need to apply lazy loading for that. Compression is also going to important. So whenever you are coming to our platform and adding that endpoint, we compress your image automatically so you don't need to worry about that. Writing known blocking code. This is going to be important because if you have worked with CSS or JS, you should know that what is render blocking code. I'm going to talk about how you can change your render blocking code to non-blocking code right now after this slide. Removing extra code. This is going to be very important because you have seen the spaghetti code all around. You have seen the spaghetti code all around. And then you just have to take that code and remove the extra code and make your web app more faster. So this is the tool I want to work. I have worked on and I want you to apply the same that is SW Workbox. You don't need to worry about progressive web application. You just need to take this tool and then have to take the boilerplate this tool gives to you. This is going to be the non-blocking code. And if you see the third one where you have specified the minimum width of 40 AM. So you specify the width of each and every CSS file in the media query. You say, OK, load this file when the minimum width of the page is going to be 40 AM. And that's how you make it non-blocking. Before lazy loading, the time to load for us was one minute. And after lazy loading, the time to load for us was 3.48 seconds. So this was the chart when we analyzed it. And that's how we improved till now. The next part comes out to be the evaluate. Once you are done with all of these steps, you have to evaluate your application again. So we evaluated it with the current web progress. And right now, from there to here, we reached out to be 45 at the Progressive Web App Score. We still need to improve. And we are still looking for developers to contribute to FOSS Asia Open Event Web App Project, where they can come in and help us to make this Progressive Web App for 100% in Lighthouse tool. But still, you need to iterate again and again. Even if you have done all of this work, you have to check again what else is left with the Lighthouse tool, and then have to prioritize and analyze again to do everything. The solve from my side, if you have any questions, you can ask. Get, OK. If you have come across the tools, which I have told right now. So the Lighthouse, whenever you run the whole website to the Lighthouse, you get the whole report, where you get some pointers, how you are going to increase your accessibility, where you get, OK, you have to add area level into it. You have to do three things like that. You have to approach in this direction. This is the Lighthouse that is helping you to cover all those points. Yeah. How long do you think it will take you to finish the Progressive Web? I think this is going to be a bit challenging for us. So we are looking for developers for this Google Summer of Code proposals. So we are expecting someone to come up the specific solution in Progressive Web Application Direction, if they can help us in that. So we are expecting one year. The next conference will be with the Progressive Web application, not yet. So it is still in process in Lighthouse. Yeah. It's a pretty great app. Like, I think I'll use it in Australia next summer. Sure, sure. Just let me know. And it's Django title, so.