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

Rate this content
Bookmark
MakePad is a development platform built using WebAssembly and Rust, designed to create high-performance UI for web and native applications. The talk explains how MakePad improves UI rendering by utilizing WebGL and WebAssembly, overcoming the limitations of JavaScript. It demonstrates MakePad's ability to run on mobile devices, including older models like the iPhone 6. The founder's challenges with JavaScript's performance in complex applications led to the creation of MakePad, which offers better performance and efficiency. MakePad is open source and plans to release a design tool to enhance UI design capabilities. It supports professional audio applications through native APIs like the audio unit API on Mac. While MakePad can handle 3D models and textures, it requires specific importers and tool chains. The shift from JavaScript to Rust in MakePad development was driven by the need for higher performance and more efficient memory management.

From Author:

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.

This talk has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

MakePad is a development platform that uses WebAssembly and Rust to build UI for web and native applications. It reimagines the entire render stack using WebGL, allowing for high-performance, live codable interfaces that can run on various devices including browsers and mobile phones.

MakePad utilizes WebGL and WebAssembly to overcome the performance limitations typical in JavaScript-based UI development. This approach allows for smoother animations, efficient real-time interactivity, and the ability to handle complex applications like IDEs and design tools without the performance drag associated with JavaScript.

Yes, MakePad is designed to run on various platforms including mobile devices. It has been tested and runs on devices as old as an iPhone 6, ensuring broad compatibility and performance.

The creation of MakePad was initiated by the founder's challenges with existing web technologies, particularly JavaScript, which struggled with performance issues in complex applications. This led to exploring WebAssembly and Rust, which provided the necessary performance and efficiency.

Yes, MakePad is open source with its core libraries and dependencies available under the MIT license. This allows developers to use and modify the software freely for their own projects.

The future plans for MakePad include an open source release to 'crates', which is the package manager for Rust, and the development of a design tool to enhance UI design capabilities. Mobile support and additional features for AR and VR are also planned.

Yes, MakePad supports professional audio applications through its capabilities to access native APIs like the audio unit API on Mac. This allows it to load native instrument components directly, offering powerful audio processing features.

While MakePad is capable of handling UI elements and can potentially support 3D models and textures, it requires the development of specific importers and tool chains to handle files from programs like Blender.

The shift was motivated by JavaScript's limitations in handling high-performance, real-time applications required for complex UIs. Rust offers a high level of performance without the overhead of a garbage collector, making it suitable for intensive tasks like UI rendering.

Rik Arends
Rik Arends
22 min
16 Jun, 2022

Comments

Sign in or register to post your comment.

Video Transcription

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
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Building Brain-controlled Interfaces in JavaScript
JSNation Live 2021JSNation Live 2021
27 min
Building Brain-controlled Interfaces in JavaScript
Top Content
Learn how to build brain-controlled interfaces using JavaScript and brain sensors. Understand the functions of different parts of the brain and how they relate to sensor placement. Explore examples of calm and focus detection, as well as the Kinesis API for mental commands. Discover the applications of brain-controlled interfaces, such as scrolling web pages and password-less authentication. Understand the limits and opportunities of brain control and the potential for using brain sensors in medical applications.
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
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.
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
TensorFlow.js enables machine learning in the browser and beyond, with features like face mesh, body segmentation, and pose estimation. It offers JavaScript prototyping and transfer learning capabilities, as well as the ability to recognize custom objects using the Image Project feature. TensorFlow.js can be used with Cloud AutoML for training custom vision models and provides performance benefits in both JavaScript and Python development. It offers interactivity, reach, scale, and performance, and encourages community engagement and collaboration between the JavaScript and machine learning communities.
Embracing WebGPU and WebXR With Three.js
JSNation 2024JSNation 2024
27 min
Embracing WebGPU and WebXR With Three.js
The 3JS project has evolved into a community-driven effort with numerous contributors over the past 14 years. It started with 3D engine work in Flash and transitioned to using SVGs for rendering in HTML5 before adopting WebGL. The project showcases various projects and frameworks, including a no-code tool powered by 3.js. The team is working on a new render using WebGPU and developing a new shader language called TSL. The hope is that WebGPU will eventually replace WebGL, offering better control and performance.
The Unlikely Friendship Between React and Rust
React Advanced Conference 2023React Advanced Conference 2023
26 min
The Unlikely Friendship Between React and Rust
Watch video: The Unlikely Friendship Between React and Rust
This Talk explores the unlikely friendship between React and Rust, showcasing how they can be used together. The speaker demonstrates live coding and explains the process of calling Rust functions from JavaScript using the Tauri framework. The Talk also covers retrieving system information and disk details using Rust's sysinfo library. The speaker emphasizes the importance of serializability and showcases a button and SD card reader as examples of practical applications.