News for hackers. Stuff that matters.
Re:Introduction to WebAssembly Components by iamricks on Friday December 17, 2021 @07:38AM (#29591337)
I feel like Web Assembly is hard to understand if you don't have a background in systems programming.

Coming from web dev what are some good resources to get me to a point where i can better bridge the gap?

I just started learning Rust a few days ago (Doing adventofcode in Rust) but i don't really know what path to take to be able to build something useful with Web Assembly

Re:Introduction to WebAssembly Components by tyingq on Friday December 17, 2021 @08:03AM (#29591554)
If you're coming from web dev, I would think of it as a "foreign function interface" from javascript. You're calling a function defined in some other language. Here's a function, in WAT format (Web Assembly Text), that returns the number 42:

  (module
    (func (result i32)
      (i32.const 42)
    )
    (export "testfunction" (func 0))
  )
Go to https://mbebenita.github.io/WasmExplorer/ and paste that in the middle box, then click assemble, then download, and you'll have a local file called "test.wasm".

Then, since you already do web dev, get that test.wasm file and a new page accessible from a local web server. The new page should have this in it:

   <script>
   // should log 42 to the console
   WebAssembly.instantiateStreaming(fetch('https://path/to/test.wasm')).then(prog => {
            console.log(prog.instance.exports.testfunction()); 
   });
   </script>
Everything else is facades, layers, and tools on top of that. But that should help clear up what's at the bottom from a web-dev/js perspective. And also what the "2 halves" are. One half being, in your case, that the Rust compiles down eventually to WASM that you host somewhere. The other half being that you need to be able to call into that generated code from your JS.
Re:Introduction to WebAssembly Components by TekMol on Friday December 17, 2021 @08:18AM (#29591676)
This pretty much summarizes what a clusterfuck WebAssembly is.

It should be possible to just paste the 6 wasm lines into a <script type=wasm> block. This is what made the web successful. Not having to have tooling to build things.

Re:Introduction to WebAssembly Components by todd3834 on Friday December 17, 2021 @09:12AM (#29592368)
I understand where you are coming from and something like you just mentioned would be a nice feature. However, it does seem worth mentioning that most people are not going to want to write code in web assembly text format. The current tooling exists so you can load binary data which wouldn’t embed well into a script tag. The primary use case is compiling code written in other languages that often have a runtime that comes with them. Because of that the payloads are often much larger than anything you would want in a script tag as well. There is also more to it than just loading a script. You get to have shared memory buffers and you have control over what to share between the JS and WASM env. This configuration is simplest with JS. It’s a very small amount of code to load WASM and configure these things.

If web assembly text format was just a more performant scripting language then I’d go with your proposal. Since it is meant to be a visual representation of WASM binary format and that binary code is more useful when it can be configured, I don’t mind the current implementation.

Re:Introduction to WebAssembly Components by pjmlp on Saturday December 18, 2021 @10:34AM (#29605181)
Somehow the formats that WebAssembly is deemed being better of, managed to do it via object tags or script source attributes, but naturally in HTML 5 everything is better except when not.
Re:Introduction to WebAssembly Components by tyingq on Friday December 17, 2021 @08:23AM (#29591729)
Yeah. You can use a base64 data uri, but that's not great either. There is a proposal for <script type="module">, but it looks untouched for several years: https://github.com/WebAssembly/proposals/issues/12
Re:Introduction to WebAssembly Components by todd3834 on Friday December 17, 2021 @08:59AM (#29592184)
I found the book The Art Of Web Assembly [1] to really help me understand it better. A lot of other books seem to focus on a specific part of the tool chain. This one shows you all of the examples in web assembly text language. While I wouldn’t want to write a program in it, reading it with the context provided by the author really helped me understand what is going on. It also helped me understand why so many things are the way they are in the current iteration of the WASM world.

[1]https://www.amazon.com/dp/1718501447

Re:Introduction to WebAssembly Components by galangalalgol on Friday December 17, 2021 @08:29AM (#29591803)
If it helps, I have a couple decades experience as a systems programmer and I find it hard to understand how to interface my code with JS. Web dev with its constantly shifting frameworks is baffling to me.
Re:Introduction to WebAssembly Components by moron4hire on Friday December 17, 2021 @08:12AM (#29591625)
I found going through the AssemblyScript setup and tutorials really helped me understand WASM without first having to wrap my head around C++ or Rust toolchains. AssemblyScript is a TypeScript dialect that compiles to WASM instead of JavaScript: https://www.assemblyscript.org/

What I find really interesting about AssemblyScript is the potential for homographic code between JS and WASM. I'd prefer to see languages like AssemblyScript that are designed for WASM first, rather than shoe-horning existing languages like C++--and thus, their existing library ecosystems--into WASM. Yes, there is a lot of extant code that people are interested in porting, but that's not the end of the world and I'm not too keen on the bloat it creates or having to debug the teetering tower of tools that it represents if some impedence mismatch causes problems along the way.

With homographic AssemblyScript and TypeScript, I start to imagine a time when you can run an app on your phone, serialize the whole state of it, push it off to another user or your PC or something, and pick up where you left off. Maybe you'd do it for more compute power. Maybe you'd do it to share state on a collaboration. I don't know. But it's a fascinating idea that I'd really like to see one day.

Re:Introduction to WebAssembly Components by rikroots on Friday December 17, 2021 @02:19PM (#29597055)
I had a look at both WebAssembly and Rust a few months back, in the hope they could help me write some nice, fast graphics filters that I could then compile out and use via Wasm in a 2d canvas. Entirely do-able, but beyond my limits of understanding and patience.

Since then, I've stuck with what I know (Javascript) and branched instead into consuming Wasm written by others (in whatever language) on the frontend for my own experiments - for instance Rapier[1] which is a physics engine written in Rust, and some of the MediaPipe ML models[2].

[1] - Rapier getting started page - https://rapier.rs/docs/user_guides/javascript/getting_starte...

[2] - MediaPipe face mesh model getting started page - https://google.github.io/mediapipe/solutions/face_mesh#javas...

Re:Introduction to WebAssembly Components by pjmlp on Friday December 17, 2021 @04:02PM (#29598306)
You are better off learning WebGL and Houdini for that.
Re:Introduction to WebAssembly Components by LeanderK on Friday December 17, 2021 @07:50AM (#29591446)
isn't webassemly just a compile-target? Like JVM-bytecode or real x86 assembly?

If so, then you are not really supposed to understand web assembly. Just like x86 assembly it's just what your language, like rust, compiles to. If you want to understand it, then I suppose it's hard unless you have a background in systems programming since it's so low-level. It's the nature of the game and web-dev is quite removed from low-level coding.

I don't have an experience with web assembly, it's just how I understood the concept.

Re:Introduction to WebAssembly Components by krona on Friday December 17, 2021 @12:13PM (#29595086)
Webassembly is like a virtual machine without any standard library but permits custom embedders. As you could imagine that makes it limiting and is in part what things like WASI and Webassembly Components are trying to address.
Re:Introduction to WebAssembly Components by meheleventyone on Friday December 17, 2021 @09:37AM (#29592708)
Rust has probably the most batteries included, with explanation, of most of the languages that compile to WASM right now. It has a lot of tooling that takes some of the underlying pain out of interfacing with JS. There's even an online guide for it:

https://rustwasm.github.io/book/

Re:Introduction to WebAssembly Components by mrkentutbabi on Friday December 17, 2021 @09:19AM (#29592475)
You can use AssemblyScript instead of Rust
Re:Introduction to WebAssembly Components by pjmlp on Friday December 17, 2021 @09:09AM (#29592328)
It is basically the same thing as JVM or CLR (specially in regards to the CLR), just with more marketing appeal.
Re:Introduction to WebAssembly Components by tyingq on Friday December 17, 2021 @09:19AM (#29592470)
I think that's one of the things that confuses people. WASM is, in some respects, very similar to ASM. In other respects, it's very similar to a language VM, but has a name that makes that non-obvious. Will likely get more confusing as they add things that normal ASM doesn't do, like GC, direct JS call interop, more data types, etc.
Re:Introduction to WebAssembly Components by pjmlp on Friday December 17, 2021 @10:52AM (#29593843)
I think that what actually confuses people is presenting WASM as something completely new, without even briefly discussing all the kinds of approaches to polyglot bytecode formats since the early 1960's.

So those not versed into the matter fail to understand the overall picture as it isn't given to them.