跳到主要內容

太讚的 Yew

專案​

  • Realworld 範例 - 使用 Rust + Yew + WebAssembly 建置的範例真實世界應用程式。它利用 Yew 最新版本的函式元件和勾子。它也支援由 Tauri 提供的桌面應用程式。
  • webapp.rs - 完全用 Rust 編寫的網頁應用程式，前端是用 Yew 建置的。
  • Rust-Full-Stack - 容易測試的 Rust 程式碼，還有部落格文章來加以說明。
  • Bucket Questions - 為愚蠢的派對遊戲完全用 Rust 編寫的網頁應用程式。
  • web-view todomvc 桌面應用程式 - 示範如何使用 yew for todomvc 編譯成 WebAssembly 並由 web-view 捆綁成輕量的 (約 2MB) 桌面應用程式，作為 Electron 的替代方案，web-view 也有 示範。
  • yew-react-example - 此專案建議如何在 Yew 元件內使用 React 元件建立網頁應用程式。
  • Kirk - 純粹 Rust WebAssembly 部落格。
  • rust-async-wasm-demo - 學習 Rust 和 async，可部署到網頁的玩具專案。
  • karaoke-rs - Rust 中簡單的網路支援卡拉 OK 播放器。
  • I Love Hue! (rs) - Yew (Rust) 中 I Love Hue 行動遊戲的複製版本。
  • yew-styles-page - 這是 yew 的框架樣式初始專案。
  • caniuse.rs - Rust 功能搜尋。
  • Rust electron yew demo - 使用 Electron 建置 Rust 基礎網頁應用程式 (Yew) 成為原生應用程式的範例。
  • covplot - 全球 COVID-19 資料的動態圖表。
  • Tanoshi - 類似 Tachiyomi 的網頁漫畫閱讀器。Tanoshi 的前端介面。
  • Minesweeper - 以 Rust、Yew 和 WebAssembly 建置的掃雷遊戲。
  • Freecell - 以 Rust 和 Yew 編寫的接龍遊戲。
  • Daydream - 以 Rust 編寫的 Matrix 小型網頁客戶端。
  • Yew-WebRTC-Chat - 使用 Yew 製作的簡單 WebRTC 聊天室。
  • Yew Fullstack Boilerplate - 對於使用 Rust 建立全端堆疊應用的極度偏見樣板。
  • Chord Quiz - 在此 Rust/Yew/WebAssembly 應用程式中練習辨識和弦。
  • RustMart - 使用 Rust、Wasm 和 Yew 編寫的單頁式應用程式 (SPA)。
  • DevAndDev - 開發人員可以在此網站上尋找配對程式設計合作夥伴。使用 Rust 和 Yew 前端介面撰寫。
  • yew-octicons - 在 Yew 專案中使用 Octicons 的簡便介面。
  • Pipe - 此應用程式是一個任務控制中心的 Rust / Wasm 客戶端網頁應用程式。
  • note-to-yew - 線上將您的標記轉換成 Yew 巨集，這也是 Yew 製作的。
  • ASCII-Hangman - 可供小孩遊玩的 Hangman 遊戲，有 ASCII 藝術獎勵。
  • dotdotyew - 以 Yew 執行的 點票，使用 Rust 強化後端 API。
  • wasm-2048 - 使用 Rust 和 Yew 執行的 2048 遊戲，並編譯成 Wasm。
  • website-wasm - 我個人的網站，使用 Yew/Wasm 以 Rust 編寫。
  • KeyPress - 一個 Rust WebAssembly 網站範例，供學習中文的英文練習。
  • yew-train-ticket - 一個 Rust WebAssembly 網路應用程式範例，基於最新的 Yew hook 和函式 API，程式碼風格與 React 函數元件非常類似。
  • yew-d3-example - 顯示與 Yew 結合的 d3 圖表。
  • Oxfeed - 一個使用 Rust 編寫的 Feed 閱讀器，前端由 Yew 負責。
  • Flow.er - 一個整合待辦事項工具的筆記本應用程式。使用 Rust、WebAssembly、Yew 和 Trunk 開發。
  • Fullstack-Rust - 一個全端 Rust 應用程式（Connect5 遊戲），使用 Actix-web、Yew、Bulma CSS 和 Diesel。
  • Sea_battle - 一個簡單的海戰遊戲範例。Rust + Yew。
  • tide-async-graphql-mongodb - 乾淨的 GraphQL 服務樣板，使用 wasm/yew 前端。
  • surfer - 基於 yew + graphql 建置的部落格，附有 即時示範網站。GraphQL 服務的後端，以及網路應用程式的前端。
  • qubit - 一個好用的計算器，基於 Rust 和 WebAssembly，即時示範。
  • Paudle - 優秀的文字遊戲 Wordle（由 Josh Wardle 所開發）的重新實作。
  • Rust algorithms - 一個網站，提供各種演算法的互動式實作（目前僅有排序演算法）。
  • Marc Portfolio - 一個軟體開發人員作品集，即時示範。
  • zzhack - 一個個人部落格，基於 Rust 和 Yew，即時示範。
  • viz.rs - 網站使用 viz 網路架構，線上展示。
  • hurlurl - 隨機縮網址，線上展示。
  • Macige - 行動應用開發 CI 流程產生器，線上展示。
  • Spaceman - gRPC 通訊協定的跨平台及圖形化用戶端。

