WebAssembly: A new development paradigm for the web

Chrome for Developers
10 May 202322:03

Summary

TLDRThis 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.

Outlines

00:00

🌐 Introduction to WebAssembly

This paragraph introduces WebAssembly, a low-level binary format for the web that enables better performance and portability. It highlights the advantages of WebAssembly, such as reliable performance, cross-platform compatibility, and flexibility for developers. It also mentions that WebAssembly is now fully supported in major browsers. The paragraph sets the stage for discussing how various languages are leveraging WebAssembly for web development.

05:01

💻 C++ and WebAssembly

This paragraph focuses on the use of C++ with WebAssembly. It discusses how large applications like AutoCAD, Figma, and Photoshop have been brought to the web through WebAssembly, leveraging their existing C++ codebases. It highlights examples of companies such as Snapchat, WordPress, and others that have adopted WebAssembly to port their C++ implementations to the web. The paragraph also mentions the Emscripten toolchain, improvements in WebAssembly debugging, and the availability of various WebAssembly libraries like OpenCV, TensorFlow.js, and Skia.

10:01

🔢 WebAssembly and Managed Memory Languages

This paragraph discusses the challenges of bringing managed memory languages like Java, Kotlin, and Dart to the web. It explains the limitations of the original WebAssembly architecture, such as bloat and the split brain problem between JavaScript and WebAssembly memory spaces. The paragraph then introduces the WebAssembly GC extension, which enables sharing a joint heap between JavaScript and WebAssembly GC modules, addressing these issues and enabling better performance and interoperability.

15:01

🚀 Kotlin and Compose for Web Development

This paragraph focuses on Kotlin and its potential for web development with WebAssembly. It discusses JetBrains' efforts to bring Kotlin and Jetpack Compose, a modern UI framework, to the web. It includes a demonstration of a Compose-based application running in the browser, showcasing the ability to share code across platforms, including the web. The paragraph also highlights the performance benefits and the ability to debug Kotlin code directly in the browser using Chrome's DevTools.

20:04

🌐 The Future of Cross-Platform Web Development

The final paragraph discusses the broader implications of WebAssembly for cross-platform web development. It emphasizes the productivity benefits of cross-platform development, the performance advantages of native mobile apps, and the openness of the web. The paragraph mentions Flutter's adoption of WebAssembly for better performance on the web and the potential for developers to target multiple platforms, including the web, without compromising performance or user experience.

Mindmap

Keywords

💡WebAssembly

WebAssembly is a low-level binary format for the web that is compiled from other languages like C++, Rust, Swift, Java, Kotlin, and Dart. It offers maximized performance, portability, and flexibility for developers to write web applications in languages other than JavaScript. The video highlights WebAssembly's ability to enable large, performance-demanding applications like AutoCAD, Figma, and Photoshop to run on the web.

💡C++

C++ is one of the earliest languages to leverage WebAssembly, enabling large applications with large code bases like AutoCAD and Figma to be ported to the web. The video mentions how AutoCAD brought its 40-year-old codebase, and Figma wrote its engine in C++ for maximized performance. C++ is compiled to WebAssembly using tools like Emscripten, which also handles porting POSIX APIs and translating OpenGL calls to WebGL.

💡Swift

Swift is a language that can now be compiled to WebAssembly, enabling Swift applications like GoodNotes to be brought to the web while reusing their existing Swift codebase. The video shows how GoodNotes uses a React UI framework, PWA for installability, and a central Canvas connected to the Swift Engine. The toolchain used is SwiftWasm, which includes JavaScript Kit for interacting with JavaScript and Carton for bundling and deployment.

💡WebAssembly GC

WebAssembly GC (Garbage Collection) is a new extension that enables managed memory languages like Java, Kotlin, and Dart to efficiently run on the web. It shares a joint heap between JavaScript and WebAssembly GC modules, eliminating the need for shipping a separate garbage collector implementation. This results in smaller binaries, faster interop with JavaScript and web APIs, and a dynamically resizable memory footprint.

