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 make Videos with React using Remotion

How to make Videos with React using Remotion We've written a blog post discussing how React truly is a "Learn Once, Write Anywhere" library. In that article, we talked about how we aren't limited to rendering React components to the DOM. In this post, we'll discuss how we can leverage our knowledge of developing React components and create Videos, using Remotion. If you already know [React] and follow along with this post, you'll walk away with a custom .mp4 video of you're own creation, and the knowledge of how to customize it to you're heart's content. Remotion Remotion is a suite of libraries for creating videos programmatically with React. Just like react-dom is used to provide an interface between React components, and rendering to the DOM, Remotion is used to provide an interface between React and rendering to Video. > If you know React, you can make videos. > -- Remotion Documentation This is exciting because it allows developers to re-use their knowledge of the React library for yet another purpose. Let's dive in and see how we can start rendering some videos! Initializing a Remotion Video Project Creating a new Remotion video is as easy as a 1 line command: npm init video Running this command gives the user access to a few default templates for Remotion video development: - Hello World - Blank - Hello World (Vanilla Javascript) - React Three Fiber - Still Images - Text to Speech The Hello World templates are fantastic places to go if you are a hands-on learner and like playing around with your code in a live dev environment. They're how I learned to use Remotion. They're packed with such great logic, that I'd encourage you to run a template before moving on and exploring them a bit to see how things are laid out. That being said, I want to go over things rather slowly, so I'm going to create a repo from the Blank template, add a few development features (linting, husky, prettier, etc), and use that as a starting point. If you want to develop with these features and want a similar starting point, clone the repo here and you can see every commit from beginning to end. This is the exact commit after I finished installing linting to the Blank template. The Blank Remotion Template If you cloned the repo I mentioned above, you'll be working in the Blank template, with a few additional dev features. The main 2 files are: - src\index.tsx: This is similar to the index file of a regular create-react-app. It uses a render function to take a React component, and render it to the desired output, in this case, a .mp4 video. We won't be looking in here. - src\Video.tsx: This is the main entry point of our video. Think of this as the App component in a create-react-app project. It's here that we layer together React components to create our Remotion video. This is where we will start to focus our attention. The Composition component The entry point file Video.tsx introduces us to our first Remotion component, Composition. ` We can see this component in action by running npm start and checkouting out our development environment: The Remotion development environment has 4 important sections: - Compositions: The left main column. This is a list of all defined Composition components in Video.tsx. The Blank template defines a single Composition, with an id == 'Empty' - Scenes: The bottom left column. We haven't talked about scenes yet... - Composition Render: The main dev zone. This is the development render of the currently selected Composition. - Composition Timeline: This is a timeline of scenes rendered in the currently selected Composition. The Composition component has a few important properties: - id: This is the name given to the Composition, used to identify the component in the development environment. - component: This is the component that the Composition renders. Different compositions can render the same component, for responsiveness for example. - durationInFrames & fps: A Composition is not defined by how long it is in time, but by how many frames it is made up of, and how fast those frames are rendered. - width & height: Together, these define the aspect ratio of our video. You could define an HD Composition with a 1920/1080 width/height, or a square still from a single frame of a Component with a 200/200 width/height for example. - defaultProps: This is the props object passed into the component when the Composition is rendered. This repository defines a super small empty component as the component-to-render for the Empty composition. Let's rename our component to HelloWorld, and create a full-fledged component to render. We'll render a simple, 4-second video, of the text "Hello, World!", in high definition, at 60fps. src/Video.tsx ` src/components/HelloWorld.tsx ` To render this to .mp4 you need to have ffmpeg installed. Adjust the package.json build command and instruct the CLI to render our HelloWorld composition, and run npm run build to create our first video! Here's a link to what this would render. It's nothing crazy, but with previous React knowledge, and with the help of Remotion, we have created a 4 second long, 60fps, 4K video! Simple animations with interpolate Rendering some static text to video doesn't make for an exciting video, so let's learn how to reach into the state of the application, and adjust the style of our text, depending on the current frame. Here are the 2 hooks we'll use to accomplish this: - useCurrentFrame: This hook returns the current frame number. - interpolate: This hook helps the user change values throughout several frames. It takes in 3 arguments, the current frame (from useCurrentFrame), a tuple designating the start and end frame for the interpolation, and another tuple defining the start and end values for the frame duration. Using these 2 hooks, we can define what the opacity of our text should be, as a function of the current frame: ` Here's a link to what this would render. We aren't rendering static text anymore. Now we have a real video! The Sequence component Videos can be made up of MANY moving parts though. Our current video only has 1 moving part, but let's add some complexity to the video and split this into 2 parts. To do this, we need to take advantage of the Sequence component. > Using a Sequence, you can time-shift certain parts of your animation and therefore make them more reusable. Sequences are also shown in the timeline and help you visually understand the structure of your video. > -- Remotion Docs We can use sequences to help us break apart our logic even further, and we can also view these sequences on our composition timeline. Here are some important props for the Sequence component: - from (required, number): The frame that the Sequence children start at. The initial frame for them is 0. - durationInFrames (optional, default: Infinity): This is how many frames a sequence is displayed. - name (optional): Name your sequences to label them in the development environment. - layout (optional, default: 'absolute-fill'): Sequences are positioned absolutely initially, use this to handle layout manually. Let's animate our "Hello, World!" a bit more: src/components/HelloWorld.tsx ` With a few sequences, we are now separating our animations, and labeling them in our dev environment. Here is the render uploaded to YouTube. Putting the 'World' in 'Hello, World!' Being able to render text is amazing, but in the animation world, models aren't drawn manually with code. Instead, they're generated using software, such as Blender for example. One of the tools we can render with using Remotion is React Three Fiber. Just like Remotion lets us render to a Video format, React Three Fiber allows us to render React components into ThreeJS, a WebGL library. With a bit of React Three Fiber logic and a publicly available model of our planet, we can put the 'World' in 'Hello, World!' Hello, World! Going into how to work with React Three Fiber is a bit out of the scope of this post, but I wanted to show just what the developer is capable of with Remotion, and rendering a spinning planet with JSX is pretty amazing. src/components/HelloWorld.tsx ` Conclusion React truly is a "Learn Once, Write Anywhere" language. The DOM is nowhere close to the only render target React is capable of. With Remotion, we've learned how to slap together some JSX and hooks, and render actual videos, programmatically. Feel free to clone the repo and play around with the logic. If you've followed along with this post, you can now proudly state that you can literally render "Hello, World!" with React!...

