Generating Webassembly from pure C# class

Question

I'm making my backend on C# and frontend on JS.
I want to reuse some alghoritms written in C# in browser JavaScript.
Simplified example:

    class Fibonacci {
        int Fib(int x) {
            if (x == 0) return 0;
            int prev = 0;
            int next = 1;
            for (int i = 1; i < x; i++)
            {
                int sum = prev + next;
                prev = next;
                next = sum;
            }
           return next;
    }

Is it possible to compile one library-independent class to WebAssembly and use it from browser? How?

I would start reading this => https://developer.mozilla.org/en-US/docs/WebAssembly — Amila Senadheera, Jan 23 '22 at 12:50
Wouldn't that more or less be a straight paste into being JavaScript? Or is this a contrived example? — Caius Jard, Jan 23 '22 at 12:57
@CaiusJard yes, it is contrived example. I have more complex algorithm, that I want to keep up to date with my backend. — FoxPro, Jan 23 '22 at 13:02
If it's Blazor WAsm, why generate the wasm yourself? Just write it in C# and let translating it be Blazor's problem? Maybe I'm misunderstanding the requirement.. — Caius Jard, Jan 23 '22 at 13:16
I'm writing my frontend on js/ts stack. I clarified the question — FoxPro, Jan 23 '22 at 13:18
The latest .net 6 framework does support [AOT for Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-6.0#ahead-of-time-aot-compilation). It requires some tooling setup, and you will have to separate that from the Blazor stuff. I don't think you can avoid adding the runtime. — H H, Jan 24 '22 at 06:53
Related: https://emscripten.org/docs/porting/connecting_cpp_and_javascript/WebIDL-Binder.html#webidl-binder — kenorb, Jan 24 '22 at 20:11

score 1 · Answer 1 · answered Feb 05 '22 at 13:33

1

Yes, with NativeAOT-LLVM (https://github.com/dotnet/runtimelab/tree/feature/NativeAOT-LLVM). There's a similar question with a full answer at Compiling C# project to WebAssembly

answered Feb 05 '22 at 13:33

S Waye

694
1
7
12

score -1 · Answer 2 · answered Jan 24 '22 at 05:36

-1

From what I understand, C# needs some middleware / framework to convert it to wasm. If your use case does not warrant Blazor, you might try the UNO platform: https://github.com/unoplatform/Uno.Wasm.Bootstrap

answered Jan 24 '22 at 05:36

stWrong

334
2
14

Can't it compile to pure wasm withput additional runtime? – FoxPro Jan 24 '22 at 06:51
You can refer to these for more clarification: https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-6.0#ahead-of-time-aot-compilation https://github.com/dotnet/runtime/issues/44316 – stWrong Jan 24 '22 at 17:47

score -4 · Answer 3 · answered Feb 05 '22 at 15:45

You can call .NET methods form JavaScript functions like this

Here is the razor html

@inject IJSRuntime JS

<button @onclick=@CallToJS >Call JS function</button>

Here is the code behind

 @code {
    /// <summary>
    /// This method calls javascript function with .net object reference parameter
    /// </summary>
    /// <returns>Awaitable task</returns>
    private async Task CallToJS() => await JS.InvokeVoidAsync("sayHi", DotNetObjectReference.Create(this));

    /// <summary>
    /// This method is called from javascript
    /// </summary>
    /// <param name="name">some string parameter coming from javascript</param>
    /// <returns>Returns string</returns>
    [JSInvokable] 
    public async Task<string> CalledFromJS(string name)
    {
        //  Here you can call your class library
        return $"Hi {name}";
    }
}

And this is the JavaScript code calling .NET method

function sayHi(dotNetHelper) {
    var promise = dotNetHelper.invokeMethodAsync('CalledFromJS', "Surinder");

    promise.then(function (result) {
        console.log(result);
    });    
}

IJSRuntime requires the Blazor framework - something the asker does not want. — H H, Feb 05 '22 at 19:53
Blazor has a clear cut system to call JavaScript functions from .NET code and call .NET functions form JavaScript. I am sorry to say that some times development experience from JavaScript libraries try to implement things the way developers are used to or feel comfortable with. I would say its as important to unlearn somethings as its important to learn new things. So try to understand the intention behind creation of Blazor framework and reap the benefits of it. Its my personal opinion, no intention to hurt anyone. — Surinder Singh, Feb 06 '22 at 13:45

Generating Webassembly from pure C# class

3 Answers3