Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 


In this article I will show you how to consume WebAssembly modules from OpenUI5/SAPUI5 application. We will fetch WebAssembly module (built with Rust), parse its metadata and render available functions and their signatures inside sap.m.List control!

We will learn following:

  • Brief introduction to WebAssembly

  • How to create WebAssembly modules

  • How to fetch them in JavaScript

  • How to call WebAssembly functions from our OpenUI5/SAPUI application

The final result is located at GitHub:

What is WebAssembly

WebAssembly is a new binary format designed to be very compact and fast. WebAssembly target is to be almost the same performant as native applications written in C/C++. This format is now supported by all major browsers: Chrome, Safari, Edge and Firefox. You might already use WebAssembly apps on the web.

List of browsers with WebAssembly support:

WebAssembly is not a standalone language, though you can manually write binary code or use WebAssembly Text Format to create programs in it. Other languages must compile to WebAssembly. One of the best tools for WebAssembly are provided by Rust Language [] and C/C++.

You can read more about WebAssembly here:

How to create WebAssembly [wasm] modules

For this article we will use Rust language to compile to wasm binary format.

We will write several functions like sum and multiply in Rust and then compile them into wasm.

To compile Rust code to WebAssembly we will be using wasm-pack:

Rust project is located at GitHub inside subfolder:

Also repository contains already built wasm module:

Rust code at contains two functions:
pub fn add_two(a: i32, b: i32) -> i32 {
a + b

pub fn multiply_by(a: i32, b: i32) -> i32 {
a * b

We will call these functions from JavaScript (OpenUI5 application).

If you want to compile that code on your own, then follow detailed steps provided at this README:

Once you compiled that project, you can copy the result (wasm file) into webapp folder.

How to call WebAssembly functions from JavaScript

GitHub repository is a valid OpenUI5/SAPUI5 application. So you can deploy it to SAP Web IDE and run the code there, or you can do it from your machine.

We will initialize WebAssembly module just inside onInit method of our Controller:
return Controller.extend('com.gladimdim.webasmloader.controller.App', {
onInit: function() {
this.aSearchFilters = [];
this.aTabFilters = [];


We use standard Fetch API to load wasm file from the server:
.then(response =>
.then(bytes => {
return WebAssembly.instantiate(bytes);

From response we get ArrayBuffer and ask WebAssembly to instantiate the module from it.

WebAssembly.instantiate returns a promise, which resolves an object with our functions:


Now we can call our functions just from Dev Tools Console:
var { add_two } = results.instance.exports;

add_two(5, 3); // 8

var { multiply_by } = results.instance.exports;

multiply_by(10, 20); // 200

Reading MetaData from WebAssembly Module

For educational purpose, I decided to use library to get meta information about exposed functions.

We can use wasm-parser Decode function to create a JSON with needed info:
.then(response =>
.then(bytes => {
var ast = _webassemblyjs_wasmParser.decode(bytes);
// read only exported functions
var exportedFunctions = ast.body[0].fields.filter(f => !== "memory" && f.type ===
"ModuleExport").map(f =>;
// update functionsMeta variable with a list of exported functions and their meta data
functionsMeta = ast.body[0].fields.filter(f => {
if (f.type === "Func" && exportedFunctions.indexOf( >= 0) {
return true;
} else {
return false;
// continue initialization process for WebAssembly module
return WebAssembly.instantiate(bytes);

Once 'functionsMeta' are initialized, we can create JSONModel and render our list:
.then(results => {
webAssemblyModule = results.instance;

var functions = {
"wasmFunctions": => {
return {
exec: webAssemblyModule.exports[],
arguments: exportedFn.signature.params,
results: exportedFn.signature.results[0]
oModel = new JSONModel(functions);
.setModel(oModel, "Functions");

Running OpenUI5 with WebAssembly

You can use official OpenUI5 Command Line Tools to run on your local machine.

Running Locally

Open command line and enter following commands:
npm install
ui5 serve

Then open this URL in the browser:


Running in the SAP WebIDE

You can also run the same project in SAP WebIDE.

For this you have to clone the repo, then run index.html as you do with any other SAP WebIDE project.


You will see a list of exported functions from WebAssembly module. i32 is a name of WebAssembly type (integer 32bit). We bind them to ObjectListItem to let the user now, that function returns integer.

1 Comment