Dart, Flutter, and WasmGC with Ömer Ağacan and Martin Kustermann

Key Concepts

Dart, Flutter, WebAssembly (Wasm), Wasm GC, Dartium, Oilpan, JavaScript, DOM, Canvas, Performance, Startup Latency, Peak Performance, Multi-threading, Shared Memory, Asynchronous Programming, Stack Switching, Browser Benchmarks, Jasper Framework, Cross-platform Development.

Dart: A General-Purpose Programming Language

• Origins: Developed over a decade ago, originating from the development of Chrome. The founders of V8 were unhappy with JavaScript's semantics and performance quirks.
• Early Goals: Intended as a new language for the web, specified by ECMA 408 (though the specification is now outdated).
• Dartium: A fork of Chrome with the Dart VM inside, but it faced challenges with garbage collection across different heaps (JavaScript and Dart).
• Oilpan: A project to turn Chrome's rendering engine (Blink) into a garbage-collected system to address memory management issues and security vulnerabilities related to ref counting. The name origin is unknown.
• Adoption: Initially adopted internally by the Ads team and externally, but not as widely as hoped.
• Flutter Collaboration: Flutter's founders experimented with a stripped-down version of Chrome and collaborated with the Dart team, leading to Dart's adoption in Flutter.

Flutter: A Cross-Platform UI Framework

• Description: A popular cross-platform framework for developing UI apps that runs on mobile, web, and potentially TVs. Aims to run on anything with a screen.
• Founders: Founded by former leaders of the Blink rendering engine in Chrome.
• Motivation: Dissatisfaction with web technology stacks, particularly floating CSS layouts and their non-local performance effects.
• Approach: Renders pixels on a canvas, deviating from traditional DOM-based web programming.
• Accessibility Improvements: Recent improvements in accessibility support, addressing initial criticisms.
• Hot Reload: Implemented hot reload functionality, similar to native app development.
• Popularity: Widely used multiplatform app framework since 2021 (JetBrains survey). Accounts for nearly 30% of all new iOS apps (Apptopia).
• Revolutionary Approach: Throws away everything that we tend to have in web. If you look at the DOM tree, it's essentially a canvas and nothing more.

WebAssembly (Wasm) and Wasm GC

• Dart to JavaScript Compilation: Initially, Dart and Flutter compiled to JavaScript for web deployment.
• Motivation for Wasm: Dissatisfaction with JavaScript's semantics, performance cliffs, and the desire for a lower-level compilation target.
• Early Experiments: Experiments with compiling Dart to linear memory Wasm via LLVM, but concerns about shipping a separate garbage collector.
• Wasm GC Proposal: Excitement about the initial draft of the Wasm GC specification, leading to a new Dart compiler targeting Wasm GC.
• Goals of Wasm Compilation: Better startup latency and peak performance compared to JavaScript.
• Wasm GC and Managed Languages: Wasm GC allows managed languages to leverage the browser's existing garbage collector, avoiding the need to ship their own.
• Wasm GC Details: The Wasm GC proposal focuses on structs and arrays, leaving garbage collection implementation details to the engine.
• Benefits of Wasm GC: Memory efficiency, reduced binary size, and potential performance improvements.
• Non-Browser Runtimes: Non-browser Wasm runtimes need to implement a garbage collector for Wasm GC to function correctly.
• Performance Differences: Wasm offers advantages for typed arrays, unboxed numbers, and SIMD instructions. DOM operations can be slower due to the need to call host functions.
• Frames Per Second (FPS): Flutter has achieved up to twice as fast rendering with Dart Wasm compared to JavaScript.

Dart and DOM-Based Web Applications

• Mapping DOM Operations: Dart can be used to build web applications that use the traditional DOM by mapping DOM operations to Dart functions.
• Foreign Function Interface (FFI): DOM operations are declared as foreign function interface functions in Wasm code.
• Dart Package for DOM Bindings: A Dart package provides pre-made bindings for DOM APIs, simplifying DOM manipulation.
• Performance Considerations: Transitioning from Wasm to JavaScript for DOM operations can introduce overhead, but the overhead is not always significant.

