This is the first part of a about programming in WebAssembly (Wasm) for beginners. The goal is to give you the first impression of what Wasm is and how it can be beneficial for your own projects. The further the series goes the deeper we will delve into the topic. series I suppose you have already heard about WebAssembly; how performant, lightweight, secure, and overall it is. promising Otherwise, you probably would not be reading this text right now, would you? So, I will just skip all that fluff and go directly to the more interesting stuff: like how to Wasm code and how to actually it. write use Wasm and Wat is a binary format (files with the .wasm extension). It also has a textual representation called (files with the .wat extension). Wasm Wat Wat could easily be generated from the binary format, for example via developer tools in the browser. Albeit Wat is a text format readable by humans, it is still pretty low-level — programming complex systems in Wat would quickly become a nightmare. But no worries, Wasm can be compiled from like Rust, C/C++, Go, or Kotlin. Just choose your favourite one! many languages Hello, WebAssembly! To understand the very basics we will start at quite a low-level. Well, not on the binary level, all in all, it was never meant to be written or read by humans. We will create a simple Hello world program in Wat, the WebAssembly text format. Copy and save the following code into a file (hello.wat): ( ( ( ) 
        ( i32)
    i32.const return)) module func export "main" result 42 Wait a minute, there is no “Hello” in the code above! This is the first catch: WebAssembly does not have a value that would represent . type strings We have only in our base equipment. For now, 42, to the ultimate question of life, the universe, and everything, will serve as our “hello, world” phrase. numeric types the answer To test the code, we can use the . WebAssembly Binary Toolkit First, we must compile the Wat text format into the Wasm binary format (hello.wasm): $ wat2wasm hello.wat -o hello.wasm We can run it with an interpreter from the same toolkit: $ wasm-interp --run-all-exports hello.wasm The following output should appear: => i32: main () 42 We can run the same code in the , too: browser < > html < > body < > script WebAssembly
    .instantiateStreaming(fetch( ))
    .then( .log(instance.exports.main())
    ); 'hello.wasm' ( ) => {instance} console </ > script </ > body </ > html For the to work the HTML page must be served via HTTP(s). Tools like do the job. Fetch API dir2http After opening the page in a browser we should see the answer in the dev console: » 42 As just shown, the identical WebAssembly program can run both inside and outside a browser. This shows the great potential of WebAssembly to become a universal programming platform for both web clients and server applications. Further Steps All right, we have written our first program in Wasm and now we know the answer to the ultimate question. What's next? In the of this series, we will go deeper and explain byte by byte what actually happens under the hood. second part

Fetch

Follow me for more stuff like this.

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Hello, World of WebAssembly!

Too Long; Didn't Read

Company Mentioned

Tomas Tulka

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Hello, World of WebAssembly!

Too Long; Didn't Read

Company Mentioned

Tomas Tulka

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES