Rust for JavaScript Devs 1: Hello World

Photo by Tianyi Ma on Unsplash

These days Rust is starting to break its way into the JavaScript world. As a JS developer, you might start to wonder about how you could contribute to projects like that. After all, Rust is famous for being really hard to learn. But is it really? In this series I’m going to teach you the basics of Rust through 1 to 1 translations of simple JavaScript programs to Rust programs, all the while explaining the Rust specific features that we come across as we do so. Today, let’s get started by setting up our Rust development environment and making a Hello World app.

Note: The complete code in this article can be accessed here.

Installing Rust

This is the easiest part. Just follow the instructions here. Once you’re done you’ll have the following tools installed.

1. rustup — Rust’s answer to nvm. It let’s you switch between different Rust versions.
2. cargo — Rust’s package manager and build tool. Think of it as npm and webpack rolled into one. You can also use it to run a Rust file directly without compiling it, like you would with node.
3. rustc — the Rust compiler. Unlike Javascript, which is an interpretted language and so can run without compilation, Rust files need to be compiled to a binary (basically just 1s and 0s — computer language) to run. Most of the time you won’t need this because you can use cargo to handle compilation (it uses rustc behind the scenes though).

Setting up an IDE

There’s Rust support for many IDEs, but we’ll just look at VS Code here. I’ll assume you already have it installed but if you don’t, get your downloader here. Once you have it installed and opened, install these extensions:

1. rust-analyzer — for linting, code completion, syntax highlighting, etc. If VS Code gives you some error messages after installing this, it’s because you’re missing some Rust support files that it needs. If you can’t figure out how to fix it by Google, just drop a comment below and I’ll see if I can help you out.
2. crates — an addon to help you manage your crates, which are the Rust equivalent of packages.
3. better-toml — Syntax highlighting and linting for toml files, which are Rust’s answer to json files.

Now we’re ready for Hello World!

Initializing a New Project

If we were in the JS world, we’d run npm init . We’re in the Rust world now, so we’ll run cargo new . In the case of npm init , as you know, you should create a folder for your project, navigate into the folder, then run the command. In the case of cargo new , we have to provide the name of the folder we want to create and it’ll create it for us. Since we’re making a hello world app, let’s run cargo new hello-world . This should result in the following file structure:

A new Rust app generated by cargo

As you can see, we get a little more than just the package.json that npm init gives us. There’s a Cargo.toml, which is Rust’s package.json; there’s a .gitignore ready to go and a git project is already initialized too. Finally there’s the src folder holding main.rs.

Let’s take a look at the Cargo.toml file.

A basic Cargo.toml file

As you can see, toml files are very different from JSON. Basically, a toml file is divided into sections, denoted by square brackets. Each section contains a number of key-value pairs in the form of key = "value" . We won’t go into what you can do with a toml as it’s beyond the scope of this article and the code that was actually generated is pretty self-explanatory. Or, if it isn’t leave a question below and I’ll get back to you.

Functions, Macros, Basic Syntax

Open up src/main.rs and find the following:

Hello World in Rust

Well, it looks like cargo new generates a hello world app for us. It looks a bit different than how it would look in JS. After all, we’d just need a simple console.log as shown below:

console.log("Hello, world!");

Running node helloWorld.js would then print the result to the screen. In Rust, as with most (if not all) compiled languages, we have to provide an entry point to our app and, like most compiled languages, that’s the main function (there are exceptions to this but we won’t go into them here). Basically the reason for this is that Rust will compile our app to a single executable file so we won’t have the option to pick which file to run at runtime, so the compiler needs to know that in advance.

Since in JavaScript we wouldn’t need a function at all here we won’t go into Rust function syntax here any more than noting that we need the fn keyword to define one, similar to the function keyword in Javascript, and that at least in this simple case (a function with no parameters or return value), the rest of the syntax is identical.

Next, println! . As you guessed by now, println! is Rust’s console.log. You’ll notice the curious exclamation point at the end of the call. This indicates that println! is not a function but a macro. The finer details of macros is beyond the scope of this article but at this early stage the main thing you need to know about the difference between functions and macros, at least from the perspective of the caller, is that functions take a fixed number of arguments and macros can take a variable number of arguments. For example, the following is valid JavaScript:

function oneArg(argOne) { return argOne };
oneArg("An arg", "Another arg");
// return value: "An arg"

You couldn’t do that with a Rust function (if you tried your program wouldn’t compile) but you could achieve similar behavior with a macro. However, the purpose of macros is quite different from functions — there’s much more to them than simply variable arguments. But that’s a topic for another article.

Oh, and one last thing here: in Rust, the semicolons are (mostly) mandatory so make sure you don’t forget them!

Running the Program

If we wanted to run a hello world app in Javascript, we’d run node helloWorld.js and we’d get our console log printed to our terminal. In Rust, we’ll use Cargo to achieve the same result. However, we won’t need to provide a filename. Instead, we just need to run cargo run from the anywhere within our project and it’ll compile and run our program, as shown below:

Running cargo run in the src folder

That concludes Rust for JavaScrip Devs 1. If you liked this article and want more, please leave a thumbs up and a comment, and be sure to check out Part 2 in this series. If there are any particular topics that you want me to cover in this series, be sure to let me know. And of course, if I got anything wrong be sure to leave a comment so I can correct it. Happy coding!