Types and Language Design

• JavaScript's Lack of Types: JavaScript's lack of types led to the development of languages like Dart and TypeScript.
• Benefits of Types: Types provide structure for larger applications, improve developer tooling (code completion), and offer guarantees about nullability and type safety.
• Wasm's Liberation of Language Design: Wasm allows language designers to move in different directions without being constrained by JavaScript's semantics.
• Startup Time Improvements: Compiling to Wasm GC can result in 5-10x faster startup times compared to JavaScript.
• Binary Format Advantages: Wasm's binary format is structured and designed for verifiable bytecode, enabling faster parsing and compilation.

Size Considerations

• Comparable Size: The size of Dart Wasm binaries is comparable to Dart JavaScript binaries.
• Compressed Size: The compressed size of Wasm binaries may be slightly larger due to the text-based format of JavaScript compressing better.
• Streaming Compilation: Wasm allows for streaming download and verification, improving startup time.

Use Cases

• Suitable Applications: Dart and Flutter are well-suited for building applications like image editors, but not necessarily for content sites.
• Jasper Framework: A Dart framework for writing web apps with server-side and client-side rendering support, inspired by Flutter.
• Serverpod: A server-side framework using Dart.

Current Challenges and Limitations

• Non-Browser Runtimes: Lack of Wasm GC support in non-browser runtimes (e.g., Wasmer, Wasmtime) requires alternative solutions.
• Browser Fragmentation: Inconsistent support for Wasm features and performance optimizations across different browsers.
• Selective App Delivery: The need to selectively choose which version of an app to deliver based on browser capabilities.
• Wasm GC Support: Wasm GC is supported by all major browsers.
• JS String Builtins: JS String builtins are implemented only on Chrome and Firefox, not on Safari yet, requiring a polyfill.
• Performance Expectations: Compiling to Wasm does not automatically guarantee faster performance in all aspects.
• JavaScript API Mimicry: Dart's JavaScript APIs (typed arrays, regex) are essentially foreign function interface calls to JavaScript, which are not optimized as well as JavaScript-to-JavaScript calls.

Recommendations

• Compile to Both JavaScript and Wasm: Compile to both JavaScript and Wasm and use runtime selection to choose the best version based on the browser.
• Flutter's Approach: Flutter automatically compiles both versions and selects the appropriate one at runtime.
• Long-Term Vision: Over time, the Wasm build should become the preferred choice as engines catch up with optimizations.

Tricks and Optimizations

• Browser Benchmarks: Using browser benchmarks (e.g., BrowserBench, Speedometer) to highlight performance issues and encourage improvements.
• Flute Benchmark: A benchmark that exercises the same logic as Flutter apps, but without drawing on canvas.
• To-Do MVC Example: Attempting to get a Wasm GC-based To-Do MVC example into the Speedometer benchmark suite.
• Business Logic in Wasm: Doing business logic in Wasm and batching DOM calls in JavaScript.

Future Visions

• Eliminate Language Distinction: Eliminate the performance distinction between calling JavaScript from Wasm and calling JavaScript from JavaScript.
• Direct Interface to Browser APIs: Create a direct interface to browser APIs for Wasm, bypassing JavaScript.
• Shared Memory Multi-Threading: Implement shared memory multi-threading to improve UI responsiveness and offload tasks to other threads.
• Stack Switching: Implement stack switching for asynchronous programming to reduce binary size overhead and improve runtime performance.

Wasm But Not

• Omar: Listens to podcasts on non-technical topics like history and philosophy.
• Martin: Wishes everyone would try out new things, old things, and different things, and use NeoVim as their editor.

Contact Information

• Omar: LinkedIn or email (available on GitHub).
• Martin: LinkedIn or email.