Bucky's Code Journey

這篇文章是 2023 COSCUP Rust 議程軌之一，介紹 Rust 在後端開發的應用，以 Tide 為例。 Rust 已經連續多年成為 Stack Overflow 最受歡迎的程式語言，在 2023 年的調查也毫不意外的再度奪冠。 許多公司紛紛將 Rust 應用在產品上，例如：Amazon、Meta、Microsoft、Google 這些大公司，並且帶起一股似乎什麼都可以用 Rust 來重新改寫的風潮。 既然 Rust 這麼猛，那麼是不是也可以運用在網頁開發上呢？答案是肯定的，現在已經有許多的框架可以用來開發，想開發前端沒問題，後端框架更是如雨後春筍般的冒出來，例如：Rocket、Actix、Warp、Tide 等等。 從 JavaScript 的角度學習 Rust身為網頁開發者，多多少少都會使用 JavaScript，所以從 JavaScript 的角度來學習 Rust 會比較容易理解。 宣告變數12let x = 5; // mutableconst y = 10; // constant 123let x = 5; // immutablelet mut y = 10 ...

淺談在 2023 年的 React 還需要 Redux 嗎？前幾天在推特上看到有人提問標題這個問題，有些網友回覆 Redux 太複雜，建議改用其他的狀態管理套件。也有網友提出 React 都有 context API 來處理跨元件狀態了，根本不需要 Redux。 在這個問題上，許多開發者可能會有不同的觀點，但讓我們先從最基本的 React context 開始比較，然後再探討 Redux。 首先，我們來看看 React 的 context API。React context 提供了一種方式來共享值，例如這些值是全域的，例如主題、語言偏好等等，而不需要手動將 props 傳遞過多層。然而，當我們使用 useContext 並搭配 useReducer 來作為全域狀態管理時，所有使用該 context 的元件將會在 state 變更時重新 render，不論他們使用的 state 部分是否有改變。如果你有一個沒有被 useCallback 包裹的處理器，那麼虛擬 DOM 比對將會失敗，這些元件將會導致 DOM 更新。當然你可以有多個小的 contexts，但這樣你就會有多個狀態的來源，這可 ...

