[MUSIC PLAYING]
KEVIN MOORE: My name is Kevin Moore.
I'm a product manager on the Flutter and Dart teams
at Google, working mostly on our Web Store.
The web is pretty cool, right?
It started as a democratized way to access linked text.
Fast forward past images and video,
and now we have a ubiquitous application platform,
letting everyone access powerful experiences with just a URL.
The Flutter team is excited to contribute
to this amazing ecosystem.
And our users are excited, too.
We've seen the total number of domains
deploying Flutter more than double in the last year.
We hope that the features we are shipping today
and in the near future will continue our growth.
In this video, I will talk about three new things that you can
use right now in Flutter 3.10.
I also want to give a sneak peek at what's coming next.
Let's dig in.
I'm going to highlight three improvements we've
made since Flutter 3.7, starting with application load time.
The number one request we've received from developers
is that they want their Flutter web apps to load faster.
The load time of most Flutter web apps
is dominated by the total number of bytes
that need to be downloaded to get the application started.
Two of the biggest components are often CanvasKit and Fonts.
First, CanvasKit.
This is the open source Skia library
that we compile through WebAssembly
to serve as the base-rendering layer for your Flutter web app.
We used to use the prepackaged CanvasKit Wasm
file provided by the Skia team.
But we noticed there were several things
we could do to optimize the binary for only the features
needed by Flutter web.
We also did some additional work,
leveraging features that are unique to Chromium browsers.
We expect most users to see the CanvasKit download size
cut in half.
Next is Fonts.
In an application, we usually think of Fonts
as being used for human readable text.
But Flutter also uses Fonts to represent application icons.
By leveraging the type information
we get from the Dart compiler, we
can determine which icons are being used in an icon font
and create a special-purpose version that excludes
all of the unused glyphs.
In the counter application, for example,
the size of the Material Icon font using standard web
compression drops from over 400 kilobytes
to less than 10 kilobytes.
What does this mean for your web application?
In one simulation, we've seen the total load
time of a standard counter app drop by over 40%.
This is just the start of our work on performance.
We plan to continue to invest here.
So with Flutter 3.10, web applications load faster.
But they also integrate better with traditional web
experiences.
One of the most powerful features of the web
is composition, linking and embedding
resources in different formats and from different sources
to build something better.
You've been doing it with images and videos for years.
Now, you can do it with a Flutter application.
In previous versions of Flutter, your web app
took up the entire browser screen.
You could host it in an iframe to mix content,
but the JavaScript interop was a little tricky.
With Flutter 3.10, we've added element embedding.
You can now host the Flutter web app in an arbitrary element.
This gives you more flexibility to combine content and make
JavaScript communication much easier.
In the simple case, configuring your Flutter app
to run in an element is just one extra line
in your Flutter configuration.
So here, we see the standard Flutter counter app.
It works just like you expect.
I can click on it.
But you see it's in a window, actually embedded
in an Angular application.
We can open up the sidebar and maybe change
the counter clicks.
And we'll see that values are being synchronized
between the JavaScript in the Angular app and the Flutter
instance.
In fact, we can change the type of app we're looking at,
maybe do some text input, either in JavaScript or HTML.
And maybe we can even add some effects.
So let's resize the window, add a shadow, and maybe even
a mirror effect.
And to go one step further, let's spin the UI.
You can see here, I can still continue to enter data
in the Flutter app.
And it works great even with a 3D spin.
The sample code for this app will be available on the linked
blog post.
And one more thing, the notion of integrates
better goes beyond what end users run.
We've also been working with our friends in Firebase
to provide better integration with Flutter web.
The Firebase CLI tool now includes preview support
for detecting and deploying Flutter web apps
to Firebase Hosting.
So that's how Flutter web integrates better,
with existing web content via element embedding
and with tools from our friends at Firebase.
Now, let's talk about how Flutter web shines brighter.
Flutter web has a tricky job.
We want to allow developers to provide
both the best of Flutter and also the best of the web.
We've talked already about the work
we're doing to make the web experience better.
But what about improving the set of Flutter features
available on the web?
This is Shader code.
It allows amazing visual effects that
can run with great performance on modern graphics hardware.
We've supported shaders in Flutter for a while
but only on native platforms.
With Flutter 3.10, shaders can now be run on the web.
Let's look at a demo.
This proof of concept imagines the launch screen for a game.
Notice the pulsing orb and the glitched-out title.
These are separate fragment shaders
running in this web app.
You'll notice the orb changes size
as my cursor gets closer to it.
It also changes color as I change the game mode.
This code example runs great on native mobile and desktop
platforms and now the web, without any code changes.
Check out the linked blog post to find the code sample.
For Flutter 3.10, web experiences load faster with
smaller asset sizes.
Web experiences integrate better with element embedding
and better support from Firebase.
And web experiences shine brighter with access
to GPU accelerated shaders.
Now, that we've covered what's available in Flutter 3.10,
let's take a look at what's coming next for web support.
WebAssembly has been around for a relatively short amount
of time.
But it's had a big impact on the web and beyond.
It powers Google experiences like Maps and Earth
and libraries like TensorFlow.js.
Flutter has been using Wasm for a while via the CanvasKit
module I mentioned earlier.
CanvasKit is a Wasm module compiled from the Skia Graphics
Library written in C++.
Until now, Flutter's web support has compiled the Dart code
that makes up the Flutter framework, packages
and plugins, and your Flutter application into JavaScript.
We've been excited to see if we could improve the performance
and fidelity of your Flutter web app
by compiling the Dart code to WebAssembly instead.
But Dart is a garbage-collected language.
And WebAssembly has not had good support for garbage collection,
until now.
Wasm Garbage Collection, or WasmGC,
is a new feature being added to the WebAssembly standard.
There are near-stable implementations in the Chromium
and Firefox browsers.
And the Dart and Flutter teams are
building on this new feature to bring your Flutter web
app to WebAssembly.
Our Wasm work has three goals.
First, shrink the load time of your application.
Second, make frame rates faster and more reliable.
And third, improve the runtime consistency between native apps
and the web.
We also want to support trivial fallback to JavaScript
on browsers that don't yet support WasmGC.
Our plan is for production deployments
to include both a Wasm and a JavaScript compilation that
will be selected at runtime.
And while some migration may be required
for packages and plugins that use native web features,
we are hopeful that most applications will
have to do little or nothing to target WebAssembly
when this feature is ready.
We're back to the game launch screen we showed earlier.
If I open up the Network tab in Chrome,
you'll see that instead of a JavaScript file
for our main Dart script, we're loading main.dart.wasm.
So this code is actually compiled to WasmGC.
It's running on Chrome, currently with flags.
And if you want to try it out, you
can check out the links in the blog post on this video.
We're excited to announce a preview of Flutter Wasm
Support at Google I/O 2023.
Depending on when you watch this video,
the details may have changed.
So please check out flutter.dev/wasm
for the latest.
And that's our update for Flutter web.
In Flutter 3.10, faster downloads, element embedding,
and Shaders are now available on the web.
And we're excited for you to try out our WebAssembly preview.
Thanks.
[MUSIC PLAYING]