Awesome Yew
Yewを扱う資料や関連プロジェクトをまとめたAwesomeリストです。
目次
公式
- Yew - クライアント Web アプリを構築する Rust / WebAssembly フレームワーク。
- ライブデモ - todomvc のデモ。
- サンプル - 公式リポジトリに含まれる小規模なサンプル。
- API ドキュメント - docs.rs 上のドキュメント。
- Web サイト - 公式 Web サイト。
- チャットルーム - 活発で、質問するのに適した場所です。
- Reddit - 専用の Subreddit。
- 資金面での貢献 - 資金面のコントリビューターになり、コミュニティの維持を支援できます。
- Playground - Yew のオンライン Playground。
プロジェクト
- Realworld example - Rust + Yew + WebAssembly で構築された模範的な実世界アプリ。Yew の最新の
function componentsとhooksを利用しています。Tauri によるデスクトップアプリにも対応します。 - webapp.rs - 完全に Rust で書かれ、フロントエンドを Yew で構築した Web アプリケーション。
- Rust-Full-Stack - テストしやすく動作する Rust コードと、その解説ブログ記事。
- Bucket Questions - 気軽なパーティーゲーム向けに、すべて Rust で書かれた Web アプリ。
- web-view todomvc desktop app - WebAssembly にコンパイルされる todomvc に Yew を使い、Electron の代わりに web-view で軽量(約 2 MB)なデスクトップアプリとしてバンドルするデモ。web-view にもデモがあります。
- yew-react-example - Yew コンポーネント内で React コンポーネントを使う Web アプリの作成方法を示すプロジェクト。
- Kirk - Rust WebAssembly 製のブログ。
- rust-async-wasm-demo - Web にデプロイできる、Rust と async を学ぶための小規模プロジェクト。
- karaoke-rs - Rust 製のシンプルなネットワーク対応カラオケプレーヤー。
- I Love Hue! (rs) - モバイルゲーム I Love Hue を Yew(Rust)で再現。
- yew-styles-page - Yew 向けフレームワークスタイルの初期プロジェクト。
- caniuse.rs - Rust の機能検索。
- Rust electron yew demo - Rust ベースの Web アプリ(Yew)を Electron でネイティブアプリ化する例。
- covplot - 世界の COVID-19 データを表示するライブグラフ。
- Minesweeper - Rust、Yew、WebAssembly で構築されたマインスイーパー。
- Freecell - Rust と Yew で書かれたペイシェンスゲーム。
- Yew-WebRTC-Chat - Yew で作られたシンプルな WebRTC チャット。
- Yew Fullstack Boilerplate - Rust でフルスタックアプリを作成するための、設計方針が明確なボイラープレート。
- Chord Quiz - Rust/Yew/WebAssembly アプリでコードの聞き分けを練習。
- RustMart - Rust、Wasm、Yew で書かれたシングルページアプリケーション(SPA)。
- DevAndDev - 開発者がペアプログラミング相手を探せる Web サイト。Rust 製で、フロントエンドは Yew。
- yew-octicons - Yew プロジェクトで Octicons を簡単に使うためのインターフェース。
- Pipe - タスク管理センターとなる Rust / Wasm クライアント Web アプリ。
- note-to-yew - マークアップをオンラインで Yew マクロに変換。自身も Yew 製。
- ASCII-Hangman - ASCII アートのご褒美付きで設定可能な子ども向けハングマンゲーム。
- dotdotyew - Yew を使ったドット投票。バックエンド API は Rust 製。
- wasm-2048 - Rust と Yew で実装し、Wasm にコンパイルした 2048 ゲーム。
- website-wasm - Yew/Wasm を通じて Rust で書かれた個人 Web サイト。
- KeyPress - 中国語話者が英語を練習するための Rust WebAssembly Web サイト例。
- yew-train-ticket - Yew の最新フックと関数 API を基盤にした Rust WebAssembly Web アプリの例。コードスタイルは React Function Component に非常によく似ています。
- yew-d3-example - Yew で d3 チャートを表示する例。
- Oxfeed - Yew フロントエンドを持つ Rust 製フィードリーダー。
- Flow.er - Todo リスト機能を統合したノートブックアプリ。Rust、WebAssembly、Yew、Trunk で開発。
- Fullstack-Rust - Actix-web、Yew、Bulma CSS、Diesel を使ったフルスタック Rust アプリ(Connect5 ゲーム)。
- Sea_battle - 海戦ゲームのシンプルな例。Rust + Yew。
- tide-async-graphql-mongodb - wasm/yew フロントエンドを備えた GraphQL サービス向けの簡潔なボイラープレート。
- surfer - yew + graphql で構築されたブログ。ライブデモサイトあり。GraphQL サービスのバックエンドと Web アプリのフロントエンドを提供します。
- qubit - Rust と WebAssembly を基盤とする便利な電卓。ライブデモ。
- Paudle - Josh Wardle による優れた単語ゲーム Wordle の再実装。
- Rust algorithms - さまざまなアルゴリズムを対話的に実装した Web サイト。
- Marc Portfolio - ソフトウェア開発者のポートフォリオ。ライブデモ。
- zzhack - Rust と Yew を基盤とする個人ブログ。ライブデモ。
- Rquote - Rust と WebAssembly で構築され、Animechan API からアニメの引用を取得する Web アプリ。ライブデモ。
- yew-ssr-tide - tide と surf を使った Yew のサーバーサイドレンダリング例。Yew の開発版が必要です。
- yew-ssr-actix-web - actix-web と reqwest を使った Yew のサーバーサイドレンダリング例。Yew の開発版が必要です。
- PixelGuesser - 画像の内容をできるだけ早く当てる実生活向けパーティーゲーム。
- Crabtyper - Rust で書かれたタイピング速度測定 Web アプリ。
- We-Come Monorepo - wecome KM ITB のモノレポ。ライブデモ。
- blog-rs - フロントエンドとバックエンドをすべて Rust で書いたブログシステム。バックエンドは Warp、フロントエンドは Yew(WASM)。
- mb2 - Yew クライアントを備えたポーカーサーバー。クライアントを見るには
Demoボタン、続いてStartをクリックします。 - Puzzle Cube - Rust と Yew を使ったルービックキューブソルバー。ライブデモ。
- CubeShuffle - Rust、Yew、Bulma、Tauri で構築されたカードゲーム用シャッフルユーティリティ。
- Rust Audio - ブラウザー内で Rust/WASM を使うリアルタイム音声処理/合成。ライブデモ。
- Kiomet - タワーを占領して領土を広げるオンラインリアルタイム戦略ゲーム。
- Portfolio website - Spencer Imbleau によるアクセシビリティ組み込みのポートフォリオ SPA。
- tchatche.rs - Yew と Axum で構築された WebSocket チャットアプリ。
- viz.rs - viz Web フレームワークの Web サイト。ライブデモ。
- theiskaa.com - Yew フレームワークの実世界での実装。theiskaa.com で公開。
- live-ask.com - リアルタイムのイベント/ミートアップ Q&A プラットフォーム。live-ask.com で公開。
- Sumi - Yew と Actix で構築された複数ユーザー対応の課題追跡・ナレッジベースアプリ。
- hurlurl - ランダム化機能を持つリンク短縮サービス。ライブデモ。
- Macige - モバイルアプリ開発向け CI ワークフロー生成ツール。ライブデモ。
- Spaceman - 快適に使え、見た目も美しいクロスプラットフォーム gRPC クライアント。
- Crypto-helper - クライアント側でデータのハッシュ化、暗号化、署名ができる Web アプリ。JWT デバッガーも同梱。Web サイト。
- zoom-rs - 研究目的で Rust により書かれた Zoom クローン。
- Ubiquity - Yew、Tauri、Tailwind、DaisyUI で構築されたオープンソースのクロスプラットフォーム Markdown エディター。Web アプリ。
- demo_web_zip_wasm - WebAssembly を使い、ブラウザー内で ZIP アーカイブを作成するシンプルなサンプルプログラム。ライブデモ。
- RustedLessPass - ステートレスなパスワードマネージャー。Web アプリ。
- windows-terminal-theme-generator - Windows Terminal テーマの作成を簡単にします。ライブデモ
- SandCat - 基本的な友人システム、1 対 1 チャット、グループチャット、1 対 1 の音声/ビデオ通話など、IM アプリの基本機能を主に実装。i18n に対応し、現在は中国語と英語を切り替えられます。
- PinePods - 複数ユーザーに対応し、クライアントが接続する中央データベースを利用する Rust ベースのポッドキャスト管理システム。
- 0721 - Rust で書かれた画像ホスティングエンジン。
- Hikari - あらゆるもののフロントエンド。
- simply-view-image-for-python-debugging - Python のデバッグ時に画像変数の画像を簡単に表示する Visual Studio Code 拡張機能。
- Mindsweeper - 原則に基づいて再構成したマインスイーパー。ライブデモ。
- scap-rs - Rust で実装された National Vulnerability Database(NVD)。ライブデモ。
- Sentry Relay - Sentry SDK と Sentry サーバーの一部機能をプロキシプロセスへ移すサービス。
- Syre - 科学データの管理と洞察。
- candle-wasm-examples - Candle は、パフォーマンス(GPU 対応を含む)と使いやすさを重視した Rust 向けのミニマルな ML フレームワークです。オンラインデモ:whisper、LLaMA2、T5、yolo、Segment Anythingをお試しください。
- chipbox - Rust で書かれたオープンソースのデスクトップ DAW。
- Taxy - TCP/HTTP/TLS/WebSocket に対応し、WebUI を内蔵した Rust 製リバースプロキシサーバー。
- Proxelar - ネットワークトラフィックの可視化を目指す、初期段階の Rust ベース Man-in-the-Middle プロキシ。
- diff.rs - Rust クレートのバージョン間差分を表示する Web アプリ。Yew で実装され、WebAssembly として完全にブラウザー内で動作します。ライブデモ。
- konnektoren.help - ゲーム化された課題と地図ベースのインターフェースを備えた、ドイツ語文法学習用の対話型 Web アプリ。Web アプリ
- layout-viewer - ズームとパン操作で集積回路のレイアウトを調査。
- Google Wasefire - 開発者体験を重視した安全なファームウェアフレームワーク。
- Apache Iggy - レーザー級の速度を持つ超高効率メッセージストリーミング。
テンプレート
- Create Yew App - コマンド
npx create-yew-app my-appを 1 つ実行してモダンな Yew Web アプリをセットアップ。 - yew-wasm-pack-template - wasm-pack と組み合わせる Yew プロジェクトの開始用テンプレート。
- yew-wasm-pack-minimal - wasm-bindgen と wasm-pack を使う Yew プロジェクトの最小テンプレート。
- yew-parcel-template - Yew-Router と Parcel を備えた Awesome Yew アプリケーション。
- yew-template-for-github-io - CSS に Tailwind と webpack、ビルドと配信に Trunk を使い、github.io へ直接デプロイできる Yew プロジェクト用テンプレート。
- tailwindcss-yew-template - Yew で Tailwindcss を使うためのシンプルな構成。
- axum-yew-setup - フルスタック Rust Web アプリ向けに Axum と Yew を設定するスタータープロジェクト。
- rust-yew-axum-tauri-desktop - Rust + Yew + Axum + Tauri によるデスクトップアプリ向けフルスタック Rust 開発。
- Yew PWA Minimal - Yew を使った最小限の Progressive Web App。
- Yew HTTP Starter - シンプルな HTTP メッセージと便利な補助コメントを備えた Yew テンプレート。
- Yew minimlistic template - Yew プロジェクトをすばやく始めるためのミニマルなテンプレート。
クレート
コンポーネントライブラリ
- yew-mdc - Yew フレームワーク向け Material Design Components。
- muicss-yew - Yew フレームワーク向け MUI-CSS Components。
- yew-bulma - Yew を使うプロジェクト向けに Bulma CSS ベースのコンポーネントを提供する Rust ライブラリ。
- material-yew - Material Web Components の Yew ラッパー。
- Yewprint - blueprintjs.com の Yew 移植版。
- ybc - Bulma CSS フレームワークを基盤とする Yew コンポーネントライブラリ。
- patternfly-yew - Yew 向け Patternfly コンポーネント。
- yew-feather - Yew 向け Feather Icons コンポーネント。
- tailwind-yew-builder - docker-compose を使って Yew 向け Tailwind CSS をビルド。Trunk にも対応。
- yew-components - Yew フレームワーク向け Material Design Components。
- yew-chart - チャート描画用の SVG ベースコンポーネントを提供する Yew ベースのチャートライブラリ。
- tailyew - DaisyUI(tailwindcss ベース)コンポーネントの Yew ラッパー。
- yew-duskmoon-ui - Duskmoon UI コンポーネントライブラリ。
stylistを使って CSS をコンポーネントへ埋め込むため、追加の CSS ファイルは不要です。ライブデモ。 - yew-bootstrap - Bootstrap 5 コンポーネントライブラリの Yew ラッパー。
- Zu - Material Design を実装した Yew Web コンポーネント。
- yew-nav-link - アプリケーション内の現在のルートに基づき、アクティブ状態を認識するナビゲーションリンク。
- Rust Lucide - コミュニティ製の美しく一貫したアイコンツールキット Lucide の Yew 移植版。
- Rust Radix - 高品質でアクセシブルな UI を構築するためのコンポーネント、アイコン、色、テンプレートのライブラリ Radix の Yew 移植版。
- Rust shadcn/ui - アプリへコピー&ペーストできる美しいデザインのコンポーネントライブラリ shadcn/ui の Yew 移植版。
コンポーネント
- Yew Form - Yew でのフォーム処理を簡素化するコンポーネント。
- yew-component-size - 親コンポーネントの幅/高さが変わるとイベントを発行する Yew コンポーネント。
- yew-virtual-scroller - 仮想スクロール/スクロールウィンドウ化のための Yew コンポーネント。
- yew-oauth2 - 特定の CSS フレームワークに依存しない素の Yew OAuth2/OpenID Connect コンポーネント。
- yew-scroll-area - Yew 向けカスタムスクロール領域。
フック
- yew-hooks - streamich/react-use と alibaba/hooks に着想を得た Yew 向けカスタム Hooks ライブラリ。
- yew-side-effect - react-side-effect と react-helmet に着想を得た、Yew アプリケーションの副作用を調整するライブラリ。
- Bounce - Redux と Recoil に着想を得た、Yew 向けの扱いやすい状態管理ライブラリ。
- yewv - パフォーマンスと簡潔さを最優先に構築された、非常に高速な Yew 向け状態管理モジュール。
JavaScript ライブラリの移植
- Plotly.rs - 人気のある Plotly チャートライブラリの Rust バインディング。
- ag-grid-rs - AG Grid データテーブルライブラリの Rust バインディング。
- popper-rs - Rust 向け Popper JS バインディング。
ユーティリティ
- Yewdux - Yew アプリ向けの Redux 風状態コンテナ。
- reacty_yew - TypeScript の型定義を介して React コンポーネントから Yew コンポーネントを生成。
- styled-yew - styled-components に似た Yew 向け CSS in Rust。
- stylist-rs - WebAssembly アプリケーション向け CSS-in-Rust スタイリングソリューション。
- Yew Interop - Yew で JavaScript と CSS を非同期に読み込み。
- Tailwind RS - Rust の Tailwind スタイルトレーサー。JIT + AOT インタープリター。
- yew-style-in-rs - Yew 向け Rust 製スコープ CSS。
- yew_icons - Yew アプリへさまざまな SVG アイコン(Feather/Font Awesome/Octicons)を簡単に組み込み。
- Yew-Template - Yew 使用時に HTML と Rust コードを分離するためのクレート。
- yew-nested-router - Yew 0.20 に対応したネスト可能なルーター。
- turf - CSS Modules に着想を得た、マクロベースのコンパイル時 SCSS トランスパイル、CSS 圧縮、クラス名一意化ツールチェーン。
- browser-panic-hook - エンドユーザーに配慮した形で失敗を表示できる、ブラウザー環境向けパニックハンドラー。
- Rust Floating UI - ツールチップ、ポップオーバー、ドロップダウンなどの「浮動」要素を作成するためのライブラリ。
Wasm
- wasm-bindgen - WebAssembly モジュールと JavaScript の高水準な連携を支援。
- stdweb - Web API の Rust バインディングを提供し、Rust と JavaScript の高度な相互運用を可能にします。
- tauri-sys - wasm-bindgen を使うプロジェクト向けの Tauri API 生バインディング。
フレームワーク
- stackable - Yew 向けのフレームワーク体験。
ツール
- wasm-pack - Rust から WebAssembly への定番ワークフローツール。
- wasm-pack-action - 実行ファイルをダウンロードして
wasm-packをインストールし、CI/CD を高速化する GitHub Action。 - wasm-bindgen-action - 実行ファイルをダウンロードして
wasm-bindgenをインストールし、CI/CD を高速化する GitHub Action。 - cargo-web - クライアントサイド Web 向けの Cargo サブコマンド。
- Trunk - Rust Wasm アプリケーションをビルド、バンドルし、Web へ配信。
- trunk-action - 実行ファイルをダウンロードして
Trunkをインストールし、CI/CD を高速化する GitHub Action。 - wabt - .wasm ファイルサイズを削減する
wasm-stripとwasm-objdumpを含む WebAssembly Binary Toolkit。 - binaryen - .wasm ファイルサイズを削減する
wasm-optを含む、WebAssembly 向けコンパイラー基盤・ツールチェーンライブラリ。 - Tauri - 主要デスクトッププラットフォーム向けの小さく非常に高速なバイナリーを構築するフレームワーク。HTML、JS、CSS にコンパイルできる任意のフロントエンドフレームワークを UI 構築に統合できます。バックエンドは、フロントエンドから操作できる API を持つ Rust 製バイナリーです。
- yew-fmt - Yew HTML を整形するための、設定可能な
rustfmt拡張。
記事
- Yew で Rust フロントエンドを構築しよう
- Rust Yew の使い方
- Rust でモーダルを使う方法
- Rust フロントエンドでルーターを使う方法
- Rust フロントエンドをモジュール化する方法
- Rust フロントエンドで NPM パッケージを使う方法
- Rust フロントエンドで Markdown を使う方法
- Yew によるフルスタック Rust
- フルスタック Rust コードの書き方
- Rust Yew fetch API で YouTube vlog を表示する方法
- Rust Yew mounted API でブログ記事を表示する方法
- 完全に Rust で作る Web アプリケーション
- Yew - Rust & WebAsse フロントエンドフレームワーク
- Tauri と Yew を使って Rust でデスクトップアプリを作成
- Christopher Hunt と Kiki Carter による実世界アプリでの Yew コード解説動画
- Yew に Tailwind を追加
コース
- full-stack-todo-rust-course - Yew のコースを含むフルスタック Rust コース。
書籍
- The WebAssembly Book - Web を扱い、.wasm ファイルを生成する方法。
- The wasm-bindgen Guide - Rust と JavaScript API をバインドする方法。
- The wasm-pack Guide - Rust 生成の WebAssembly をビルドし扱う方法。
- Programming WebAssembly with Rust - Yew でアプリを作成する章
Advanced JavaScript Integration with Yewを収録。 - Creative Projects for Rust Programmers - 第 5 章は
Creating a Client-Side WebAssembly App Using Yew。 - Server-Side WebAssembly - WebAssembly コンポーネントと WebAssembly System Interface(WASI)を使って Web バックエンドを構築する方法。
代替
Yew チームは他のプロジェクトとのアイデア共有を歓迎しており、この刺激的な新技術の可能性を最大限に引き出すために互いに協力できると考えています。
- Draco - WebAssembly でクライアントサイド Web アプリケーションを構築する Rust ライブラリ。
- Percy - Rust + WebAssembly でアイソモーフィック Web アプリを構築するモジュール式ツールキット。
- Sauron - Web アプリ構築用の HTML Web フレームワーク。
- Seed - Web アプリを作成する Rust フレームワーク。
- Smithy - Rust で WebAssembly アプリを構築するフレームワーク。
- Dioxus - デスクトップ、Web、モバイル、SSR、LiveView などの UI を構築する、洗練された React 風ライブラリ。
- Sycamore - Rust と WebAssembly で Web アプリを作成するリアクティブライブラリ。
- Leptos - Rust で高速な Web アプリケーションを構築。
関連リスト
- Awesome Rust and WebAssembly - 優れた Rust・WebAssembly のプロジェクト、ライブラリ、ツール、リソースのリスト。
- Awesome WebAssembly - WebAssembly エコシステムに関する優れたもののコレクション。
- Awesome Rust - Rust のコードとリソースを厳選したリスト。