💡Kotlin

Kotlin is a statically-typed programming language that can now run on the web thanks to WebAssembly GC. The video showcases Kotlin multi-platform mobile, which allows developers to write business logic once and compile it for Android, iOS, and the web. JetBrains is working on bringing Jetpack Compose, a declarative UI framework for Android, to the web using Kotlin WebAssembly.

💡Dart

Dart is a programming language used by the Flutter framework for building cross-platform applications. With WebAssembly, Dart code can now be compiled directly to efficient WebAssembly code in the browser, unlocking faster performance for Flutter web applications compared to transpiling to JavaScript.

💡Cross-platform development

Cross-platform development refers to the ability to write code once and deploy it across multiple platforms, such as mobile (Android and iOS), desktop, and web. The video highlights how WebAssembly enables cross-platform frameworks like Kotlin multi-platform mobile and Flutter to target the web without compromising performance, providing a native-like experience on all platforms.

💡Performance

Performance is a key advantage of using WebAssembly. The video emphasizes how WebAssembly offers maximized and reliable performance for demanding applications, enabling smooth experiences on the web comparable to native mobile platforms. This is achieved through efficient compilation from languages like C++, Rust, Swift, Kotlin, and Dart.

💡Portability

Portability refers to the ability to run the same code across different platforms or deployments. The video highlights how WebAssembly enables portability by allowing developers to compile code from various languages like C++, Rust, Swift, Kotlin, and Dart, and share that code across web, mobile, and desktop environments.

💡Web APIs

Web APIs are interfaces provided by the web browser for interacting with various browser features and functionalities. The video discusses how WebAssembly GC improves interoperability with JavaScript-based Web APIs like the DOM, Canvas, WebGL, and Web GPU, enabling efficient data exchange without excessive copying between JavaScript and WebAssembly heaps.

Highlights

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

WebAssembly offers more reliable and maximized performance, great portability since you can compile from other languages, and greater flexibility for developers to write for the web in languages other than JavaScript.

Large applications such as AutoCAD, Figma, and Photoshop have been brought to the web using WebAssembly, enabling them to leverage their existing code bases and achieve high performance.

Snapchat is using WebAssembly to expand their audience while using a single code base, delivering their entire application directly in the browser across all operating systems.

WordPress has managed to get the WordPress server environment built to run directly in the browser by compiling the PHP interpreter and SQLite to WebAssembly.

WebAssembly libraries like OpenCV, TensorFlow.js, Skia, SQLite, and FFmpeg are changing web development by providing high-performance functionality through JavaScript APIs.

Swift on WebAssembly is now shippable in production, with applications like GoodNotes reusing their Swift investments to bring their iOS app to the web.

WebAssembly is being continuously improved with features like threads, SIMD, tail call optimization, memory64, and JavaScript Promise Integration API.

WebAssembly GC (Garbage Collection) extension shares a joint heap between JavaScript and WebAssembly GC modules, enabling smaller binaries, faster interop, and dynamically resizable memory footprint.

WebAssembly GC allows managed memory languages like Java, Kotlin, and Dart to run on the web with up to two times faster performance than compiling to JavaScript.

Cross-platform frameworks like Kotlin Multi-Platform Mobile and Flutter can now compile directly to the native runtime of web, Android, and iOS platforms, providing a fast and smooth experience across all platforms.

JetBrains demonstrates Jetpack Compose, a declarative UI framework for Android, running on the web using Kotlin WebAssembly, with the potential for shared code across platforms.

Flutter developers can now compile Dart code directly to fast and efficient WebAssembly code in the browser, unlocking better performance for Flutter web apps.

WebAssembly offers the productivity of cross-platform development, the performance of native mobile apps, and the openness of the web.

The WebAssembly community is continuously working on improving and expanding the standard, with proposals for features like SIMD instructions, tail call optimization, memory64, and JavaScript Promise Integration API.

Transcripts

play00:00

[MUSIC PLAYING]

play00:04

