General

How to get into Rust as a TypeScript Developer

Published Sep 1, 2021

Updated Feb 14, 2023

9 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

How to get into Rust as a JavaScript/TypeScript Developer

Rust is the language of my dreams. I work primarily as a JavaScript developer, so my skillset largely includes the web, as well as NodeJS environments. I love JavaScript, but I wanted a new language to dive into. That new language needed to check off a few boxes:

Rich Type System (TypeScript made me see the value of this)
Fast / Low Level (JavaScript is SO SLOW, I want speed next)
Great Documentation
Community

I originally thought my new language was going to be C++. It has the speed I wanted, and is a strongly typed language that is also statically typed. The big problem with C++, though, was that there wasn't any sign of official documentation, and the community seems a lot less beginner-friendly than I was hoping.

Then came Rust. Rust checks all the boxes. Speaking about their documentation alone, it is OUTSTANDING! It's a one-stop shop for all of my language needs. As a beginner, this is SUCH a time saver. Shout-out to mdbook for having one of the cleanest documentation formats I have ever seen.

The Speed of Rust

I briefly mentioned my desire for great documentation, but now, let's look at speed!

This blog post by Sean Wragg sums up the speed of Rust in a comparison of web frameworks. In his article, he compared Rocket (a web framework written in Rust) to Restify (another web framework written in NodeJS). He benchmarked how many requests per second each service was able to handle, and the results were staggering.

The requests/second each service could handle:

Restify: 7,996.19
Rocket: 72,133.75

Based on these benchmarking results, the Rocket-powered service was able to handle 9x the amount of requests than Restify. This is wild!

Let's dive into Rust and see how we can switch our trains of thoughts from JavaScript to Rust.

Prerequisites

We'll need to install Rust onto our computer for local Rust development. This process is incredibly easy. Navigate here and their documentation will give you a way to install Rust, tailored to whatever OS you use when you click that link.

Executing the install process will install the entire rust tool-chain onto your computer:

rustc: The Rust compiler, Usually not invoked directly, but instead, through cargo.
cargo: Think of this as a Rust's version of a super-powered npm. It downloads dependencies, compiles and runs our code, and can distribute our packages to the Rust Community Crate Registry.
rustup: This installs and updates Rust.

The most important component of this tool-chain is Cargo.

Your new npm, Cargo

From the Cargo Book

Cargo is the Rust package manager. Cargo downloads your Rust package's dependencies, compiles your packages, makes distributable packages, and uploads them to crates.io, the Rust community’s package registry. You can contribute to this book on GitHub.

We are going to mainly use 3 cargo commands:

cargo new
cargo build
cargo run

As a JavaScript developer, I feel right at home with this. It feels like I'm working with npm scripts in a package.json file.

Hello World

Let's finally create a Rust project. Run the following command to initialize a new package.

cargo new hello_world

This will create our folder structure for the rust package, and create two important files:

Cargo.toml
main.rs

Think of Cargo.toml as Rust's version of package.json. The main file we're interested in, however, is the main.rs file. This file contains the main function- the starting point in all Rust programs.

fn main() {
    println!("Hello, world!");
}

In the span of a few seconds, we've already created our Hello World program. This is a great foundation with which we can begin diving deeper into Rust fundamentals.

Types

One of the tools in the JavaScript ecosystem that I fell in love with is TypeScript. There was recently a time I worked on a time-sensitive project, and there just was NOT the time to test the application as much as I wanted to.

I had chosen to use TypeScript instead of JavaScript to write out the front-end, and it caught SO many errors as I typed out my code. I felt confident that I understood the structure of all of my data and overall, I felt more confident in the codebase with it being strongly typed.

Here are some simple types from TypeScript:

const anInt: number = 17;
const aString: string = "Hello";
const aBoolean: boolean = true;
const anArray: number[] = [1, 2, 3, 4, 5];

The typing system of Rust feels just like writing TypeScript code. Here is a similar declaration of variables, but this time, in Rust.