Oct 15, 2021

7 mins

React

Learning Paths for Next.JS Developers with Ankita Kulkarni

In this video, Rob Ocel and co-hosts Tracy Lee, Adam Rackis, and Danny Thompson talk with tech educator Ankita Kulkarni about her journey from engineering leader to full-time educator. Ankita shares insights on teaching Next.js, bridging practical knowledge gaps, and helping developers tackle real-world challenges. They discuss Next.js as a React-based framework, its benefits, and the challenges it presents for beginners. Chapters - Introduction to the Podcast and Guests 00:01 - Meet Ankita Kulkarni, Tech Educator 00:26 - Ankita's Transition to Full-Time Education 01:41 - Teaching Practical Knowledge in Next.js 03:19 - Effective Methods for Teaching Next.js 05:27 - Challenges of Being a Full-Time Educator 07:48 - Balancing Broad and Specific Examples 09:54 - Embracing Mistakes as a Teaching Tool 12:13 - Pair Programming and Mentorship 14:00 - Discussion on Next.js and Framework Adoption 16:48 - Advantages and Challenges of Next.js 18:12 - Choosing the Right Framework for Your Needs 20:35 - Impact of Next.js in React Documentation 22:26 - Learning Paths for New Developers 23:24 - The Rise of Full-Stack Web Development 25:09 - Benefits of Frameworks Abstracting Complexity 26:27 - OpenNext and Deployment Flexibility 28:06 - Ankita's Excitement for New Next.js Features 30:35 - The Future of Next.js Without Vercel 32:16 - Final Thoughts and Where to Find Everyone Online 34:21 Follow Ankita Kulkarni on Social Media Twitter: https://x.com/kulkarniankita9 YouTube: https://www.youtube.com/@kulkarniankita Sponsored by This Dot: thisdot.co...

Nov 12, 2024

2 mins

NextJSJavaScript

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 make Videos with React using Remotion

Learning Paths for Next.JS Developers with Ankita Kulkarni

Let's innovate together!

You might also like

How to make Videos with React using Remotion

Learning Paths for Next.JS Developers with Ankita Kulkarni