樣板​

貨箱​

元件函式庫​

  • yew-mdc - Yew 框架的 Material Design 元件。
  • muicss-yew - Yew 框架的 MUI-CSS 元件。
  • yew-bulma - 提供根據 bulma css 函式庫建立元件的 Rust 函式庫，供使用 Yew 的專案中使用。
  • material-yew - Material Web Components 的 Yew 封裝器。
  • Yewprint - 將 blueprintjs.com 移植到 Yew。
  • ybc - 基於 Bulma CSS 架構的 Yew 元件函式庫。
  • patternfly-yew - Yew 的 Patternfly 元件。
  • yew-feather - Yew 的 Feather Icon 元件。
  • tailwind-yew-builder - 使用 docker-compose 為 Yew 建立 Tailwind CSS。亦支援 Trunk。
  • yew-components - Yew 框架的 Material Design 組件。
  • yew-chart - 根據 Yew 的繪圖庫，提供以 SVG 為基礎的組件，用以呈現圖表。

組件​

  • Yew Form - 簡化使用 Yew 處理表格的組件。
  • yew-component-size - 當父組件更改寬度/高度時，會發出事件的 Yew 組件。
  • yew-virtual-scroller - 一個用於虛擬捲動/捲動視窗的 Yew 組件。
  • yew-autoprops - proc-macro 自動從參數中為 Yew 組件衍生 Properties 結構。

Hooks​

工具​

  • Yewdux - 適用於 Yew 應用程式的 Redux 類似狀態容器。
  • reacty_yew - 透過 Typescript 類型定義，從 React 組件產生 Yew 組件。
  • styled-yew - 在 Rust 中使用 CSS，類似於 styled-components，但適用於 Yew。
  • stylist-rs - 專為 WebAssembly 應用程式設計的 CSS-in-Rust 樣式解決方案。
  • Yew Interop - 在 Yew 中非同步載入 JavaScript 和 CSS。
  • Tailwind RS - rust 中的 Tailwind 樣式追蹤器，JIT + AOT 解譯器。

Wasm​

  • wasm-bindgen - 方便 WebAssembly 模組和 JavaScript 之間的高階互動。
  • stdweb - 提供 Rust 連至 Web API 的束縛，以允許 Rust 與 JavaScript 之間的高度互操作。

工具​

  • wasm-pack - 最愛的 Rust -> WebAssembly 工作流工具。
  • wasm-pack-action - Github 動作，透過下載可執行檔來安裝 wasm-pack 以提升 CI/CD 速度。
  • wasm-bindgen-action - Github 動作，透過下載可執行檔來安裝 wasm-bindgen 以提升 CI/CD 速度。
  • cargo-web - 適用於客戶端網路的貨運子命令。
  • Trunk - 構建、打包並將您的 Rust Wasm 應用程式發送到網路。
  • trunk-action - Github 動作，透過下載可執行檔來安裝 Trunk 以提升 CI/CD 速度。
  • wabt - WebAssembly Binary Toolkit，用於 wasm-strip 和 wasm-objdump 工具，以縮小 .wasm 檔案大小。
  • binaryen - WebAssembly 編譯器基礎設施和工具鏈函式庫，用於 wasm-opt 工具，以縮小 .wasm 檔案大小。

文章​

書籍​

替代方案​

Yew 團隊很喜歡與其他專案分享想法，並且相信我們可以一起幫助彼此發揮這項令人興奮的新技術的全部潛力。

  • Draco - 一個用於使用 WebAssembly 建置客戶端網路應用程式的 Rust 函式庫。
  • Percy - 一個用於使用 Rust + WebAssembly 建置同構式網路應用程式的模組化工具組。
  • Sauron - Sauron 是用於建置網路應用程式的 HTML 網路框架。
  • Seed - 一個用於建立網路應用程式的 Rust 框架。
  • Smithy - 一個用於在 Rust 中建置 WebAssembly 應用程式的框架。
  • Dioxus - 優雅的類似 React 的函式庫，用於建置桌面、網路、行動裝置、SSR、Liveview 等使用者介面。
  • Sycamore - 一個用於使用 Rust 和 WebAssembly 建置網路應用程式的反應式函式庫。