let _an_int: i32 = 32;
let _a_string: &str = "Hello, world!";
let _a_bool: bool = true;
let _an_array: [i32; 3] = [1, 2, 3];

Writing this code gives me the same feel of writing TypeScript, a huge plus considering how much I love using it.

Structs and Enums

Let's check out a more complicated type. Let's say I wanted to declare the shape of an object representing a person. Here's an example of how I would implement that object type in TypeScript.

export interface Person {
    name: string;
    age: number;
    hobby: string;
    job_title: string;
}

Here is how I could implement a similar object using Rust structs.

#[derive(Debug)]
pub struct Person {
    pub name: String,
    pub age: i32,
    pub hobby: String,
    pub job_title: String,
}

Again, this gives me a very similar experience to writing TypeScript.

Let's instantiate an object of the Person type using Rust, and print it to standard output.

let me: Person = Person {
    name: "Matthew Pagan".to_string(),
    age: 32,
    hobby: "Coding".to_string(),
    job_title: "Software Developer".to_string(),
};

println!("{:?}", me);

This is Rust, yet it's so similar to what I already use on a day-to-day basis. I love TypeScript, and Rust scratches that itch.

Let's implement a favorite color field to the Person struct, and restrict available colors by implementing a Color enum for that type.

Options and Matching

Rust really starts to shine when we start working with logic that involves optional values, and how to handle optional data.

Let's expand our Person type. Here is how our Person type is currently defined:

use super::Color;

#[derive(Debug)]
pub struct Person {
    pub name: String,
    pub age: i32,
    pub hobby: String,
    pub job_title: String,
    pub favorite_color: Color,
}

Not all Person's have jobs. Maybe some of those objects represent a child who may not be old enough to enter the workforce, or someone older who has already retired.

TypeScript has one way of dealing with this scenario, using optional properties.

Here is how we could implement an optional job_title in a Person interface in TypeScript.

export interface Person {
    name: string;
    age: number;
    hobby: string;
    job_title?: string;
    favorite_color: Color;
}

In the above implementation, TypeScript says that job_title is either a string or null. Rust's solution is brilliantly elegant. There is no concept of null. Instead, we'll use the Option enum to handle the implementation.

Here is how we would define Person with an optional job_title.

pub struct Person {
    pub name: String,
    pub age: i32,
    pub hobby: String,
    pub job_title: Option<String>,
    pub favorite_color: Color,
}

Now, we can write logic that depends on the state of the job_title.

let me: Person = Person {
    name: "Matthew Pagan".to_string(),
    age: 32,
    hobby: "Coding".to_string(),
    job_title: Some("Software Developer".to_string()),
    favorite_color: Color::Cyan,
};

let noah: Person = Person {
    name: "Noah Pagan".to_string(),
    age: 5,
    hobby: "Lego".to_string(),
    job_title: None,
    favorite_color: Color::Blue,
};

match me.job_title {
    Some(title) => println!("{} is a {}", me.name, title),
    None => println!("{} doesn't have a job", me.name),
}

match noah.job_title {
    Some(title) => println!("{} is a {}", noah.name, title),
    None => println!("{} doesn't have a job", noah.name),
}

Option<T> enums can either be 1 of 2 variants

Some<T>: Represent the presence of a value, of type T
None: Represents the lack of a value

Using match to perform actions, depending on the value of an enum, is one of the most common patterns I've experienced diving into the world of Rust, and provides an effective way for handling control flow with enums.

Functions

Like other languages, we can encapsulate repeated logic in functions. We're repeating our logic when we're handling what to print depending on the value of job_title. Let's create a function that takes in a Person, and logs to standard out the correct message.

fn handle_job_title(person: Person) -> () {
    match person.job_title {
        Some(title) => println!("{} is a {}", person.name, title),
        None => println!("{} doesn't have a job", person.name),
    }
}

let me: Person = Person {
    name: "Matthew Pagan".to_string(),
    age: 32,
    hobby: "Coding".to_string(),
    job_title: Some("Software Developer".to_string()),
    favorite_color: Color::Cyan,
};

