Does Webassembly end up as rendered HTML in the browser? - javascript

Webassembly can compile say C# to bytecode, executable by the browser.What is its rendered form in the browser? HTML with JavaScript? Or something like Silverlight or a Java applet that runs inside the browser such as a business app with rich GUIs?

Your application code written in C# is compiled into asp.net assembly, and is managed by the mono run time, which was compiled to WebAssembly. What is rendered in the browser is html through manipulation of the DOM using JavaScript interop; that is, your C# code communicate with JavaScript code to manipulate the DOM, and rerender the diffs.

In simple terms WebAssembly is a lightweight virtual machine that can executed numeric instructions. It cannot render HTML, or use any WebAPIs directly.
You cannot however import / export WebAssembly functions to allow it to communicate with JavaScript. Therefore WebAssembly apps tend to use DOM or canvas via Javascript bindings.

Related

Javascript frameworks just "markup" for javascript?

I am a little curious about how javascript frameworks work. Web development isn't really my area of expertise (I'm more of a c/c++ guy), but do javascript frameworks get translated into vanilla javascript?
Upon inspection of website source, it seems like it is mostly just standard javascript. Do these javascript engines just translate code into javascript on the server side?
Yes, most of JavaScript Frameworks translates the code you write to vanilla JavaScript, however, this does not happen on the Server Side, that would be really slow (Server side code is used to check databases, serve files, authenticate, etc.). This process of translation is done in compilation time (Although it is translation). (Just like when you compile c++ code into binary).
When it's source code to source code like JavaScript and React (JSX) to Vanilla JavaScript (JS), it's translation. When it's source code to binary like C++ source code to an executable (.exe) is compilation.
After you're done writting your JavaScript code with frameworks, you most translate it to Vanilla JavaScript (if you also used other uncommon languages to write styles, you must translate them too, like SASS instead of CSS). It is also common to minify it, so it can load faster.
All this is mainly done by tools like webpack.
When your site is up and running, we can say that is run time.
Looking at the fact that they were written in js they would be resolved to js before running and as Robin said they are executed on client side except Node which is a runtime environment and not a framework

Create WebAssembly using c#

I went through below article
https://medium.freecodecamp.org/get-started-with-webassembly-using-only-14-lines-of-javascript-b37b6aaca1e4
and very impressed that we can use c++ code in javascript using web assembly.
Do we have any option to create such web assembly using c# where we can create web assembly and use in javascript like angular or react.
went through
https://learn.microsoft.com/en-us/aspnet/core/client-side/spa/blazor/get-started?view=aspnetcore-3.0&tabs=visual-studio
But that does not look like creating an assembly that can be used in a separate angular only project with by importing
Thanks
From msdn:
JavaScript interop
For apps that require third-party JavaScript libraries and browser APIs, Blazor interoperates with JavaScript. Components are capable of using any library or API that JavaScript is able to use. C# code can call into JavaScript code, and JavaScript code can call into C# code. For more information, see JavaScript interop.
[https://learn.microsoft.com/en-us/aspnet/core/client-side/spa/blazor/?view=aspnetcore-3.0][1]
Ithink looking to Blazor source code can help you to.
I think what you're looking for isn't Blazor, because it's a complete UI framework for ASP.NET client/server stuff using SignalR, that uses WASM at the client side. Maybe too much for your purposes, even if you're able to use any JavaScript framework together with Blazor, too.
But you're looking for a simple way to create just a WASM that exports methods to JavaScript that you can write using C#, right? Well, then I suggest you to have a look here:
https://itnext.io/run-c-natively-in-the-browser-through-the-web-assembly-via-mono-wasm-60f3d55dd05a
It seems the Mono way is working as you'd expect: You write methods in C#, compile a WASM and then you're ready to load and call them from any JavaScript client app, and you don't have to deal with ASP.NET stuff at all.
Compared to a WASM that has been created using lower level C++, you'll have a big bunch of DLLs for the Mono runtime, that need to be loaded to the client browser (!). That's a huge overhead, if you plan only a small feature set to be exported by the WASM. The best argument for creating WASM using Mono for me is, that I can use my existing codebase with all the algorithms and business logic for a really complex app, so I don't have to write and maintenance the same code twice in different languages.

Writing code for JS and Java

I'm trying to write a module of code which can be used with Javascript for the client side browser and Kotlin for a Java desktop application and Android app.
The main logic manipulates a bitmap/png file.
Is there a way which I can write an interface to be used and have different implementations of the interface for JS and Kotlin?
For example, write a wrapper class for an image (load from image, set pixels, get pixels) in Java (using BufferedImage) and JS (using Canvas)?
I'm new here so if anything doesn't make sense or needs more clarification, please let me know!
Yes, it's certainly possible to do that. This answer is a generic Java and JavaScript answer; there may also be a Kotlin-specific approach, see the link in zsmb13's comment. But the generic Java and JavaScript approach would be:
Write your interface around BufferedImage in Java
Write your interface around canvas in JavaScript
Write your manipulation code using that interface in JavaScript
On the browser, your manipulation code would run directly on the browser's JavaScript engine
In the Java app, you'd run your JavaScript code using javax.script to run it in Nashorn (or Rhino on older Java environments).
Whether it's the best solution to your problem is something only you can decide, but yes, you can do it.

How to execute Javascript code in a WinRT C# application?

I am writing a WinRT application in C#.
I would like to execute some Javascript code. An entire WebView is not needed in my case, I just need to interface with a Javascript virtual machine. The C# code would call Javascript functions and would export some objects to the Javascript side.
I know there is JsRT, the C API of Chakra, the jsvm used by Internet Explorer. But JsRT, as far as I know, is not available to WinRT. Other virtual machines are not allowed under WinRT.
So, the question is: is it even possible to call Javascript code from C# code? If not, waiting for the release of JsRT for WinRT is the only option?
It's possible to call JavaScript from C# but not without a WebView control.

Compiling dust.js template to html server side?

Is it possible to compile dust.js template to plain html?
I tried dusty and dustc serverside compilers but they generates a javascript file which will write the content of the template on the page.
Dust only compiles to JavaScript, but you can use a compiled template to render plain HTML. This works the same on the server and on the client. On the server you need to use Node.js or Rhino (or some other engine that interprets JavaScript).
It is possible to render a dust template directly to HTML, but it is not recommended. Anyway, this can be done with pyv8 a Python bindings for V8 JS engine.
In this article Andrew Wilkinson show how he made it for mustache.js.

Categories