THOMAS NATTESTAD: Hi, everyone.

play00:06

My name is Thomas.

play00:06

Along with my colleague Vivek, we

play00:08

will be covering WebAssembly and how

play00:11

it's enabling a new paradigm of web development.

play00:14

So let's start off by covering what WebAssembly actually is

play00:18

and why you would use it.

play00:20

Well, WebAssembly is a low-level binary format

play00:23

for the web that is compiled from other languages

play00:26

to offer maximized performance and is

play00:29

meant to augment the places where

play00:30

JavaScript isn't sufficient.

play00:32

So why use WebAssembly?

play00:34

Well, there are three main advantages.

play00:37

First, it offers more reliable and maximized performance.

play00:42

Second, it enables great portability

play00:44

since you can compile from other languages,

play00:47

enabling you to share your code across deployments.

play00:51

Lastly, it offers greater flexibility

play00:53

for developers who can now write for the web in languages

play00:57

other than JavaScript.

play00:59

Perhaps best of all, it is now shipping fully

play01:02

in every major browser, so you can reliably

play01:05

reach all of your users.

play01:07

In this talk, we want to go over four languages

play01:10

to show how they're coming to the web

play01:12

and how you can get started yourself.

play01:15

We're focusing on these four languages in this talk.

play01:18

But it's worth noting that there are a ton of other languages

play01:21

that are also adding support for WebAssembly.

play01:24

So let's dig in and start off with C++.

play01:28

One of the earliest areas where WebAssembly transformed the web

play01:32

was by enabling large applications, such as AutoCAD,

play01:35

Figma, and most recently, Photoshop, on the web.

play01:39

These are performance demanding applications

play01:41

with large code bases, often ported from other platforms.

play01:45

AutoCAD brought their code base, which

play01:47

was started over 40 years ago, before the first ever browser.

play01:52

And now, parts of that original code base

play01:54

are directly accessible with a simple link.

play01:58

Figma made a big bet on WebAssembly from the start

play02:01

and wrote their Engine in C++ for maximized performance.

play02:06

Photoshop has brought their complex application to the web,

play02:09

enabling easy sharing across platforms

play02:12

with commenting and editing.

play02:14

They'll also soon be using Web ML for optimized machine

play02:18

learning operations, which you can

play02:19

hear more about in the What's New with Web ML

play02:22

talk here at I/O.

play02:25

In the last year, we've continued

play02:27

to see more of these incredible advanced apps,

play02:30

leveraging Wasm to come to the web.

play02:32

Snapchat wanted to expand their audience

play02:35

while using a single code base to hit all of their platforms.

play02:38

They decided that C++ would give them the performance

play02:41

and portability that they needed.

play02:44

By leveraging WebAssembly, they can

play02:46

deliver their entire application directly

play02:48

in the browser across all operating systems.

play02:52

Snap is also investing in bringing their amazing camera

play02:55

kit to the web through WebAssembly,

play02:57

which you can try yourself right at web.snapchat.com.

play03:01

Here, they're again reusing their C++ implementation that

play03:05

is shared across platforms.

play03:07

They're using Emscripten, including its Embind binding

play03:11

systems, and OpenGL to WebGL conversion.

play03:15

They're also using TensorFlow.js for ML inference,

play03:18

Web Workers for off-screen rendering,

play03:21

and performance optimizations using the Chrome profiling

play03:24

tool.

play03:25

WordPress has done something rather incredible

play03:28

and actually managed to get the WordPress server

play03:31

environment built to run directly in the browser.

play03:34

This relies on compiling the PHP interpreter itself and SQLite

play03:40

to WebAssembly.

play03:41

With this, users can try out WordPress directly

play03:44

in the browser with zero setup.

play03:47

This is amazingly impactful for getting started,

play03:50

enabling interactive tutorials, and eventually supporting

play03:53

easy publishing of backends.

play03:56

By running on Wasm, they can now also

play03:58

deploy to non-browser environments,

play04:01

including Node.js or other Wasm server environments.

