 Okay, today we are going to talk about building faster and exciting web apps with not so new but some very interesting technologies such as PWA and AMP. So I'm Aman Shirma. I am working as CTO at Wimbit and also I am an AMP global contributor. You can follow me for any updates related to web apps. If you want to ask anything about PWA or AMP, I'm always happy to help. Apart from PWA and AMP, I also work with other open source technologies such as WordPress, which is my favorite framework so far. And also in machine learning aspects, for example, in recommender system intensive flow. So let's begin. Well, I would like to give you a little bit of time to actually go through this meme. And this is something that happens to our developers every day. So I found this on Pinterest. It says designing a software application is like designing a boat. You spend countless hours locating the ideal materials, testing the engines to the customer's exact specification. Only when you are done, the customer tells you, great job. We love it. Just one little thing. We needed to fly. So we know that our customer don't understand ourselves and developers have to go through a lot of pain in order to get things clear and finally like requirements change. So this is the main reason why we should not actually go for native apps. And that's what my today's agenda is centered around. So just to get to know a little bit of facts, there are around zero downloads that are happening every month on an average on a user's phone. The reason being that people don't install native apps too often. It would be hardly a case that there is any trending app like new TikTok or maybe a new feature in Instagram that you would like to update or download. Otherwise, there is no chance for a new beginner startup to actually get into someone's smartphone. So that brings us to zero downloads per month on an average per user device. And the sole reason for this is that at every step of app download, we lose around 20% of our users. Sometime it's bothering updates related to the operating system or the person hasn't logged in yet or the internet speed is not too much. As I'm right now in India and the internet speed sometimes is not as equivalent as we expect to be. So the things don't work out pretty fine. And it would be surprising to know that 15 to 20% of our cost of total app development is just spent on maintaining the app, releasing the updates, releasing the security patches, complying with the latest laws and compliance created by the Google Play Store or Apple App Store and it's very tough to get there. And it takes around 18 weeks on average to make a feature pop from your discussion board or brainstorming board to the actual phone. That's the facts that we are talking about. The answer to all these problems is definitely progressive web apps. So what are progressive web app? It is nothing but your website being converted into a progressive app nature which are reliable. That means it works also on low latency networks. It's fast because most of the files are cached on your device. So it can work on low networks as smooth as possible and engaging. It offers a lot of features that today native app can offer. You can also access them in progressive web apps. And that's how the PWA are becoming more and more native. As you can see in this example, a person has just found a link from Chrome Dev Summit and it pops to install it on his phone. And what it actually does it converts that whole website into an installable nature of whole screen engaging thing inside the phone and you are ready to go. So some people ask me, I mean, what are the difference between a native apps and web apps capability? I tell them to see this sheet and you can see right now in this sheet that most of the present capabilities that native app offers are also offered by PWAs. By the time you are watching this, there have been more development on the PWAs and NFC, things like NFC and SMS and contact list is also being provided through the native browser capabilities of PWAs. So just to look into some of the capabilities such as Bluetooth, USB, you can do that network speed, you can also go for test gestures. As you can see here, you can go for geo locations and other things like that. So if your next project involves any of these capabilities, I think PWAs is a sure thing to go for. Now I would tell you now that how you can actually create your own PWAs in four easy steps. So assuming that you already have your running website, it can be your blog, it can be your e-commerce website, anything like that which has a domain, it's being served on internet. That's the only requirement we need. So first thing you need to do is obtain an SSL certificate which will enable your HTTPS link. That's the far most requirement for having a PWA. This will provide a secure access to the file so that they can be installed on user smartphone. So HTTPS is the most thing to go. Most of the hosting providers and domain providers offer SSL service as complementary and free service these days. So it's not hard to get a SSL certificate. Next thing we need to do is to set up a manifest file. This file exists into the root folder of your app or the website directory and it goes like this. If some of you are clear with the native app philosophy, you must recognize a manifest file as the file that gives an identity to your app. What are the logos, what are the theme and what is the home URL, what kind of nature you want. Exactly the same we use for PWAs. As you can see, we have a short name for the app. We have the icons that you want to set. You have set a start URL. You have set a background color which pops in the navigation bar on top and also you have set the display mode. Now display modes are interesting. You can make your app behave in different display modes. You can have it with address bar. You can have it without address bar. So standalone is a thing that has the address bar on top. Full screen is capability in which you don't need a top URL bar. So this is something that you need to define in order to get your apps a native field and the icon that it needs to show in the app browser. So the next thing we need to do is the most important thing that is setting up a service worker. Now imagine service worker like an assistant for your app. The best capability of PW that can perform is that it doesn't need to check for the server files every time a person requests something. Even if he is on offline, your PW should be able to serve the request and that's what actually service worker does. It acts as an intermediary between the user and the actual website and it caches all the content from your website to the user so that whenever the next time the user is making a request he doesn't need to go to the actual site again and again and that's how you can set up your service worker and you can define it what files you want to do. There are a couple of easy ways to set up your own service worker if you have developed your website on WordPress you can use the plugin Super PWA or the PWA from original developers WordPress developers and you can get your website running from the service worker site or otherwise if you are working on your own custom project on a framework like React you can use the PWA libraries offered by React and a universal solution is the work box. You can visit web.dev that is Google's official website for PWAs and web development things and you can learn more about Workbox which offers different API capabilities and does the caching for you so that you don't need to write your own service worker. The last thing we need to do is actually test RPWA. So for this Chrome offers a plugin capability called as Lighthouse. If you have the latest Chrome browser this exists under the audit app and this helps you actually track how well your PWA is performing. Now you would see that people are gaining 100 or 100 scores but today I'm going to get a little bit real and I'm going to show you what actually a PWA's course looks like. So I have created our own PWA and this so this is our PWA and this is the Lighthouse exists under the audit tab inside your inspect element tool and what you need to do you just need to click on the plus button and click concentrate report. What this will do this will render your app and will check for different functions and will actually give you the final score of your app how well your app is performing. Now you can see we have a performance score of 89 which is not pretty bad but also not good we can see different scores which shows how well our app is loading and things like that and other capabilities. Lighthouse also suggests you how you can improve your PWA score you can follow these tips and tricks in order to increase your PWA score. Now I would like to also show you there is another tab called as application tab and if you want to check if your manifest file is working as as intended you can go inside your application tab and you can see inside the manifest folder if everything is done correctly. Then your service worker is actually stored has all the states over here you can go in detail and check if your PWA is working fine and also the storage how much storage your PWA is actually consuming you can check it over here. Okay so the last thing that was remaining that if you still want to place your PWA into Google Play Store just to increase the visibility Google recently launched another package called as TWA known as Trusted Web Activity and it provides you a ready made Android adapter kind of thing in which you can put up your own normal PWA files your website files and that app automatically converts into a native app which you can then launch into a Play Store. So that's amazing most of the time you would expect your PWA to render as fast as native as because that's what we intend but most of the time you see a loading screen like this because of maybe low internet speed expired package or maybe you are on your flight you cannot access a PWA because of this thing and that actually is a speed issue. Slow websites cause a lot of irritation and problems to people slow loading websites irritates because the pages are unresponsive on the first plans and sometimes the content is actually displaced by ads and you accidentally click on ads instead of clicking on the actual content. So and also according to a Google report 50% of users will leave your website if it doesn't load under three seconds and that's the case most of the time your website doesn't load under three seconds people get irritated in this just switch and close the tab and move to another website then it will be faster. So today I have an interesting thing for you that actually can help you increase the speed of your website and let's go and see it. What is AMP? So AMP stands for Accelerated Mobile Pages. It's actually a web frameworks now web frameworks must not be new for you. People use web frameworks for variety of features they may use it for some kind of capabilities like virtual DOM if you use React Angular or any other virtual DOM based JavaScript library. We use frameworks to enhance our capability for example we use Workbox for the PWNHA but AMP here is a special framework why because it's a framework that is designed to enforce best practices inside your web project. We are talking about performance that ensures that your website always loads in quicker time and accessibility or most of the people don't care about accessibility but it's very important for your website to work across all different challenged scenarios and accessibility the thing that makes sure of that reliability that even your website loads on low latency network and responsive design we developed mostly think of either mobile design or desktop design but AMP ensures that your website is responsive automatically by default on both on all different devices. What also makes AMP a very interesting framework is a small learning curve. You don't need to learn a lot of things before you are actually jumping into AMP and we'll see how AMP actually does that. So AMP has three major components AMP HTML, AMP JavaScript and AMP Cache. AMP HTML is an extended version of normal HTML tags. We just change normal syntaxes like we use AMP IMG instead of IMG tag and other different things and we'll see some of the examples in upcoming slides and what it actually does is it was noticed that most of the time the normal rendering functions that we include in our website don't work as expected because somehow we don't implement them rightly. So instead of using traditional HTML tags we extend them to AMP HTML tags and we replace those tags. Also AMP doesn't allows you to include custom JavaScript because custom JavaScript is a single thread sometimes and it is heavy which you are not using at all and it slows down the overall performance of your website or web app and that's why JavaScript is disabled by default. You can use AMP script which is an extended version in which you can enable your own custom JavaScript inside the AMP script tag and also validator is the functionality which helps you track the performance and accessibility of the website that you have just created and AMP cache is an interesting thing. AMP cache helps you to cache your website on the Google servers on fly so that whenever someone sees a bold icon next to your website in Google search results the website actually loads instantly and it doesn't have any load time at all. So that is actually done by AMP cache and if your website is 100% AMP valid your website will be automatically cached as AMP cached website on Google server and learning AMP for web development has a very small learning curve as we discussed earlier. It uses standard components like HTML, CSS and JavaScript. It is compatible with mostly all modern browsers because it doesn't add any new web capability on itself. It uses existing normal HTML, CSS and JavaScript and it is not dependent on special tooling. You don't need a very cool ID or any other interpreter to work on AMP. You just need you can just start working with your notepad and that's it. Everything is component-based. There is no boilerplate code whatsoever and whatever you need to use inside your website you just need to include those components and that's it. You can learn best practices by example and that's what you can visit AMP.dev for. Now AMP offers a lot of components in its different features and different sets so that it covers almost all of the web capabilities that are existing today and we are going to talk about them one by one. So AMP website is the biggest of them and AMP website helped you to create a user-first website that loads nearly instantly and they are very smooth and compelling. So what is AMP website? It's nothing but a modified version of your normal HTML website into an AMP syntaxed website. As you can see in this example we have converted a normal IMG tag into AMP IMG tag which has made our image automatically lazy loading and responsive in different screens. We don't need to also worry about different drop aspects and things like that and take care of itself. Also the thing that we were discussing before the AMP cache is automatically provided if your website is 100% AMP valid. As you can see in this example this website currently is fully AMP cached and it loads directly inside Google search results without wasting time on actually loading the website and there are a couple of other features also that makes AMP website very unique. So here is another example which you can say as hello world of AMP. Most of our websites use geotagging or analytics tools which really slows down the process because it's a huge library that's included and also it is running persistently back in the background of the website even if the website loads which slow down the device speed and also consumes a lot of battery power. So what AMP geotags or AMP analytics tags does is it actually converts the normal working and functionality into a smooth and low power consuming capability and it only sends the data when the page is loaded. So even on the low latency networks the website will work as smooth as possible. Now the next components being offered by AMP is called AMP stories. AMP stories are a compelling way to narrate your own visual stories. If you're familiar with Instagram or Snapchat or WhatsApp they offer a story capability built in their app but the problem with these is you cannot showcase these stories outside the scope of that app and it also gets deleted after 24 hours so there is no way you can use them to share but it has proven to be the most engaging way of viewing the content and AMP stories is actually HTML syntax so that you can make your own tappable stories. What makes them interesting is that they are fast loading it offers all the capabilities of AMP and also you can use them in full screen mode it works exactly like how our native story feature works they are tappable and they are very easy to create and they have some inbuilt cool animation features that you can use to create engaging experiences. I would like to show you that how AMP story has changed the overall viewing experience so this is my community called as mobile web dev. We were previously using a traditional website but now we are using AMP story as the landing page of our website and you can see how interesting it is that all the things that we want to show to our audience is in a tappable format and the user doesn't need to scroll down find a thing it's just tappable over here that is also a sidebar in which they can find the other things and navigation options they want if they want to share there is an inbuilt share native way options and they can share in their phone or desktop. Let's go inside the code and let's see how complicated or simple this thing is so you can see there is an AMP story wrapper this is the main component which defines the overall view of your AMP story then you have an AMP sidebar that is this thing and then you have different AMP story pages you just need to define your AMP story pages in this format and the grids are actually the different content layers that you're having inside your AMP story as you can see in this one then you can write your custom CSS which is on in the head to add some more customization and things like that. AMP stories also offers a lot of benefit usually we need one of the interesting features that I like the most usually you need a very high analytic tool in order to track what section of your website a user is actually going but by default AMP stories offer a capability in which you can track down until which tappable screen the user is reaching out so that you can track what is the reach of your AMP story different slides of your AMP story you can directly integrate Google Analytics to have that feature and also it is very easy to share as we saw earlier now AMP adds another is another capability being offered from AMP and ads are really not interesting thing for us and the problem is that AMP usually adds usually load slower because it has high resolution images and it actually degrades the overall visibility of your app so AMP ads on the other hand is an interesting way to load your ads also instantly it it is compatible with the normally all modern ad platforms like Google ads and you can just include your AMP ad stack in order to show your Google ads inside your website which loads instantly now AMP email is most important can be said an important feature now at the now these days this AMP email feature is being exercised in almost all the Google services and one of the persons said that it is the biggest thing that has happened to email since the creation of email and that's whole true too imagine the capability that what if any user that is opening your email can directly interact with the content inside your email without actually jumping out of that scope and like for example rating your giving a feedback or rating your content or filling out a form they can do inside the email only if you have noticed recently if you share a Google doc with anyone there is a bolt icon and that shows life changes of the document directly inside your email that is a capability that is offered by AMP email and it's obviously offered by most of the email providers such as Gmail, Mail, RU or Outlook.com so that was all that AMP offers and now it's your turn to actually turn your website super fast by using AMP and how you can do that is by learning AMP through AMP.dev. AMP.dev offers great variety of starting material guides and tutorials different components different examples different courses and you can go through all of them and become a AMP developer. So you can go to AMP.dev and all these things that I just said in the whole thing is actually being documented and well presented on AMP.dev. Contributing is the way that keeps us happy our developers and also it expands the reach of any framework if it's good it should be good for everyone and you can help in contributing to AMP by helping in documentation creating learning material and testing and finding bugs there is new release almost every week you can say and you can help us to reach more and more better features and ad capabilities. So what did we learn today was a lethal combination of PWF progressive web apps and AMP accelerated mobile pages which creates a high speed web experience which is installable like a native app and also fast like a native app. That brings us to a conclusion that every app that is fast and consumes less internet creates let's load on the servers make making earth a greener place. So with that thanks a lot in being my lovely audience and you can check out my blog for more content that I create and more things you can ask me over there. Thank you guys.