9 ms·
WebAssembly
- zaksoup 6y agoSomething that I've been looking for as I try to learn more about WebAssembly is good examples of tasks that, when converted from Javascript to WebAssembly, would be good uses of WebAssembly for performance or memory or other reasons. Does anybody have a link to a blog post or good documentation like that?
- GreedCtrl 6y agoDeterminism! [0] I'm switching a browser game side project from Typescript to WebAssembly because determinism enables a simpler style of multiplayer. Instead of relying on a server to manage state, I can just send inputs p2p like a modern fighting game (with rollback [1]). Then the game acts just like singleplayer! For a hobbyist like me, WebAssembly makes the minefield of multiplayer so much easier to navigate. [0]: https://github.com/WebAssembly/design/blob/master/Nondeterminism.md https://github.com/WebAssembly/design/blob/master/Nondetermi... [1] A blog post on rollback netcode (not in wasm): https://ki.infil.net/w02-netcode.html https://ki.infil.net/w02-netcode.html
- Jasper_ 6y agoWhat's nondeterministic about TypeScript / JavaScript?
- lifthrasiir 6y agoObject enumeration order (before ES2020 [1]), math function accuracy (Firefox and Chrome did standardize on fdlibm though [2]), various timings. All of them can be fixed with caution but it might be easier to use a platform where none of them matters (well, as long as you don't import Math.sin etc. from the environment...). [1] https://stackoverflow.com/a/30919039/225272 https://stackoverflow.com/a/30919039/225272 [2] https://www.linux.com/training-tutorials/math-v8-broken-how-do-we-fix-it/ https://www.linux.com/training-tutorials/math-v8-broken-how-...
- SigmundA 6y agoIn many languages like those used to compile to WebAssembly (c++, c#, rust) enumerating standard dictionaries is non-deterministic. A javascript object is a dictionary, it is not surprising that it had an undefined order. If you need order use an array, if you need to lookup a value quickly use a dictionary, if you need both then you compose some ordered dictionary structure that internally has a dictionary and an array. I guess since so many js devs never understood this and built code around one js engines property order behavior they had to go and specify it as a standard and now all js engine must add extra overhead to track and maintain property order... Not sure how webassembly helps object enumeration order, it doesn't have objects to enumerate! To make objects you compile to webassembly from languages that most likely have undefined dictionary order and may not even have reflection to enumerate an object at runtime.
- cphoover 6y agoI agree that those issues are easy enough to avoid. I think OP is saying that WebAsm allows for using languages that don't have these footguns. Perhaps there is some language they prefer to JS.
- steveklabnik 6y agoPerformance. See the graphs here: https://fitzgeraldnick.com/2018/02/26/speed-without-wizardry.html https://fitzgeraldnick.com/2018/02/26/speed-without-wizardry... Look how much spread there is in the JS, and how little there is in the wasm. Depending on what you're doing, this may or may not matter to you.
- Jasper_ 6y agoI've experienced a 2x speedup when porting tight loops from JS to WASM. In my case, my tasks are decompression and texture decoding. I initially ported to C, and then ported to AssemblyScript, being careful to manually manage the memory along the way. The old code was also very "tight-loop" code that's just math, and no GC allocation, so it's not applicable to many people here yet, and it's possible that JS interpreters have improved since when I ported (GC behavior has gotten quite noticeably better in V8 in the last two years), but I'll take the speedups I can get. For comparison: Old TypeScript: https://github.com/magcius/noclip.website/blob/master/src/Common/Compression/Yaz0.ts#L25-L67 https://github.com/magcius/noclip.website/blob/master/src/Co... New AssemblyScript: https://github.com/magcius/noclip.website/blob/master/src/assembly/Yaz0_as.ts https://github.com/magcius/noclip.website/blob/master/src/as... Wrapper for WebAssembly execution: https://github.com/magcius/noclip.website/blob/master/src/Common/Compression/Yaz0.ts#L80-L102 https://github.com/magcius/noclip.website/blob/master/src/Co...
- dsjoerg 6y agoChess websites compile their chess engines to WebAssembly so that they perform better in-browser.
- smitty1e 6y ago>. . .or other reasons. In my case, that would be anything written in Python that targets WebAssembly. If Javascript is obviated, that's one less programming language mouth to feed.
- catlifeonmars 6y agoI’m using WASM as an execution environment for game code. It’s not so much for the performance aspect, it’s more that I can run the same simulations on the client and server side and have them agree. Rather than duplicating the simulation logic, say, in JavaScript and Rust, I can write the simulation logic once in Rust and use it in both places.
- catlifeonmars 6y agoThe YouTube series “HTTP 203” has a couple of great episodes on WebAssembly. Here’s one I like as it is both accessible and in depth: https://youtu.be/S0NQwttnr1I https://youtu.be/S0NQwttnr1I
- postalrat 6y agoThat series deserves more views.
- whoisjohnkid 6y agoI personally use it to simplify and synchronize encryption logic between client side and server side; makes things a breeze especially if you don’t want to mess with Javascript’s crypto APIs.
- paulgb 6y agoA few wasm projects I've worked on: - An in-browser crossword puzzle generator: https://crossword.paulbutler.org/ https://crossword.paulbutler.org/ (source: https://github.com/paulgb/crossword-composer https://github.com/paulgb/crossword-composer) - A multi-player word game: https://redwords.paulbutler.org/ https://redwords.paulbutler.org/ - A library for synchronizing state between clients, used for that word game: https://aper.dev/ https://aper.dev/ (source: https://github.com/aper-dev/aper https://github.com/aper-dev/aper very WIP right now) In my experience, the single biggest perk of using WebAssembly is that I can use a language I'm very productive in (Rust) compared to JavaScript. Everything else is secondary. That said, I think these projects have specific advantages by virtue of being WebAssembly: - The backtracking search used for the crossword puzzle generator is carefully implemented to reduce memory allocations. This would be tough to do in JavaScript, and I believe it's partly responsible for its performance. - The word game uses a compression algorithm that benefits very noticeably from wasm-opt, to the point that I can't run it without it. Given that wasm-opt takes a non-trivial amount of time at compile time, I suspect the JavaScript JIT would be slow at doing something similar at runtime. This is just conjecture, I haven't checked. - What Aper does just wouldn't be possible without Rust features like Serde and macros.
- deleted 6y ago[deleted]
- qbasic_forever 6y agoFigma: https://www.figma.com/ https://www.figma.com/ It's a design tool that runs entirely in your browser as a WebAssembly-based frontend tool (coded in C++ IIRC). Go kick the tires and play around with it--you will be amazed how fast, fluid and downright native the experience feels. IMHO I think we're going to see more and more frontend experiences like this in the near future. For certain classes of complex apps we're starting to see the overhead of all the frontend JS cruft, polyfills, reactivity, etc. are just getting out of hand and destroying browsers on low-spec phones and machines. A little Go/C++/Rust/AssemblyScript, etc. app compiled to WebAssembly interacting with the DOM directly is incredibly fast and space efficient. The build system for something like Go or Rust is so much more sane and easy to use vs. a complex modern JS Webpack setup too. edit: More details here: https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/ https://www.figma.com/blog/webassembly-cut-figmas-load-time-...
- jefftk 6y agoIn Bucket Brigade (echo.jefftk.com), I'm currently encoding and decoding Opus audio with an emscripten port of the libopus. [1] This stresses the browser pretty hard, and at some point I'd love to switch to WebAssembly. [1] https://github.com/jeffkaufman/bucket-brigade/blob/master/html/opusjs/encoder.js https://github.com/jeffkaufman/bucket-brigade/blob/master/ht...
- rasz 6y agoCrypto miners were all the rage at some point.
- nyolfen 6y agoi am not looking forward to having ads delivered by binary blobs. say farewell to the age of client-side scripting.
- AgentME 6y agoHow is this any different than getting ads from minified blobs of javascript?
- nyolfen 6y agoi can usually block those scripts and still have a functioning page
- CraftThatBlock 6y agoYou can still block those blobs, as they too are loaded by URL.
- nyolfen 6y agowhat i am envisioning here is the content of a webpage compiled with ads therein. it would be desirable by the googles of the world for this very reason.
- kroltan 6y agoThis can happen as it stands with JS too, though.
- catlifeonmars 6y agoThis is still possible using JavaScript, and yet it is not widely seen. You can think of WebAssembly as another mechanism for executing code in the browser in the context of a web page. JavaScript is still required to (1) load the wasm binary, (2) evaluate it and (3) connect it to DOM APIs or really anything outside of the isolated wasm execution context.
- breck 6y agoI absolutely love the new MDN where every article is just a file on Git. For example, the source for this article is here: https://github.com/mdn/content/blob/main/files/en-us/webassembly/index.html https://github.com/mdn/content/blob/main/files/en-us/webasse... You can find the link to the source of any article at the bottom of the page.
- fctorial 6y agoIt's a pretty common blogging method. Google and many other orgs do that too.
- notretarded 6y agoThank you for your contribution
- breck 6y agoIs it? Can you provide some links to examples?
- jspotanski 6y agoMicrosoft does it: https://docs.microsoft.com/en-us/windows/wsl/install-win10 https://docs.microsoft.com/en-us/windows/wsl/install-win10
- judge2020 6y agofor reference: https://github.com/MicrosoftDocs/wsl/blob/master/WSL/install-win10.md https://github.com/MicrosoftDocs/wsl/blob/master/WSL/install...
- qbasic_forever 6y agoDive into the JAMstack and file-based CMS world. Netlify is kinda the big name here: https://www.netlify.com/ https://www.netlify.com/ Push markdown content to git -> Netlify builds using your file-based CMS of choice -> HTML published as blog, etc.
- vsskanth 6y agoCan someone educate me why GC based languages aren't supported in wasm ?
- Kuinox 6y agoC# is supported in WASM...
- neallindsay 6y agoIt's not that they can't be supported, but they generally have a big runtime, so your compiled output would be big. If you're running WASM in the browser then that's a big image that you need to send to the client.
- lmkg 6y agoWasm itself is at the level of assembly, not the level of JavaScript. If you want to compile a GC'd language to wasm, you have to bring your own garbage collector and compile it to wasm as well. That's not a showstopper from wasm's perspective, and several languages have done just that, but porting a GC to a new compilation target can be a bit of work.
- jillesvangurp 6y agoGarbage collection support is coming; https://bugs.chromium.org/p/v8/issues/detail?id=7748 https://bugs.chromium.org/p/v8/issues/detail?id=7748 They've been working on adding that for a while in the standard. But it's a complex topic, which is why it is taking time. You can of course bundle your own garbage collector and statically compile it into wasm. That's why Go, C#, etc. can target WASM. Jetbrains is actually working on a compiler backend for wasm in their new IR compiler for Kotlin. Apparently they are planning to not bundle their own GC and will try to rely on the WASM gc when that is ready. I'm not sure how close they are to having a usable release. But I expect early betas might start happening late this year or next year.
- preommr 6y agoMy 2c about wasm so far: I've tried go, rust, c/cpp, webassembly. go - big bundle sizes because of gc I am guessing, idk. c/cpp - I haven't touched c/cpp in a really really long time, but probably the other really good fit. rust - I see rust as the successor to what I would've used c/cpp for, but not sure if rust ecosystem is still fully there. Last time, I had some weird issues with wasm-bindgen. AssemblyScript(AS) - Something I really like and what I am most comfortable with now that I've been doing java/c#/ts for so long now. Also it's geared towards wasm which is nice. It's my favorite solution, but I don't really get it like I get the other solutions because everything else is an "actual language" that's used for other things. I am really not sure what the strict ts stuff is about, the devil is in the details, and this is getting way too high level. c# - Maybe good if someone is heavily invested in .net. At the end of the day, these wasm blobs are probably for heavy tasks like functions with a lot of loops, not full systems, so any simple solution would probably work. It's why I like AS (or even cpp), but sometimes these tasks require some niche external libraries in which case rust would be probably be the best option.
- 80x25 6y agoThe rust+wasm story is quite nice these days. I've been working on a rust+wasm SPA for a few months and I have yet to run into issues with the tooling (wasm-pack, wasm-bindgen, etc).
- SCLeo 6y agoFromy past experience working woth wasm-bindgen, it seems that you cannot get auto-completion for web APIs due to the fact that they are generated dynamically. Is this issue resolved now? What IDE/editor do you use to enable that?
- FlashBlaze 6y agoReally off-topic, but I have recently started learning Go and also just looked into V. The simple hello world compiled binary of Go is 2088KB while that of V is 415KB. I'm on Windows. So is the large size solely due to GC?
- pjmlp 6y ago
- gandalfgeek 6y agoWasm is exciting because not only is it a clean, elegant instruction set that has learned a lot from the design warts of JVM and .NET, it also has formal verification as a first-class design goal. This makes it interesting for high-trust environments outside the web context as well. I made a couple of short explainer videos on it: - design goals and instruction set:https://youtu.be/VOaSaShAYb0 https://youtu.be/VOaSaShAYb0 - mechanizing safety proofs for wasm: https://youtu.be/zsPVbmEPTlA https://youtu.be/zsPVbmEPTlA
- nerdponx 6y agoHow "web-specific" is WebAssembly? This all sounds like an enticing feature set a general-purpose VM for writing desktop and server applications, not just making fancy stuff in a web browser. Is there any chance we'll see something like Node-but-it's-Wasm at some point?
- ghayes 6y agoAs far as I've seen, not very web specific at all. Everything that you might fear being included is actually linked in and is not part of the VM at all (e.g. all Web APIs).
- tmarsden 6y agoAbsolutely, check out WASI (Webassembly system interface) https://wasi.dev/ https://wasi.dev/ “...provides access to several operating-system-like features, including files and filesystems, Berkeley sockets, clocks, and random numbers, that we'll be proposing for standardization. It's designed to be independent of browsers, so it doesn't depend on Web APIs or JS, and isn't limited by the need to be compatible with JS.”
- vinkelhake 6y agoBoth node and deno can run Wasm. Also see WASI that the sibling mentioned.
- ampdepolymerase 6y agoSome of the data layouts are optimized for web compatibility rather than (purely) ease of hardware implementation.
- aeroheim 6y agoOne thing that's really great about wasm is how it enables lots of native libraries to be usable in the browser. Recently I ran into performance issues due to limitations in the WebAudio API and was able to workaround it by compiling FFmpeg to wasm and using it instead. Being able to use FFmpeg in the browser is very powerful and brings a huge suite of encoding/decoding capabilities that browsers currently lack right now (at least until WebCodecs becomes standardized and implemented). On another side, compiling existing C/C++ libraries to wasm is still very painful. I struggled a lot using Emscripten to port FFmpeg to wasm - you have to compile EVERY dependency to wasm (so I ended up re-compiling libopus, libmp3lame, etc.) and the compiler warnings are often super cryptic which made the entire process a complete nightmare. The process really needs a lot of work still. For anyone that's interested, this is the result from my endeavor: https://github.com/aeroheim/audio-file-decoder https://github.com/aeroheim/audio-file-decoder And also check out a great general purpose FFmpeg wasm port here: https://github.com/Kagami/ffmpeg.js https://github.com/Kagami/ffmpeg.js
- haberman 6y ago> I struggled a lot using Emscripten to port FFmpeg to wasm - you have to compile EVERY dependency to wasm This is a scenario where the Bazel model is a good fit IMHO. Bazel rebuilds all of your dependencies from source. This makes it easy to compile all of your dependencies with an extra flag (eg -fsanitize=address for ASAN) or using a different compiler (eg Emscripten). While it can be annoying to wait for the world to rebuild every time, this is a use case where it shines.
- jez 6y agoDo you have an example of getting bazel to work with emscripten? I’ll share mine if you share yours: https://github.com/sorbet/sorbet/tree/master/tools/toolchain/webasm-linux https://github.com/sorbet/sorbet/tree/master/tools/toolchain... When we set this up to compile Sorbet (C++ codebase) for https://sorbet.run https://sorbet.run, it involved what I considered an inordinate amount of boilerplate and arcana. To be fair since we set it up it’s hardly ever needed to be touched, and I could probably cargo cult this into future projects where I wanted to use it, but I wouldn’t exactly say that bazel magically makes the pain of emscripten go away. Curious to hear otherwise.
- jingkaimori 6y agoWhere is contribution list on the former MDN website? This migration may violate the CC_BY-SA 2.5 License.
- newintellectual 6y agoIs making WASM able to operate almost completely independently of Javascript a design goal? In other words, be able to access and manipulate the DOM, CSS, browser functionality, and so on, without having to use Javascript.