play04:05

You can read tons of interesting details

play04:07

in this deep dive blog post.

play04:09

All of these examples are powered

play04:11

by the Emscripten toolchain.

play04:13

Emscripten will help compile your C++ code,

play04:17

but also helps port code built against POSIX APIs,

play04:20

and will even translate OpenGL calls to WebGL.

play04:24

To get started, go to emscripten.org.

play04:28

We've also made really substantial improvements

play04:31

in enabling WebAssembly debugging.

play04:34

With this support, you can now see your C++ code in DevTools,

play04:37

set breakpoints, step through your code,

play04:39

and even see runtime values of variables.

play04:42

Visit this link to see how.

play04:44

Now, you might be thinking to yourself,

play04:46

I'm not writing C++ or building a large cross-platform

play04:49

application.

play04:50

I'm doing web development.

play04:51

Well, this is where WebAssembly libraries

play04:54

are going to change your life.

play04:57

These libraries include things like OpenCV for image analysis,

play05:00

TensorFlow.js for ML, Skia for graphics, SQLite for database,

play05:06

FFmpeg for video manipulation, and so, so much more.

play05:10

You can dig into these examples at this URL.

play05:13

These examples all expose JavaScript APIs.

play05:15

And you might not even know that they're powered by WebAssembly

play05:18

under the hood, except for how amazingly performant they are.

play05:22

So let's take the incredible web app for Telegram as an example.

play05:26

Telegram is a traditional web application

play05:29

with the majority of functionality

play05:30

built in JavaScript.

play05:31

But there were a few areas where they

play05:33

needed some additional functionality

play05:35

that they found in WebAssembly.

play05:37

Specifically, they use the RLottie renderer

play05:40

for animated stickers, Opus Recorder for voice recording

play05:44

and decoding, fastTextWeb for language detection,

play05:47

and Webp-hero for dot Webp support in Safari.

play05:51

And indeed, when looking at MPM, there

play05:53

were 1,500 packages with WebAssembly.

play05:58

If you're a library author in really any language,

play06:00

and you're interested in bringing your library

play06:02

to the web, now is your moment.

play06:04

If you'd like to connect directly with us,

play06:06

provide feedback on your experience,

play06:08

or even get featured on web.dev, you can visit this link.

play06:12

So now that we've covered C++, let me jump into Swift.

play06:17

It's been possible to compile Swift WebAssembly for a while.

play06:20

But it's only recently that the toolchain and ecosystem

play06:23

have matured to a point where this is

play06:25

truly shippable in production.

play06:28

One such application that is shipping Swift on WebAssembly

play06:31

in production and coming to the web is GoodNotes.

play06:34

They have invested a decade of work

play06:36

in creating the most incredible iOS

play06:39

application, full of cool features with a 4.8 star

play06:42

rating.

play06:43

They decided it was time to spread their application

play06:46

to non-iOS users.

play06:47

And rather than having to do an incredibly expensive rewrite

play06:51

that would also have to be separately maintained,

play06:54

they decided to reuse their Swift investments

play06:56

through WebAssembly.

play06:58

This means their decade of work can be reused, while also

play07:02

minimizing maintenance costs.

play07:05

When we talked to them, one of my favorite things they said

play07:07

was, quote, "every day, our iOS developers contribute something

play07:11

new to our Swift code base.

play07:12

And our web app benefits from that."

play07:15

In terms of their tech stack, they're

play07:17

utilizing Swift on WebAssembly, React as their UI framework,

play07:21

and PWA for installability.

play07:24

They have a great Tech Talk with lots more details at this link.

play07:28

They do their surrounding UI in React,

play07:30

and have a central Canvas connected to the Swift Engine.

play07:33

This is the same pattern that we saw with our previous partners.

play07:37

As an example, when a user clicks something like Add Page,

play07:41

it calls from the click handler in React

play07:43

into the Swift code base to add the page

play07:46

and then make it ready for input.

play07:48

The toolchain they use is called SwiftWasm.

