2023 Google Developer Conference: New Trends in Web Platforms

Preface

At the recent 2023 Google Developers Conference, Google proposed a more powerful and open Web that can also simplify development work and support AI. Paul Kinlan, senior development technical promotion engineer at Google and director of Chrome development technical promotion department, explained the new features launched by Google at the 2023 Google Developer Conference, including upgrades and achievements worthy of attention in web development and how the web can accelerate development. This article mainly describes some of Google's new features in the Web platform. I hope you can gain something.

一、Open in WordPress playground

WordPress playgroundIt is an extension in the Google App Store. It is actually a project that WebAssembly（WASM）runs in the browser , allowing users to quickly test plug-ins and themes without setting up a local development environment. Ability to extract code from , , or even applications written and have the code run on the Web platform. WebAssembly now supports and , allowing and developers to take advantage of it and leverage native performance to reach new users on the web while reusing existing code.wordpress

WebAssemblyC++C#KotlinSwift KotlinDartAndroidFlutter

2. WebGPU

After years of development, the Chrome team has launched WebGPU(Web Graphics Processor), which allows for high-performance 3D graphics and data-parallel computing on the web, offloading and tripling the browser's JavaScript工作负载performance ,机器学习模型推理 making the browser 3D Explosive performance! Finally let the browser game render . At present, many widely used WebGL libraries have gradually implemented WebGPU support. For example, existing games in other libraries will also be improved; preliminary support is announced ; optimized versions are supported for most operators . Support is in progress. In terms of rendering performance, WebGPU is more than 3 times faster than webGL. In terms of computing performance, WebGPU is more than 50 times faster than webGL.具有许多不同对象的高度详细的场景
Babylon.jsJavascript3DPlayCanvasWebGPUTensorFlow.js WebGPUThree.jsWebGPU

3. New core Web indicator INP

INPYes, it's Interaction to Next Paintan abbreviation, which translates to interaction with the next draw. Paul KinlanIt was mentioned at the 2023 Google Developers Conference that INP will become one of Google's core Web element indicators in March 2024. It will replace the FID indicator and become the core Web element indicator. It is a website performance metric that measures the responsiveness of the user interface, i.e. how quickly the website reacts to user interactions such as clicks or keystrokes, meaning poor ones may impact our Google rankings INP. INPHow to interpret the rules of good and bad? The details are as follows:

4. Webview

Google developers Webviewintegrate content from the web into applications through (views) and have made significant updates in performance and security to improve the user experience. When you are in a split-screen view mode, you can drag Webviewthe pictures in to different applications. This is one of the many changes and improvements that Google has made to improve the network experience in the application. Of course, if due to time constraints, Webview sometimes Beyond expectations, the Google Chrome technical team has provided two great options:

1、Custom Tabs

Custom Tabs(Custom Tags) provides a great way for applications to integrate seamlessly and securely with the user's preferred browser, eliminating the need for use Webview. Users can keep their own bookmark history and passwords, and can also customize labels. When using custom tabs, the browser tab overlay covers the entire screen, so you can customize the height of the tab overlay so users can interact with applications and web content at the same time.

2、JavaScriptEngine

JavaScriptEngineThe Alpha version released by Google Chrome JavaScriptis different from the interpretation and execution principle of other engines. It directly JavaScriptcompiles into binary code and then executes it, and its performance is very powerful. It allows your application to evaluate and code without creating Webviewan instance , and most importantly, it runs in a different process, making it a very safe and stable way to run your application.JavaScriptWebAssemblyJavaScript

5. Passkeys

What Paul Kinlanhe said at the 2023 Google Developer Conference is that users can quickly use it to re-authenticate . Users with biometric sensors, such as fingerprints, faces, screen lock settings or physical security keys, can securely log in to their Google accounts without having to remember and manage each password. The system can automatically help users manage passwords. . Pass keys provide a powerful and effective protection mechanism against threats such as phishing attacks. Once you create a passkey, you can use it to easily log in to your Google Account and authenticate your identity when making sensitive changes. This is much simpler than the traditional one that requires a password and sometimes requires two-factor authentication. The following settings can be made: Click to create a pass key, and then you can set it up.PasskeysPasskeys

六、View Transitions API

When called startViewTransition(), Google Chrome allows you to record a snapshot at each stage, allowing for a smooth transition between different page states, which is a truly native-like smooth experience. The specific usage is as follows:

document.startViewTransition(() =>  触发DOM变化);

This API is very suitable for interactive media like video, and the user experience is also excellent! Currently, Alibaba’s retail platform in Spain already uses this API.

7. Google Chrome developer tools optimization

Google Chrome has launched some new features in the developer tools, which can help you identify problems faster and reduce the time of debugging the website. Here are the following aspects:

1. Override HTTP response headers

In the past, we needed to access the network server to set HTTP headers. Now we can directly override the corresponding headers in the network panel and add custom headers.

2. Change stack trance

When we debug the framework, we often see irrelevant content stack trance. This actually comes from the framework itself, not from the developer's code, so the Google development team has improved it and removed the stack tranceredundant content, because we only focus on the code written. , others are removed, including third-party code.

8. Baseline

Google is working with other partners Baselineto try to create a stable, predictable view that takes the guesswork out of whether features are being used. A version is released every year Baselineand its compatibility is so good that it is already being NPMreleased.

Summarize

The Web brings new developments and changes every year, including continued improvements in performance and the addition of new capabilities and features that enable Web applications to provide richer, more interactive user experiences. Google provides a series of powerful tools and solutions in this area to help developers make full use of these new technologies to solve problems in projects. These tools and solutions not only help developers meet specific project needs, but also ensure that their websites provide the best performance and user experience across a variety of devices and browsers.

If you want to learn more about the 2023 Google Developers Conference, don’t miss the replay video of the selected keynote speeches.
Direct link: https://marketing.csdn.net/p/8b1b4b3f5f0fe4c3cdf1c2d5e42a05c3

For those who want to study in depth and learn the knowledge points of the conference, the Google Developer Online Course officially created by Google is a wonderful learning platform that allows you to systematically master the new knowledge of the conference technology and help you learn with twice the result with half the effort.
https://developers.google.cn/learn/pathways?hl=zh-cn&utm_source=csdn