Flutter WebAssembly (wasm) is finally here!

The wait is over! The highly anticipated stable release of WebAssembly (WASM) support in Flutter 3.22 unlocks a new era of performance and capabilities for your Flutter web applications. This revolutionary integration allows you to compile your Dart code to WASM, bringing significant speed improvements and smoother user experiences to your web apps. Let's dive into WASM and how it supercharges Flutter web development!

What’s WASM?

WebAssembly, often called WASM, is a new way to run high-performance applications in your web browser. It's not a replacement for Javascript but rather a way to run code written in other languages like C++, Rust, or C# alongside Javascript. WASM is designed to be fast. It's encoded in a size and load time-efficient format. This means that it can be executed natively using common hardware capabilities. It's also designed to be safe by running sandboxed environments.

Companies like Unity, Figma, and graphic-intensive platforms use web assembly to boost their execution time. This means they have smoother and more responsive user experiences by limiting their usage and reliance on JavaScript, and Flutter is following the same path.

What does it mean for Flutter?

Basically, it means that the Dart framework engine is compiled to WASM, providing higher performance and faster load times. The possibility of compiling Dart code into a WASM module opens a whole new perspective on the performance of web applications with Flutter. The combination of Flutter and WebAssembly is awesome. We can control every pixel of the UI with Flutter and reap the performance benefits of WebAssembly.

Performance improvements

Compared to JS compilation, a WASM-compiled application can improve even by 2x faster frame rendering and even by 3x for the 99% worst-case performance. This means that animations and rich transitions can be achieved without compromising the frame rate. It is visible in the Wonderous app, where the migrated version achieved these performance improvements.

Frame rate improvements

While testing the WASM performance, I took an animated list that had some junk while scrolling a significant amount of content. The list has 1000 elements, each animating every 2 seconds. While scrolling from top to bottom, it took around 700ms to render all frames, which is quite a bit of junk. When comparing that to WASM rendering times, it took around 400ms. I also tested it while scrolling to 3/4, 1/2 of the screen, and the results showed that WASM is 41% faster on average. We can see way less junk with the WASM compilation.

Loading time

While for an empty example application, the main.dart.js file size stays the same for both JS and WASM compilations, the canvaskit.wasm was replaced with skwasm.wasm, and 0.4MBs reduced the size. Since some browsers don't support WasmGC, Flutter compiles both main.dart.js and main.dart.wasm. It means that your browser needs to download both of these files, which weigh 1.6MB. While these files can be cached on the website, the first loading can take significantly longer.

Limitations

1. Browser support - while Chromium already supports WasmGC for a couple of versions, Firefox announced stable support for WasmGC in Firefox 120. Safari doesn't support WasmGC, and it's yet to be known when they will. Note that iOS browsers like Chrome use WebKit, which doesn't yet support WasmGC.
2. Developer support - neither flutter run nor DevTools support WASM in Flutter 3.22. However, this feature has been implemented and will be available in the next stable release.
3. Packages support - while Flutter worked on delivering the wasm support, they had to replace dart:html and package:js libraries (you can read more about it here). Packages that use these libraries must migrate to their new equivalents, which many packages have already done.

Summary

While browser compatibility has limitations, Firefox is already working on an implementation. At the same time, Safari had already previously mentioned WASM, and they're likely to follow the same path other browsers are taking. The initial performance improvements are huge, and I cannot wait to hear more from the Flutter team. It still doesn't solve issues like SEO on Flutter Web, but it's a step in the right direction to make the apps more accessible.