7 ms·

Running WASI binaries from your HTML using Web Components

165 points by benno128 3y ago

benno128 3y ago
G’day, if anyone has any questions about this I’m happy to answer them here.
- jurynulifcation 3y ago
  no questions, hope you're having a good day, cool idea!
  - benno128 3y ago
    Haha thanks, you too!
- simonw 3y ago
  I tried this in your Python example: import sqlite3 >>> db = sqlite3.connect("data.db") Traceback (most recent call last): File "<stdin>", line 1, in <module> sqlite3.OperationalError: unable to open database file Presumably that operation failed because there isn't a writable virtual filesystem. Would it be possible to provide one?
  - benno128 3y ago
    You just need to create the file first! >>> open("data.db", "w+").close() >>> db = sqlite3.connect("/data.db") >>> db <sqlite3.Connection object at 0x8b3fd8>
    - simonw 3y ago
      Oh cool! Regular Python doesn't need me to create the file first, I wonder why this works differently.
      - benno128 3y ago
        Might be this particular build of Python, or might be that I implemented one of the `fd` functions in a way Python/SQlite is surprised by. I'll have a look into it some time!
        evacchi 3y ago
        Maybe just the missing leading slash in the original reproducer? :)
- pseudosavant 3y ago
  What a novel way to integrate a bunch of web technologies! It makes me much more interested in using WASM.
  - chii 3y ago
    I can imagine how a new style of web-only terminals be possible. The filesystem is realistically _any_ url, and you can load any wasi programs (via a shell, which is also just another wasi program). I wonder if this is practical, or just a gimmicky way to use a computer...
  - benno128 3y ago
    Thanks! Yeah WebAssembly has an exciting future ahead of it.
- bantunes 3y ago
  Would it be practical to output HTML from these WASI components and build a page from them?
  - benno128 3y ago
    I wouldn't put it in prod, but it would be possible. You'd need a JS binding layer that dealt with the output and wrote it to the page, but it could be minimal. There are other projects that are targeted more at this kind of thing if you want dynamic access to the DOM from Web Assembly (sorry I don't know them off the top of my head).
- Zetaphor 3y ago
  Unfortunately this page doesn't load in Firefox on Linux
  - Zetaphor 3y ago
    Also just tested in Chromium, doesn't seem to work for me on Fedora Linux. Just locks up the browser
- tarasglek 3y ago
  Hi, I already support typescript execution in http://chatcraft.org/ http://chatcraft.org/ via wasm esbuild. Runno is really cool as it will also lets me support intepreted languages like Python and maybe even golang(assuming i can have a wasi binary produce another wasi binary). From docs: Currently @runno/wasi supports running only unstable and snapshot-preview1 WASI binaries. The snapshot-preview1 standard is more recent, and preferred. Where does one see what's part of snapshot-preview1? My google-foo is failing me.
  - benno128 3y ago
    Snapshot Preview 1 is the standard all tools are building to right now. The specification is available here: https://github.com/WebAssembly/WASI/blob/main/legacy/preview1/docs.md https://github.com/WebAssembly/WASI/blob/main/legacy/preview... It's pretty unreadable though! Preview 2 looks like it will be a big change, and is just being finalised at the moment. I'd expect that when preview 2 is available there will be an improvement in the quality of documentation. I'm not sure how long it will take after release for tools to start switching to it. I'd expect Preview 1 will still be the main target at least for the rest of this year.
n89nanda 3y ago
website not loading for me
- benno128 3y ago
  It's a bit temperamental on some browsers sorry (I've seen it fail on Arc). I implemented my own front-end router and I have done a bad job. I've seen it work today on Chrome, Firefox and Safari.
  - n89nanda 3y ago
    i tried chrome and safari as well, no luck
    - benno128 3y ago
      Sorry! Sometimes web is hard.
  - kamel3d 3y ago
    Not working on chrome here
  - politelemon 3y ago
    Why is it temperamental? When you say frontend router do you mean in the SPA sense (eg, React/Angular) or do you mean like your own load balancer (eg ALB/HaProxy/Nginx)? (Not working in Firefox for me)
    - benno128 3y ago
      SPA sense. It’s cobbled together because I just have fun with it. Not sure why it’s temperamental, haven’t bothered investigating.