play07:50

And you can get started with that on swiftwasm.org.

play07:55

The toolchain includes JavaScript kit,

play07:57

which enables your Swift code to interact

play07:59

with JavaScript through bindings and translating types

play08:01

and objects.

play08:03

It also offers Carton, which provides a Swift alternative

play08:06

to something like webpack.

play08:08

It lets you easily bundle and deploy your app,

play08:10

while also shipping your code to other platforms.

play08:14

As with anything, there are some limitations

play08:16

that developers should be aware of.

play08:19

I want to be clear that this isn't

play08:20

a magic button that will make your Swift app run directly

play08:23

on the web.

play08:24

And while it's dramatically faster than a rewrite,

play08:27

it's not zero effort.

play08:28

Swift code and SwiftUI should work well.

play08:31

But things like storage, UI kit, networking, and files

play08:35

need to utilize web alternatives.

play08:38

Still, if you're a Swift developer who

play08:40

has been hoping to expand your addressable market,

play08:42

this is your moment.

play08:44

So now I want to take a step back from any specific language

play08:48

and update you a bit on the progress of the WebAssembly

play08:51

standard itself.

play08:53

In the past, we've discussed how WebAssembly threads and SIMD

play08:57

can offer a 10x or more improvement

play09:00

for performance-sensitive workloads.

play09:02

For an overview of how powerful these features can be

play09:05

and how to get started, check out

play09:08

this video from Chrome dev sub.

play09:10

And we're continuing to expand with even more SIMD

play09:14

instructions to further maximize performance.

play09:17

The tail called proposal is a critical optimization

play09:20

for functional programming languages and enables better

play09:24

support for C++ programs using coroutines.

play09:28

The memory 64 proposal gives applications the ability

play09:32

to reference more than 4 gigs of memory

play09:35

and making it easier to port code that

play09:37

assumes a 64-bit architecture.

play09:40

Lastly, the JavaScript Promise Integration API

play09:43

lets synchronous code access asynchronous APIs

play09:48

without substantial code size or performance overhead.

play09:52

This is a big deal if you're trying

play09:53

to make code that assumes a synchronous environment

play09:56

work with the web.

play09:58

Now, to continue our language journey,

play10:00

I'm going to turn it over to my colleague, Vivek.

play10:06

VIVEK SEKHAR: Thanks, Thomas.

play10:07

You may remember at last year's Google I/O,

play10:09

we previewed our plan to bring new languages,

play10:12

like Java, Kotlin, and Dart to the web.

play10:16

Over the past year, the WebAssembly community

play10:18

has been busy making this happen.

play10:20

So let's talk a bit about what we built

play10:22

and what this new technology makes

play10:23

possible for developers across the web

play10:26

and native mobile platforms.

play10:28

As Thomas mentioned, WebAssembly has taken off among developers

play10:31

using C and C++, as well as a growing community around Rust.

play10:36

In these languages, developers are

play10:38

responsible for, in a sense, cleaning up after themselves,

play10:41

freeing objects from memory after an application

play10:43

is done using them.

play10:45

This class of languages was the primary focus

play10:47

of the early WebAssembly standard, what

play10:50

we call WebAssembly MVP, in part because these were

play10:54

the languages many large desktop applications were written in,

play10:57

and also because they had somewhat simpler requirements

play11:00

when developing the WebAssembly standard.

play11:03

Another class of languages manages memory

play11:05

on behalf of the developer.

play11:07

The languages own runtime automatically

play11:09

finds and frees memory that the app is no longer using.

play11:13

This class of languages is really interesting

play11:15

if you're building web or mobile apps because JavaScript

play11:18

is the language in which the web's own APIs are specified

play11:21

and standardized.

play11:22

And Kotlin and Dart are increasingly

play11:24

popular among developers building

play11:26

cross-platform, native mobile apps.

play11:29

So we wanted to figure out, what would it

play11:31

take to extend the web platform to applications

play11:34

written in these languages in a performant way?

play11:38

