Crafting the Impossible: X86 Virtualization in the Browser with WebAssembly

Rate this content
Bookmark

WebAssembly is a browser feature designed to bring predictable high performance to web applications, but its capabilities are often misunderstood.


This talk will explore how WebAssembly is different from JavaScript, from the point of view of both the developer and the browser engine, with a particular focus on the V8/Chrome implementation.


WebVM is our solution to efficiently run unmodified x86 binaries in the browser and showcases what can be done with WebAssembly today. A high level overview of the project components, including the JIT engine, the Linux emulation layer and the storage backend will be discussed, followed by live demos.

Alessandro Pignotti
Alessandro Pignotti
21 min
16 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

ChirpX is a technology to securely run binary code in the browser, written in C++ and compiled to JavaScript WebAssembly. It can run a full virtualized system in the browser, including Bash and other languages like Python and JavaScript. ChirpX aims for scalability and the ability to work with large code bases, supporting multiprocessing and multithreading. It uses a two-tiered execution engine with an interpreter and a JIT engine. Future plans include running the full X.Org server in the browser and implementing the Windows system call. WebVM, the underlying technology, has a virtual file system backed by Cloudflare.

1. Introduction to ChirpX

Short description:

I am Alessandro Pignotti, founder and CTO of Leaning Technologies. We specialize in compiled to JavaScript and compiled to WebAssembly solutions. We have released three different products: Chirp, ChirpJ, and ChirpX. ChirpX is a technology to securely run binary code in the browser. It is generic, robust, and scalable. We wrote it in C++ and compiled it to JavaScript WebAssembly using Chirp.

So, hello, everybody. And I'd like to start by thanking the organization for inviting me here and giving me the opportunity some of the tech that we build for you. And especially today, it's a special day for me, because it's my birthday. And thanks a lot for coming here to celebrate with me, I really appreciate it.

So I am Alessandro Pignotti, founder and CTO of Leaning Technologies. And I was born and raised in Rome, and I moved to Pisa for my studies, and then I moved here in 2014. And I've been a proud Amsterdammer since. If you wish, you can follow me on Twitter, but I would recommend not to hold your breath while you wait for me to post something.

So what do we do? We are a small company that specializes in the niche of compiled to JavaScript and compiled to WebAssembly solutions. In this small niche, I think that we do some pretty cool things. And over the years, we have released three different products. of them was Chirp, which is a C++ tool, JavaScript and WebAssembly compiler. The second one was ChirpJ that is not just a compiler for Java, really. It's more like a full Java machine that can run in the browser. And we can use it to run even fully graphical Java applications in the browser right now. And then we decided to move one step further. And we made ChirpX. And ChirpX is not just a product, really. Right now, we consider it to be more of a technology. It's a very generic solution that will do a bunch of different things. And as a first experiment to see how we can make this eventually a product that we can sell, we built WebVM, which is just one of the possible things we can build with this. And we will discuss about that. Because, you know, each one of these products will probably require its own couple of hours talk. We have 20 minutes, so we need to cut and go to the meat. So, ChirpX is a technology to securely run binary code in the browser, okay? And there are three main ideas that we followed when making this. We wanted to build something which is generic, robust, and scalable. I think you might have your own intuition about what these terms mean, but I will get in depth later about what I mean exactly by using these words. And in practical terms, what ChirpX is is a C++ application that we wrote from scratch. We wrote it ourselves, and we compiled it to JavaScript WebAssembly using Chirp, using our other product, so that it can run in the browser. And so I know that it's nice to talk about things, but it's also nice to see how things actually do in practice.

2. Running Full Virtualized System in Browser

Short description:

I will now demonstrate that we can run a full virtualized system in the browser. Currently, I have Bash, the shell, running from a Debian distribution in the browser. I will write a binary from scratch and test it. I want to return an error code instead of the usual successful completion code to see if the shell can handle it. After compiling the code using GCC, the system loads the required data from the network. The execution is completed, and we can test if it runs as expected.