let noah: Person = Person {
    name: "Noah Pagan".to_string(),
    age: 5,
    hobby: "Lego".to_string(),
    job_title: None,
    favorite_color: Color::Blue,
};

handle_job_title(me);
handle_job_title(noah);

I even get some nice IntelliSense for everything so far using VSCode if I import this function from a module.

Arrays and Ownership

We can clean up this code even more. We are declaring and initializing 2 Person objects. We could store this in an Array, and then iterate through that Array, running the function on each iteration.

Here is an example of how to implement this using Rust.

let people: [Person; 2] = [
    Person {
        name: "Matthew Pagan".to_string(),
        age: 32,
        hobby: "Coding".to_string(),
        job_title: Some("Software Developer".to_string()),
        favorite_color: Color::Cyan,
    },
    Person {
        name: "Noah Pagan".to_string(),
        age: 5,
        hobby: "Lego".to_string(),
        job_title: None,
        favorite_color: Color::Blue,
    },
];

for person in people.iter() {
    handle_job_title(person);
}

To get this working though, we need to make some minor changes to our function implementation, and instruct the function to borrow the Person argument by adding a & in front of the argument type.

use super::super::types::Person;

pub fn handle_job_title(person: &Person) -> () {
    match &person.job_title {
        Some(title) => println!("{} is a {}", person.name, title),
        None => println!("{} doesn't have a job", person.name),
    }
}

This broaches a core Rust feature, the subject of Ownership. Ownership has 3 basic rules:

Each value in Rust has a variable that’s called its owner.
There can only be one owner at a time.
When the owner goes out of scope, the value will be dropped.

Let's create a pair of examples to show the ideas of Ownership.

fn add_numbers(x: i32, y: i32) -> i32 {
    x + y
}

let number = 3;

println!("{} + {} = {}", 1, x, add_numbers(1, number));
println!("{} + {} = {}", 1, x, add_numbers(5, number));

This works just as we would expect it to work, printing out to console the results of both function calls. Because integers are simple values with a known, fixed size, this works by pushing a copy of the i32 integer onto the stack for the value of the function argument.

Because we're making copies of the integer number onto the stack, we adhere to the rules of Ownership and number is the sole owner of its copy of the integer 3.

Let's try this with a function that takes a String.

fn print_string(x: String) {
    println!("{}", x);
}

let name: String = String::from("Matthew Pagan");

print_string(name);
print_string(name);

This does NOT work. VS Code throws an error right away when we try this on the second call of the print_string function.

The error says that we used a moved value. If we look at the third rule of Ownership, it states, "When the owner goes out of scope, the value will be dropped."

