WebAssembly 與 Rust 全端開發：建構高效能 Web 應用

– 6 分鐘閱讀

現今網頁應用日趨複雜，對於效能的要求也越來越高。WebAssembly 的出現為前端開發提供了新的可能性，允許開發者使用高效能語言如 Rust 來提升網頁應用速度。本文將會逐步引導讀者如何結合 WebAssembly 和 Rust 進行全端開發，從前端效能最佳化到後端 API 建構，提供一個完整的學習路徑。首先，我們會介紹如何設定 WebAssembly 和 Rust 的開發環境，並以圖片大小調整為例，示範 WebAssembly 在前端的應用。接著，我們將會深入 Rust 後端開發，使用 Actix-web 框架建構 RESTful API，包含資料函式庫操作、輸入驗證、錯誤處理等實務技巧，最後，我們會探討如何測試這些 API，確保其穩定性和可靠性，讓讀者能掌握全端開發的流程。

什麼是 WebAssembly？

WebAssembly（WASM）是一種新的二進位制指令格式，允許開發人員使用各種程式語言（如 C、C++、Rust 等）編寫網頁應用程式，並將其編譯為 WebAssembly 程式碼，從而在網頁瀏覽器中執行。這使得開發人員可以使用自己熟悉的語言和工具來開發高效能的網頁應用程式。

你要建造什麼？

在本章中，我們將探討如何使用 WebAssembly 開發高效能的網頁前端。首先，我們需要設定開發環境，包括安裝必要的工具和函式庫。然後，我們將建立一個簡單的 WebAssembly 專案，包括前端和後端。

設定開發環境

首先，安裝 Rust 編譯器和 WebAssembly 工具：

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source $HOME/.cargo/env
rustup target add wasm32-unknown-unknown

建立專案

接下來，建立一個新的 Rust 專案：

cargo new hello_wasm --lib

建立前端

建立一個新的 HTML 檔案 index.html，並新增以下程式碼：

<!DOCTYPE html>
<html>
<head>
    <title>Hello WebAssembly!</title>
</head>
<body>
    <script src="hello_wasm.js"></script>
</body>
</html>

重設圖片大小使用 WebAssembly

現在，讓我們使用 WebAssembly 重設圖片大小。首先，建立一個新的 Rust 模組 image.rs，並新增以下程式碼：

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn resize_image(image: &[u8], width: u32, height: u32) -> Vec<u8> {
    // 將圖片重設大小
    let mut new_image = Vec::new();
    for y in 0..height {
        for x in 0..width {
            let pixel = image[(y * width * 4 + x * 4) as usize];
            new_image.push(pixel);
        }
    }
    new_image
}

載入圖片檔案到 <canvas>

建立一個新的 JavaScript 檔案 image.js，並新增以下程式碼：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 載入圖片檔案
const image = new Image();
image.src = 'image.jpg';
image.onload = () => {
    ctx.drawImage(image, 0, 0);
};

傳遞圖片到 Wasm

建立一個新的 JavaScript 檔案 wasm.js，並新增以下程式碼：

import { resize_image } from './hello_wasm';

// 傳遞圖片到 Wasm
const image = document.getElementById('image');
const width = 256;
const height = 256;
const new_image = resize_image(image.src, width, height);

寫入整個前端使用 Rust

現在，讓我們使用 Rust 寫入整個前端。首先，建立一個新的 Rust 模組 frontend.rs，並新增以下程式碼：

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn main() {
    // 建立一個新的 HTML 檔案
    let html = r#"
        <!DOCTYPE html>
        <html>
            <head>
                <title>Hello WebAssembly!</title>
            </head>
            <body>
                <h1>Hello WebAssembly!</h1>
            </body>
        </html>
    "#;
    // 輸出 HTML 檔案
    println!("{}", html);
}

REST APIs 的設計與實作

在本章中，我們將探討 REST APIs 的設計與實作。REST（Representational State of Resource）是一種設計 API 的架構風格，它根據資源的概念，使用 HTTP 方法來操控資源。

什麼是 REST APIs？

REST APIs 是一種設計 API 的方式，它根據資源的概念，使用 HTTP 方法來操控資源。REST APIs 的目的是提供一個簡單、統一的介面，讓使用者可以存取和操控資源。

讓我們從一個簡單的例子開始。假設我們要建立一個 REST API，提供一個簡單的 “Hello World” 的訊息。下面是使用 Actix-web 框架的例子：

use actix_web::{web, App, HttpResponse, HttpServer, Responder};

async fn hello_world() -> impl Responder {
    HttpResponse::Ok().body("Hello World!")
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| {
        App::new()
            .route("/", web::get().to(hello_world))
    })
    .bind("127.0.0.1:8080")?
    .run()
    .await
}

