Makepad - Leveraging Rust + Wasm + WebGL to Build Amazing Cross-platform Applications

Rate this content
Bookmark

In this talk I will show Makepad, a new UI stack that uses Rust, Wasm, and WebGL. Unlike other UI stacks, which use a hybrid approach, all rendering in Makepad takes place on the GPU. This allows for highly polished and visually impressive applications that have not been possible on the web so far. Because Makepad uses Rust, applications run both natively and on the Web via wasm. Makepad applications can be very small, on the order of just a few hundred kilobytes for wasm, to a few megabytes with native. Our goal is to develop Makepad into the UI stack of choice for lightweight and performant cross-platform applications. We intend to ship with our own design application and IDE.

Rik Arends
Rik Arends
22 min
16 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Welcome to MakePad, a new way to build UI for web and native using WebAssembly and Rust. JavaScript is not suitable for complex applications like IDEs and design tools. Rust, a new programming language, was used to reimagine MakePad, resulting in a fast and efficient platform. MakePad offers live editing, high CPU performance, and the ability to load native instrument components. The future of MakePad includes an open-source release, a design tool, and support for importing 3D models.

1. Introduction to MakePad

Short description:

Welcome to my talk about MakePad, a new way to build UI for web and native using WebAssembly and Rust. I founded cloud9 IDE, a company to build a web IDE. I spent six years redoing the entire render stack of the browser in WebGL and JavaScript. The result is Makepad JavaScript, a complete do-over of the render stack in WebGL, allowing for live coding and high-performance interactive applications.

All right, welcome to my talk. I'm going to talk about MakePad. It's a new way to build UI for web and native using WebAssembly and Rust.

So, I want to start this journey long, long ago, maybe before some of you were still in primary school even. I founded cloud9 IDE, it's a company to build a web IDE. We had an HTML based code editor called Ace, it was one of the two at the time. And, so I was in the middle of the HTML world building what was considered a complex application, an IDE, right? Everyone was making web pages, some web apps, but the IDE with the code editor was considered a complex web application.

So, at the time I was working on the editor and I remember we were working on code folding and I wanted the code folding to animate. It's a very simple thing, you know, computers are fast, they can animate it, but no matter what I tried I couldn't get it done with HTML and CSS. It just, whatever we did, it just was choppy and it sucked. So at the time WebGL was just released and I started investigating using WebGL to render UI, render editors. And I realized that this was a huge task ahead of me to reinvent the UI in WebGL. So, I left Cloud9 and I started on the journey of redoing the entire render stack of the browser in WebGL and JavaScript.

And I spent six years on that. I probably built as many, six or seven complete file new iterations of trying to do this. And I want to show you the result of those six years here. And that is Makepad JavaScript. This is Makepad JavaScript. It is a complete do-over of the render stack in WebGL. And you can do, let's see, you can live code. All of this is live codable. So let's see if I can change the color of the text here. I can also, let's see, I have a bit of feedback on the audio. Yeah. So it was really fast. You could have, this is 50,000 interactive circles in a browser. It was using multi-threading. So this application running here was running in a worker thread and sent over the display list to the main browser thread. So you could have any number of applications running at the same time, as long as you had workers. And you could do very, very cool interactive things.

2. Challenges with Stability and CPU Power

Short description:

This all runs on an iPhone 6, and at some point, I even managed to run itself in itself. However, there was a big problem. When working in the application for more than 30 minutes, Chrome would crash. It was unstable, and I couldn't use my own developer tooling. The real problem is that JavaScript doesn't have enough CPU power for all the tasks. This is a dead end.

This all runs also on an iPhone 6, I think, still, if you load it up in Safari. And at some point, I even managed to run itself in itself. And this is great. This is all fine.

But it had a big problem. It had a big problem. At the time, in Chrome, when I was working in the application for more than 30 minutes, Chrome would just crash. It would just crash, and I didn't know why. And having dealt with browser bugs before, sometimes they take years. Sometimes they never get resolved. Usually when you're like, yeah, I LiveCode in Chrome for half an hour, and I hot reload a worker, that's a bug. They go, OK, you're probably the only person in the world that does that. So good luck with that. So that was very depressing. And hold on.

So it wasn't stable. That was really a problem because I wanted to use it myself. If I can't use my own developer tooling for my own stuff, then the developer tooling sucks. However, there was a real problem, because maybe I could have gotten this fixed. I could have fixed it myself or lobbied forever to get someone else to do it. But the real problem is that you don't have CPU power left if you do all of this in JavaScript. Worker thread caps at 100% if you use the editor, the syntax highlighting. All of that stuff is just too heavy to do in real time with JavaScript. And that meant that I was looking ahead. I see AR, VR, user interfaces. I see high frame rate screens. The latest max are 120 hertz. So you don't have that 16 milliseconds anymore. You're down to 8 or lower. So it's a dead end.

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.
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!
Crafting the Impossible: X86 Virtualization in the Browser with WebAssembly
JSNation 2022JSNation 2022
21 min
Crafting the Impossible: X86 Virtualization in the Browser with WebAssembly
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.
The Unlikely Friendship Between React and Rust
React Advanced Conference 2023React Advanced Conference 2023
26 min
The Unlikely Friendship Between React and Rust
Embracing WebGPU and WebXR With Three.js
JSNation 2024JSNation 2024
27 min
Embracing WebGPU and WebXR With Three.js
In the rapidly evolving landscape of web technologies, the introduction of WebGPU and WebXR represents a significant leap forward, promising to redefine the boundaries of what's possible in 3D web experiences. This talk dives into the heart of these new technologies, guided by the Three.js library.
We begin by exploring WebGPU, a next-generation graphics API offering enhanced performance and efficiency for rendering 3D graphics directly in the browser. We'll demonstrate how Three.js is adapting to harness its full potential, unlocking unprecedented opportunities for developers to create visually stunning interactive experiences.
Transitioning to the immersive realm, we delve into WebXR, a technology that opens the door for virtual reality and augmented reality experiences right from the web. We'll showcase how Three.js enables creators to build immersive experiences.