Unlike integers, the String type is a growable, mutable, owned, UTF-8 encoded string type. Unlike the scalar integer, a `String' is pushed onto the heap, a much more expensive place to keep memory.

Because of this expense, the Rust compiler doesn't just copy the value into the function argument. Instead, the function arg becomes the new owner of that data.

To repeat, when we called print_string, we left the scope where we declared the name String, and the function argument x became the new owner of the value "Matthew Pagan". After the function logged my name, and we left its scope, name no longer was the owner of the data, throwing an error when we tried to use it again.

To fix this, we need to tell the function to only borrow the value of the String, and to return ownership of that value to the name variable once we leave the function scope. We do that by pre-pending a & in front of the function argument type. Below is the implementation to fix our move error.

fn print_string(x: &String) {
    println!("{}", x);
}

let name = String::from("Matthew Pagan");
print_string(&name);
print_string(&name);

Conclusion

Rust seems like it took the best parts of the JavaScript ecosystem, and supercharged them into a feature-packed programming language, purpose-built to get developers into systems programming. I will heavily admit that it has certainly worked with me and has drawn an unhealthy amount of my attention.

There remains so much more left to do with our growing knowledge of Rust. In my next blog post, we'll explore how to build on this foundation of knowledge, and start working with external Rust packages (crates) to create a webserver to handle the back-end role of a full-stack application.

Until then, install if you haven't done so yet, install Rust and start playing around with it today! It's seriously the easiest way to get into lower-level programming, especially if you're from the world of web development, like me.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Matthew Pagan
@mastapegs @mastapegs

How to deploy a NodeJS application using Fly.io

I was astounded when I learned just how easy it is to deploy static web applications. Services like AWS Amplify, Netlify, GitHub Pages, etc, trivialize this process, allowing developers to focus less on deployment, and more on feature development. I was equally astounded when I learned that it can be *JUST AS EASY* to deploy a web service! There are many options out there: - Render - Heroku - Platform.sh - AWS Elastic Beanstalk This guide is going to be focused on a solution that I have found to be incredibly developer-friendly platform, Fly.io. What is Fly.io? > Deploy App Servers Close to Your Users > > Run your full-stack apps (and databases!) all over the world. No ops required. Fly.io claims to be able to run full-stack apps with no ops required. That's a bold statement. While I've committed to plenty of PR's, I haven't deployed a web service in a *while*. I was feeling the itch to deploy a service to play around with some different languages in the backend, so I was 100% in the market for a developer-friendly way to get this done, with quite literally no ops hopefully required. Fly.io App Deployment Speed-run The last time I personally deployed a brand new web service was months and months ago, on a DigitalOcean droplet. My usual go-to solution for web apps are static web apps, so I'm used to deploying static assets. Fly.io has a particular portion of their documentation which immediately drew my attention: their Speedrun section. Before deciding to write this blog, I figured, I'd at least try out their service, and if I enjoyed it, I'd write about it. Holy moly was I shocked just how *easy* Fly.io made deployment. After about 15 minutes from landing on their documentation, I was able to deploy a web service, complete with GitHub Actions CI/CD. And I didn't even need to touch a server! Here is how you can do the same. I created an incredibly terse ExpressJS app using TypeScript. 1. Install flyctl: The root URL for Fly.io has a one line command you can use to install flyctl, the command line tool which handles deployment for you. For detailed instructions though, check out this page. 2. Sign up / Log in: Sign up or Log in using the appropriate command, flyctl auth signup or flyctl auth login. 3. Run flyctl launch: This will prompt you to name your application, select a region to deploy to, and then deploy your app. This generates a fly.toml config file with the deployment configurations. In those three steps, you too can launch a sample express app. CI/CD Adding CI/CD is as simple as adding a single file to the repo, along with retrieving and adding an API token to the repo. Add the following to .github/workflows/main.yml ` Then run flyctl auth token to generate and print an API token, then add it to the repo as a new secret named FLY_API_TOKEN. That is all you need to continuously deploy your NodeJS application on every commit! Conclusion Using Fly.io honestly felt like cheating. I remember being super proud of myself when I first deployed a full LAMP stack application on a VPS. I also clearly remember the pain of troubleshooting things like SSH, CertBot and LetsEncrypt, Nginx, etc. Fly.io completely trivialized the entire process. I easily see myself using this going forward for all containerized applications since the service even includes the means for auto-scaling your apps and containers!!! If you are a developer and you are not shy of the command-line, I highly recommend checking out Fly.io and spending 15 minutes of your time, just deploying a service. You'll be shocked at just how quick and easy it can be to go from 0 to CI/CD in mere moments....

Dec 7, 2021

4 mins

NodeJS

Svelte 5 is Here!

