 Okay. Hello guys. So first of all, I think I have to do some kind of refresh work on you guys because I think you all are tired. So can everybody stand on wherever you are sitting? Please. Yes, please. Mumbai, what's happening? Okay. So this is some experiment that I saw on one of the Google DevFist and what it is, it's called a clap meter. So what I'm going to do, I have my hand. If I do like this, you don't need to clap, but if I raise my hand, you have to clap louder. Okay. So can we have a check? Awesome. So that means everyone of us is alive and asleep so we can start. So we had an awesome session from Imran about how we can make progressive web app. And I was actually going to start with how to make progressive web app, but that's good. He has covered it very well, better than me. And I will try to continue from there on that what are the other things that you need to kind of consider. So do I need to turn it on guys? Batteries down. Sharma, I am working at TWIMBIT and also I am a working group lead for AMP Global. So AMP stands for excellent mobile pages and we'll talk about it in this talk. So just carrying on from the last point of Imran, and there was one question like how do we actually match the last capability of an app, that is if we really want to place it into the Play Store. So there is a new tool from Google itself. It's called TWA. It's an open source toolkit. You can download it from GitHub and you can convert your PWA into a Play Store listed app using this TWA. So that's a little last head back. And so it's awesome. You have your PWA that is rendering as fast as your native app, right? Right guys? But not always. What do we see sometimes is this thing? What is this? This is a lazy loader, right? And whenever we are in India I am travelling through trains a lot of time or flight or like at places where 4G is not good, the internet speed is not good, our content is in loads fast. And the issues extends which actually is kind of a problem for actual publishers, content creators that the pages load slow, which results in non-performance of what we actually strategize for our app. The unresponsive pages, you know, all of us are having issues with them. And the biggest problem that I face is whenever you are trying to click on some content, add loads quickly and you incidentally click on add, right? So what if I told you like these are our problems that not only Indians are facing but people around the world are facing. Thanks, Imran. And for that particular reason, I am here. So it turns out if your app, website or an app doesn't load within 3 seconds, 50% traffic on a, you know, go out. So you are going to lose all these people. So is there a solution to this? Guys? And turns out it is, I don't know if all of you is working. It's called AMP. So it was a great intro about AMP and I am going to cover all of these aspects that you saw in this quick video one by one during my session. So what AMP actually means is accelerated mobile pages. So imagine right now we are all discussing what are the best practices of how to make website faster, what are the various ways to do it. And everywhere we get on, like, you know, on this point that there are a lot of things to remember at these some points. So somewhere we remember, like, let's create a notepad file or just create a hands-off, like these are the two-do list that we have to do but we always forget. So what AMP does is it's actually a web framework to make your website faster. And web frameworks are not a new thing. We got into some SPA technologies also, like React or Polymer and all these things. And similarly, AMP was introduced but it was the first time that it was a combination of different code bases and everything and that's why AMP was brought into this web community. So AMP is not just a JavaScript or a CSS framework, it's a web framework. It combines all the capabilities of HTML, CSS and JavaScript in order to make your website faster. So it enforces on the performance, obviously. It forces on accessibility which not much people can talk about. Like, your website should be also be easily seen by those people who cannot, you know, use all sensory information and all that. And it should be reliable, obviously, even when you are in low latency networks. And your design should be responsive built in. So you don't need to create it mobile first or adaptive as one of the fellow speakers said. What if your framework really pushed yourself that your website is automatically designed responsive? So that is what it provides. And, you know, guys, the favorite part is the learning curve to this is really small. I learned AMP and contributed my first project in just like one week. So that's really easy and I'm going to introduce through everything that AMP covers and how you can also master AMP. So how AMP actually helps is by using three components, that is AMP HTML, AMP JavaScript, and AMP cache. And how AMP actually improves your website performances is it actually extends the HTML tags that you are already using. I'll cover this one aspect very carefully when I'm on that slide. So what this means, the standard HTML coding which we are used to using IMG tag or video tag, sometimes we are not able to put, you know, things correctly. And what happens it results in slow performances. Also, AMP restricts custom JavaScript to be used in your website. So because JavaScript is the main reason it runs multi-thread applications sometimes in the background which results in slow loading. So it restricts all kind of custom JavaScript. But there are solutions of how you can still achieve and have custom JavaScript in your website. Also, there is an AMP validator which validates whether your website is AMP valid or not. So we'll make sure that also. And it emphasis on server cache and optimizing all pages to valid AMP. Learning AMP for web development is really easy. If you already know basics of HTML, CSS, and JavaScript, you can directly jump into and start coding your first AMP website. And then it's compatible with all web, all modern web browsers. Whether it's this Safari or Chrome or Mozilla, it's compatible with all browsers. And it doesn't depend upon special tooling. You don't need a specialized IDE or any tool set to run it. You can just start in your notepad or sublime text whatever you are familiar with. And you can just include the respective AMP libraries in order to use those components. It's all component based. So you only need to learn those basics, only those components that you are actually going to use in your website. You don't need to learn all everything about AMP. And also it really focuses on learning by example. So every component that you are trying to work on is very familiarized with all the example code that is available online. AMP offers a lot of things out of the box, which we'll cover one by one. One of the best thing it offers is AMP websites, which is a direct way of creating your websites and web apps really fast. The next one is AMP Stories, AMP ads and AMP email. So AMP website is an easy-to-way to create user-first website that are loaded in here instantly. They are compelling, they are smooth and they focus on all the design aspects of accessibility, responsiveness and also the performance. So what is the AMP website? So here is a quick example of how a AMP website look like. For example, you are using IMG tag in one of your website. So this is what I have pulled from a WordPress website. And I will also tell you how you can make your WordPress website an AMP compatible website for performance. So it's a normal IMG tag. What I have done, I have changed from IMG tag to AMP IMG tag. And it automatically will implement all the things that are required to make my website faster. Even if it includes lazy loading, it includes responsiveness, scaling of these images, caching of these images. Everything done by this single HTML tag. So that's how easy it is. You don't need to implement any other separate CDN or image optimization technology. So this is one of the examples. Same can be done for videos, different ads components and different things. So if you have used the web recently you might notice that there is single this bold sign next to some of this website. And when you click on this website, they just load instantly. That is what AMP actually does. So for example, if you are searching something on Google, which is the direct way of finding new data, as you can see in this example, you search for something, then you have these carousel and they have a bold sign. As soon as you tap on it, it loads like it was already stored on your phone. So this is the best feature of using AMP code. It caches all the files to Google servers, Google CDN. So whenever someone is Googling your website, if your site is AMP valid, the content will be loaded near instantly like this. Wouldn't this be amazing, guys? Right? Also it is very easy and flexible to maintain your code. You only need to code and work on those components which you are going to use in your website. And obviously building AMP website is easy. There are third party tools, even WordPress tools, in which you can start from no brainer, no coding things and still you can make AMP valid websites. Here is another sample code. What we have done, we have imported some of the scripts from the AMP CDN which are updated regularly. You don't need to update these libraries on your own. And then we have implemented the AMP geotag. Now, geotags and analytics are the biggest thing that are important for website publishers to track how well their website are performing. But the problem with analytics and geotag, like these analytics tools is they consume a lot of data from the phone. Even if your website has loaded, it will continue still fetching data and sending data to the actual server because it needs to record that data. If we simply replace all these code lines and all these components with AMP functions, then it keeps remembering your website and whenever your website is loaded, then only it pushes. So what this means is it will keep sure that the web speed, even if it is slow, it is still performing well. And obviously, after you implement AMP, it increases the performance of your website by a fraction. As you can see, the first content is in just 1.8 seconds. So that is what AMP website does. Next is an amazing way that is AMP stories. So how many guys use stories, whether it is WhatsApp stories or Instagram stories? I have a question for you. Do you know who actually first invented stories? Which social media platform? Yes, you are right. So Snapchat came up with the idea of tappable stories and right now on the web, it's the biggest way and easiest way to consume content. What if you can also create web content that is tappable, interactive and you can create same Instagram or Snapchat like stories feature inside your website. That is what you can do with AMP stories. So AMP stories are fast loading again using AMP capabilities. They are full screen. They work directly in full screen and they are tappable same as your WhatsApp or Instagram stories and they are easy to create. You can add custom animations also. As an example, I will just show you. Awesome. So in this, I have AMP story that is made by CNN. As you can see I am able to tap this and there is a background video that is playing near instantly and this is what all AMP provides. If we jump into the code you can see this is all AMP tags that I have used and there are different, you can also implement ads and there are different part of the story pages and then inside you have your own grid layers and you can go on and on amp.dev and see how you can directly get and create your own AMP stories. So the benefits that AMP stories provide is, as I said it's a beautiful way of telling your content, new way of storytelling. You don't need to scroll, you can tap and that's how you can create your own content and obviously it loads fast near instantly and also it gives you analytics and tracking of how people are able to reach your content. Right now if you go to analytics, you can only see how much time people are spending on your website. You cannot see which part of the content they are actually seeing and what they were interested on. You can get all that information and implement these AMP stories in your websites. Next one is AMP ads. I know everybody hates ads but that's how content publishers earn money and what more we hate is on a slow connection ads are the first one that are needed to be loaded. So AMP ads provide this kind of experience in which ads loads nearly instantly. You can use AMP ads, tags and implement whatever ad engine you are using whether Google ads or Facebook ads inside your website and it will load nearly instantly. And the last one is AMP emails. So one of these fellow said that AMP email is the biggest thing that has happened to the email since the creation of email. So what if you have to do registration for this word camp? Instead of going to a next form, you can fill the form directly in your email box. That is what AMP email actually provides. You can directly interact with the web content inside the email with just normal coding that you used to do with normal HTML code. If you are familiar and have used Google docs recently, you see like whenever someone shares a content with you, you can see live changes happening directly in your email. You don't need to go and open the document. That is also one of the technologies that AMP email is providing. You can also use in order to provide your content users the flexibility of AMP and also enrich these things. And at last, AMP is already ready for WordPress. There is a plugin called AMP by AMP project contributors where you can just install it, create your AMP stories, create your AMP stories, create your pages AMP valid and all the things that AMP provides and also help you rank on the top of Google search results. It's just a tab away when you install this plugin. It does everything for you. There are AMP ready themes also in WordPress which you can use in order to create AMP valid websites. What you can do next is go on amp.dev and use all these tools that they have provided using examples and everything and learn AMP like me and then call yourself a contributor because AMP is also completely open source like WordPress and you can also contribute features from your. So what did we learn from Imran's site that you can create PWAs which are websites performing like AMP and then you can have AMP that can create nearly fast web pages. So this legal combination can make you a good web developer and also a already progressive web app developer. Because what I believe is every faster app that you make consume less power on your server and makes Earth a better place, right? So that's me, Aman Sharma. Any questions? I'm ready to take. Thank you.