So let's walk through how we do that.

play11:40

When a web app starts in the browser,

play11:42

it's given a context for its JavaScript code and some heat

play11:45

memory.

play11:46

JavaScript memory is garbage collected,

play11:48

so there's a garbage collector provided by the browser

play11:50

behind the scenes.

play11:52

Now, when an app instantiates a WebAssembly module,

play11:55

it asks for and is allocated a region of linear memory

play11:58

for its own use.

play11:59

If the developer is using a language like C or C++,

play12:03

then the WebAssembly module uses some of this memory

play12:05

for a dynamic heap.

play12:06

And the developer would handle freeing objects on that heap

play12:09

after they're used.

play12:11

On the other hand, if the developer

play12:12

wanted to use a managed memory language,

play12:15

then the WebAssembly module will need

play12:16

to include that language as garbage collector code

play12:19

to manage the heap and automatically free up

play12:21

unused memory.

play12:23

There were two main problems with this approach.

play12:26

The first is obviously bloat.

play12:27

The WebAssembly module has to ship and instantiate

play12:30

that garbage collector every time the app is loaded.

play12:33

This increases the module size and delays the application

play12:36

startup, despite the fact that every standards compliant

play12:39

browser out there already contains a garbage

play12:42

collector for apps to use.

play12:43

Another form of bloat comes from the need for developers

play12:46

to have a kind of clairvoyance when deciding how much memory

play12:49

to request for their module.

play12:51

To avoid crashes, the typical thing to do

play12:53

is to set a maximum memory size that

play12:55

is just beyond the upper bound of your anticipated memory

play12:58

needs.

play12:59

This puts more pressure on implementations

play13:01

who have to manage the apps JavaScript and WebAssembly

play13:04

memory separately, alongside the memory needed by other apps

play13:07

and tabs that the user might be using.

play13:10

The second problem is what I call the split brain problem.

play13:13

In this architecture, those two memories

play13:16

and their garbage collectors know nothing about each other.

play13:19

This means developers need to be careful to architect

play13:21

their applications to avoid corruption

play13:23

when, for example, the JavaScript garbage

play13:25

collector comes along and frees up

play13:27

memory that's actually still needed by the Wasm side or vise

play13:30

versa.

play13:31

All this adds up to more bookkeeping

play13:33

that developers have to do themselves,

play13:35

which kind of breaks the whole reason to use a managed memory

play13:38

language in the first place.

play13:39

But even if you put all of your objects on one side,

play13:42

on the WebAssembly side, you can't

play13:44

avoid dealing with the JavaScript heap.

play13:46

And that's because of web APIs.

play13:49

Web APIs are specified to accept and return

play13:51

JavaScript objects, which naturally

play13:53

live on the JavaScript heap and are collected by the JavaScript

play13:57

garbage collector.

play13:58

In the original version of WebAssembly,

play14:00

this meant copying your data in both directions

play14:02

between WebAssembly and JavaScript

play14:04

any time you wanted to call a web API.

play14:07

Graphics APIs, like the Dom, Canvas, WebGL, and Web GPU,

play14:12

are especially impacted by this since in some cases,

play14:15

they need to be called hundreds of times per frame

play14:17

or thousands of times per second with very strict latency

play14:20

requirements to avoid user visible jank.

play14:22

The net result is, even after we built a fast compilation target

play14:26

for code, many frameworks and applications

play14:28

ran the risk of producing jankier experiences on the web

play14:32

compared to what they would be able to produce

play14:34

on native mobile platforms.

play14:36

So how do we address this?

play14:38

Well, the WebAssembly community created a new extension

play14:41

that in effect, shares a joint heap between JavaScript

play14:44

and WebAssembly GC modules.

play14:46

Now, your managed memory code can just allocate modules

play14:49

on this joint heap.

play14:50

And when the browser's garbage collector comes around,

play14:53

JavaScript and WebAssembly GC objects

play14:55

are garbage collected together.

play14:58

This means no more bloat.

play14:59

