#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.
In The same way that the mit license, lets you use and modify angular source code. We really don't expect this to affect any teams organizations, and this move should only serve to help protect you in the future. What type of ai learning is included in angular, or what kind of projects can be made, on angular related ai. Angular is a front-end focused framework but you can integrate any ai or ml solutions you like. We often see developers using machine learning for things like pre-loading, code that a user is likely to need. Guest.js, is a javascript, library, that does just this and it was created by a member of the angular team. Lastly. Some of you asked questions, which were not part of either of the categories. Of pwas. Web vitals, or angular. However, in the web community's, interest, we still selected a few of the interesting, ones and would try to give you the best possible, answers. So here goes, the first question in the miscellaneous, category. This question is more around how is google officially, helping, cms's, like wordpress. Woocommerce, and many more, to ensure, it's easier for cms developers. To build websites. Leveraging, amp and pwa. To answer that, i'd say there are tons of cms's, around the world, and it's not easy to officially roll out plugins for each one of them. In fact, it's impossible, to even convince them to add such requirements. In their roadmaps. However. Teams at google, have been pretty invested, in rolling out features. And official plugins, for wordpress. Which is still the most widely used, cms, as of 2020.. As part of these initiatives. Google. Along with community contributors, of course, already have official plugins, for app pwa. And site kit for wordpress. The slides, in parallel showed you the links for the same. Don't get disappointed. If you are using some of the other platforms. And if you do wish to see some more offshore plugins, to be rolled out for your favorite cms. Just make sure to raise, issues in the official forums. And let the open source community, plus one to those issues. The teams at google, want to ensure, maximum, developers. In the ecosystem. Are getting benefited. With their efforts. And if there's a huge demand, on any of the other platforms. I'm sure, our teams would be happy to start working on them. Maybe they're already working for your favorite cms, while we're still discussing it right now. For the second question in the miscellaneous, category. We actually clubbed a few of the similar looking questions together. Where people were asking, about the best way to get started, with learning, as a beginner. Also. If one should focus, on first learning, html. Js css. And so on, or should they start with learning a particular, framework like angular, react etc. Well, as a beginner, one should definitely focus on the learning, the basics, right. For example. If you invest your good enough time on learning vanilla javascript. Then it's a smooth journey for you to learn any of the gm frameworks, in the wild. And that's the best way to go about it. There are tons of material, available, online, across different formats. There are official docs, official videos.
Tutorials. Code labs and much more. For example, for javascript. You have w3schools. Exhaustive tutorials. For angular you have angular.io. For react you have, react.js.org. And much more. Just pick and choose the one that you find the most interesting. One more thing i want to highlight, here is that. Since amp, which is accelerated, mobile pages. Is a component, based framework, and one doesn't need to go through, a steep, learning curve for learning javascript. And css. Which are kind of allowed very restrictively. Within app. Business find it amazing to get started with it and making amazing websites. The official, amp team has created, three basic amp learning courses. With proper tutorials, and hands-on code labs. To top that all, amp has an amazing official documentation. On am.dev. Where you can find tons of examples. And even an online playground to experiment. Right within the browser. You can access these resources, at, amp.dev. Documentation. Courses. Now i'll pass on the ball to andre. For taking us through the last two questions in the miscellaneous. Category. Thanks robert, for the next question. Can we use firebase. In web applications. Yes. Not only most apis, like authentication. Real-time, database, firestore, notorious, work. But firebase, also provides, a hosting feature. That enables serving both static, or dynamic, web content. Check, firebase.com. Docs. Hosting for more. And for the next question. How can i implement, ao, ai. Ml, in webtech. There are many ways to use ai, or machine learning in webtech. Tensorflow.js. Is a powerful, tool, that enables, ml on nodejs. And the browser. You can use it to run existing, model. Or create your own custom model. Check, tensorflow.org. Js, for tutorials. Models and demos. And there you go, thanks for sending your questions, and you hope you have enjoyed, watching the video, as much as we enjoyed making it for you, back to you paul. Thank you steven. Andre, and saurabh for answering the questions on web technologies. Ask google devs india's, next episode, will be on google, cloud. So drop your questions, in the form link in the description, below. And as always, if you'd like to know more about the latest shows, from google devs india. Hit the subscribe, button, and you can also follow us on twitter. At google, devs, i am. Thank you all folks. Stay safe, and see you all in the next. Episode. You.
2020-08-02 21:29
