diff --git a/sites/www/content/blog/try-flutter-web-with-webassembly-week/images/header_placeholder.webp b/sites/www/content/blog/try-flutter-web-with-webassembly-week/images/header_placeholder.webp new file mode 100644 index 0000000000..c591e53396 Binary files /dev/null and b/sites/www/content/blog/try-flutter-web-with-webassembly-week/images/header_placeholder.webp differ diff --git a/sites/www/content/blog/try-flutter-web-with-webassembly-week/images/perf_comparison_placeholder.webp b/sites/www/content/blog/try-flutter-web-with-webassembly-week/images/perf_comparison_placeholder.webp new file mode 100644 index 0000000000..c591e53396 Binary files /dev/null and b/sites/www/content/blog/try-flutter-web-with-webassembly-week/images/perf_comparison_placeholder.webp differ diff --git a/sites/www/content/blog/try-flutter-web-with-webassembly-week/index.md b/sites/www/content/blog/try-flutter-web-with-webassembly-week/index.md new file mode 100644 index 0000000000..312a6a6e6f --- /dev/null +++ b/sites/www/content/blog/try-flutter-web-with-webassembly-week/index.md @@ -0,0 +1,168 @@ +--- +title: "Try Flutter Web with WebAssembly Week" +description: >- + Unlock up to 2x to 5x faster web performance by opting into Wasm compilation today +publishDate: 2026-08-17 +author: kevmoo +image: images/header_placeholder.webp +category: event +layout: blog +--- + + + + +When building interactive web portals, enterprise tooling, and data-driven +dashboards, Flutter enables you to deliver expressive, multi-platform +experiences directly to browsers from a single codebase. + +From August 17 to August 21, you can help advance the next tier of web +application speed by participating in our live community-wide sprint, **"Try +Flutter Web with WebAssembly Week"**. Throughout this event week, Dart and +Flutter engineers are conducting daily triage on incoming issue reports to +resolve migration bottlenecks in real-time, while our developer relations team +monitors community channels daily to highlight your migration success stories. + +--- + +## Why WebAssembly? + +In May 2024, with the release of Flutter 3.22, our Flutter and Dart engineering +teams officially stabilized WebAssembly compilation (graduating it from +experimental status) by integrating the Dart compiler directly with modern +WebAssembly Garbage Collection (WasmGC) runtimes and WebAssembly-native +rendering optimizations. + +This architectural integration provides a verified enterprise solution. **Dart +DevTools** (`dartdevtools`), a complex and highly interactive Flutter web +application, ships with WebAssembly enabled by default. Today, over 97% of +weekly active developers running modern DevTools sessions execute on +WebAssembly, achieving smooth UI inspection with rock-solid stability and zero +variance in exception rates compared to legacy `dart2js` builds. + +This capability is ready for production workloads today. Automated analysis +across hundreds of thousands of Flutter web builds demonstrates that **over 58% +of existing applications compile without error to WebAssembly today with zero +code changes**. + +When you target WebAssembly, your application unlocks substantial performance +potential: + +> [!WARNING] +> **🚧 EDITORIAL HOLD / NEEDS REAL-WORLD VALIDATION 🚧** +> *The performance multipliers below derive from internal micro-benchmarks and +> synthetic test suites (Golem and LUCI). Because micro-benchmarks often +> exaggerate real-world performance differences, validate these figures against +> enterprise production applications and carefully frame them with "up to" +> caveats before public release:* +> +> * ⚡ **Up to 5x faster application boot times**: Measured on targeted +> start-up micro-benchmarks, drastically compressing Time-to-Interactive +> (TTI) and initial load execution. +> * ⚡ **Up to 2x faster runtime execution speed**: Powered by optimized +> `dart2wasm` compilation and native WasmGC execution in computational +> micro-benchmarks. +> * ⚡ **Up to 3–4x faster UI rendering**: WebAssembly-native engine +> execution eliminates serialization overhead, demonstrating up to a 4x +> reduction in frame build times in rendering suites and supporting +> consistent 60–120 FPS performance. +> * 📦 **Minimal bundle size delta**: These execution gains arrive with an +> average compressed bundle size increase of ~1.5% across benchmark +> workloads. +> +> **🚧 END EDITORIAL HOLD 🚧** + + + + +--- + +## Why JavaScript remains the default compilation target + +If WebAssembly delivers superior speed and stability, why does `flutter build +web` still default to JavaScript (`dart2js`) compilation? + +Switching default toolchain behavior across an ecosystem of millions of +developers and tens of thousands of packages requires methodical structural +evolution. While over half of existing apps compile immediately, many community +packages historically relied on older JavaScript interop patterns or +browser-specific bindings that require targeted modernization to operate +without error across strict WebAssembly memory boundaries. + +This requirement creates a classic dependency loop: +* The default compiler target cannot shift to `--wasm` until developers test + and migrate a critical volume of community packages and plugins. +* At the same time, package authors rarely prioritize migration until + application developers actively opt out of default compiler settings and + demand WasmGC compatibility. + +--- + +## Explore your WebAssembly migration and documentation toolbox + +To make your transition to WebAssembly as straightforward as possible, our team +has refreshed our core web documentation suites. Before testing your builds, +explore these primary migration guides: + +* **[WebAssembly on Flutter Web](https://docs.flutter.dev/platform-integration/web/wasm)**: + The comprehensive architectural manual for WasmGC in Flutter. Learn how to + configure recommended cross-origin server headers + (`Cross-Origin-Embedder-Policy: credentialless` and + `Cross-Origin-Opener-Policy: same-origin`) to unlock multi-threaded + rendering, handle production debugging, and detect compiler targets at + runtime. +* **[Migrating to `package:web` and modern JS interop](https://dart.dev/interop/js-interop)**: + Moving away from legacy `dart:html` and `dart:js` is the single most + critical step for WebAssembly compatibility. This interop guide explains + how to transition your bindings to modern, statically-typed + **`package:web`** and **`dart:js_interop`**. +* **[Web building and deployment guide](https://docs.flutter.dev/deployment/web)**: + Step-by-step instructions for optimizing production release builds, + generating source maps, setting up framework-aware Firebase CLI hosting, and + implementing CDN caching strategies. +* **[Flutter web technical FAQ](https://docs.flutter.dev/platform-integration/web/faq)**: + Answers to frequent architectural questions covering multi-threaded + WebAssembly execution on Web Workers, Service Worker independence, and + conditional import patterns (`dart.library.js_interop`). + +--- + +## Participate in Try Flutter Web with WebAssembly Week and report your results + +Whether you maintain an open-source package on `pub.dev`, manage a production +web app, or build experimental projects, test your code under WebAssembly this +week. + +### Follow these steps to evaluate your application +1. **Upgrade to the latest stable release:** Run `flutter upgrade` to verify + that you are running **Flutter 3.47** (the stable release launched on August + 12, 2026). This release incorporates recent WasmGC compiler optimizations, + lockfile enhancements, and runtime fixes. +2. **Build with WebAssembly:** Compile your web application using the direct + command flag: + ```bash + flutter build web --wasm + ``` +3. **Report blockers or failures:** When your build encounters a transitive + dependency problem, lockfile incompatibility, or runtime exception, report + the finding directly to our team. Submit a report using this intake link to + help unblock package migration during our sprint: + 👉 **[https://goo.gle/flutter-wasm-feedback](https://goo.gle/flutter-wasm-feedback)** +4. **Share your successful builds:** When your application compiles without error + and achieves superior framerates, share your progress with the Flutter + community. Submit your before-and-after performance metrics, frame rate + comparisons, and migration stories using the official intake form: + 👉 **[https://goo.gle/flutter-web-wasm-win](https://goo.gle/flutter-web-wasm-win)** + +To share your experience on social media, use the hashtag **`#FlutterWasmWeek`**. + +--- + +## Accelerate the path to default WebAssembly compilation + +By identifying and resolving package dependency bottlenecks together as a +community this week, you are helping us validate the steps we need to take to +make **WebAssembly on by default** in an upcoming Flutter stable release. + +Upgrade Flutter, run the `flutter build web --wasm` command today, and share +your migration feedback with us.