Rust Web Assembly - Building a Simple Markdown Parser with Rust's Wasm Bindgen

Repository

https://github.com/rust-lang/rust

What Will I Learn?

• You will learn how to build a full Rust Library for Wasm Compilation
• You will learn how to make a markdown parser in Rust
• You will learn how to make a multi-file library for WASM
• You will learn about WASM's performance advantages and the extensibility of Rust
• You will learn about public and private functions and how they interact with Wasm
• You will learn how to automate many parts of the build pipeline for Rust to WASM Compilation

Requirements

System Requirements:

• Visual Studio Code or any other Text Editor with Rust language plugins
• The Rustup command line tool and the nightly Rust compiler

Required Knowledge

• Some understanding of JavaScript and Node.Js
• Some basic understanding of Rust
• A fair amount of knowledge on web technologies and how they work

Resources for Rust

• Rust Website: https://www.rust-lang.org/
• Web Assembly Website: https://webassembly.org/
• Awesome Rust: https://github.com/rust-unofficial/awesome-rust
• Wasm Bindgen Repo: https://github.com/rustwasm/wasm-bindgen

Sources

• WASM Logo: https://webassembly.org/

Difficulty

• Intermediate

Description

Outline and Overview

In this Rust Web Assembly Video tutorial, we build a very simple markdown parser with web assembly. The main advantage of making a library like this in Rust rather then writing it in JavaScript is for performance and ease of development. By building the logic of the markdown parser inside of a Web Assembly Module, we are able to gain these advantages without making our library more complicated than it has to be. The parser we built has the ability to create header tags and list elements and it can easily be extended and we also add a few little automations to make the build pipeline faster.

Writing a JavaScript library with Rust

As we saw in the last tutorial, we can interface with JavaScript functions directly from our Rust code. In this example, we decide to not use any of the JavaScript functions inside of our library. This is done because all of the logic that we need for this program can be written with Rust. The advantages of doing things in this way mainly are for the sake of performance. The more code that is compiled into WASM; the less runtime we will have to deal with.

Above is a picture of the TypeScript Typings that were generated from the wasm_bindgen command line tool. Despite us building a full module in Rust, we only have one single function exposed from the API of our library. This helps further minimize the amount of code that needs to run on the JavaScript virtual machine and it maximizes how much of our code is compiled into WASM ahead of time.

Using Functional Design Patterns for the Sake of Extensibility

Our Markdown parser library makes use of many functional design patterns which are unavailable in JavaScript with out extra libraries. We make use of pattern matching, function chaining, first class functions, generic types, and even macros. We also use a simple Rust struct to create an Object which contains our parser. This makes our code much more composable which in turn helps reduce the cost of running these functions.

Here you can see the consume_while function which works to parse the text of our application under specific conditions. By using a generic type, a first class closure and a functional guard, we are able to make this function much more general which helps with the extensibility of the code. In different the different methods of our library, we use this function with a few simple one line closures to specify the behavior of our code.

Automating the Build Process using Webpack and Yarn

In the last video, we talked about the main developer pipeline which is used to convert Rust to WASM. In this application, we take that a step further by adding a script to the package.json file. This script gives us the ability to compile the Rust library into WASM. We also are able to automate the wasm_bindgen command to generate the JavaScript glue and the TypeScript typings in one single command.

Here you can see the build-debug command that was written into the package.json file of our project. We are easily able to compose the two commands together to automate the process of building the WASM from the Rust code. With Webpack we can take this further and add watchers which will automatically compile from Rust to WASM while the developer server is running.

The source code for this project can be found here

Video Tutorial

Curriculum

• Intro to Rust Web Assembly with Rust's Wasm Bindgen Library

Proof of Work Done

https://github.com/tensor-programming/