Rust for the React Developer

wonderful world of web assembly

Rust is a wonderful language which aims to be a competitor of C++. The focus areas of rust are memory safety and high system performance. The curious case of rust is that it has no garbage collection, but claims to achieve memory safety through its enforcement of “lifetimes” for variables. Along with these features an interesting balance between imperative and functional programming style make rust quite appealing.

Reactive Applications

The Reactive Manifesto

Taking a cue from the reactive manifesto linked above, a reactive applications is one which is fault tolerant, modular, responsive, scalable. This is done through a message driven architecture. Reactive applications have been made hugely popular through React, which is a javascript library open-sourced by Facebook.

React - A JavaScript library for building user interfaces

Web Assembly

Web Assembly is another brand new technology with massive potential. The idea is that since web browsers are already created in c++ then we should be able to just ship cpp code, instead of a heavy js file, and the browsers should be able to execute them. This should, at-least on paper, make our web applications much more faster. An interesting thing to note is that along with c and c++, rust is one of primary languages where you can create web assembly code.

WebAssembly

Here comes Yew

Yew is a web framework inspired by elm and react for creating multithreaded web apps in web assembly.

DenisKolodin/yew

The awesome thing is that this is meant to be compiled into modern browser runtimes using wasm, asm.js and emscripten.

To create the development environment to try it on your own you can go through the instructions given in the below link.

raphamorim/wasm-and-rust

I am excited; I want to write some code

If this post excites you then these are the overall steps.

1. Install rust and compile web assembly for creating a development environment.

2. Create a cargo package. Add your dependencies in the .toml file.

[package]
name = "button-simple-app"
version = "0.1.0"
authors = ["joydeep bhattacharjee"]
[dependencies]
yew = { git = "https://github.com/DenisKolodin/yew" }

3. Copy paste the code to src/main.rs. This source has been modified from the yew examples.

4. run cargo web start. You now have your simple button application.

➜  button-simple-app git:(master) ✗ cargo web start
    Finished dev [unoptimized + debuginfo] target(s) in 0.10s
If you need to serve any extra files put them in the 'static' directory
in the root of your crate; they will be served alongside your application.
You can also put a 'static' directory in your 'src' directory.
Your application is being served at '/button-simple-app.js'. It will be automatically
rebuilt if you make any changes in your code.
You can access the web server at `http://[::1]:8000`.

Wow!!! Lets build something

Best of luck. 👍👍👍!!!

Thanks for reading this post. If you found this useful, please click on the claps button and share the post with your friends and colleagues.