The world of frontend development is fast-paced and can be pretty daunting to even the most experienced developers.
Each new framework, design system, and architecture pattern comes with rather bold claims about changing the future of how weāll write code.
In this post, weāll look at Rust ā a language empowering everyone to build reliable and efficient software.
I know what youāre thinking: āIāve heard this rhetoric before.ā
Youāre not wrong. Nevertheless, I can assure you that Rust lives up to the hype.
The goal of this article is to introduce you to Rust and explain why itās useful.
As a frontend developer, youāve probably mostly interacted with JavaScript as your primary language. Its dynamic, loosely-typed nature can make it a little difficult to quickly pick up other languages that doesnāt share these traits.
However, Rust was designed to make the learning curve of strict-typed languages less steep, meaning you wonāt experience the typical frustration of learning languages like c++.
There are very minor similarities between Rust and JavaScript, such as the use of let
and const
for variable declarations.
This isnāt a huge deal, but I found that I felt more at ease using Rust since I was already familiar with these keywords.
Another benefit to Rust is that the syntax isnāt verbose ā itās very straightforward and clean.
According the the official documentation, āThe Rust programming language helps you write faster, more reliable software. High-level ergonomics and low-level control are often at odds in programming language design; Rust challenges that conflict.
By balancing powerful technical capacity and a great developer experience, Rust gives you the option to control low-level details (such as memory usage) without all the hassle traditionally associated with such control.ā
If youāre entirely new to programming, Rust probably isnāt for you.
The official documentation inclusive assumes youāve written code in another programming language, but it doesnāt make any assumptions about which one.
If youāre usually concerned with memory-efficient code, Rust will be an especially good fit for you.
With Rust, anyone can do systems-level work traditionally reserved for the elite club of coders who have mastered the low-details of memory management, data representation, and concurrency.
Sound boring?
Here are some exciting facts: Rust isnāt limited to low-level systems programming, and itās expressive and ergonomic enough to make CLI apps, web servers, and many other kinds of fun piece of software youāre excited to build.
Setting up Rust is easy regardless of your operating system.
I donāt want to clutter this piece, so just head over to the installation guideline page and it will automatically detect your OS and walk you through the recommended setup for your machine.
Note : If youāre on a Linux or Mac, you should see something like in the image below:
For the purposes of this post, weāll be using a UNIX-based system (All Linux distributions and Macs). Run the command below in your terminal and follow the onscreen instructions.
Note: If you are using a Windows subsystem for Linux, the command works for you too.
curl https://ah.rustup.rs -sSf | sh`
If youāre on a Windows machine, yours would look something like this:
As usual, click on the link to download the executable and follow the onscreen instructions.
In this article, weāll use VS Code.
To boost efficiency, Iād recommend using the Rust extension, which helps with code-completion, error detection, etc.
Itās worth noting that regardless of your code editor of choice, there are bound to be extensions or plugins for Rust. Check your editorās extensions marketplace and you should see one.
Install it as instructed and youāre good to go.
Once youāve gotten all that out of the way, run the following command to see if youāve got Rust installed on your machine.
rustc --version
If all went well, you should see something like this:
If youāve followed the installation properly but failed to run this command in your terminal, the most likely cause is that you didnāt configure the PATH environment variable properly.
Head over to the installation guide to see how you can sort that out.
Note: remember to restart your terminal after the installation procedure before you run this command.
You donāt need to scour the internet for books or resources to learn Rust.
With your installation comes a copy of the book āThe Rust Programming Languageā by Steve Klabnik and Carol Nichols, with contributions from the Rust community.
It walks you through setup, basics, and advanced topics with a hands-on approach. Itās a top-notch resource.
You can read the book online or use the command below for an offline copy. Be sure to install rustup on your machine if you didnāt do so during your initial Rust setup.
rustup docs --book
Alternatively, you can choose to do the rustlings course. It guides you through downloading and setting up the Rust tool chain, and teaches you the basics of reading and writing Rust syntax on the command line.
You can also check out Rust by Example if reading hundreds of pages about a language isnāt really your style.
While the book talks about code with a lot of words, RBE shows off a bunch of code, and keeps the talking to a minimum. It also includes fun exercises.
Having come this far, youāre probably wondering how you can get your hands dirty with Rust on the frontend.
Typically, to use Rust (or any other language aside from JavaScript) on the frontend, you need to use WebAssembly.
If youāre not already familiar with WebAssembly (wasm for short), it is a binary instruction format that promises near native performance, allowing developers to build applications with high level languages like rust , c++, or any language of your choice (other than JavaScript of course) on the web for client and server applications.
Learn more here.
A key advantage here is that Rust is compiled down to machine code, so there is no virtual machine.
There also isnāt an interpreter sitting between your code and the machine, making it highly performant.
As this benchmark suggests, a direct comparison of REST API performance with Rocket for Rust and Restify for Node.js shows that Rust handles 72,000 requests per second compared to Node.jsā 8,000, and uses just over 1 mb of memory when idle compared to Node.jsā 19 mb.
This comes as no surprise since Rust is a systems programming language.
Rust responds to requests nearly 100 times faster on average than Node, and you wonāt run into the compile time errors that JavaScript apps are usually prone to.
Once youāre done with the setup for the standard Rust development tool chain, setting up for frontend dev is also easy.
First, you need to get wasm-pack installed. Itās a comprehensive package for building, testing, and publishing Rust-generated WebAssembly.
Run the command below in your terminal if youāre on a Mac or Linux distribution:
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -s Sf | sh
For Windows machines, download the installer, run it, and follow the on-screen instructions.
You can also install cargo-generate by using an existing git repository as a template. It helps you quickly get started with a new Rust project.
Install with this command:
cargo install cargo-generate
This should work fine if you have the Rust tool-chain properly configured on your machine. Cargo is the package manager for Rust.
You also need to have npm installed. Follow these instructions to install npm.
If you already have npm installed, be sure youāre up to date. Do so with the following command:
npm install npm@latest -g
Here is a good book to get you started with Rust on the frontend
Rust has a lot of advantages and uses:
It has a great documentation and an immensely rich ecosystem. It has the modern amenities that developers have come to expect, such as strong package management with cargo, as well as expressive (and zero-cost) abstractions.
Then comes my personal favorite: its error messages are as descriptive as it gets. It features a friendly compiler with useful error messages and top-notch tooling. You really canāt ask for more.
Hereās an example:
Rust is completely reliable. Itās rich type system and ownership model guarantee memory-safety and thread-safety and enable you to eliminate many classes of bugs at compile-time.
Hereās something else I love about Rust: when you write a program in rust, that program can run on any machine without Rust installed on it.
JavaScript web applications struggle to attain and retain reliable performance. JavaScriptās dynamic type system and garbage collection pauses donāt help. Seemingly small code changes can result in drastic performance regressions if you accidentally wander off the JITās happy path.
Rust gives programmers low-level control and reliable performance. It is free from the non-deterministic garbage collection pauses that plague JavaScript. Programmers have control over indirection, monomorphization, and memory layout.
Rust and WebAssembly integrate with existing JavaScript tooling. It supports ECMAScript modules, and you can continue using the tooling you already love, like npm and Webpack.
When it comes to performance advantages, code size is incredibly important since the .wasm
must be downloaded over the network. Rust lacks a run time, enabling small .wasm
sizes because there is no extra bloat included like a garbage collector. You only pay (in code size) for the functions you actually use.
Existing code bases donāt need to be thrown away. You can start by porting your most performance-sensitive JavaScript functions to Rust to gain immediate benefits.
From web apps to embedded systems and CLI apps, Rust provides a solid tool set to create highly-sustainable and scaleable code bases.
Thereās a popular saying: āAlways bet on JavaScript.ā
You can rest assured the same holds true for Rust.
The odds are staggeringly in its favor. Several companies already use Rust in production, including npm, Yelp, Dropbox, and others.
You can learn more about how these companies use Rust here.
Whether youāre a team of developers, students, companies, open source developers, or anyone that values speed and stability, Rust is for you.
Debugging Rust applications can be difficult, especially when users experience issues that are hard to reproduce. If youāre interested in monitoring and tracking the performance of your Rust apps, automatically surfacing errors, and tracking slow network requests and load time, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording literally everything that happens on your Rust application. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your appās performance, reporting metrics like client CPU load, client memory usage, and more.
Modernize how you debug your Rust apps ā start monitoring for free.
We show how to use Goxgen to scaffold a full-stack React app. See how to integrate React with Go and modify Goxygen to suit your project requirements.
Express.js is a Node.js framework for creating maintainable and fast backend web applications in JavaScript. In the fast-paced world of […]
Web components are underrated for the performance and ergonomic benefits they provide in vanilla JS. Learn how to nest them in this post.
Angular’s new defer
feature, introduced in Angular 17, can help us optimize the delivery of our apps to end users.
2 Replies to "Rust for frontend developers"
Really appreciate the article… Been enjoying learning Rust. I did remove it from echojs as it was too far off topic though.
Also, for anyone reading, may want to take a look at Yew stack.
https://github.com/yewstack/yew