Top 10 web updates from Google I/O ‘24

Summary

In the latest Chrome and web announcements from Google I/O, Sparkle Meadows unveils innovative updates including Gemini Nano, an AI model for on-device tasks, enhancing web development with high-level APIs like Translate and Transcribe. WebGPU and Wasm improvements promise faster AI at scale, while Chrome DevTools gets Gemini integration for easier debugging. New APIs like Speculation Rules and View Transitions aim to improve navigation and visual transitions, with tools like the Web Platform Dashboard and Baseline updates ensuring cross-browser feature support. Angular advancements in partial hydration and Reactive APIs with Signals are highlighted, along with the introduction of photorealistic 3D maps in the Maps JavaScript API.

Takeaways

• 🌟 Sparkle Meadows introduces the latest Chrome and web updates from Google I/O, focusing on innovative capabilities for powerful web experiences.
• 🧠 The introduction of Gemini Nano, Google's efficient on-device AI model, into Chrome desktop allows developers to deliver advanced features without worrying about prompt engineering or cost.
• 🔧 The Prompt API, an experimental feature, enables developers to send natural language instructions to Gemini Nano, simplifying AI integration.
• 🚀 WebGPU and Wasm are enhanced with new improvements like 16-bit floating point values and JavaScript Promise Integration to speed up AI at scale.
• 🛠️ Chrome DevTools is updated with Gemini to provide insights and assist with debugging, making it easier for developers to understand and fix issues.
• 🔄 The Speculation Rules API allows for near-instant navigation by prefetching and pre-rendering pages, significantly improving load times as demonstrated by Tokopedia.
• 🎨 The View Transitions API facilitates smooth animations between page states, enhancing the user experience in both multi-page and single-page applications.
• 📈 Updates to Baseline include the Web Platform Dashboard, providing a comprehensive view of web platform features, their development, and interop status.
• 🌐 Akamai's Rum Archive introduces a new tool for developers to see the global user share of Baseline versions and features, aiding in decision-making for feature adoption.
• 🌐 Angular is working on partial hydration to improve core web vitals by loading and hydrating only parts of the app when needed.
• 📡 Angular introduces new Reactive APIs with Signals for fine-grained change detection, reducing the need for manual UI optimization.
• 🗺️ Google Maps platform brings photorealistic 3D maps to the Maps JavaScript API, allowing developers to create immersive web experiences with just a single line of code.

Q & A

What is the main focus of the latest Chrome and web announcements from Google I/O?

The main focus is on innovative capabilities and tools aimed at building web experiences that are more powerful than ever, with a significant emphasis on AI and its integration into the web development process.

What is Gemini Nano and how does it benefit developers?

Gemini Nano is Google's most efficient model for on-device tasks. It allows developers to harness the power of on-device AI without worrying about prompt engineering, fine-tuning, capacity, or cost, by simply calling high-level APIs like Translate, Transcribe, or Caption.

What is the Prompt API and how does it work?

The Prompt API is an experimental API that enables developers to send natural language instructions to an instance of Gemini Nano in Chrome, allowing for further exploration of use cases and AI capabilities on the web.

How does the introduction of WebGPU and Wasm improvements contribute to AI efficiency on the web?

WebGPU and Wasm serve as the backbone for on-device AI on the web. Improvements such as 16-bit floating point values in WebGPU and memory 64 and JavaScript Promise Integration in Wasm make AI run faster at scale on a vast majority of devices.

What is the Speculation Rules API and its impact on web page navigation?

The Speculation Rules API enables near-instant navigation by allowing pages to be prefetched and pre-rendered in the background, resulting in significantly faster load times.

How did Tokopedia benefit from testing the Speculation Rules API?

As an early tester, Tokopedia experienced a 4.8-time improvement in loading time to the Largest Contentful Paint (LCP) of their product description pages.

What is the View Transitions API and its purpose?

The View Transitions API allows for easy animation between page states, enabling developers to create a fluid navigation experience in both multi-page applications and single-page apps.

How did Airbnb utilize the View Transitions API in their platform?

Airbnb used the View Transitions API to create smooth and seamless navigations from the listing editor sidebar to editing photos and adding amenities within a fluid user flow.

What is the Web Platform Dashboard and its purpose?

The Web Platform Dashboard is a tool that maps out the entire web platform as a set of features, allowing developers to follow their development and check their interop status.

