WebAssembly potential use cases

I’m thinking about some use cases of WebAssembly and would like to share them here. This could motivate the creation of new shards by the community and expand the Crystal language’s reach to more places. Please help me know if I missed some potential use cases:

  • Front-end web: running Crystal in the browser, maybe with DOM support.
  • Interop with Node or Deno: create Crystal “libraries” that can be loaded on those runtimes.
  • Writing Smart Contracts for blockchains that support WASM as a target (like the Internet Computer or Ethereum2).
  • Interop with Dart for writing Flutter apps.
  • Writing serverless apps with Cloudflare Workers.
  • Writing Istio plugins (Kubernetes Service Mesh).

What else is possible? What do you would like to be able to do with it?

5 Likes

Really, I want to do the entire front-end of my site in WASM. A custom IRC chat client, and Video player would fix so many issues if we didn’t have to fight CSS and browser compatibility. I think it could make testing these components a lot easier than spinning up browserstack instances on github and having no insight in to why android on samsung failed, but android on pixel worked fine.

I’ve never actually worked with WASM, but seeing your example that looked like Lucky HTML markup made me think we could have type-safety markup that can be formatted with the crystal formatter, and linted with ameba. The tool chain alone would catch so many things.

Out of curiosity: how would type-safety prevent having different behavior on different devices because CSS was implemented slightly differently in each case?

That’s more two separate cases really. The CSS issue we run in to right now is that each version of Android (on each different device) seems to handle HTML inputs differently, and also rendering slightly different. When it comes to a chat component, you’re appending a div to the bottom of a list, but then telling that whole list to move up a certain amount. Having that whole deal in just being an app instead (I’d imagine) would make that so much easier to work with.

Maybe it wouldn’t be HTML rendered from Crystal, but more of a “cocoa”-like structure? I have no clue… :man_shrugging:

But also having the ability to write out normal HTML for the bits that don’t need to be super low level would mean that I don’t have to write Vue anymore :tada:

div(class: "message") do
  text "hi"
end

This doesn’t wouldn’t fix the issue of cross-device compatibility, but it would fix the issues that the crystal formatter and ameba would catch. Depending on how it all works, and if Spec could be used, maybe it could also be tested a lot easier.

describe ChatComponend do
  it "renders hi" do
    ChatComponent.new.render.should contain("hi")
  end
end

Have you tried Elm? The div snippet above would be like this in Elm:

div [class_ "message"] [text "hi"]

If you haven’t already, I would consider taking a look at it. Maybe also Mint? (I didn’t try it, but it seems to have been done with Elm in mind but “fixing” some things the author didn’t like)

1 Like

Using WASM or not won’t change the fact that you would have to deal with the browser’s HTML/CSS engine. The only way around it is to use a screen-sized canvas with WebGL and render everything. This is exactly what Flutter Web does and they achieve a quite good level of consistency among all platforms.

Aside from that, most frameworks have some level of polyfills and great tooling that help a lot with compatibility and testing. A Crystal framework with WASM can try to play a catch-up game with them but it will definitely be behind for a very long time.

3 Likes

Serverless functions with WebAssembly seem to have a bright future. We are implementing a WebAssembly platform here at Shopify, you already pointed out Cloudflare, and there are others such as Fermyon.

Based on my quick POC this week, Crystal has a much friendlier developer experience than other existing options like Rust.

9 Likes

I haven’t tried Elm. We did look in to Mint, but it’s missing a few things like GraphQL support that we would need before moving over.

I think you’re right though, those two options are basically what would help at the moment. I still want WASM in any case :stuck_out_tongue:

I also want to clarify that I’m really excited for web assembly support and all it could bribg! I was just suggesting Elm or Mint because they already exist and are relatively stable. But my recommendation will definitely change in the future!

2 Likes

Outside of the browser, I think webasm will do really well for edge functions and plugins.

3 Likes

Completely different scenario: Games in browsers.

Since I am working on a 2D game engine in Crystal, WebAssembly would be a really cool target (although there is still a long road of work ahead), so I’m definitely glad to see the current progress.

5 Likes

Having a serverless online playground of Crystal would be my top pick.

Also, the other day someone share lapce editor. Its plugins are in web assembly IIRC, so it would be a good way to have some crystal support probably.

4 Likes

Writing a computation intensive code in Crystal and using it inside Ruby/NodeJS apps via WASM runtime.

3 Likes

For those who aren’t as familiar with WASM, this is a great overview of the state of WebAssembly and potential use cases.

6 Likes

Raylib supports WASM so we could hopefully use that to make web games with Crystal

5 Likes

This repo has a working example of calling HTML5’s canvas from WASM GitHub - lbguilherme/crystal-web: Crystal bindings to the Web APIs for building front-end applications with WebAssembly

2 Likes

This is awesome dude! Perfect for use with my celestine SVG shard.

1 Like