Svelte 5 was finally released after a long time in development. Fortunately, we've been able to test it for some time, and now it has a stable release. Let's dig into its features and why this is such a significant change, even though Svelte 4 code is almost 100% compatible. Svelte syntax everywhere This is one of my favorite additions. Previously, Svelte syntax was limited to a component element. Refactoring code from a component and moving it to a JavaScript file worked differently. Now you can use the .svelte.js or .svelte.ts extension, which allows you to use the same syntax everywhere. It's important to note that it's a way to express that this is not just JS, and what you write may be compiled to something else, just like .svelte files are not just html even though they look very similar. Runes The introduction of runes is one of the most significant changes in Svelte. Many users felt attracted to variables being instantly reactive in previous versions. ` There was, however, a lot of magic underneath and a considerable amount of work from the compiler to make it behave reactively. $state In Svelte 5, a reactive variable has to be explicitly declared using the $state rune, which brings a clear distinction between what is reactive and what isn’t. ` In the previous code, $state is not an actual function being called; it's a hint for the compiler to do something special with this declaration. Rune names always start with a dollar sign ($) and do not need to be imported. However, there’s much more to the changes than just the way we declare reactive variables. Runes bring a lot of new features that make Svelte 5 a great improvement. In Svelte 5, objects or arrays use Proxies to allow for granular reactivity, meaning that individual properties in an object are reactive, even if they are nested objects or arrays. If you modify a property, it will only update that property and will not trigger an update on the whole object. It also supports triggering updates when methods like array.push are called. In previous versions, an assignment was required to trigger an update: ` To have a similar behavior of svelte 4 (no deep reactivity), use the $state.raw() rune. This syntax of .* is common for related features of a rune: $state.raw() will require an assignment to trigger reactivity. ` Because proxies are used, you may need to extract the underlying state instead of the proxy itself. In that case, $state.snapshot() should be used: ` $derived We will use $derived and $derived.by to declare a derived state. The two runes are essentially the same, except one allows us to use a function instead of an expression, allowing for more complex operations to calculate the derived values. ` $effect Effects are useful for running something triggered by a change in state. One of the things you'll note from the $effect rune is that dependencies don't need to be explicit. Those will be picked from reactive values read synchronously in the body of the effect function. ` Something to bear in mind is that these dependencies are picked each time the effect runs. The values read during the last run become the dependencies of the effect. ` Depending on the result of the random method, foo or bar will stop being a dependency of the effect. You should place them outside the condition so they can trigger reruns of the effect. *Variants* of the effect rune are $effect.pre, which runs before a DOM update, and $effect.tracking(), which checks for the context of the effect (true for an effect inside an effect or in the template). $props This rune replaces the export let keywords used in previous versions to define a component's props. To use the $props syntax, we can consider it to return an object with all the properties a component receives. We can use JavaScript syntax to destructure it or use the rest property if we want to retrieve every property not explicitly destructured.. ` $bindable If you want to mutate a prop so that the change flows back to the parent, you can use the $bindable prop to make it work in both directions. A parent component can pass a value to a child component, and the child component is able to modify it, returning the data back to the parent component. ` $inspect The $inspect rune only works in dev mode and will track dependencies deeply. By default, it will call console.log with the provided argument whenever it detects a change. To change the underlying function, use $inspect.with().with): ` $host The host rune gives access to the host element when compiling as a custom element: ` ` Other changes Another important change is that component events are just props in Svelte 5, so you can destructure them using the $props() rune: ` A special children property can be used to project content into a component instead of using slots. Inside the components, use the [@render[(https://svelte.dev/docs/svelte/@render) tag to place them. ` Optional chaining (?.) prevents from attempting to render it if no children are passed in. If you need to render different components in different places (named slots before Svelte 5, you can pass them as any other prop, and use @render with them. Snippets Snippets allow us to declare markup slices and render them conveniently using the render tag (@render). They can take any number of arguments. ` Snippets can also be passed as props to other components. ` ` Conclusion Some exciting changes to the Svelte syntax were introduced while, at the same time, maximum compatibility efforts were made. This was a massive rewrite with numerous improvements in terms of performance, bundle size, and DX. Besides that, a new CLI has been released, making the whole experience of starting a project or adding features delightful. If you haven't tried Svelte before, it's a great time to try it now....

Nov 27, 2024

4 mins

Svelte

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

How to get into Rust as a TypeScript Developer

How to get into Rust as a JavaScript/TypeScript Developer

The Speed of Rust

Prerequisites

Your new npm, Cargo

Hello World

Types

Structs and Enums

Options and Matching

Functions

Arrays and Ownership

Conclusion

Matthew Pagan

You might also like

How to deploy a NodeJS application using Fly.io

Svelte 5 is Here!

Let's innovate together!

You might also like

How to deploy a NodeJS application using Fly.io

Svelte 5 is Here!