WebAssembly Icon

WebAssembly

WebAssembly (or Wasm) is a web standard that defines a binary format and a corresponding assembly-like text format for executable code on the web.
52 Stories
All Topics

Craig Kerstiens crunchydata.com

A Postgres playground in your browser (WebAssembly FTW)

Craig Kerstiens:

Today I’m excited to introduce a new place for devs to polish their Postgres skills, a Postgres playground from Crunchy Data. What is the playground? Put simply it is:

  • Postgres running in your local web browser
  • With canned datasets you can load
  • Guided tutorials to follow along to learn about the power of Postgres

Since it’s running in the browser you can only connect to it using the embedded psql interface provided. So, it’s not actually useful for real workloads, but it is useful for learning and experimenting.

Richard Hipp sqlite.org

Run the latest SQLite beta directly in your web browser

Richard Hipp, announcing SQLite version 3.39.0 in their forums:

If you prefer, you can experiment with the latest 3.39.0 code directly in your web-browser and without having to download or install anything by visiting sqlite.org/fiddle/. (The page name is by analogy to sites like “JSFiddle” and “SQLFiddle”.)

The page runs a WASM-compiled copy of a recent 3.39.0 build in a sandbox in your web browser. Using controls on that page, you can import database files from your local machine (assuming they aren’t too big), work with them, then export any changes back to your desktop.

WebAssembly FTW!

JS Party JS Party #226

The third year of the third age of JS

In 2020, Shawn (swyx) Wang wrote:

Every 10 years there is a changing of the guard in JavaScript. I think we have just started a period of accelerated change that could in thge future be regarded as the Third Age of JavaScript.

We’re now in year three of this third age and Swyx joins us to look back at what he missed, look around at what’s happening today, and look forward at what might be coming next.

Ryan Dahl tinyclouds.org

On the potential of JavaScript-based containers

Ryan Dahl describes the JavaScript sandbox as a higher level container for server software:

This container isn’t meant to address the same breadth of problems that Linux containers target. Its emergence is a result of its simplicity. It minimizes the boilerplate for web service business logic. It shares concepts with the browser and reduces the concepts that the programmer needs to know.

People like Ryan and his colleagues at Deno are exploring this future, but it’s not quite here yet.

WebAssembly blog.persistent.info

Infinite Mac: an instant-booting Quadra in your browser

Mihai Parparita:

It’s a golden age of emulation. Between increasing CPU power, WebAssembly, and retrocomputing being so popular The New York Times is covering it, it’s never been easier to relive your 80s / 90s / 2000s nostalgia. Projects like v86 make it easy to run your chosen old operating system in the browser. My heritage being of the classic Mac line, I was curious what the easiest to use emulation option was in the modern era…

Here’s a video demo of what resulted: a full-featured classic 68K Mac in your browser.

Gaming grafana.com

Can Grafana run Doom?

A fun post from the Grafana blog for your Friday enjoyment:

It started as all good projects do … with Rick Astley.

After seeing the project about how to Rickroll your friends with Grafana — in which a seemingly innocent hyperlink surprises users with the music video for Astley’s classic “Never Gonna Give You Up” rendered with Prometheus and Grafana — a question arose: Can Grafana run Doom?

Thankfully, this post breaks Betteridge’s law of headlines. The answer to the question is a resounding yes!

Firefox hacks.mozilla.org

Fine-grained sandboxing in Firefox 95

In Firefox 95, we’re shipping a novel sandboxing technology called RLBox that makes it easy and efficient to isolate subcomponents to make the browser more secure. This technology opens up new opportunities beyond what’s been possible with traditional process-based sandboxing…

Turns out using WebAssembly to isolate potentially-buggy code is a pretty big win:

Going forward, we can treat these modules as untrusted code, and — assuming we did it right — even a zero-day vulnerability in any of them should pose no threat to Firefox.

Rust github.com

Seed – build your frontend in Rust

Seed is a Rust framework that uses an Elm-like architecture to help you build fast and reliable web apps that run on WebAssembly. Here’s why you might want to use it:

Seed allows you to develop the front-end with all the benefits of Rust, meaning speed, safety, and too many more things to count.

The Seed templating system uses a macro syntax that makes Rustaceans feel right at home. This means linting, formatting, and commenting will work, and it’s all in Rust. This is opposed to a JSX-like syntax that relies on IDE extensions to improve the developer experience.

Seed has a batteries-included approach. This means less time writing boilerplate and less time installing dependencies.

And a few reasons why you might not:

  • It’s newer. It’s harder to find support outside of Discord.
  • WebAssembly is newer with less support. Browser compatibility is at 92.9%.
  • Pre-built components are rare. You will likely have to roll your own components such as date pickers.
  • No server-side rendering yet
  • You may prefer other Rust frameworks like MoonZoon or Yew.

Jordan Eldredge jordaneldredge.com

Speeding up Webamp's music visualizer with WebAssembly

Jordan Eldredge:

Webamp.org’s visualizer, Butterchurn, now uses WebAssembly (Wasm) to achieve better performance and improved security. Whereas most projects use Wasm by compiling pre-existing native code to Wasm, Butterchurn uses an in-browser compiler to compile untrusted user-supplied code to fast and secure Wasm at runtime.

