I have thoroughly and systematically studied the fundamentals of Rust as well as various eco-friendly technical solutions. My initial aim in learning Rust was to leverage its capability to support native-level development for HarmonyOS applications, thereby building a strong technical foundation for advanced HarmonyOS developers.

However, if you don't educate yourself, you'll be unprepared and stunned when you finally discover that the Rust ecosystem is making its way into every corner of front-end development with an undeniable force, all-round and no dead ends. The key point to note is that, thanks to its latecomer advantage, these technical solutions are frequently more advanced, more scientifically sound, and exhibit better performance than the current front-end options available....

Farm

Farm is a highly efficient build engine developed in Rust. According to its marketing materials, it boasts speeds over 10 times faster than Webpack and 5 times quicker than Vite. Clearly, this front-end project build tool aims to precisely compete with Vite.

Because Vite uses a compile-on-request approach for project modules without bundling the source code, the Byte Architecture team has observed that for large projects, the initial page loading time with Vite can be quite lengthy, sometimes taking tens of seconds. When the page is first loaded, it has to load a significant number of modules, resulting in extremely slow performance during refreshes. This massive volume of requests might cause the browser to crash, thereby negatively impacting the development experience.

In the development environment, vite uses esbuild for pre-compilation, while in the production environment, bundler rollup is used. These different processing methods can sometimes lead to inconsistencies between the Development Environment and online behavior. When such inconsistencies occur, they can result in significant troubleshooting efforts.

To address the shortcomings of Vite, Farm utilizes Rust to re-engineer the compilation of CSS/TS/JS/Sass. This allows for project launch times that can be measured in milliseconds. In the majority of instances, it manages to keep HMR time under 10ms.

Turbopack

When compared to Farm, Turbopack is considered more reliable and has garnered more attention, thanks to the backing of next.js.

Turbopack is another front-end project build tool that leverages Rust. It utilizes a novel incremental architecture to streamline the development process by only focusing on essential resources during packaging. This results in significantly faster startup and HMR speeds compared to Vite.

On an app featuring 3000 modules, Turbopack completes the task in just 1.8 seconds, whereas Vite requires 11.4 seconds.

Turbopack is brought to you by the Vercel team and is dedicated to enhancing the speed of the Next.js packaging tool. The long-term aim is to eventually take over from webpack, positioning it as the next-gen front-end packaging tool. As Next.js continues to grow in maturity and popularity, it will propel Turbopack to become a more dependable packaging solution.

Rspack

Rspack is a packaging tool created by the Byte team. Similar to Turbopack, it leverages the high-performance capabilities of the Rust language, substantially boosting packaging speed.

Unlike Turbopack, Rspack has opted to focus on maintaining compatibility with the webpack ecosystem. While this decision might introduce some performance overhead, it's generally manageable in real-world business scenarios. Moreover, this compatibility allows Rspack to seamlessly integrate with higher-level frameworks and ecosystems, facilitating gradual migration for businesses.

At present, the Rspack development team is actively looking to expand their roster. They clearly have a well-defined strategy for their future growth.

Vite is refactoring with rust

Vite made quite a splash as a next-gen high-performance packaging tool when it was first introduced. However, it couldn't keep up with the various crazy roll kings powered by Rust that quickly overtook it. As a result, Vite found itself struggling in the background, almost getting trampled upon. To avoid being left too far behind in terms of performance, the Vite team is now working on various Rust-based alternatives to address its current challenges.

Rolldown

The Vite team is currently working on Rolldown and has made it available as an open-source project. This new tool, built with Rust, serves as an alternative to Rollup. The primary aim is to enhance local-level performance while ensuring it remains compatible with Rollup. The long-term plan is to seamlessly transition Vite to Rolldown with minimal disruption for Vite users.

Currently, Vite is under significant pressure to accomplish the goal of rust refactoring. To address this, the Vite team has outlined four stages to facilitate this effort.

1. Swap out esbuild 2. Swap out Rollup 3. Leverage Rust for built-in handling of common tasks like compiling ts, JSX, and more 4. Redesign Vite entirely using Rust

Leptos

Leptos is a framework for React and Solid developed in Rust. It offers precise, fine-grained reactive updates using signals.

The basic grammar is as follows:

#[component]
fn App() -> impl IntoView {
  let (count, set_count) = create_signal(0);  view! {
    <button 
      on:click=move |_| set_count.update(|n| *n += 1)
    >
      "click me"
    </button>    <p>
      <strong>"Reactive"</strong>
      {count}
    </p>
  }
}

Leptos shares a strong resemblance with Solid when it comes to grammar. Nevertheless, it stands out with more thoughtful grammatical details, making it a more logical choice than Solid. Its semantics are more intuitive, which results in more efficient compilation leveraging Rust.