服務靜態檔案

在某些情況下，我們需要服務靜態檔案，例如圖片、CSS 和 JavaScript 檔案。Actix-web 提供了一個簡單的方式來服務靜態檔案。下面是使用 Actix-web 服務靜態檔案的例子：

use actix_web::{web, App, HttpResponse, HttpServer, Responder};

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| {
        App::new()
            .service(actix_files::Files::new("/static", "static").index_file("index.html"))
    })
    .bind("127.0.0.1:8080")?
    .run()
    .await
}

將貓咪列表轉換為 REST API

假設我們有一個貓咪列表，想要將它轉換為 REST API。下面是使用 Actix-web 的例子：

use actix_web::{web, App, HttpResponse, HttpServer, Responder};
use serde::{Deserialize, Serialize};

#[derive(Serialize, Deserialize)]
struct Cat {
    id: i32,
    name: String,
}

async fn get_cats() -> impl Responder {
    let cats = vec![
        Cat { id: 1, name: "Whiskers".to_string() },
        Cat { id: 2, name: "Fluffy".to_string() },
    ];
    HttpResponse::Ok().json(cats)
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| {
        App::new()
            .route("/cats", web::get().to(get_cats))
    })
    .bind("127.0.0.1:8080")?
    .run()
    .await
}

使用資料函式庫

在實際應用中，我們通常需要使用資料函式庫來儲存和查詢資料。Actix-web 提供了一個簡單的方式來使用資料函式庫。下面是使用 Actix-web 和 PostgreSQL 資料函式庫的例子：

use actix_web::{web, App, HttpResponse, HttpServer, Responder};
use serde::{Deserialize, Serialize};
use sqlx::PgPool;

#[derive(Serialize, Deserialize)]
struct Cat {
    id: i32,
    name: String,
}

async fn get_cats(pool: web::Data<PgPool>) -> impl Responder {
    let cats = sqlx::query!("SELECT * FROM cats")
        .fetch_all(pool)
        .await
        .unwrap();
    HttpResponse::Ok().json(cats)
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    let pool = PgPool::connect("postgres://user:password@localhost/database")
        .await
        .unwrap();
    HttpServer::new(move || {
        App::new()
            .app_data(web::Data::new(pool.clone()))
            .route("/cats", web::get().to(get_cats))
    })
    .bind("127.0.0.1:8080")?
    .run()
    .await
}

新增貓咪資料

假設我們想要新增貓咪資料到資料函式庫中。下面是使用 Actix-web 的例子：

use actix_web::{web, App, HttpResponse, HttpServer, Responder};
use serde::{Deserialize, Serialize};
use sqlx::PgPool;

#[derive(Serialize, Deserialize)]
struct Cat {
    id: i32,
    name: String,
}

async fn add_cat(
    pool: web::Data<PgPool>,
    cat: web::Json<Cat>,
) -> impl Responder {
    sqlx::query!("INSERT INTO cats (name) VALUES ($1)", cat.name)
        .execute(pool)
        .await
        .unwrap();
    HttpResponse::Ok().body("Cat added!")
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    let pool = PgPool::connect("postgres://user:password@localhost/database")
        .await
        .unwrap();
    HttpServer::new(move || {
        App::new()
            .app_data(web::Data::new(pool.clone()))
            .route("/cats", web::post().to(add_cat))
    })
    .bind("127.0.0.1:8080")?
    .run()
    .await
}

API 測試

在開發 API 的過程中，測試是非常重要的。Actix-web 提供了一個簡單的方式來測試 API。下面是使用 Actix-web 的例子：

use actix_web::{test, web, App, HttpResponse, Responder};

async fn hello_world() -> impl Responder {
    HttpResponse::Ok().body("Hello World!")
}

#[actix_web::test]
async fn test_hello_world() {
    let app = test::init_service(App::new().route("/", web::get().to(hello_world))).await;
    let req = test::TestRequest::get().uri("/").to_request();
    let res = test::call_service(&app, req).await;
    assert_eq!(res.status(), 200);
}

建立貓咪詳細 API

假設我們想要建立一個貓咪詳細 API，提供貓咪的詳細資料。下面是使用 Actix-web 的例子：

use actix_web::{web, App, HttpResponse, HttpServer, Responder};
use serde::{Deserialize, Serialize};
use sqlx::PgPool;

#[derive(Serialize, Deserialize)]
struct Cat {
    id: i32,
    name: String,
}

