WebAssembly: A new development paradigm for the web

Summary

This video script delves into the exciting realm of WebAssembly, a revolutionary technology that empowers developers to bring high-performance applications and libraries to the web, leveraging languages beyond JavaScript. It showcases groundbreaking examples of applications like AutoCAD, Figma, Photoshop, and Snapchat harnessing WebAssembly's capabilities. Moreover, it explores how languages like C++, Swift, Java, Kotlin, and Dart are embracing WebAssembly, enabling cross-platform development with native-like performance on the web. The script emphasizes the potential of WebAssembly to revolutionize web development, offering greater flexibility, portability, and performance optimization for developers and captivating user experiences.

Takeaways

• 🌐 WebAssembly (Wasm) is a low-level binary format that allows other languages to be compiled and run on the web, offering better performance and portability than JavaScript alone.
• 🚀 Wasm enables large applications like AutoCAD, Figma, and Photoshop to run on the web with high performance, and even allows running server environments like WordPress in the browser.
• 📚 Wasm supports a wide range of languages like C++, Swift, Java, Kotlin, and Dart, enabling developers to bring their existing codebases to the web.
• ⚡ Wasm provides performance improvements through features like threads, SIMD, and memory optimization proposals.
• 🧩 Wasm libraries like OpenCV, TensorFlow.js, and SQLite can be used in web applications, exposing JavaScript APIs and providing high performance.
• 📱 With Wasm GC (Garbage Collection), managed languages like Kotlin and Dart can run on the web with performance comparable to native mobile platforms.
• 🌉 Wasm GC enables shared memory between JavaScript and Wasm modules, reducing bloat and improving interoperability with web APIs.
• 🔀 Cross-platform frameworks like Kotlin Multiplatform Mobile and Flutter can now target the web with the same codebase as native mobile apps, thanks to Wasm GC.
• 🎨 UI frameworks like Jetpack Compose for Android can be brought to the web using Wasm, allowing developers to share UI code across platforms.
• 🔓 Wasm opens up new possibilities for web development, combining the productivity of cross-platform development, the performance of native apps, and the openness of the web.

Q & A

What is WebAssembly?

WebAssembly is a low-level binary format for the web, compiled from other languages, that offers maximized performance and is meant to augment the places where JavaScript isn't sufficient.

Why should developers use WebAssembly?

There are three main advantages of using WebAssembly: 1) It offers more reliable and maximized performance, 2) It enables great portability by allowing developers to compile from other languages and share code across deployments, and 3) It offers greater flexibility by allowing developers to write for the web in languages other than JavaScript.

What are some examples of large applications that have been brought to the web using WebAssembly?

Some examples mentioned in the script are AutoCAD, Figma, Photoshop, Snapchat, and WordPress.

How does WebAssembly enable the use of libraries like OpenCV, TensorFlow.js, and Skia on the web?

WebAssembly libraries, such as OpenCV for image analysis, TensorFlow.js for ML, and Skia for graphics, expose JavaScript APIs and are amazingly performant thanks to WebAssembly under the hood.

How has WebAssembly enabled Swift applications to come to the web?

The SwiftWasm toolchain, which includes JavaScript kit and Carton, has matured to a point where Swift on WebAssembly is truly shippable in production. This has allowed applications like GoodNotes to reuse their Swift code base and bring their iOS app to the web.

What are some recent advancements in the WebAssembly standard itself?

Recent advancements include WebAssembly threads and SIMD for performance-sensitive workloads, the tail called proposal for functional programming languages, the memory 64 proposal for addressing more than 4 gigs of memory, and the JavaScript Promise Integration API for accessing asynchronous APIs from synchronous code.

What is WebAssembly GC and how does it address the challenges of managed memory languages on the web?

WebAssembly GC is a new extension that shares a joint heap between JavaScript and WebAssembly GC modules, allowing managed memory code to allocate objects on this shared heap and have them garbage collected together. This eliminates the need for shipping a separate garbage collector, enables dynamic memory resizing, and improves interop with JavaScript code and web APIs.

How does WebAssembly GC benefit cross-platform frameworks like Kotlin Multiplatform Mobile and Flutter?

WebAssembly GC allows these frameworks to compile directly to the native runtime of all three platforms (Android, iOS, and the web), giving developers access to the reach and instant start-up of the web while providing users with a fast and smooth experience matching native platforms.

What is the significance of being able to share UI code across platforms with frameworks like Jetpack Compose?

Frameworks like Jetpack Compose, which allow developers to share much of their UI code across platforms, combined with the performance of WebAssembly, enable a truly consistent and high-performance user experience across Android, iOS, and the web.

What are the potential benefits of running applications on the open web using WebAssembly?

Applications on the open web are just a click away from new users, can be discovered and shared easily without app stores or revenue splits, and offer the productivity of cross-platform development, the performance of native mobile apps, and the openness of the web.