- ben-schaaf 3y ago
  Seemed to load, but brought my phone to a crawl (Firefox Android).
appleflaxen 3y ago
I get "Runno crashed: ReferenceError: SharedArrayBuffer is not defined" in every component.
- benno128 3y ago
  Is this on the blog post, or are you trying it out yourself? If it's on the blog post, it sounds like your browser doesn't support `SharedArrayBuffer` (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...) or you've disabled Cross Origin Isolation somehow. It might be because you have an old browser (there was a period where it was disabled) or you have disabled Cross Origin Isolation yourself (maybe a security setting?).
  - sureglymop 3y ago
    Same here - using mobile chromium on android.
- kbumsik 3y ago
  SharedArrayBuffer was affected by Spectre vuln and was disabled in some old browsers (or browser config).
xena 3y ago
This is seriously awesome. I'm gonna use it in my blog. Stay tuned!
- benno128 3y ago
  Looking forward to it!
drawkbox 3y ago
Very slick and opens up so many possibilities. WebAssembly, WASI, like WebRTC/WebGPU/WebXR/WebAudio, just makes webdev, gamedev + native/networking very very interesting in this phase of technology where js frameworks are culty bloated/verbose and apps are the main thing for marketing/tools. Web apps + tools are opening up with wasm/wasi. Runno (https://runno.dev/ https://runno.dev/ + https://runno.dev/wasi https://runno.dev/wasi) is a great idea and helps make interesting native stuff in a sandbox locally. Running all this directly without having to mash into assembly is a great idea. Awesome job on this! > Runno helps you make runnable code examples that can be embedded in web pages. This is very handy for educational tools, it means: > - You can make code examples that don't need users to install scary tools. > - No need to run a server, it all runs client-side in the browser. > - Your users can edit and re-run any code examples you make. > - The examples are extremely customisable with HTML, CSS and JavaScript!
- pjmlp 3y ago
  Yet I am still waiting to see a game with the same capabilities of Infinity Blade, that Apple used in 2011, as an example of a game showing of the newly acquired OpenGL ES 3.0 capabilities of iDevices. Or the Unreal Engine 3.0 citadel demo, also in 2011, for Flash/CrossBridge. It seems the only thing usable is running ShaderToy demos, and 3D views on ecommerce sites.
  - parasti 3y ago
    That expectation is off by nearly a decade. WASM games in terms of performance are closer to 2000 than 2010. Here's an open source indie game from 2003 that I ported to WASM [1]. It struggles to hit 60 FPS on devices that were released a good 15 years after the game itself. Browsers sometimes struggle to animate simple lines at 60 FPS still to this day, because they're just hugely massive platforms with thousands of moving parts with no room for big, complex apps on top of them. [1] https://neverball.github.io/ https://neverball.github.io/
    - speps 3y ago
      I need to double check what you're saying, how do you show the FPS in your WASM port?
chantepierre 3y ago
Hello, thank you for this work as it shows great creative potential. A suggestion for runno's website, though : when I clicked on the link posted on HN, I did not expect to download that much data. Maybe you could find a way to offer pre-rendered examples and give the user who visits your site a (very visible) option to really download and run things ?
- benno128 3y ago
  Thanks for the feedback! It’s also cost me about $15 so far. I don’t think I’ll do that again, but it was fun as a demo!
stuaxo 3y ago
Great stuff. Is it possible to output to markup from these programs ? It would be cool if python wsgi programs in this could work somehow.
- benno128 3y ago
  Yeah of course! They've got STDIN/STDOUT/STDERR and I've built a Virtual Filesystem. But if you're using WASI binaries locally they don't have that restriction. You might be interested in WAGI: https://github.com/deislabs/wagi https://github.com/deislabs/wagi And to catch up on WASI: https://xeiaso.net/talks/unix-philosophy-logical-extreme-wasm https://xeiaso.net/talks/unix-philosophy-logical-extreme-was...
unnouinceput 3y ago
not loading even after 5 minutes. Firefox latest version here (116.0.3 - 64bit)
rapnie 3y ago
It is a nice proof-of-concept, but a pity that runno uses firebase. Any software with built-in SaaS services from advertisement agencies are a no-go area for me.

165 points by benno128 3y ago

benno128 3y ago

G’day, if anyone has any questions about this I’m happy to answer them here.

jurynulifcation 3y ago
no questions, hope you're having a good day, cool idea!
- benno128 3y ago
  Haha thanks, you too!
simonw 3y ago
I tried this in your Python example: import sqlite3 >>> db = sqlite3.connect("data.db") Traceback (most recent call last): File "<stdin>", line 1, in <module> sqlite3.OperationalError: unable to open database file Presumably that operation failed because there isn't a writable virtual filesystem. Would it be possible to provide one?
- benno128 3y ago
  You just need to create the file first! >>> open("data.db", "w+").close() >>> db = sqlite3.connect("/data.db") >>> db <sqlite3.Connection object at 0x8b3fd8>
  - simonw 3y ago
    Oh cool! Regular Python doesn't need me to create the file first, I wonder why this works differently.
    - benno128 3y ago
      Might be this particular build of Python, or might be that I implemented one of the `fd` functions in a way Python/SQlite is surprised by. I'll have a look into it some time!
      - evacchi 3y ago
        Maybe just the missing leading slash in the original reproducer? :)