What is the significance of the new tool for developers on Akamai's Rum Archive Insights?

The new tool allows developers to see the global user share of Baseline versions and features, helping them understand which features are unlocked with a specific version of Baseline and integrate them into their workflow.

How is Angular improving web app development with its new features?

Angular is introducing partial hydration to load and hydrate parts of an app only when needed, improving core web vitals for performance-sensitive apps. Additionally, it offers new Reactive APIs with Signals for fine-grained change detection, enhancing the developer experience.

What new capability is being added to the Maps JavaScript API from Google Maps platform?

The Maps JavaScript API is being enhanced to include photorealistic 3D maps, leveraging Google's rendering technology to deliver rich 3D maps quickly and efficiently.

Outlines

00:00

🌟 Chrome and Web Innovations at Google I/O

Sparkle Meadows introduces the latest Chrome and web updates from Google I/O, focusing on AI advancements for web development. Gemini Nano, Google's efficient on-device AI model, is now integrated into Chrome desktop, allowing developers to deliver powerful features without worrying about prompt engineering or costs. The Prompt API enables natural language instructions to Gemini Nano, and the Early Preview Program invites developers to shape the future of web development. WebGPU and Wasm improvements, such as 16-bit floating point values and JavaScript Promise Integration, aim to make AI run faster on a wide range of devices. Developers can choose between built-in AI, server-side AI, or a hybrid approach. Chrome DevTools is enhanced with Gemini to generate insights and assist with debugging. The Speculation Rules API is introduced for near-instant page navigation by prefetching and pre-rendering pages. Tokopedia benefits from this with a significant improvement in Largest Contentful Paint. The View Transitions API allows for smooth animations between page states, as demonstrated by Airbnb's seamless navigations. Updates to Baseline and the introduction of the Web Platform Dashboard provide a comprehensive tool for developers to track web platform feature support and development.

05:01

🚀 Angular Enhancements and 3D Maps Integration

The script discusses Angular's advancements in web app development. Partial hydration is being developed to load and hydrate only parts of an app when needed, improving core web vitals for performance-sensitive applications, with a Developer Preview expected later in the year. Angular also introduces Reactive APIs with Signals for fine-grained change detection, allowing for more granular control over state changes in components without manual UI optimization. The new APIs are available out of the box. Additionally, Google Maps platform's Maps JavaScript API now includes photorealistic 3D maps, leveraging Google's rendering technology to provide rich 3D maps with information on over 250 million places and businesses worldwide. Developers can integrate this feature with just a single line of code during the experimental phase at no cost. The script concludes with excitement for the potential of these updates in building immersive web experiences.

Keywords

💡Chrome and web announcements

The term refers to the latest updates and features being introduced by Google for the Chrome browser and web development ecosystem. It is central to the video's theme as it sets the stage for the various innovations and improvements discussed, such as on-device AI capabilities and new APIs for web developers.

💡Gemini Nano

Gemini Nano is Google's efficient AI model designed for on-device tasks. It is a key concept in the video, illustrating the integration of AI into the Chrome desktop experience. The script mentions that developers can harness its power without worrying about prompt engineering or cost, highlighting its role in simplifying AI deployment for web applications.

💡On-device AI

On-device AI refers to the execution of AI processes directly on the user's device, rather than relying on cloud-based services. In the context of the video, it is a significant advancement that allows for more powerful and responsive web experiences. The script emphasizes the benefits of using Gemini Nano for on-device AI, such as reduced reliance on network connectivity and enhanced privacy.

💡High-level APIs

High-level APIs are application programming interfaces that abstract complex operations, allowing developers to perform tasks with simpler code. In the video, it is mentioned that developers can utilize high-level APIs like Translate, Transcribe, or Caption to deliver AI features to users, demonstrating the ease of integrating AI into web applications.

💡Prompt API

The Prompt API is an experimental feature that allows developers to send natural language instructions to AI models within Chrome. It is highlighted in the script as a way to explore further use cases for on-device AI, showcasing the potential for more intuitive and flexible interactions with AI in web development.

💡WebGPU and Wasm

WebGPU and WebAssembly (Wasm) are technologies that enable high-performance graphics and computation on the web. The video discusses improvements to these technologies, such as 16-bit floating point values in WebGPU and memory enhancements in Wasm, to make AI run faster on a wide range of devices. These are foundational for the efficient execution of AI models on the web.