讓我們來用 React Native 和 Expo，還有 TypeScript 來寫一個計算機手機 App 吧！ 什麼是 React Native?React Native 是一個用於構建移動應用程序的 JavaScript 框架。可以讓開發者使用 ReactJS 為 iOS 和 Android 平台創建手機 App。 React Native 提供了一套預構建的組件，可以用來構建應用程序的用戶界面，使得創建移動應用程序變得快速而簡單。 什麼是 Expo?Expo 是一套用於構建和部署 React Native 應用程序的工具和服務。它為開發者提供了一個平台，可以在各種設備和平台上輕鬆設置、運行和測試他們的 React Native 應用。 Expo 還提供了一系列的 library 和 API，可用於為應用程序添加功能，如照相、推送通知等。 建立專案首先來建立專案，如果這個專案取名為 calculator，那麼就執行以下指令： 1npx create-expo-app calculator --template 因為我們要使用 TypeScript，所以我們要選擇 blank (T ...

作為一名前端工程師，由於在日常工作中經常使用 React.js，而且也非常地喜愛這個前端框架。所以，為了更加了解 React.js，並且能更精進自我，我決定選擇了「React.js 全攻略 - 入門到進階」這門課程，由五倍紅寶石舉辦，並由奶綠茶老師教導。 為什麼選擇這門課？為什麼選擇上這門課？首先是因為我本身對 React.js的興趣，希望在這門課中學到更多的知識。其次，五倍紅寶石在業界十分著名，師資團隊一字排開都是業界的大神，也都擁有豐富的教學經驗，因此我對這門課非常感興趣，也覺得可以為我的職涯帶來幫助。 這門課帶給我什麼幫助在這門課中，我學到了很多實用的知識。老師會由簡入深帶領我們一步一步學習，老師自己也準備許多有趣並且實際運用的專案。平常一些覺得枯燥乏味的部分，在幽默風趣的奶綠茶老師講解後，也都覺得非常的生動活潑。例如 React.js 元件的生命週期、處理資料與狀態管理等。這些知識不僅讓我更加了解 React.js，也知道了一些程式碼底層如何運作，對於 React.js 有非常深刻的了解。 除此之外，奶綠茶老師也教導我們一些在開發實戰的經驗與技巧，還有如何讓 React 能夠 ...

前言本文將涵蓋測試列表、測試列表內容、以及測試 App 元件。我們依然會使用 Jest + React Testing Library 來實現測試。 測試列表接下來接續上一篇未完成的測試，我們來測試一個列表的元件，這個元件會接收一個陣列，並且將陣列中的每個元素渲染成一個列表項目。 如果不想翻到上一篇文章，可以直接看這個 Demo。 那麼首先在測試之前，要先來看一下這個元件預期會怎麼呈現。 預期會透過 props 傳來一個 users 這個陣列，並且將陣列中的每個元素渲染成一個列表項目。 必須要確保是否正確呈現列表項目，所以我們可以這麼寫測試： 1234567891011121314import { render, screen, within } from '@testing-library/react'import List from "./List"test('it renders a list of users', () => { const users = [ { ...

什麼是測試？以及為什麼需要？好的，什麼是測試？ 測試的目的主要是想驗證我們所開發出來的東西是否按照預期的功能運作。 測試也是確保軟體品質的重要步驟，在撰寫完程式碼之後對其進行檢查，以確保功能是正確的。而測試也可以讓開發者在過程中確定自己的開發是否正確，既可以增加開發者的信心，也可以讓開發者在開發過程中更加清楚自己的開發方向。 當然我們可以透過手動測試來驗證，但是這樣的話會花費大量的時間，而且也不夠精準，因此我們需要一個自動化的測試工具，來幫助我們測試。 因為測試因為目的的不同，所以也有不同的種類，例如有分成 Unit Test、Integration Test、End-to-End Test 等等。當然還有其他的種類，但主要是以這三種為最常見，也最為流行的種類。 Jest 和 React Testing LibraryJestJest 是一個由 Meta 所維護的 JavaScript 單元測試框架，由於提供了基於 JavaScript 的測試環境，適合讓開發 JavaScript 的程式進行測試，例如三大前端框架 React、Vue、Angular 都可以使用。它具有自動化測試、快速 ...

終於到最後一天了，看到這篇文章覺得很有趣，所以今天我們來玩一下 Rust 跟 React 的結合吧！ 開始專案首先我們先建立一個新的專案，這邊我們使用 create-react-app 來建立一個新的專案，並且使用 yarn 來安裝相依套件。 123$ yarn create react-app rust-react$ cd rust-react$ yarn 建立 Rust接下來我們在專案中建立一個 Rust 的 library： 1$ cargo new wasm-lib --lib 然後會在專案中看到一個 wasm-lib 的資料夾，裡面會有一個 src 資料夾，裡面會有一個 lib.rs 的檔案，這個檔案就是我們的 Rust library。 因為我們預計想要做一個可以點擊加減的按鈕，然後回傳計算結果，所以我們可以在 lib.rs 中加入： 12345678pub fn calculator(a: i32, b: i32) -> i32 { a + b}#[test]fn cal_test() { assert_eq!(1 + ...

今天是我們一起學習 Rust 的第 29 天了，前面我們玩了很多後端的東西，今天我們來玩一下前端的東西吧！ WebAssembly在開始之前，想先介紹一下 WebAssembly，它是一種可以在瀏覽器中執行的程式語言，它可以讓我們在瀏覽器中執行非常複雜的程式，而且它的執行速度也非常快，所以我們可以在瀏覽器中執行一些比較複雜的運算，而不會影響到瀏覽器的體驗。 YewYew 是一個可以讓我們在 Rust 中使用 WebAssembly 的框架，它可以讓我們在 Rust 中撰寫前端的程式，並且可以編譯成 WebAssembly，讓我們在瀏覽器中執行。 安裝 Yew那麼我們要如何使用 Yew 來開發前端的程式呢？按照官網的指示，我們要先安裝以下的東西： WebAssembly1$ rustup target add wasm32-unknown-unknown Trunk1$ cargo install trunk 開新專案1$ cargo new yew-demo 然後在 Cargo.toml 中加入以下的內容： 12[dependencies]yew = "0.19&quo ...

我們今天要來做 Auth，一個基本的身分驗證功能，不想要讓任何人都可以隨便使用我們的 API。 安裝套件因為我們驗證的處理會使用到 base64 編碼，所以首先我們先在 Cargo.toml 加入 base64 這個 crate。 12[dependencies]base64 = "0.13" 由於目前 main.rs 中的 code 有點多，所以我們另外開一個檔案來處理。直接在 src 資料夾下新增一個 auth.rs 檔案，並且在 main.rs 中加入 mod auth;。 在 auth.rs 中我們先來定義一個 BasicAuth 的 struct，並且在裡面定義一個使用者名稱和密碼的欄位。 1234pub struct BasicAuth { username: String, password: String,} 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455use ...

昨天我們用已經用 Rocket 建立了一個 server，並且可以接收回傳 JSON，今天就來了解一下怎麼使用 Rocket 建立一個 RESTful API。 RESTful API我們會建立一個簡單的 Restful API 的範例，分別會用到 GET、POST、PUT、DELETE 這四個 HTTP method，接下來我們就來看看怎麼實作。 分別建立以下的函式，這邊使用 #[get]、#[post]、#[put]、#[delete] 來指定 HTTP method： 123456789101112131415161718192021222324#[get("/demo")]fn get_demo() -> Value { json!([{ "id": 1, "name": "Bucky" }, { "id": 2, "name": "Tom" }])}#[get(&qu ...