pseudosavant 3y ago
What a novel way to integrate a bunch of web technologies! It makes me much more interested in using WASM.
- chii 3y ago
  I can imagine how a new style of web-only terminals be possible. The filesystem is realistically _any_ url, and you can load any wasi programs (via a shell, which is also just another wasi program). I wonder if this is practical, or just a gimmicky way to use a computer...
- benno128 3y ago
  Thanks! Yeah WebAssembly has an exciting future ahead of it.
bantunes 3y ago
Would it be practical to output HTML from these WASI components and build a page from them?
- benno128 3y ago
  I wouldn't put it in prod, but it would be possible. You'd need a JS binding layer that dealt with the output and wrote it to the page, but it could be minimal. There are other projects that are targeted more at this kind of thing if you want dynamic access to the DOM from Web Assembly (sorry I don't know them off the top of my head).
Zetaphor 3y ago
Unfortunately this page doesn't load in Firefox on Linux
- Zetaphor 3y ago
  Also just tested in Chromium, doesn't seem to work for me on Fedora Linux. Just locks up the browser
tarasglek 3y ago
Hi, I already support typescript execution in http://chatcraft.org/ http://chatcraft.org/ via wasm esbuild. Runno is really cool as it will also lets me support intepreted languages like Python and maybe even golang(assuming i can have a wasi binary produce another wasi binary). From docs: Currently @runno/wasi supports running only unstable and snapshot-preview1 WASI binaries. The snapshot-preview1 standard is more recent, and preferred. Where does one see what's part of snapshot-preview1? My google-foo is failing me.
- benno128 3y ago
  Snapshot Preview 1 is the standard all tools are building to right now. The specification is available here: https://github.com/WebAssembly/WASI/blob/main/legacy/preview1/docs.md https://github.com/WebAssembly/WASI/blob/main/legacy/preview... It's pretty unreadable though! Preview 2 looks like it will be a big change, and is just being finalised at the moment. I'd expect that when preview 2 is available there will be an improvement in the quality of documentation. I'm not sure how long it will take after release for tools to start switching to it. I'd expect Preview 1 will still be the main target at least for the rest of this year.

n89nanda 3y ago

website not loading for me

benno128 3y ago
It's a bit temperamental on some browsers sorry (I've seen it fail on Arc). I implemented my own front-end router and I have done a bad job. I've seen it work today on Chrome, Firefox and Safari.
- n89nanda 3y ago
  i tried chrome and safari as well, no luck
  - benno128 3y ago
    Sorry! Sometimes web is hard.
- kamel3d 3y ago
  Not working on chrome here
- politelemon 3y ago
  Why is it temperamental? When you say frontend router do you mean in the SPA sense (eg, React/Angular) or do you mean like your own load balancer (eg ALB/HaProxy/Nginx)? (Not working in Firefox for me)
  - benno128 3y ago
    SPA sense. It’s cobbled together because I just have fun with it. Not sure why it’s temperamental, haven’t bothered investigating.
