#AskGoogleDevsIndia - Web technologies
Namaste. Namaskaram. Hello, india. I'm paul and welcome, back to the third episode. Of ask google devs india. If you are just hopping on to this video series, and you missed the last two episodes, on kotlin, and android 11. Check them out in the link, down below. In this broadcast. We'll answer your questions, on web technologies. We received, questions, on pwa. Performance. Web vitals, and angular. And we don't just have one or two, but a total of three experts. Lined up to answer you today, they are google's, developer, advocates. Stephen, fluin, and andre bandara. And web ecosystem, consultant. Saurabh, rajpal. Now before you hear from them, here are the top updates, from india's. Developer, ecosystem. Beginning, june, gdgs. Across, india have been hosting, online meetups, to discuss, what's new in android, 11.. They've had as many as 20 events lined up already. And a lot more to come. You can attend one too by clicking the link in the description, below, and signing up for an android 11 event of your choice. Gdgs. Have also hosted, web.dev. Live india, which was a four day online event, covering topics, like performance, developer, tools. Amp, pwa, privacy, and a lot more. The event featured, 26. Speakers. And 5, 000 developers, tuned in to watch it you can also watch all of the talks, at the following, link. This year, google cloud has transformed. The annual, cloud next event, into an all digital, experience. Called google cloud next, on, air. 11 of india's, gdg, cloud, and gdg, communities, have come together, to conduct, google cloud next extended. On app, now extended, events. Tailor the cloud next content. For the regional, developers. The communities, will be covering the latest in google cloud, through demos, deep dives, and a host of speakers, from all over the world, are set to join. And it's going to go on for nine weeks, so please. Find an upcoming session, and register. At the link below. And of course. Whether you are an aspiring, developer. A student developer, or a professional. We have programs, that will interest you so click through the link, and see how you can join, a developer, community.
Near You. Those were the top updates, for you, it's now time to answer your questions, on web technologies. So over to you steven, andre. And saurop. Stay tuned till the end. I'll be announcing, the topic, for the next, episode. So thank you very much paul, so let's kick off with the first question. I want to learn more about progressive, web apps. And if flutter, can be used for pwas. Pillowboys, have been around for a while, and there's plenty of content available on the topic. And a lot of that content is free. Web.device. Let's learn, is a great place to start, it has a dedicated. Section, on progressive, web apps, it covers, beginners, topics, like, what are progressive, web apps, and more advanced, topics, like, how to create, your own app install experience. Make sure to check out the content. And for for the flutter part. It has beta support, for web apps, check, footer.dev. Web for updates. Yes. Thanks andre for pointing out to web.dev. Learn, as a starting, place, according to me, it's a great learning hub with dedicated, sections, for many topics, including web performance. Some of you might already be aware that there are new performance, metrics, being introduced. Very recently, which are called, web vitals. As the name suggests. These metrics, are pretty, critical for your website. Indicating, the quality, of user experience. Just like pwas. There's a dedicated, section on web vitals, and its link is web.dev. Vitals. We also had one of you asking about, how to get started, in web technologies. Are there any resources. Or what is the future in this technology. So i want to say that while, web.dev. Is the hub of all modern web techniques, for the people looking out to begin learning more about web fundamentals. And curious, about learning path in the field of web, one can additionally, choose to refer. Developers.google.comweb. For very exciting resources. Linked to codelabs. Videos, and much more. There's also a chrome developer's, youtube channel, which releases, a lot of videos, regularly, on chrome, and web updates. Make sure to subscribe to that too, lastly. I want to cover that, it's been 20 years for the web technology. Many technologies, have come and vanished. But the web has been prevalent. Primarily, because, it still remains the first touch point, for any user explaining, a new business. Ask this question to yourself. Don't you first visit a company's website. As soon as you want to try it out, or know more about its offerings. If you answered yes, which you probably would have, then you know it. Web is here to stay. And companies, of all sizes. Have understood, how important, it is to offer good web experience, to the first time users. So that they graduate, later, to be their loyal customers. Who download, apps or continue, to use website, as returning users. Stephen. Over to you for sharing about getting started about. Angular. There are lots of great ways of getting started with a career in web technologies, with angular. On our website we have a great url angular.io. Start, that hosts a tutorial that lets you get started with angular fast, without requiring, any sort of setup or installs. If, for example you're already familiar with technologies, like node.js. Or command line or terminal. We have other guides and tutorials, as well. Check out angular.io. For all of our guides tutorials, and documentation. Back to you andre. Thanks steven. For the next question. What are the best, practices, for progressive, web. Apps. So let's start by the baseline. The minimum, repeatable, should do. It should, start fast and stay fast. It must work in any browser. And, have responsive. Screen to any size. It should provide, an offline, page, and be installable. Now, for an. Optimal experience. You should provide a full offline, experience. It must be fully accessible, and discoverable, by search. It must work with any input type. And provide, context, when requesting, permissions. Check out web.dev. Pwa, checklist, for more in-depth, information. As i mentioned. Start fast and stay fast. I think webvitos. Is the update version of the rail model.
Is It. Thanks andre for bringing this up, as you rightly pointed, out, one aspect, of building a useful, pwa. Is to give an app like fast and seamless, experience, even on the web. And hence, performance, becomes a critical piece to keep an eye for. Core web vitals, are the subset of web vitals, that apply to all web pages. Should be measured by all site owners, and will be surfaced across, all google tools. Each of the core web vital, represents, a distinct facet, of the user experience. Is measurable, in the field, and reflects, the real world experience, of a critical, user-centric. Metric. The metrics, that, make up core web vitals. Will evolve, over time, as we also learn more about the increasing, user experience, needs, and expectations. In this rapidly, evolving world. Having said that, the current set for 2020. Focuses, on three aspects. First. Loading, second, interactivity. Third, visual stability. And includes the following metrics, for each one of them. First, lcp. Also known as largest contentful, paint. This measures. Loading performance. To provide a good user experience, lcp, should focus. Or occur within, 2.5, seconds of when the page, first starts loading. Second, fid. Also known as first, input delay. Which measures, interactivity. To provide a good user experience. Pages should have a fid, of less than 100 milliseconds. Third, cls. Which is cumulative, layout shift. This measures. Visual stability. To provide a good user experience. Pages should maintain, a scale of cls. Of less than. 0.1. Now that we know what common web vital, is, let's see how it is different, or complementary. To the real model. Rails stands for four different aspects, of web app life cycle, response. Animation. Idle. And load, that's real for you. Users have different performance, expectations. For each of these contexts. So performance, goals are defined, based on the context, and how users perceive. Delays. Which is based on our ux research. Hence. Rail is a lens, for looking at websites, user experience, as a journey, composed, of distinct, interactions.
So Basically. It actually covers, the interactivity. Part of the website. More in detail. Therefore. Cwv. Is not an updated version of rail. Model. Rather, if you follow rail model guidelines. You are in a way. Working towards solving the interactivity. Problems, faced by the users. Thereby improving, your web vitals. Metrics, like, first input delay and total blocking time. Andrei. Apart from speed, you mentioned. Building offline experience, is useful. While building a good pwa. Do you have any related question for that. Thank you sarga. For the next question. How do we make a post request, in appearably. While the app is in offline mode. And send it to the server, when connected, to the internet, again. The background, sync api, makes it easy to achieve this. With this api, we can ask the service worker. Worker to do the request for us. If the user is offline, it will automatically. Send the post request, when the connectivity, use is restored. On the application. We first register the service worker. Then, on the form submission. We make a background, sync request. This will be intercepted, in the service worker, when on the sync event. We can then, send the actual, post request. The api, has good browser support. But it doesn't work everywhere, yet. We can solve this by using feature detection. Check for the sync manager, and, if it's available. Trigger the sync event, as discussed, previously. Otherwise. Just proceed as you would do normally, when handling a post request. Hey stephen, why don't you tell us a little bit more of about the specifics, for angular. When dealing this with this situation. Sure. All of the same pwa, best practices, apply in the angular ecosystem. But you can also take advantage of tools like ngrx, that can make it simpler to sync and save the application, state, with a temporary, storage like local storage. While building offline, use cases, is, really important to help users, one has to keep in mind the amount of storage one can use, over to andre, to answer a similar related question. Is there any limits to store data on browser. And if then. How can we increase the size of storing data on the browser. Yes all browsers, have limits on how much data an application can store. And it varies across browsers. Chrome for instance. Allows up using up to 60 percent of disk space. Internet, explorer, 10 and later, allow up to 250. Megabytes. And will prompt the user when more than, 10 megabytes, is user you is used. Firefox. Allows up to 10 gigabytes. Safari, seems to support, one gigabyte, and prompts the user for 200. Megabyte, increments. The storage manager api. Allows developers, to query the browser on how much space, an app has available, to use. Unfortunately. Is not supported, in all browsers, yet. Check for more details, on web.dev. Slash, storage, dash 4, dash the. Web. A related, topic, to this is cache eviction. By default, it happens in the best effort mode. And it means that the browser, will start deleting, data. Starting, by the least recently, used origin, or simply prevent, more data to be saved. Behaviors, change slightly, between browsers, i recommend, checking, the storage blog post for more details. As we can see, limits, are very generous. And, data shows that in most cases. It is the data is deleted by user manually, instead of being evicted. Sometimes, developers, may have critical use cases. And the storage. The persistent storage api can be used. The api. Is straightforward. It is just calling. Navigator.storage.persist. But there are two important, things to know. The first one is that when the api invoked. The browser will display a permission, dialog to the user. And the second thing. Is that. The data will be deleted, even if if the user manually clears storage. Check the blog post on web.dev. Persistence.storage. For more information. There were a lot of specific, questions about angular. And i left stephen, walk you through them, over to you stephen. Why should one prefer angular, over other alternatives. There's lots of great ways of building, great web applications. And on the angular team we think that a diverse, ecosystem, of tools, is essential to giving developers, choice, and empowering. Them to build the best applications, for their needs. Many people like to choose angular because it has an opinionated. Batteries included, approach, that features things like a cli, routing internationalization. And much more built in. Angular is great for large projects or large teams where you have to worry about things like testability. Scale, and maintainability. How is the new trademark, organization, for open source going to affect angular. The angular trademark, is now part of the open usage commons. This is a group created to make it easier for organizations, to rely on the use of trademarks, like angular.