preface

The popular front-end Vue framework, next.js, has released its latest version, announcing the replacement of Babel with a new JS compilation tool, SWC. SWC on the function almost like Babel, specific contrast can see SWC website Comparison with Babel | SWC. However, SWC is implemented using Rust and compiles more than 10 times faster than Babel.

What is RUST?

Rust is a static compiled language that is syntactically and mechanically similar to C/C++. It was born in a short time, but it is so popular that it is called the language of Internet celebrities.

What scenarios and recruitment situations does RUST fit into?

RUST, by its nature, is fast, making it ideal for computationally intensive things. In the market, most of the companies that are already up and running are JAVA, and only the up-and-comers are willing to use new technologies. Therefore, RUST will not rise in a large scale in the short term. It will be difficult for RUST to capture the share of back-end JAVA. In the short term, RUST will only struggle in the new track. At present, RUST is the biggest demand in the blockchain industry when it comes to recruitment.

What is the relationship between RUST and the front end?

The back end of the market is RUST, but the front end is a different story. The engineering of the front end relies heavily on Webpack. But Webpack is written in JS, and most of its laoder and plugin are also written in JS. JS, a dynamic interpretive + single-threaded language, is naturally inadequate in performance. When the project is too big, webpack’s hot update and compilation can be a pain (although much better than C++ compilation). The esbuild and Vite that followed are all from different angles to solve this big trouble. Esbuild abandons JS and uses GO, a high-performance language that supports coroutines. SWC is a similar idea, but it uses RUST implementation. As we know, Webpack compilation is mostly about actual text processing, which is computationally intensive. If we cut the loaders of all JS from JS to RUST or GO, the performance optimization will be tens of times better. SWC just did what Babel did, and I think there will be more tools like this in the future.

Additionally, Rust has a close relationship with WebAssembly. WebAssembly is still in its infancy, but it’s growing fast. WebAssembly is very friendly with RUST support. Webassembly is seen as an effective way to address front-end performance issues and has great potential in computation-intensive projects such as online documentation, cloud ides, and visualization.

For the current front-end practitioner, rust is really less of a scenario, and probably more of a toolclass thing (which can be done with Node, just better rust). Learn to learn, make some data acquisition analysis tools or very useful, or their own fun to write a front-end loader (accidentally fire it).

Learn the preconditions of RUST

The barrier to entry for RUST is much higher than that for JS, so it is not recommended to learn RUST if JS does not understand it very well. Understanding these concepts is required:

  1. The difference between interpreted and static languages
  2. How does JS allocate memory for string, class, and number types
  3. What is GC, and what problems does it cause
  4. What is a pointer

If the above concepts are not very clear, then it is recommended to complete the JS knowledge, spare time to learn RUST.

Attention! Attention! Attention!

If you are going to learn Rust, think about ROI carefully. Under normal circumstances, it is not recommended to learn. With this time, it is better to learn webpack, React, and even CSS. Simply running a hello world doesn’t mean much. So I suggest you, either don’t learn, or learn more deeply. While the front-end is js, RUST is a completely different programming paradigm. Try it out and you may learn something different.

Environment configuration

All right, if you see this, you think you’re ready. Let’s get started

The first step is to set up the development environment.

Like Node, we need to download the core library. You can download it here: Get Started – Rust Programming Language (rust-lang.org) MAC can be installed directly from the command line. For Windows, you need to download the installer. In the installation process, there may be failures, do not lose heart, just install a few times. RUST is similar to Node in that Node has Node and NPM cores. Rust has RuSTC, as well as the package management tool Cargo after installation is complete, enter

cargo --version
rustc --version
Copy the code

To determine whether the installation was successful

Second, install the necessary compiled libraries

If you’re a MAC, you can skip this step. On Windows, you need a C++ build set to compile rust properly. Go to the Microsoft website to download the vs installation package, and then install the C++ related components.

Step three, try the environment

Execute them successively on the command line

Cargo new hello_cargo // Initializes a sample project CD hello_cargo // goes to the project root directory cargo build // and builds the projectCopy the code

You should see similar statements on the command line at this point

Compiling hello_cargo v0.1.0 (file:///projects/hello_cargo) Finished dev [unoptimized + debuginfo] target(s) in 2.85 secs

If error or fail appears, check to see if step 2 is not done well. At this point, execute

$./target/debug/hello_cargo # or.\target\debug\hello_cargoCopy the code

You can see the command line printing out “Hello World”

Step 4: configure the VSCode debugging environment

VSCode is a simple configuration. First, use VSCode to open the hello project you just initialized, which intelligently prompts you to install several plug-ins:

  1. RUST Rust – Visual Studio Marketplace
  2. rust-analyzer rust-analyzer – Visual Studio Marketplace
  3. CodeLLDB CodeLLDB – Visual Studio Marketplace

Others can be installed as prompted

After the plugin is installed, run it directly on F5 and you will be prompted to configure lunche. json, which VSCode will automatically generate. We delete the superfluous configurations in the configuration file, leaving only the first one deleted. Then change the rest of the configuration to:

{// Use IntelliSense to learn about related attributes. // Hover to view descriptions of existing properties. / / for more information, please visit: https://go.microsoft.com/fwlink/?linkid=830387 "version" : "0.2.0," "configurations: [{" type" : "lldb", "request": "launch", "name": "Debug executable 'hello_cargo'", "cargo": { "args": [ "build", "--bin=hello_cargo", "--package=hello_cargo" ], "filter": { "name": "hello_cargo", "kind": "bin" } }, "args": [], "program": "${workspaceFolder}/target/debug/hello_cargo", "cwd": "${workspaceFolder}" } ] }Copy the code

When the configuration is complete, you can create a breakpoint in the source code, and then run F5 to see if the breakpoint is effective.