And everybody recommended me not to do a live demo, but, you know, who am I to ever follow good advice? Let's try this. So what I'd like to do, I'd like to prove to you that we can run a full virtualized system in the browser. And what I have here right now is Bash, the shell, running from a Debian distribution running in the browser. To prove it to you, I can, for example, list a file system and there is a bunch of things you can expect from an actual system running.

But I'd like to prove that I can actually run a binary that has never been seen before. And through that, I guess I'll just write one. And I don't know you guys, but when I want to write a binary from scratch, first thing I do, I open my text editor. So... It's incredibly difficult to spell correct on stage. So we have Vim, it's running, and I can now type a very small test case. And what's going on right now is that this whole thing is running from the XSAT binaries that you run on your own computer. And I plan to do a very simple L word. To do something which is not completely trivial, I actually want to, instead of returning the usual return zero or code that will tell the system that the executable is successfully completed, I want to return a error code. I want to see if the shell can deal with that. So let's try this out. Cool.

Now I want to compile this. To compile C++ code. C code, actually, I'll of course use GCC. And we can also enable some optimization because you never know. And this looks correct. Okay. What's going on in the background here? So GCC is a fairly big executable, and currently the system is loading the required data from the network. And this data comes in blocks because this is actually a full X2 implementation that runs from a disk device which is baked by a CDN. It's baked by cloudflare. And this execution is actually completed. We can test if this can even run. It does what we expect it to do. Let's check the error code. It is what we expect.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Making JavaScript on WebAssembly Fast
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
Building Brain-controlled Interfaces in JavaScript
JSNation Live 2021JSNation Live 2021
27 min
Building Brain-controlled Interfaces in JavaScript
Top Content
Neurotechnology is the use of technological tools to understand more about the brain and enable a direct connection with the nervous system. Research in this space is not new, however, its accessibility to JavaScript developers is.Over the past few years, brain sensors have become available to the public, with tooling that makes it possible for web developers to experiment building brain-controlled interfaces.As this technology is evolving and unlocking new opportunities, let's look into one of the latest devices available, how it works, the possibilities it opens up, and how to get started building your first mind-controlled app using JavaScript.
TensorFlow.js 101: ML in the Browser and Beyond
ML conf EU 2020ML conf EU 2020
41 min
TensorFlow.js 101: ML in the Browser and Beyond
Discover how to embrace machine learning in JavaScript using TensorFlow.js in the browser and beyond in this speedy talk. Get inspired through a whole bunch of creative prototypes that push the boundaries of what is possible in the modern web browser (things have come a long way) and then take your own first steps with machine learning in minutes. By the end of the talk everyone will understand how to recognize an object of their choice which could then be used in any creative way you can imagine. Familiarity with JavaScript is assumed, but no background in machine learning is required. Come take your first steps with TensorFlow.js!
Unreal Engine in WebAssembly/WebGPU
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Unreal Engine in WebAssembly/WebGPU
Top Content
Traditionally, browser games haven't been taken seriously. If you want to target the web, that traditionally has meant compromising on your vision as a game developer. Our team at Wonder Interactive is on a mission to change that, bringing one of the world's premiere native game engines to the browser - Unreal Engine. In our talk, we'll dive into our efforts porting the engine to the browser and carrying on the pioneering unfinished work started at Epic Games nearly a decade ago in collaboration with Mozilla. We'll dive into what this means for the future of games in the browser, and the open metaverse on the web.
Pushing the Limits of Video Encoding in Browsers With WebCodecs
JSNation 2023JSNation 2023
25 min
Pushing the Limits of Video Encoding in Browsers With WebCodecs
Top Content
High quality video encoding in browsers have traditionally been slow, low-quality and did not allow much customisation. This is because browsers never had a native way to encode videos leveraging hardware acceleration. In this talk, I’ll be going over the secrets of creating high-quality videos in-browsers efficiently with the power of WebCodecs and WebAssembly. From video containers to muxing, audio and beyond, this talk will give you everything you need to render your videos in browsers today!