async fn get_cat(
    pool: web::Data<PgPool>,
    id: web::Path<i32>,
) -> impl Responder {
    let cat = sqlx::query!("SELECT * FROM cats WHERE id = $1", id)
        .fetch_one(pool)
        .await
        .unwrap();
    HttpResponse::Ok().json(cat)
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    let pool = PgPool::connect("postgres://user:password@localhost/database")
        .await
        .unwrap();
    HttpServer::new(move || {
        App::new()
            .app_data(web::Data::new(pool.clone()))
            .route("/cats/{id}", web::get().to(get_cat))
    })
    .bind("127.0.0.1:8080")?
    .run()
    .await
}

輸入驗證

在開發 API 的過程中，輸入驗證是非常重要的。Actix-web 提供了一個簡單的方式來驗證輸入資料。下面是使用 Actix-web 的例子：

use actix_web::{web, App, HttpResponse, HttpServer, Responder};
use serde::{Deserialize, Serialize};
use validator::Validate;

#[derive(Serialize, Deserialize, Validate)]
struct Cat {
    #[validate(range(min = 1))]
    id: i32,
    #[validate(length(min = 1))]
    name: String,
}

async fn add_cat(
    cat: web::Json<Cat>,
) -> impl Responder {
    if let Err(err) = cat.validate() {
        return HttpResponse::BadRequest().body(err.to_string());
    }
    HttpResponse::Ok().body("Cat added!")
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| {
        App::new()
            .route("/cats", web::post().to(add_cat))
    })
    .bind("127.0.0.1:8080")?
    .run()
    .await
}

錯誤處理

在開發 API 的過程中，錯誤處理是非常重要的。Actix-web 提供了一個簡單的方式來處理錯誤。下面是使用 Actix-web 的例子：

use actix_web::{error, web, App, HttpResponse, HttpServer, Responder};

async fn hello_world() -> impl Responder {
    HttpResponse::Ok().body("Hello World!")
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| {
        App::new()
            .wrap(error::ErrorHandler::new())
            .route("/", web::get().to(hello_world))
    })
    .bind("127.0.0.1:8080")?
    .run()
    .await
}

使用 actix_web::error Helpers

Actix-web 提供了一個簡單的方式來處理錯誤。下面是使用 actix_web::error Helpers 的例子：

use actix_web::{error, web, App, HttpResponse, HttpServer, Responder};

async fn hello_world() -> impl Responder {
    HttpResponse::Ok().body("Hello World!")
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| {
        App::new()
            .wrap(error::ErrorHandler::new())
            .route("/", web::get().to(hello_world))
    })
    .bind("127.0.0.1:8080")?
    .run()
    .await
}

使用泛型錯誤

Actix-web 提供了一個簡單的方式來處理錯誤。下面是使用泛型錯誤的例子：

use actix_web::{error, web, App, HttpResponse, HttpServer, Responder};

async fn hello_world() -> impl Responder {
    HttpResponse::Ok().body("Hello World!")
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| {
        App::new()
            .wrap(error::ErrorHandler::new())
            .route("/", web::get().to(hello_world))
    })
    .bind("127.0.0.1:8080")?
    .run()
    .await
}

使用自訂錯誤

Actix-web 提供了一個簡單的方式來處理錯誤。下面是使用自訂錯誤的例子：

use actix_web::{error, web, App, HttpResponse, HttpServer, Responder};

async fn hello_world() -> impl Responder {
    HttpResponse::Ok().body("Hello World!")
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| {
        App::new()
            .wrap(error::ErrorHandler::new())
            .route("/", web::get().to(hello_world))
    })
    .bind("127.0.0.1:8080")?
    .run()
    .await
}

從技術架構視角來看，本文涵蓋了 WebAssembly 和 REST API 的開發，從前端效能提升到後端服務搭建，展現了現代網頁應用程式開發的完整流程。分析段落中，我們看到 WebAssembly 如何透過 Rust 實作圖片大小調整等高效能操作，以及 Actix-web 框架如何簡化 REST API 的開發，包括路由設定、資料函式庫互動、錯誤處理等關鍵環節。儘管 WebAssembly 的應用仍處於早期階段，與 JavaScript 的整合和除錯仍有待最佳化，但其效能優勢在處理密集型任務時顯著。後端方面，Actix-web 框架的非同步特性和靈活性使其成為 Rust 生態中構建高效能 REST API 的理想選擇，但開發者需要關注 Rust 語言本身的學習曲線。展望未來，隨著 WebAssembly 生態的成熟和更多工具的出現，其應用場景將更加廣泛，而 Actix-web 也將受益於 Rust 語言的發展，持續提升效能和穩定性。對於追求網頁應用程式高效能和可維護性的開發者，結合 WebAssembly 和 Actix-web 框架將是值得探索的技術方向。玄貓認為，掌握這些技術將有助於開發者在快速變化的前端和後端領域保持競爭力。

玄貓

玄貓

技術愛好者，專注於分享程式開發、雲端技術與 AI 應用的心得體會。