ben-schaaf 3y ago
Seemed to load, but brought my phone to a crawl (Firefox Android).

appleflaxen 3y ago

I get "Runno crashed: ReferenceError: SharedArrayBuffer is not defined" in every component.

benno128 3y ago
Is this on the blog post, or are you trying it out yourself? If it's on the blog post, it sounds like your browser doesn't support `SharedArrayBuffer` (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...) or you've disabled Cross Origin Isolation somehow. It might be because you have an old browser (there was a period where it was disabled) or you have disabled Cross Origin Isolation yourself (maybe a security setting?).
- sureglymop 3y ago
  Same here - using mobile chromium on android.
kbumsik 3y ago
SharedArrayBuffer was affected by Spectre vuln and was disabled in some old browsers (or browser config).

xena 3y ago

This is seriously awesome. I'm gonna use it in my blog. Stay tuned!

benno128 3y ago
Looking forward to it!

drawkbox 3y ago

Very slick and opens up so many possibilities. WebAssembly, WASI, like WebRTC/WebGPU/WebXR/WebAudio, just makes webdev, gamedev + native/networking very very interesting in this phase of technology where js frameworks are culty bloated/verbose and apps are the main thing for marketing/tools. Web apps + tools are opening up with wasm/wasi. Runno (https://runno.dev/ https://runno.dev/ + https://runno.dev/wasi https://runno.dev/wasi) is a great idea and helps make interesting native stuff in a sandbox locally. Running all this directly without having to mash into assembly is a great idea. Awesome job on this! > Runno helps you make runnable code examples that can be embedded in web pages. This is very handy for educational tools, it means: > - You can make code examples that don't need users to install scary tools. > - No need to run a server, it all runs client-side in the browser. > - Your users can edit and re-run any code examples you make. > - The examples are extremely customisable with HTML, CSS and JavaScript!

pjmlp 3y ago
Yet I am still waiting to see a game with the same capabilities of Infinity Blade, that Apple used in 2011, as an example of a game showing of the newly acquired OpenGL ES 3.0 capabilities of iDevices. Or the Unreal Engine 3.0 citadel demo, also in 2011, for Flash/CrossBridge. It seems the only thing usable is running ShaderToy demos, and 3D views on ecommerce sites.
- parasti 3y ago
  That expectation is off by nearly a decade. WASM games in terms of performance are closer to 2000 than 2010. Here's an open source indie game from 2003 that I ported to WASM [1]. It struggles to hit 60 FPS on devices that were released a good 15 years after the game itself. Browsers sometimes struggle to animate simple lines at 60 FPS still to this day, because they're just hugely massive platforms with thousands of moving parts with no room for big, complex apps on top of them. [1] https://neverball.github.io/ https://neverball.github.io/
  - speps 3y ago
    I need to double check what you're saying, how do you show the FPS in your WASM port?

chantepierre 3y ago

Hello, thank you for this work as it shows great creative potential. A suggestion for runno's website, though : when I clicked on the link posted on HN, I did not expect to download that much data. Maybe you could find a way to offer pre-rendered examples and give the user who visits your site a (very visible) option to really download and run things ?

benno128 3y ago
Thanks for the feedback! It’s also cost me about $15 so far. I don’t think I’ll do that again, but it was fun as a demo!

stuaxo 3y ago

Great stuff. Is it possible to output to markup from these programs ? It would be cool if python wsgi programs in this could work somehow.

benno128 3y ago
Yeah of course! They've got STDIN/STDOUT/STDERR and I've built a Virtual Filesystem. But if you're using WASI binaries locally they don't have that restriction. You might be interested in WAGI: https://github.com/deislabs/wagi https://github.com/deislabs/wagi And to catch up on WASI: https://xeiaso.net/talks/unix-philosophy-logical-extreme-wasm https://xeiaso.net/talks/unix-philosophy-logical-extreme-was...

unnouinceput 3y ago

not loading even after 5 minutes. Firefox latest version here (116.0.3 - 64bit)

rapnie 3y ago

It is a nice proof-of-concept, but a pity that runno uses firebase. Any software with built-in SaaS services from advertisement agencies are a no-go area for me.