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

in utopian-io •  4 months ago

wasm_logo.png

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
Sources

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.

wasm_ts.png

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.

consume_while.png

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.

package.png

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

Proof of Work Done

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

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Great video tutorial series. Your explanations are excellent, as usual. I like that the make the focus "Building a Simple Markdown Parser." I could see that many users would find creating a tool like this very useful both in learning Rust but also as a personal Markdown tool.

There was some minor distortions in your audio at some places. You can hear it at: 0:02, 1:44, 18:16, 21:21. Not sure what could have caused this.

Cheers,
Bucky

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

·

Hey bucky, thanks for going through all of my tutorials in such a quick fashion. Its very possible (probable even) that the distortion was a result of my rushed editing job on this particular video. I will make sure to be more careful in that regard in the future.

·
·

No worries, @tensor. This is a perfectly acceptable amount of distortion in a tutorial of this length. I am sure you will figure out the cause. :)

WARNING! The comment below by @erudire leads to a known phishing site that could steal your account.
Do not open links from users you do not trust. Do not provide your private keys to any third party websites.

·

nice, it seems you are the fastest at detecting fishing links on steem.

WARNING - The message you received from @erudire is a CONFIRMED SCAM!
DO NOT FOLLOW any instruction and DO NOT CLICK on any link in the comment!

For more information about this scam, read this post:
https://steemit.com/steemit/@arcange/phishing-site-reported-steem-link-premium

If you find my work to protect you and the community valuable, please consider to upvote this warning or to vote for my witness.

Nice! Eager to see wasm version of markdown-parser in NPM registry 😉

·

There is actually already one there I believe. Also you can wrap any rust library like common mark in the wasm wrapper and just put it onto npm.

Hey @tensor
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!