WASM + Flutter Web —Let’s understand it!
It’s time to improve your knowledge and use WASM with your Flutter Web App!
What is WebAssembly (WASM) & how does it work?
WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications.
In simple words, WebAssembly (WASM) is a technology that allows websites to run high-performance code, almost as fast as programs installed on your computer. It helps web applications work more efficiently by letting them use code written in different languages, which is then converted into a special format that web browsers can understand and execute quickly. This makes web apps faster and more powerful, especially for complex tasks like games, video editing, and data processing.
Flutter + WASM
To be clear, WASM is NOT a rendering engine for Flutter in the way that HTML and CanvasKit are. Instead, WASM is a compilation target for code that needs to be run efficiently in the web environment.
Role of WebAssembly (WASM) in Flutter Web
As we discussed, WASM is a compilation target for Flutter Web. It is a binary instruction format that allows our Flutter Web to run almost at a native speed in web browsers. It is mainly used to compile web apps that have performance-critical features so that they run faster in the browser!
Because WASM is not itself a renderer, which means, your Web App will be using the default web renderer or the one that you specified.
PS: Now, the Flutter team has changed the –web-renderer=auto to canvaskit, which means, if you don’t specify a web renderer, it will automatically use canvaskit. Earlier, it used to use the HTML renderer when the app is running in a mobile browser, and the CanvasKit renderer when the app is running in a desktop browser. (Issue Link)
How to use WASM with Flutter?
Before you use WASM with Flutter, it should be noted that as of today (14th June 2024), many packages don’t support WASM. When a package is using web-based dependencies/packages/libraries (imports of dart:html, dart:js, etc), your app won’t be able to compile on WASM.
Now, to use WASM with Flutter Web App, the first thing you need to do is upgrade your Flutter SDK to 3.22 or a newer version.
Once you have your Flutter SDK in place, run the following command to build your Flutter Web App to WASM flutter build web –wasm.
Noticeable Improvements when using Flutter + WASM
When we use WASM with Flutter, there can be some noticeable improvements, especially on the performance side:
- Faster Execution: Parts of your app that are computationally intensive, such as complex calculations, animations, or data processing tasks, will run much faster due to WASM’s near-native execution speed.
- Smooth Animations: With WASM, animations and transitions can become smoother, especially in graphics-intensive applications. You might also notice that the scroll would be smoother.
- Reduced Load Times: The initial load time for the web app might be faster because WASM modules are compact and optimized for efficient execution.
Disadvantages of WASM
While WASM can be helpful for performance issues and scroll issues, there are still some disadvantages of WASM in general:
- WASM does not include a built-in garbage collector, which means languages that rely heavily on garbage collection (like JavaScript or Dart) need additional handling for memory management when compiled to WASM.
- Not all packages are supported for WASM yet.
- WASM modules can increase the overall memory footprint of the application, which may impact performance on devices with limited resources.
- There are still a lot of issues with Flutter + WASM. Keep a track here.
Hope you enjoyed this article!
Doubts? Feel free to drop a message @AbhishekDoshi26
Checkout abhishekdoshi.dev for more info 💙
Don’t stop, until you are breathing!💙
– Abhishek Doshi
WASM + Flutter Web — Things you need to know! was originally published in Google Developer Experts on Medium, where people are continuing the conversation by highlighting and responding to this story.