Speeding up Webamp's music visualizer with WebAssembly

SQLite static.wiki

Wikipedia using only static assets & no backend

A proof-of-concept inspired and enabled by Hosting SQLite Databases on GitHub Pages and the ensuing Hacker News post. The compiled single-page app supports autocomplete for titles, automatic redirecting & other MediaWiki datasets like WikiQuote or Chinese Wikipedia. It makes no external API calls except to get Wikipedia’s images.

2MB of CSS, JS, and WASM. One 43GB SQLite file.

JS Party JS Party #183

JS on Wasm

KBall and Nick Nisi sit down with Nick Fitzgerald to learn about running JavaScript on WebAssembly. They talk about almost instantaneous startup, running interpreted languages at the edge, and take a deep dive into the weeds of how Wasm based modules will change the future of application development.

SQLite phiresky.github.io

Hosting SQLite databases on GitHub Pages

The benefits of such a setup are numerous, especially for small sites and side projects:

Hosting a static website is much easier than a “real” server - there’s many free and reliable options (like GitHub, GitLab Pages, Netlify, etc), and it scales to basically infinity without any effort.

The how is also super interesting:

So how do you use a database on a static file hoster? Firstly, SQLite (written in C) is compiled to WebAssembly. SQLite can be compiled with emscripten without any modifications, and the sql.js library is a thin JS wrapper around the wasm code.

There’s more to the story, and the resulting solution is also open source.

WebAssembly github.com

Impossibly fast web search (made for static sites)

Stork is two things. First, it’s an indexer: it indexes your loosely-structured content and creates a file that you can upload to your web server. Second, it’s a JavaScript + WebAssembly frontend for that index file: Stork will hook into an <input> on your web page, download the index you’ve specified, and display the best search results immediately to your user, as they type. The precomputed index and WebAssembly frontend module make the entire Stork engine very good, and very fast.

Impossibly fast web search (made for static sites)

Rust github.com

A tiny, full-text search engine for static sites built with Rust and WASM

A Rust/WASM port of the Python code from the article “Writing a full-text search engine using Bloom filters”. This can be seen as an alternative to lunr.js and elasticlunr.

The idea is to generate a small, self-contained WASM module from a list of articles on your website and ship it to browsers. tinysearch can be integrated into the build process of generators like Jekyll, Hugo, zola, or Cobalt.

Kick the tires on the author’s blog.

Firefox hacks.mozilla.org

Securing Firefox with WebAssembly

Firefox is mostly written in C and C++. These languages are notoriously difficult to use safely, since any mistake can lead to complete compromise of the program.

The team has thus far had 2 strategies for securing the codebase, breaking code into multiple sandboxed processes with reduced privileges and rewriting code in a safe language like Rust.

today, we’re adding a third approach to our arsenal. RLBox, a new sandboxing technology developed by researchers at the University of California, San Diego, the University of Texas, Austin, and Stanford University, allows us to quickly and efficiently convert existing Firefox components to run inside a WebAssembly sandbox.

This strikes me as a bonkers idea and kinda brilliant.

The core implementation idea behind wasm sandboxing is that you can compile C/C++ into wasm code, and then you can compile that wasm code into native code for the machine your program actually runs on.

Click through to read more about how they’re pulling this off.

Marja Hölttä v8.dev

Understanding the ECMAScript spec (part 1)

When’s the last time you read the ECMAScript spec? Marja Hölttä on the V8 dev blog:

In this article, we take a simple function in the spec and try to understand the notation. … Even if you know JavaScript, reading its language specification, ECMAScript Language specification, or the ECMAScript spec for short, can be pretty daunting. At least that’s how I felt when I started reading it for the first time.

Also check out How to read the ECMAScript specification which covers most of the material from this post, but from a different angle.

Lars Wikman underjord.io

Lumen - Elixir & Erlang in the browser

Lars Wikman:

The Lumen Project is an alternative implementation of the Erlang VM, more known as the BEAM. It is designed to work in WebAssembly with the specific goal of bringing Elixir and Erlang to the browser with minimal overhead, tightly compiled rather than porting a full VM. Can it replace JS for some developers?

An excellent article, highly recommended. Lars hangs out in our community chat and suggested we do an episode with the Lumen team. Talks are underway, so stay tuned for that.

WebAssembly bytecodealliance.org

Building a secure by default, composable future for WebAssembly

Mozilla, Fastly, Intel, and Red Hat are forming a “Bytecode Alliance”, which is described as:

a new industry partnership coming together to forge WebAssembly’s outside-the-browser future by collaborating on implementing standards and proposing new ones.

Their aim:

We have a vision of a WebAssembly ecosystem that is secure by default, fixing cracks in today’s software foundations. And based on advances rapidly emerging in the WebAssembly community, we believe we can make this vision real.

Security seems to be at the dead center of this alliance. Click through for an in-depth rundown of why this is a problem and what they plan to do about it. Also, some awesome code cartoons from Lin Clark (I assume).

0:00 / 0:00