Flutter, Dart, and WASM-GC: A new model for Web applications by Kevin Moore @ Wasm I/O 2023
ฝัง
- เผยแพร่เมื่อ 30 มี.ค. 2023
- Wasm I/O 2023 / 23-24 March, Barcelona
Slides: docs.google.com/presentation/...
Support for garbage collection within WebAssembly (WASM-GC) will bring a host of new languages and frameworks to the web app space. Learn how the Dart and Flutter teams at Google are building on WASM-GC (among other upcoming standards) to bring richer, faster, more consistent applications to the web
Until now, WASM-compiled browser applications have been mostly limited to systems programming languages - allowing a number of traditionally desktop experiences to run on the web. (Think AutoCad, PhotoShop, Google Earth.) The implementation of WASM-GC across WASM runtimes will bring a set of new languages and frameworks to an ecosystem dominated by C/C++ and Rust. The open source Dart and Flutter projects at Google have spent over a year adding WebAssembly as a target platform with the hope of improving application load time and interactive performance for Flutter experiences on the web. This talk will cover how WASM-GC expands the WASM ecosystem, some details on how Flutter and Dart approached migrating our existing JS-compiled web support to WebAssembly, and our hopes for a ecosystem that embraces WASM-GC across the browser and server to enable a more portable, secure, and interoperable future of computer systems.
"This is in a browser. None of this is DOM. This is 100% Canvas."
can WASM control the canvas directly?
00:00 Introduction to Dart and Flutter
00:41 Features of Dart
03:55 Dart as a General Purpose Language
04:59 Flutter as a UI Toolkit
06:10 Key Pillars of Flutter
07:22 Flutter's Portability and Open Source Nature
08:49 Example of a Native Desktop App in Flutter
10:16 Using JavaScript, HTML, and CSS for web development with Flutter
11:01 Switching to Skia and CanvasKit for better performance and fidelity
12:08 Creating desktop experiences with Flutter web and CanvasKit
12:55 Flutter web's performance and portability for production apps
14:37 Challenges of implementing garbage collection in WebAssembly
15:58 Steps involved in compiling Dart to WebAssembly
20:01 Improving Fidelity and Accuracy
21:00 Interoperability and Performance
22:11 Material 3 Demo
23:41 WasmGC with Flutter and Pixel Shaders
25:36 Next Steps and Future Plans
Awesome talk! Super excited about this. Can't wait to start playing around with it and using it in production.
Flutter web with fast initial load would be a huge improvement 😮 Great talk Kevin!!
Wasm takes time to load
@@amanverma6515 And js doesn't?
@@StevenAkinyemi Browsers don't have to load the js runtime.
For dart they do
@@causality5698 Well, that is a Dart problem not a wasm problem.
@@StevenAkinyemi Thats true, though he probably meant dart compiled to wasm takes time to load.
theres no solution other than embedding dart runtime in the browser
Finally, async/ await has taken over the industry. Well done, C#
There is nothing off about. It's great at least in c# which I am aware of.
don't forget ES6... Even though C# does it first but it does not provide backward compatibility unlinke Babel Transpiled ES6 code
@@farrellraafi1301 When it comes to backward compatibility. .NET / C# is the best in the industry. Incessant breaking change is not all that tolerated in the .NET/ C# world.
@@obinnaokafor6252 Java wants to speak a word with you
💙💙💙 Nice talk Kevin! Very excited about Dart!
Very good Talk! Thanks Kevin :)
Good job, Kevin. I am pretty optimistic in Flutter's future on web platform. Maybe mobile devs will have another jobs soon as FE web devs
This is very promising. I would love for the ability to call wasm code written in other languages too.
Well done
Great talk Kevin 🤘🏻
Thank you!
CODEPURRRRRRRRRRRRRRRRRRRRRRRRRR
Amazing Talk Kevin... we hope the wasm gc work is completed soon and all the browsers adopt it to get Native Speed with Flutter Web.
very good job guys ! pro lang
Awesome stuff. Also, not often you hear someone pronounce Ubuntu correctly. Nice, Kevin!
Wouldn't this be a great opportunity to talk about Impeller to? The replacement for Skia.
💙💙💙💙💙
great.
I hope this materializes soon. I dont wanna be dipping my toe into javascript.
great
Cool...
and i find some UI framework for rust like slint and dioxus, its still new, i tried the app demo on web its super smooth
something was wrong with the setter 1:19 , it's rather setting the privatized name to the public name instead of the value parameter
You are absolutely right! Good catch!
@@kevmoo thanks 🙂🙏
The average developer doesn't understand that this is a HUGE happening right now. WASM is a *very* important project going on right now. For a while it's been going strong but it really needed a big implementor to really pick up the trend. I hope that Flutter will be that implementor. If they get this to work, they should market the living h3ll out of it. Let the people know that new ground has been broken.
Ok so dart or flutter Will be better with wasm? Thank you😊
@@yudhalandingkit not only Dart and Flutter (which it will speed up a lot), but once WASM is everywhere we don't need to have the pain of terribly dynamically typed languages like Javascript and Typescript for the web anymore.
The average developer cares about meeting accessibility requirements, leveraging the operation system and integrate with existing code. Replacing the work of thousands of browser and OS engineers of the DOM api with a canvas “just because WASM” with a niche programming Langauge, sounds idiotic for most. If I wanted to to that, I’d build my app with unity in C# for html5 and that way have at least some fancy flashy 3D like experiences to tap into. Nobody is going to be able to use the screen reader on their phone, but that’s expected with a macromedia flash like object on a canvas.
@@dinoscheidt All of this is very true, because most of the web infra is centered around the DOM. But in the future, that won't have to be the case. Each language ecosystem will fill the gaps left open by this transition over time. But yeah, it'll probably be 10 years before those ecosystems reach parity.
Until then, anyone using Flutter can still target the DOM if they want to get those benefits for free.
@@dinoscheidt flutter fully supports accessibility out of the box and offers the same cossitent accessiblity natively and in the web without any extra code
Please give us Code Push in Flutter. I changed my projects from flutter to react native regardless of flutters superior developer experience and binary speed ONLY because RN codepush. Feature delivery and bug fixing is just so much simpler and better
There is a solution for that, although in development. Name is Shorebird
Shorebird is working for this feature rn
flutter team rejected this feature request. I think the reasons are pretty logical from their side
Am I wrong in this assessment: Javascript led to more and more embedded native standards to support common "desktop" things in the browser. This includes the Canvas API, which is basically a wrapper around OS-native 2D and 3D graphics APIs. WebAssembly came along to allow something akin to a virtual machine running inside browsers, and now Dart and Flutter are using these layers to basically make the browser nothing more than a container for various layers of wrappers around native OS APIs, made standard by the pressures of "HTML5" to standardize these wrapper APIs.
But at the end of the day, none of this is "web" anymore. It's just a very complex virtual machine comprised of an HTML5-compliant browser supporting Canvas, WebAssembly, HTTP, and so on. In leiu of the open source world we always deserved, we've simply open-sourced the application API and now everything is being implemented natively by browser vendors to make that API cross-platform.
It's all very silly is my point.
A prime example of what a product/market/business-driven environment leads to. A bit like evolution if you ask me, it is what it is.
It always has been a VM to some extent
following.
It does sound kind of silly, it's like convergent evolution, but I guess you might find value in being able to run certain apps without needing to actually install them on your system.
Also it's worth noting that Flutter in trying to be cross platform naturally has to tackle the web as well, so if that means that they'll make apps very performant in a browser, I'd say it's a welcome side effect in the end.
I can agree that now the web has really become unfocused, it's not about just sharing lightly styled documents over the internet anymore, as more and more use cases emerged with time, the direction was stirred into making web apps possible as well as many other things.
If you're looking for a more minimal experience Gemini will probably be your best bet
No its not silly. Adding more capabilities to the web is just necessary and it enables more and more complex experiences. There is no "pressure", just "need".
sounds like a fast way to being painted into a corner without any way out
Will there be a negative effect on SEO?
I think there will be cause it's rendered on canvas which is not crawlable.
Yes, definitely. Because bots can't detect the contents of webassembly applications.
#Blazor
so is this like Adobe Flash and actionscript?
or more like Java Applets?
Kind of but even more open, I don't have to use Java or action script necessarily, I can use whatever language I want that can compile to WASM, just as I can do when making a desktop application. Only now the user doesn't have to install a desktop app to use my application, they can simply link to it. It's all the benefits of web with the benefits of native performance.
Old concepts renewed. Yes indeed. Flash runtime was based on ABC bytecodes. Java plugin used the JVM and it's bytecode. Microsoft had their thing called .. I forgot the name!
Yeah, except improved and open-source.
19:39 "We eliminate the JavaScript interop layer. It's Wasm to Wasm." Been waiting for this for over a decade. JavaScript HAS to die.
That will take 50 years.
WASM really needs to be module based with it's own tree shaking. we see this with rust based web applications, performance outside firefox is also not that great.
loved his skinny jeans :£
🥴
The wonderous app is cool, but really doesn’t feel native on iOS at least. The animations are laggy even though it’s using Impeller. Looking forward to even more performance improvements in this area. But this is all a bit off topic 😅
This maybe an improvement when it comes to displaying 2D or 3D effects, but the problem is with normal static webpages which may not have complex UI styling or animations. It may not affect those who have a higher bandwidth and unlimited data, but that is not the case for everyone right? And there is also a negative side of SEO which is not existent in flutter web (you can use other things to replicate it but not natively).
I guess it would be better if the chromium/browsers team add dart into the browsers itself as they were trying to do with Dartium which got closed unfortunately, not sure whether it would reduce some of the unrequired boilerplate to run the websites. But I'm sure it would make it faster for development time as HOT RELOAD maybe enabled for the WEB as there will be no need to compile the code using the dart2js as it is down now.
But I guess in the end until everyone in the world will have access to better internet connectivity the loading time and SIZE really does matter.
We need to start making the difference between WebAPP(lication) and a WebSITE the later needs to be crawlable thus SEO friendly. The former is an application that you install just by visiting a url. You don't need your Slack app to be SEO friendly. That's my 2 cents.
hate the loud music at the beginning
Wasm is great tech. Flutter seems to be interesting, and dart is a nice language except for the ";"
Umm... Umm... Umm :D
Dude, I...um...know. 🤦
WASM loading performance is not a valid metric. Its not meant for sites. Its meant for rich experiences!
I still thought that flutter for web is a scam
Money makes the world go around. *What about Flutter-web-stripe support.* Without solving this gap, there is no way to hop into the Flutter-web development train, sorry.
😂 Microsoft openly mention Google, but why not Google doing the same.
" Hopefully other browsers" :- Google don't just limit yourself to chrome
I said Chromium based browsers and Firefox. I think most folks know Edge is Chromium based, right?