💡Speculation Rules API

The Speculation Rules API is a feature that allows for prefetching and pre-rendering of web pages in the background, resulting in near-instant navigation. The video uses the example of Tokopedia, which saw a significant improvement in loading times, to illustrate the potential impact of this API on user experience.

💡View Transitions API

The View Transitions API is introduced to facilitate smooth animations between page states, enhancing the visual continuity of web applications. The script mentions Airbnb as an early adopter, creating seamless navigation experiences, which underscores the API's role in improving user interaction and visual transitions in web apps.

💡Baseline

Baseline is a tool for understanding browser support for web platform features. The video discusses updates to Baseline, including the introduction of the Web Platform Dashboard, which provides a comprehensive view of web platform features and their development status. This is crucial for developers to ensure cross-browser compatibility.

💡Angular

Angular is a popular platform for building and deploying web applications. The video mentions that Google is working on partial hydration for Angular, which will improve performance by loading and hydrating parts of an app only when needed. This reflects the ongoing efforts to enhance the performance and efficiency of web app development frameworks.

💡Reactive APIs

Reactive APIs, introduced by Angular in the video, provide a new set of tools for developers to manage changes in their applications more granularly. The script explains that these APIs enable fine-grained change detection, which can lead to more efficient UI updates and better performance, illustrating the ongoing evolution of development tools to meet modern web development needs.

💡Maps JavaScript API

The Maps JavaScript API from the Google Maps platform is highlighted in the video for its new capability to bring photorealistic 3D maps to web applications. This feature allows developers to integrate rich 3D mapping experiences with minimal code, showcasing the potential for more immersive and visually appealing web applications.

Highlights

Introduction of Sparkle Meadows and the latest Chrome and web announcements from Google I/O.

AI's evolving role in web development and the introduction of on-device AI with Gemini Nano in Chrome desktop.

Gemini Nano as Google's most efficient model for on-device tasks, simplifying AI feature delivery.

The Prompt API, an experimental feature allowing natural language instructions for Gemini Nano in Chrome.

Invitation to join the Early Preview Program to shape the future of web development.

Efficiency improvements in WebGPU and Wasm for on-device AI, including 16-bit floating point values and JavaScript Promise Integration.

The option to choose between built-in AI, server-side AI, or a hybrid approach for web experiences.

AI's potential to enhance developer workflows with the integration of Gemini into Chrome DevTools.

Chrome DevTools Console Insights, providing insights and aiding in understanding and fixing issues.

Introduction of the Speculation Rules API for near-instant navigation by prefetching and pre-rendering pages.

Tokopedia's success story with a 4.8-time improvement in Largest Contentful Paint (LCP) using the Speculation Rules API.

The View Transitions API for animating between page states, enhancing multi-page and single-page applications.

Airbnb's implementation of the View Transition API for smooth and seamless navigation.

Updates to Baseline with the introduction of the Web Platform Dashboard for tracking feature development and interop status.

Akamai's Rum Archive Insights tool for developers to see global user share of Baseline versions and features.

Angular's new features including partial hydration and Reactive APIs with Signals for fine-grained change detection.

Introduction of photorealistic 3D maps to the Maps JavaScript API from Google Maps platform.

The ability to start using photorealistic 3D maps with a single line of code during the experimental phase.

Closing remarks expressing excitement for the future of web development with the new updates and features.

Transcripts

[MUSIC PLAYING]

SPARKLE MEADOWS: Hi, my name is Sparkle Meadows,

and today, I'm going to be taking you through the latest

Chrome and web announcements from Google I/O. We

have some exciting new updates and releases,

all aimed to bring you innovative capabilities

and tools to build web experiences that

are more powerful than ever.

Let's get right into it.

AI continues to evolve how developers build and create,

and it's no different for the web.

And now you can harness the power of on-device AI

with Gemini Nano built right into the Chrome desktop.

Gemini Nano is Google's most efficient model

for on-device tasks.

With built-in AI, soon you'll be able to deliver

powerful features to Chrome's billions of users

without having to worry about prompt engineering, fine-tuning,

capacity, or cost.

All you'll have to do is call a few high-level APIs

like Translate, Transcribe, or Caption.

And now, you can explore further use cases with the Prompt API.

This experimental API lets you send natural language

instructions to an instance of Gemini Nano in Chrome.

Join our Early Preview Program and help us shape

the future of web development.

