The Future of Frontend Technology with Rust + WebAssembly.
Translated by GPT
The Future of Frontend Technology with Rust + WebAssembly
Frontend technology is often considered easy. Once you develop the UI provided by the designer, you’re done, and knowing a bit of React, HTML, and CSS tags can master the technology used in the market. However, frontend technology is more diverse and challenging to master than you might think.
Performance optimization is essential to achieve maximum device compatibility within limited performance. Therefore, you need technology that minimizes DOM updates and keeps memory usage light. Lagging in the frontend is one of the worst cases that harm UX. It’s better to transition to an error page as a good design approach.
This is why complex handling or calculations are developed with WebAssembly. It’s well-known that Figma uses WebAssembly technology. When you want to perform pixel-level calculations or visualize heavy simulations on the web, WebAssembly shines. Additionally, using WebAssembly for functions that are difficult to implement on the web can provide performance advantages.
- Performance
Recently, I implemented an FFT in Rust + WebAssembly.¹ Initially, I tried to handle FFT in the JavaScript runtime, but there was a severe lagging issue.
Implementing FFT in a JavaScript environment causes memory issues. As the data size increases, the UI lags, and the computer struggles. Therefore, it needs to be separated into a WebAssembly environment.
The results were good. There was no throttling due to a surge in memory usage, and the UX was much smoother.
In terms of processing time performance, there wasn’t a significant difference. Even with a 2^14 data size, it was processed within 20ms. The real-time processing performance was excellent. Nevertheless, separating the execution context through WebAssembly allowed for much more efficient resource allocation than JavaScript operations.
- Cargo and wasm_bindgen & Build
Rust has a powerful package manager called Cargo. It sets up new projects or creates a WebAssembly development environment at once. From my personal experience, it seems to provide a far superior developer experience than NPM.
Moreover, it has good compatibility with WebAssembly. Unlike other languages, it provides convenient tools for function binding and data processing, and the compilation process is not much different from compiling TypeScript. With just the wasm-pack build command, you get a file that easily connects WebAssembly and JS.
By applying TypeScript here, you can develop the entire web ecosystem with strong typing. Since Rust inherently supports strong typing, the combination of Rust and TypeScript is optimized for building robust software.
- Is WebAssembly a Panacea?
To answer directly, it’s not a panacea. In most operations, there’s not much difference from the JS environment. Moreover, the ecosystem is not yet complete, and you need to compile languages like Rust separately, which reduces portability.
Nevertheless, it is undoubtedly an attractive option for performance optimization. When you need to extract the maximum frames in the limited performance of the web, develop blockchain web, or require authentication or security-related functions on the web, it’s better to use WebAssembly.
Especially in terms of security, since it runs within the WebAssembly runtime, you can maintain internal logic as a black box. This serves as an alternative to DOM security vulnerabilities like XSS.