Your WebAssembly module doesn't have

play15:01

to ship its own full garbage collector

play15:02

implementation with your app.

play15:04

And your WebAssembly app can more easily

play15:06

grow or shrink its memory consumption as needed,

play15:09

just like a JavaScript app can.

play15:11

Some browsers, including Chrome, will even

play15:13

return unused WebAssembly memory from this shared heap

play15:16

to the operating system whenever possible,

play15:19

helping ensure all apps running on the user's device

play15:21

remain efficient and responsive.

play15:23

The web API story improves as well.

play15:26

WebAssembly GC modules, create objects in the same heap where

play15:30

the JavaScript Web APIs will look for them,

play15:32

and return values are easily passed back as well,

play15:34

all without excessive copying.

play15:37

So that's WebAssembly GC, smaller binaries

play15:40

for modern, managed memory languages,

play15:42

faster interop with JavaScript code,

play15:45

and the JavaScript-based Web APIs,

play15:47

and a dynamically resizable memory footprint that

play15:50

grows and shrinks to provide your module with what it needs.

play15:53

With WebAssembly GC, the web can finally

play15:56

give a proper welcome to our developer friends

play15:58

building Flutter, Android, and Kotlin multi-platform apps.

play16:02

Let's look at what WebAssembly means for you.

play16:05

Early data shows that WebAssembly GC now

play16:08

runs code compiled from these languages in the browser up

play16:11

to two times faster than compiling them to JavaScript.

play16:14

From a user's point of view, this level of performance

play16:16

is increasingly indistinguishable from what

play16:19

they would see on native mobile platforms.

play16:21

We're talking about apps running at 120

play16:23

frames per second with single millisecond frame update times.

play16:27

We can now imagine a world where cross-platform frameworks can

play16:30

build apps for native mobile platforms and the web

play16:34

with no perceivable difference in capabilities or performance.

play16:38

And the developer experience gets better too.

play16:40

Previously, developers would have

play16:42

to build separate native Android and iOS apps, as well as a web

play16:46

app to reach the broadest set of users.

play16:48

Cross-platform frameworks, like Kotlin, multi-platform mobile,

play16:52

let developers write their mobile apps business

play16:54

logic, the part that manages user data

play16:56

and implements your apps features,

play16:58

in a single code base that compiles to both Android

play17:01

and iOS, while implementing their user

play17:04

interface using platform native frameworks and widgets.

play17:07

But extending this cross-platform capability

play17:09

to the web ran into some challenges.

play17:13

For a long time, you couldn't really

play17:14

compile mobile languages, like Kotlin, to the web.

play17:18

At best, you could transfer pile it to JavaScript

play17:20

and then run that JavaScript in a browser.

play17:23

This approach produced apps on the web

play17:25

that just weren't as fast and smooth for users

play17:28

as they would be on native mobile platforms.

play17:31

Now, thanks to WebAssemby's new support

play17:34

for managed memory languages, cross-platform apps

play17:37

can compile directly to the native runtime of all three

play17:40

platforms, giving developers access to the reach and instant

play17:44

start up of the web, and giving users

play17:46

a fast and smooth experience wherever they find your app.

play17:50

The Kotlin community also benefits from UI frameworks,

play17:53

like Compose, which can help developers

play17:55

share much of their UI code as well across platforms again,

play17:59

with the performance level matching

play18:01

that of native platforms.

play18:04

Here's Sebastian from JetBrains to share more about Kotlin

play18:07

multi-platform and Compose.

play18:12

Thank you, Vivek.

play18:13

At JetBrains, we think WebAssembly

play18:15

is a promising technology.

play18:17

And we want Kotlin developers to get all the benefits

play18:19

it has to offer.

play18:21

Just recently, we released an experimental version

play18:24

of the WebAssembly target for the Kotlin compiler.

play18:27

SEBASTIAN: We see a lot of potential use

play18:29

cases in Kotlin Wasm's future, from building

play18:32

high-performance web applications running

play18:34

