Latest Doodle now supports wasmJS.

# webassembly

[Nick]

Latest Doodle now supports wasmJS.

[Robert Jaros]

Can you share any performance data? How does wasmJs performance compare to Js in Doodle?

[Nick]

So far they look comparable, aside from wasmJS using less RAM and having larger bundles. You can check it out for the example apps (i.e. here using the links to their js and wasJs versions).

I haven’t found a good way to objectively measure FPS differences though, (since Chrome dev tools tanks it by just being open) so this is based only on visual assessment. Any suggestions for alternatives to quantify this beyond trying to instrument the app itself?

[Robert Jaros]

Not really. I'm playing with some dedicated benchmarking apps myself for this purpose.

[bashor]

@Nick it looks like your wasm binaries are not optimized.

[Nick]

strange. i thought i was applying binaryen https://github.com/nacular/doodle-tutorials/blob/b3281363e7b8d7c252780c3061f9355267ad9075/buildSrc/src/main/kotlin/Common.kt#L48. so i assumed this was the optimized size.

[bashor]

I just looked on wasm binaries in dev tools and they looks like unoptimized

[bashor]

btw, I’m wondering why do you override binaryenArgs ?

[Nick]

thanks for confirming. i’ll review my build to see what’s going wrong.

[Nick]

didn’t find many docs on how to do it. so just followed what others had posted about. should i not need to?

[bashor]

if you don’t override it it will use options provided by default by our gradle plugin

[bashor]

so applyBinaryen() or applyBinaryen { } should be enough in the most cases

[bashor]

In upcoming versions (2.0.0-Beta5) binaryen will be applied by default in release builds

[bashor]

Main difference from current defaults is --closed-world we don’t apply it now because it will not work for compose apps where we have 2 wasm binaries

[Nick]

what does it do for normal apps? and where can more documentation for this be found?

[bashor]

You can read about binaryen options in these docs:
• https://github.com/WebAssembly/binaryen/wiki/Optimizer-Cookbook
• https://github.com/WebAssembly/binaryen/wiki/GC-Optimization-Guidebook

[bashor]

Here you can find options used in the kotlin toolchain https://github.com/JetBrains/kotlin/blob/6f6496d78a4ccaaadc2751bcfbf43e0e18241f86/[…]config/src/org/jetbrains/kotlin/platform/wasm/BinaryenConfig.kt

[bashor]

Speaking about FPS, I think you can get a rough estimation with the following snippet:

let counter = 0;
let sum = 0;
let time = performance.now();
let fpsIndicator;

function updateFps() {
    window.requestAnimationFrame((newTime) => {
        counter++;
        if ((newTime - time) > 1000) {
            fpsIndicator.textContent = counter;
            time = newTime;
            counter = 0;
        }
        updateFps();
    });
}

fpsIndicator = document.createElement("div");
fpsIndicator.style = "position: fixed; right: 0; top: 0; width: 30px; z-index:1000; background-color: #FFF;"
document.body.appendChild(fpsIndicator)
updateFps();

[bashor]

But I guess you will see little difference unless you do much calculation or a lot of browser API calls.

[Nick]

yep, this is the direction i was going if the browser tools aren’t really there.

[Nick]

@bashor, i'm actually seeing a runtime error when using applyBinaryen() in the example apps, that otherwise works fine w/o it. i hit an unreachable condition that doesn't happy w/o the optimizations:

Uncaught (in promise) RuntimeError: unreachable
    at doodle-tutorials-TimedCardsRunner-wasm-js.wasm:0xcf06d
    at doodle-tutorials-TimedCardsRunner-wasm-js.wasm:0xcf091
    at doodle-tutorials-TimedCardsRunner-wasm-js.wasm:0xd9980
    at doodle-tutorials-TimedCardsRunner-wasm-js.wasm:0xcfd31
    at doodle-tutorials-TimedCardsRunner-wasm-js.wasm:0xce9ed
    at doodle-tutorials-TimedCardsRunner-wasm-js.wasm:0xcea6b
    at doodle-tutorials-TimedCardsRunner-wasm-js.wasm:0xae4e5
    at doodle-tutorials-TimedCardsRunner-wasm-js.wasm:0xae698
    at doodle-tutorials-TimedCardsRunner-wasm-js.wasm:0xdb364
    at doodle-tutorials-TimedCardsRunner-wasm-js.wasm:0xa07d1

the the apps are in the same repo. and the change is to simply use applyBinaryen() w/o any conditional here.

if (executable) {
            binaries.executable()
            applyBinaryen()

//            if (project.gradle.startParameter.taskNames.find { it.contains("wasmJsBrowserProductionWebpack") } != null) {
//                applyBinaryen {
//                    binaryenArgs = mutableListOf(
//                        "--enable-nontrapping-float-to-int",
//                        "--enable-gc",
//                        "--enable-reference-types",
//                        "--enable-exception-handling",
//                        "--enable-bulk-memory",
//                        "--inline-functions-with-loops",
//                        "--traps-never-happen",
//                        "--fast-math",
//                        "--closed-world",
//                        "--metrics",
//                        "-O3", "--gufa", "--metrics",
//                        "-O3", "--gufa", "--metrics",
//                        "-O3", "--gufa", "--metrics",
//                    )
//                }
//            }
        }

not sure if i'm doing something wrong.

the last call from the main js file before hitting the error can be seen in this image.

[Nick]

wasm_error.jpg

[bashor]

I’m not sure if it’s the same but I see some exception in the current version as well https://nacular.github.io/doodle-tutorials/timedcards_wasm/

[bashor]

image.png

[bashor]

Please file an issue, normally you shouldn’t see unreachable

[bashor]

To keep original names you can write something like:

applyBinaryen {
    binaryenArgs += "-g"
}

[Nick]

issue filed: https://youtrack.jetbrains.com/issue/KT-66111/Unreachable-error-in-optimized-wasmJs-app