#[component]
fn ProgressBar(
  #[prop(default = 100)]
  max: u16,
  #[prop(into)]
  progress: Signal<i32>
) -> impl IntoView {
  view! {
    <progress max=max value=progress />
  }
}

Despite its strong performance and advanced design, Leptos, which is built on Rust, comes with a significant initial cost. This could present numerous challenges in promoting it. Nevertheless, this hasn't dampened the enthusiasm of many programmers.

As a developer who genuinely enjoys working with Leptos, I see it as a key project for honing my Rust syntax skills. Since front-end development is a domain we are quite comfortable with, leveraging Leptos for learning Rust allows us to be more efficient and effective.

Certainly, there's much more to uncover with this tool, especially considering the official documentation describes it as a full Stack framework. However, I haven't delved deeply into it yet, so I still need to spend more time learning it to fully grasp its capabilities.

dioxus

Dioxus is an ambitious framework designed for cross-platform client development and is also capable of supporting full stack development. While it shares some similarities with Leptos in terms of implementation principles and syntax design, its approach to UI syntax is entirely unique.

A simple example can be seen

fn app() -> Element {
  let mut count = use_signal(|| 0);  rsx! {
    h1 { "High-Five counter: {count}" }
    button { onclick: move |_| count += 1, "Up high!" }
    button { onclick: move |_| count -= 1, "Down low!" }
  }
}

This grammar design is clearly intended to bring global consistency. Its goal is to encompass every possible scenario, including web development, mobile app development, and desktop app creation.

The straightforward and hands-on impression is that the framework seems to mimic React too closely. As someone who knows React well, this makes it easier for me to learn compared to Leptos.

Tauri

Tauri is an alternative to Electron.

Electron faces two major challenges: its package size is quite hefty, and its memory usage is significant. As a result, many alternatives have emerged. In contrast to some of the Rust frameworks mentioned previously, Tauri has reached a level of maturity and is now being used in numerous commercial projects.

Most importantly, I've begun encouraging my students to learn and incorporate it as a key project highlight. This approach aims to help them navigate the increasingly competitive interview landscape. And the results have been promising. Looking at the interview outcomes over the past six months, it's clear that many local companies are starting to recognize the advantages that Tauri offers.

By opting out of using the large frameworks of Chromium and Node.js, Rust significantly decreases the package size. For instance, a project that might be 60MB in Electron can shrink down to just 4MB. Moreover, memory usage sees a reduction, plummeting from 500MB to approximately 150MB.

Servo

This browser project, built using Rust, aims to replace Chrome. Initially, it was an experimental initiative by Mozilla but was suspended for a long time due to insufficient funding. With Rust gaining traction, the project is ramping up its efforts, and the latest version updates are rolling out quickly. Currently, Servo is under the management of the Linux Foundation.

Servo strives to develop a large-scale parallel computing page rendering mode to speed up various processes like rendering, layout, HTML parsing, and image decoding. According to tests conducted on the Arm architecture, Servo's performance significantly surpasses that of Chromium.

After downloading this browser to give it a try, I discovered it was still in a very basic stage. Key UI features were missing, and numerous page layouts were disorganized.

It can be noted as something temporarily worth watching, with significant growth potential. Even if utilized, it might still be at an early stage.

Deno

Deno, a JavaScript runtime, is constructed using Rust. It's developed by the same creator behind Node.js. The newest iteration of Deno is likewise built with Rust.

For me, the most appealing aspect of Deno is its inherent native support for TypeScript and compatibility with JSX/TSX. As a result, I am quite hopeful about Deno's future growth, which continues to improve steadily. However, it’s important to note that its current ecosystem still falls short when compared to Node.

Summary

Rust is clearly making its way into all parts of front-end development. While it still has room to grow in certain areas, it has demonstrated promise and, in some respects, has already proven to have distinct benefits.

I believe front-end development can no longer ignore the existence of Rust. Thanks to its exceptional performance and strong security features, Rust has gained significant recognition across multiple fields, including operating systems, AI, game development, servers, inter-app communication solutions, and high-performance web applications. The community is highly active, and the ecosystem is rapidly evolving.

Thus, beginning from the end of last year up until now, I've been deeply focused on mastering Rust. In general, approaching Rust with a background in front-end development feels quite manageable. Grasping all the fundamental syntax takes roughly a day, yet having a precise comprehension of memory is crucial. If memory concepts are unclear, you might find learning Rust to be challenging.

After that, it's essential to dedicate additional time to understanding the development mindset and ecosystem of Rust. For those interested in front-end development, Leptos provides an excellent project for both learning and practice.