in the browser, to building speedy serverless functions.

play18:37

I want to show you a concrete example of one such thing that

play18:41

is part of the potential future of Kotlin Wasm.

play18:45

So here you can see an application

play18:47

built using Jetpack Compose, the declarative and modern UI

play18:50

framework created by Google for Android.

play18:53

You might have actually seen this specific app before.

play18:55

Now, at JetBrains, we're working on bringing Jetpack Compose

play18:59

to multiple other platforms beside Android,

play19:01

like desktop, iOS, and web.

play19:04

In practice, this means that you can take any knowledge

play19:06

about the APIs of Jetpack Compose

play19:08

that you might have from developing for Android

play19:10

and use it to target other platforms.

play19:12

The web target for Compose is built on top of Kotlin Wasm.

play19:16

It's still experimental.

play19:17

But let me show you what we can already do with it.

play19:20

Here is the same application you just saw on Android

play19:24

running in Google Chrome.

play19:25

It looks and behaves just like we saw on Android before.

play19:29

If we want to get an idea of the current performance

play19:33

of this app, we can open the FPS counter in Chrome's DevTools

play19:37

and watch some of these beautiful animations.

play19:40

We're also working on making it possible

play19:42

for you to debug Kotlin code right inside your browser

play19:45

and inspect variables and stack traces

play19:48

right in Chrome's DevTools using the built-in support for source

play19:51

maps.

play19:52

Now, let's move back to IntelliJ IDEA

play19:54

and take a quick look at the code of our app.

play19:57

As you can see, the UI and business logic of the app

play20:00

are all located in the Common module.

play20:04

It's all code that is shared between the different targets

play20:07

for the project.

play20:08

But we can also specify platform-specific logic

play20:11

for the individual targets in the respective subprojects.

play20:14

That way, we still get to use everything

play20:17

in terms of platform-specific APIs.

play20:19

OK, so after making a small change to our code,

play20:24

we can actually have a look at the result of the changes.

play20:27

And look at that.

play20:28

They appear right in the browser.

play20:30

We hope this little demo made you want to learn more

play20:32

about this experimental technology we're

play20:34

building at JetBrains.

play20:36

If that's the case, follow the link

play20:38

and check out the project sources for this demo yourself.

play20:40

Thank you and take care.

play20:44

VIVEK SEKHAR: Thanks, Sebastian.

play20:45

You can learn more about Kotlin running

play20:47

on the web with WebAssembly at kotlinlang.org.

play20:51

And we're not just making Android apps multi-platform

play20:53

with Kotlin.

play20:55

Multiplatform developers have been using Flutter for years

play20:58

to target Android, iOS, and the web.

play21:01

And on the web, Flutter developers

play21:02

have also had to transpile to JavaScript

play21:04

to run in the browser.

play21:06

But we're unlocking faster performance for Flutter web

play21:09

as well.

play21:09

For the first time this year, compiling Dart

play21:12

code directly to fast and efficient WebAssembly code

play21:15

in the browser.

play21:16

You can read more about the exciting new performance boost

play21:19

offered by Flutter web at flutter.dev/wasm.

play21:23

On the open web, your app is just a click away

play21:25

from new users, who can discover it and share it just

play21:28

as easily as they share a web page, with no stores getting

play21:31

in the way and no revenue split affecting your profitability.

play21:35

The productivity of cross-platform development,

play21:37

the performance of native mobile apps,

play21:40

and the openness of the web--

play21:41

that's why we love WebAssembly.

play21:44

On behalf of Thomas, myself, the Flutter team,

play21:46

and our friends at JetBrains, thank

play21:48

you so much for joining us.

play21:49

We can't wait to see what you'll build next.

play21:51

[MUSIC PLAYING]

Rate This

5.0 / 5 (0 votes)

Related Tags
WebAssemblyWeb DevelopmentCross-PlatformHigh-PerformanceApp DevelopmentEmerging TechnologiesProgramming LanguagesInnovative ConceptsDeveloper ToolsTech Talk