We know that AI models can be costly and cumbersome to run,

so we're committed to ensuring AI models can

run quickly and efficiently.

With WebGPU and Wasm as the backbone for on-device AI

on the web, we introduce new improvements,

like 16-bit floating point values in WebGPU and memory 64

and JavaScript Promise Integration in Wasm to make AI

run even faster at scale on a vast majority of devices.

Depending on your web experience,

you can now select among built-in AI, server-side AI,

or even a hybrid approach.

With WebGPU, Wasm, and Gemini built into Chrome,

the web is AI-ready.

AI can also vastly improve developer workflows.

Chrome DevTools is one of the most popular ways

to debug and troubleshoot your app,

so we are bringing Gemini to make Chrome DevTools easier

than ever.

Gemini will now generate insights

right in your Chrome DevTools.

It will help you understand messages, errors,

what the problem is, and even how to fix it.

Chrome DevTools Console Insights is available now.

Make sure to try it out.

With all the exciting AI news, let's turn the page

to continue and see how we're improving web page navigation.

With the new Speculation Rules API,

we're enabling near-instant navigation

by prefetching and pre-rendering pages in the background.

This allows pages to load in milliseconds.

As an early tester of the Speculation Rules API,

Tokopedia was able to see a 4.8-time loading time

improvement to the Largest Contentful Paint, LCP,

of their product description pages.

Get started with only a few lines of code

and see how Speculation Rules can enable near-instant seamless

browsing experiences.

Seamless visual transitions are important, both for this video

and for your website.

So we introduce a View Transitions API,

letting you animate easily between page states.

Whether you build a multi-page application

or a single-page app, you'll be able to create

a fluid navigation experience regardless

of your site's architecture.

As an early adopter of the View Transition API,

Airbnb created smooth and seamless navigations

from the listing editor sidebar right into editing photos

and adding amenities all within a fluid user flow.

Combine the Speculation Rules and View Transitions APIs

to see how we're truly improving the web navigation experience

for developers and users alike.

Now you might be wondering, when will I

know if these amazing features are available across browsers?

Not to worry.

We've got that covered, too, with updates to Baseline,

the tool to understand browser support for web platform

features.

We're taking all the information from Baseline

and introducing the new Web Platform Dashboard.

With this, you'll be able to see the entire web platform mapped

out as a set of features, follow their development,

and check their interop status.

We'd love to hear your suggestions for the dashboard.

If you have an idea or want to report a bug, find us on GitHub

and let us know.

We've heard from developers that Baseline

works best when integrated into your workflow and the tools

you use every day.

That's why Akamai's Rum Archive has a new tool for developers

on Rum Archive Insights.

For the first time, you can see the global user share

of Baseline versions and features

that are unlocked with that version of Baseline side

by side.

For example, if you adopt Baseline 2022, and therefore,

want to use no features newer than that,

your IDE should let if you use a newer feature.

We'll continue to release improvements, including

RUMVision, which will soon include

Baseline data in the information it provides about your audience.

With the web features data becoming more complete

every day, this is a great time to think about how

you could integrate it.

We believe one of the best platforms

for building and deploying web apps is Angular.

We are now working on partial hydration

so JavaScript will load and hydrate part of your app

only when needed, significantly improving core web vitals

for performance-sensitive apps.

It's coming in Developer Preview later this year.

We also want to give you more granular control

over the detection and management of changes

in your apps.

So this year, Angular also introduced a new set

of Reactive APIs that empower a first-class developer

experience with Signals.

Signals enable fine-grained change detection

that will only check your individual components

in your component tree to propagate

state changes so you no longer have to manually optimize

the UI.

Signal-based Reactive APIs are available

today right out of the box.

Lastly, we're unlocking more ways of building immersive web

experiences by bringing photorealistic 3D maps

to the familiar Maps JavaScript API from Google Maps platform.

Now, you can take advantage of Google's rendering technology

to deliver rich 3D maps at the speed your users expect with

our rich base map and information of more than 250

million places and businesses around the world.

The best part?

You can get started with a single line of code.

Try out photorealistic 3D maps and Maps JavaScript at no cost

during the experimental phase.

We can't wait to see the stunning immersive experiences

you'll build.

And that's it for all the major launches and updates

from web and Chrome.

Hope you are as excited as we are,

and we can't wait to see you build for the powerful web made

easier.

[MUSIC PLAYING]