WebAssembly (Wasm) is a technology that enables high-performance applications to run in web browsers, providing a more efficient alternative to JavaScript for computational tasks. The document outlines the integration of Kotlin with WebAssembly, enabling developers to create web applications with native performance, while also detailing the steps to set up Kotlin/Wasm projects and Rust-based WebAssembly applications. Major applications utilizing Wasm include the Snapchat web app, WordPress, and Figma.

1. Expanding WebAssembly
unlocking the Web's Potential

2. My name is Valentine Gatwiri a curious
full-stack web developer and Women
Techmakers Ambassador.
X- @gatwirival
Github- @gatwirival

3. What is WASM?

4. WebAssembly (WASM):
WebAssembly, also known as Wasm, is a technology that allows you to run
high-performance programs on the web. It's like a special language that can be
understood by web browsers.
In every browser, whether you use Chrome, Firefox, Edge, or Safari, code is interpreted and
executed by a JavaScript engine—which only runs JavaScript. Unfortunately, JavaScript is
not ideal for every task we want to perform. That’s where WebAssembly comes in.

5. Why use Web Assembly
Flexible Fast(high performance) Portability

6. Experimenting with Kotlin/Wasm
The association between Kotlin and WebAssembly allows Kotlin
developers to extend their reach beyond traditional platforms like JVM
and Android to the web. They can use Kotlin to write web applications that
can run with native-like performance, thanks to WebAssembly's efficient
execution.
However, originally Wasm wasn’t designed for programming languages
with garbage collection (GC), such as Dart and Java/Kotlin, making it
difficult to efficiently compile GC-based languages to Wasm

7. Kotlin Wasm
Kotlin/Wasm is a new compilation target for Kotlin. You can use it in your
Kotlin Multiplatform projects.
Kotlin/Wasm is an Experimental feature. It may be dropped or changed at any time. It is available
only starting with Kotlin 1.8.20.

8. How to Begin using Kotlin/Wasm in IntelliJ IDEA.
Make sure IntelliJ IDEA is installed, then open it:

10. Enabling an experimental Kotlin/Wasm Wizard.
To access the Registry, press Ctrl+Shift+A

11. Type and select Registry

12. Select registry,then select kotlin.wasm.wizard

13. Create a new Kotlin/Wasm project

14. NB: If the JDK is not present, press the dropdown menu and download it.
For this project as seen above we will be using Amazon Correto JDK but you
can use any JDK of your preference. Download it and it will be automatically
installed

15. Accept the default configuration on the next screen and
click Finish. Your project will open.
By default, the wizard creates the necessary Simple.kt
file.

16. Open the build.gradle.kts file and ensure that the Kotlin
Multiplatform plugin version is set to 1.8.20 or using the latest
stable version due to its likeliness to include the most recent bug fixes:
plugins {
kotlin("multiplatform") version "1.8.20"

17. Build and run the application
Click Build Project next to the run configuration at the top of the
screen. This should output “Hello World”

18. Building a WebAssembly App with Rust
We’re going to learn how to create a very simple web application
feature(popup window) using Rust and serve it up with the help of
WebAssembly and Python.

19. Install Necessary Dependencies
There are several dependencies we’re going to have to install to make
this magic happen. The first thing to do is install the necessary
compilers and other build tools with the command:
sudo apt-get install build-essential -y

20. Then install python:
sudo apt-get install python3 -y
Our next task is to install Rust, which can be done with the rustup script like so:
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

21. Once Rust is installed, source the environment variables with the command:
source $HOME/.cargo/env
Next, we need to install the wasm-pack tool (used for assembling and packaging Rust
crates for WebAssembly). This is done with the command:
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

22. Creating your first WASM/Rust package
Now that we have everything up and ready to go, we can build our first package. Let’s
call this package hello and create it with:
wasm-pack new hello
When this successfully completes, you should see printed out:

23. [INFO]: ⬇ Installing cargo-generate...
🐑 Generating a new rustwasm project with name 'hello'...
🔧 Destination: /home/gatwiri/hello ...
🔧 project-name: hello ...
🔧 Generating template ...
🔧 Moving generated files into: `/home/gatwiri/hello`...
Initializing a fresh Git repository
✨ Done! New project created /home/gatwiri/hello
[INFO]: 🐑 Generated new project at /hello

24. Change into the newly created directory with the command:
cd hello
We’ll now build the web target with:
wasm-pack build --target web

25. You should see output like:
[INFO]: 🎯 Checking for the Wasm target...
info: downloading component 'rust-std' for 'wasm32-unknown-unknown'
info: installing component 'rust-std' for 'wasm32-unknown-unknown'
16.6 MiB / 16.6 MiB (100 %) 10.4 MiB/s in 1s ETA: 0s
[INFO]: 🌀 Compiling to Wasm...
Compiling proc-macro2 v1.0.66
Compiling unicode-ident v1.0.11
Compiling wasm-bindgen-shared v0.2.87
Compiling log v0.4.20
Compiling bumpalo v3.13.0

26. Now we’re going to create an index HTML page, create this new file with:
nano index.html
In that file, paste the following:

27. index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Wasm Test Project</title>
</head>
<body>
<script type="module">
import { default as wasm, greet } from "./pkg/hello.js";
wasm().then((module) => {
greet();
});
</script>
</body>
</html>

28. Save and close the new file.
After typing the content, press Ctrl + X to exit nano. You will be prompted to
save the changes; press Y to confirm.
You will then be asked to save the file. Press Enter to save the file with the
default name (index.html).

29. Now we need to run the Python HTTP server to serve up our new web application.
Since we’re using Python3, that command is:
python3 -m http.server 8000

30. Output

31. Major apps using WASM
Snapchat Web app WordPress Figma

32. References
Demo project
WASM Roadmap
WASM Examples