move notes to translations
This commit is contained in:
Jonathan Kelley committed
1 parent
e2a405457f
commit
852a1e5ea5
6 files changed
No files matched your search
@@ -0,0 +1,438 @@
|
||||
<p>
|
||||
<p align="center" >
|
||||
<img src="../../notes/header-light.svg#gh-light-mode-only" >
|
||||
<img src="../../notes/header-dark.svg#gh-dark-mode-only" >
|
||||
<a href="https://dioxuslabs.com">
|
||||
<img src="../../notes/dioxus_splash_8.avif">
|
||||
</a>
|
||||
</p>
|
||||
</p>
|
||||
<div align="center">
|
||||
<!-- Crates version -->
|
||||
<a href="https://crates.io/crates/dioxus">
|
||||
<img src="https://img.shields.io/crates/v/dioxus.svg?style=flat-square"
|
||||
alt="Crates.io version" />
|
||||
</a>
|
||||
<!-- Downloads -->
|
||||
<a href="https://crates.io/crates/dioxus">
|
||||
<img src="https://img.shields.io/crates/d/dioxus.svg?style=flat-square"
|
||||
alt="Download" />
|
||||
</a>
|
||||
<!-- docs -->
|
||||
<a href="https://docs.rs/dioxus">
|
||||
<img src="https://img.shields.io/badge/docs-latest-blue.svg?style=flat-square"
|
||||
alt="docs.rs docs" />
|
||||
</a>
|
||||
<!-- CI -->
|
||||
<a href="https://github.com/jkelleyrtp/dioxus/actions">
|
||||
<img src="https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg"
|
||||
alt="CI status" />
|
||||
</a>
|
||||
|
||||
<!--Awesome -->
|
||||
<a href="https://dioxuslabs.com/awesome">
|
||||
<img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome Page" />
|
||||
</a>
|
||||
<!-- Discord -->
|
||||
<a href="https://discord.gg/XgGxMSkvUM">
|
||||
<img src="https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square" alt="Discord Link" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
<h3>
|
||||
<a href="https://dioxuslabs.com"> Website </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/example-projects"> Examples </a>
|
||||
<span> | </span>
|
||||
<a href="https://dioxuslabs.com/learn/0.7/tutorial"> Guide </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/zh-cn/README.md"> 中文 </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/pt-br/README.md"> PT-BR </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/ja-jp/README.md"> 日本語 </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/tr-tr"> Türkçe </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/fa-ir"> فارسی </a>
|
||||
</h3>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<div dir="rtl">
|
||||
<blockquote>
|
||||
یادداشت مترجم: اصطلاحات فنی را به زبان اصلی استفاده کرده و تا حد امکان توضیح داده‌ام تا هم برای افراد باتجربه و هم برای تازه‌کارها ساده‌تر شود. زبان تخصصی ما انگلیسی است، بنابراین اطلاعات داخل پرانتز عمدتاً برای دوستان تازه‌کار است. دوستان باتجربه معمولاً با اصطلاحات و معانی آنها آشنا هستند. از آنجا که اصطلاحات فنی در زندگی روزمره نیز به همان شکل اصلی استفاده می‌شوند، ترجمه آنها به فارسی کمی عجیب به نظر می‌رسد. البته ضروری هم نبود، اما تلاش کردم تا برای افرادی که آشنا نیستند، تصوری ایجاد کنم. وگرنه هیچ‌کس به جای frontend از کلمه‌ای فارسی یا به جای framework از جایگزینی دیگر استفاده نمی‌کند، من هم کاملاً این را می‌دانم. برای جلوگیری از ایجاد حس ناخوشایند، فقط در اولین برخورد با این مفاهیم آنها را توضیح داده‌ام و در ادامه از شکل اصلی استفاده کرده‌ام. اگر خطایی وجود دارد، لطفاً ببخشید.
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<div dir="rtl">
|
||||
وب، دسکتاپ و موبایل؛ همه را تنها با یک زیرساخت کدنویسی تولید کنید. نصب آسان، بارگذاری مجدد خودکار (hotreloading) که به‌طور خودکار با شناسایی تغییرات فعال می‌شود، و مدیریت وضعیت مبتنی بر سیگنال. با استفاده از توابع سرور، ویژگی‌های backend (بخش پشتی) را اضافه کنید و با CLI (رابط خط فرمان) بسته‌بندی کنید (با استفاده از دستور `dx bundle`).
|
||||
</div>
|
||||
|
||||
```rust
|
||||
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!" }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<div dir="rtl">
|
||||
|
||||
## ⭐ ویژگی‌های منحصر به فرد:
|
||||
|
||||
- تولید برنامه‌های چندپلتفرمی (وب، دسکتاپ، موبایل، سرور و موارد دیگر) تنها با ۳ خط کد.
|
||||
- [مدیریت وضعیت ارگونومیک](https://dioxuslabs.com/blog/release-050) با ترکیب بهترین ویژگی‌های React، Solid و Svelte.
|
||||
- عملکرد فوق‌العاده با سریع‌ترین فریمورک wasm (WebAssembly) در Rust [sledgehammer](https://dioxuslabs.com/blog/templates-diffing).
|
||||
- بسته‌بندی یکپارچه برای انتشار در وب، macOS، Linux و Windows (با دستور `dx bundle` به‌سادگی قابل انجام است).
|
||||
- و موارد بیشتر! گشتی بزنید -> [تور Dioxus](https://dioxuslabs.com/learn/0.7/).
|
||||
|
||||
## بارگذاری مجدد (hot-reloading) آنی
|
||||
|
||||
تنها با یک دستور `dx serve` برنامه خود را اجرا کنید. تغییرات در مارک‌آپ و استایل‌ها (مانند HTML و CSS، یا در Dioxus با استفاده از rsx) را انجام دهید و نتیجه را به‌صورت آنی مشاهده کنید. اگرچه قابلیت‌های hot-reloading در Rust هنوز به‌طور کامل بهینه نیستند، اما با استفاده از [hot-lib-reloader](https://docs.rs/hot-lib-reloader/latest/hot_lib_reloader/) ممکن است.
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/hotreload.gif" alt="بارگذاری مجدد آنی">
|
||||
</div>
|
||||
|
||||
## بسته‌بندی برای وب و دسکتاپ
|
||||
|
||||
تنها با اجرای دستور `dx bundle` برنامه شما با حداکثر بهینه‌سازی کامپایل و بسته‌بندی می‌شود. از قابلیت‌های ایجاد فایل‌های [`.avif`، فشرده‌سازی `.wasm` و کوچک‌سازی](https://dioxuslabs.com/learn/0.7/tutorial/assets) و موارد بیشتر بهره‌مند شوید. برنامه‌های سبک وب (کمتر از [50kb](https://github.com/ealmloff/tiny-dioxus/)) و برنامه‌های دسکتاپ/موبایل با حجم کمتر از 15mb تولید کنید.
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/bundle.gif" alt="بسته‌بندی برنامه">
|
||||
</div>
|
||||
|
||||
## مستندات فوق‌العاده
|
||||
|
||||
ما زمان زیادی صرف کردیم تا مستنداتی واضح، خوانا و جامع ارائه دهیم. تمامی عناصر HTML و لیسنرها (listeners) با استفاده از MDN مستند شده‌اند ([برای جزئیات بیشتر کلیک کنید](https://developer.mozilla.org)) و برای به‌روز بودن، مستندات با خود Dioxus به‌صورت مداوم ادغام می‌شوند. برای راهنماها، مرجع‌ها، آموزش‌ها و موارد بیشتر به [وبسایت Dioxus](https://dioxuslabs.com/learn/0.7/) سر بزنید. نکته جالب: ما از وبسایت Dioxus به‌عنوان آزمایشگاهی برای تست ویژگی‌های جدید استفاده می‌کنیم -> [مشاهده کنید!](https://github.com/dioxusLabs/docsite).
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/docs.avif" alt="مستندات Dioxus">
|
||||
</div>
|
||||
|
||||
## تمرکز بر تجربه توسعه‌دهنده
|
||||
|
||||
Dioxus تمرکز زیادی بر تجربه توسعه‌دهنده دارد و ابزارهای متعددی برای بهبود آن ارائه می‌دهد. [افزونه VSCode](https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus) را توسعه دادیم که به شما امکان می‌دهد کدهای RSX را به‌صورت خودکار قالب‌بندی کنید، HTML را به RSX تبدیل کنید و موارد بیشتر. همچنین، CLI قدرتمندی توسعه دادیم که به شما کمک می‌کند برنامه‌های جدید بسازید، آنها را سرو کنید و برای پلتفرم‌های مختلف بسته‌بندی کنید. در نقشه راه ما قابلیت‌های بیشتری مانند انتشار نیز پیش‌بینی شده است.
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/autofmt.gif" alt="فرمت‌دهی خودکار">
|
||||
</div>
|
||||
|
||||
## جامعه
|
||||
|
||||
Dioxus یک پروژه با جامعه‌ای فعال و پویا در [Discord](https://discord.gg/XgGxMSkvUM) و [GitHub](https://github.com/DioxusLabs/dioxus/issues) است. ما همیشه آماده پاسخگویی به سوالات شما هستیم، کمک می‌کنیم و برای شروع پروژه‌های شما آماده‌ایم. [SDK ما](https://github.com/DioxusLabs/dioxus-std) توسط جامعه توسعه داده شده و از طریق [سازمان GitHub](https://github.com/dioxus-community/) به بهترین برنامه‌های Dioxus دسترسی پیدا می‌کنید.
|
||||
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/dioxus-community.avif">
|
||||
</div>
|
||||
|
||||
<div dir="rtl">
|
||||
|
||||
## تیم اصلی تمام‌وقت
|
||||
|
||||
Dioxus که به عنوان یک پروژه جانبی آغاز شد، اکنون به تیم کوچکی تبدیل شده که به‌صورت تمام‌وقت روی آن کار می‌کند. با حمایت FutureWei، Satellite.im و برنامه Github Accelerator، توانسته‌ایم به‌طور تمام‌وقت روی Dioxus تمرکز کنیم. برنامه بلندمدت ما ارائه ابزارهای شرکتی باکیفیت و پولی است تا Dioxus به پروژه‌ای خودکفا تبدیل شود. اگر شرکت شما علاقه‌مند به استفاده از Dioxus است و تمایل به همکاری با ما دارد، لطفاً با ما تماس بگیرید!
|
||||
|
||||
## پلتفرم‌های پشتیبانی‌شده
|
||||
|
||||
</div>
|
||||
|
||||
<div dir="rtl" align="center">
|
||||
<table style="width:100%">
|
||||
<tr>
|
||||
<td>
|
||||
<b>وب</b>
|
||||
<br />
|
||||
<em>پشتیبانی سطح ۱</em>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>رندر مستقیم به DOM با استفاده از WebAssembly.</li>
|
||||
<li>پیش‌پردازش با رندر سمت سرور (SSR) و بازسازی سمت کاربر.</li>
|
||||
<li>برنامه‌های سبک (مانند "سلام دنیا") مشابه React، با حجمی حدود 50 کیلوبایت.</li>
|
||||
<li>سرور توسعه یکپارچه (`dx serve`) و بارگذاری مجدد آنی.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>فول‌استک (Frontend و Backend)</b>
|
||||
<br />
|
||||
<em>پشتیبانی سطح ۱</em>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>قابلیت‌های رندر سمت سرور، بازسازی و fallback با استفاده از Suspense.</li>
|
||||
<li>توابع سرور داخلی برای مدیریت بک‌اند.</li>
|
||||
<li>ادغام با Extractors، Middleware و Routing.</li>
|
||||
<li>سازگاری با موبایل و دسکتاپ.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>دسکتاپ</b>
|
||||
<br />
|
||||
<em>پشتیبانی سطح ۱</em>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>رندر با استفاده از Webview یا - به‌صورت آزمایشی - WGPU یا Freya (Skia).</li>
|
||||
<li>راه‌اندازی آسان تنها با `cargo run` یا `dx serve`.</li>
|
||||
<li>دسترسی مستقیم به سیستم بدون نیاز به IPC.</li>
|
||||
<li>پشتیبانی از macOS، Linux و Windows با فایل‌های اجرایی سبک (کمتر از 3 مگابایت).</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>رندر زنده (Liveview)</b>
|
||||
<br />
|
||||
<em>پشتیبانی سطح ۱</em>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>رندر کامل برنامه یا تنها بخشی از آن در سمت سرور.</li>
|
||||
<li>ادغام با فریمورک‌های محبوب Rust مانند Axum و Warp.</li>
|
||||
<li>پشتیبانی از بیش از 10,000 برنامه و تأخیر بسیار کم.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>موبایل</b>
|
||||
<br />
|
||||
<em>پشتیبانی سطح ۲</em>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>رندر با استفاده از Webview یا - به‌صورت آزمایشی - WGPU یا Skia.</li>
|
||||
<li>پشتیبانی از iOS و Android.</li>
|
||||
<li>این ویژگی در حال حاضر بسیار آزمایشی است و به‌روزرسانی‌های بیشتری در طول سال 2024 ارائه خواهد شد.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>ترمینال</b>
|
||||
<br />
|
||||
<em>پشتیبانی سطح ۲</em>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>رندر برنامه‌ها مستقیماً در ترمینال، مشابه ink.js.</li>
|
||||
<li>بر اساس مدل‌های Flexbox و CSS مشابه مرورگرها.</li>
|
||||
<li>ابزارهای داخلی مانند ورودی متن، دکمه‌ها و سیستم فوکوس.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div dir="rtl">
|
||||
|
||||
## اجرای مثال‌ها
|
||||
|
||||
برای اجرای مثال‌های موجود در پوشه اصلی، کافی است دستور `cargo run --example <نام مثال>` را اجرا کنید. با این حال، پیشنهاد ما این است که dioxus-cli را نصب کنید و مثال‌ها را با استفاده از `dx serve` اجرا کنید، زیرا بسیاری از این مثال‌ها از پلتفرم وب نیز پشتیبانی می‌کنند. اگر می‌خواهید این مثال‌ها را برای وب اجرا کنید، باید تغییراتی در فایل Cargo.toml اعمال کنید یا ویژگی پیش‌فرض دسکتاپ را غیرفعال کنید.
|
||||
|
||||
## مقایسه Dioxus با دیگر فریمورک‌ها
|
||||
|
||||
ما تمامی فریمورک‌ها را دوست داریم و از پیشرفت آنها در اکوسیستم Rust لذت می‌بریم. در این راستا، بسیاری از پروژه‌های ما توسط فریمورک‌های دیگر استفاده می‌شوند. به عنوان مثال، کتابخانه flex-box ما [Taffy](https://github.com/DioxusLabs/taffy) در پروژه‌هایی مانند [Bevy](https://bevyengine.org/)، [Zed](https://zed.dev/)، [Lapce](https://lapce.dev/)، [Iced](https://github.com/iced-rs/iced) و بسیاری دیگر استفاده شده است.
|
||||
|
||||
چند ویژگی که Dioxus را از دیگر فریمورک‌ها متمایز می‌کند:
|
||||
|
||||
- **مشابه React**: ما بر اساس مفاهیمی مانند کامپوننت‌ها، props (مشابه آرگومان‌های تابع) و hooks (دسترسی کامپوننت‌ها به ویژگی‌های فریمورک) ساخته‌ایم. این امر ما را بیشتر به Svelte نزدیک می‌کند تا SolidJS.
|
||||
- **HTML و CSS**: برای تطبیق بهتر و دیگر ویژگی‌ها، ما HTML و CSS را به عنوان پایه انتخاب کرده‌ایم.
|
||||
- **پلتفرم مستقل (Renderer-agnostic)**: [VirtualDOM سریع ما](https://dioxuslabs.com/blog/templates-diffing) به شما این امکان را می‌دهد که رندر را برای هر پلتفرمی تغییر دهید.
|
||||
- **حمایت از همکاری (Collaborative)**: ما کتابخانه‌هایی مانند [Taffy](https://github.com/DioxusLabs/taffy)، [manganis](https://github.com/DioxusLabs/manganis)، [include_mdbook](https://github.com/DioxusLabs/include_mdbook)، و [blitz](http://github.com/dioxusLabs/blitz) تولید کرده‌ایم تا اکوسیستم را به صورت اشتراکی رشد دهیم.
|
||||
|
||||
### مقایسه Dioxus با Tauri
|
||||
|
||||
Tauri فریمورکی برای ایجاد برنامه‌های دسکتاپ (و به زودی موبایل) است که از فریمورک‌های وب مانند React، Vue و Svelte برای frontend استفاده می‌کند. هر زمان که نیاز به اجرای یک عملیات native داشته باشید، باید توابع Rust بنویسید و از frontend آنها را فراخوانی کنید.
|
||||
|
||||
- **به صورت کامل Rust (Natively Rust)**: معماری Tauri شما را به استفاده از JavaScript یا WebAssembly محدود می‌کند. در Dioxus، کد Rust شما مستقیماً روی سیستم کاربر اجرا می‌شود. اعمالی مانند تولید thread، دسترسی به فایل‌ها و غیره بدون استفاده از IPC bridge امکان‌پذیر هستند.
|
||||
- **اهداف مختلف**: Tauri نیازمند پشتیبانی از JavaScript و ابزارهای ساخت آن است. این محدودیت‌هایی بر عملیات شما اعمال می‌کند. Dioxus با تمرکز بر Rust، ویژگی‌هایی مانند توابع سرور، بسته‌بندی پیشرفته و رندر native را فراهم می‌کند.
|
||||
- **کدهای مشترک (DNA مشترک)**: اگرچه Tauri و Dioxus پروژه‌های متفاوتی هستند، اما از کتابخانه‌های مشترک مانند Tao و Wry برای مدیریت پنجره‌ها و webview استفاده می‌کنند.
|
||||
|
||||
### مقایسه Dioxus با Leptos
|
||||
|
||||
Leptos یک فریمورک مشابه SolidJS و SolidStart برای توسعه برنامه‌های وب fullstack است. Dioxus و Leptos اهداف مشابهی برای وب دارند، اما تفاوت‌هایی کلیدی دارند:
|
||||
|
||||
- **مدل بازفعال‌سازی (Reactivity model)**: در حالی که Leptos از signals برای reactivity استفاده می‌کند، Dioxus از Virtual DOM و re-render بهره می‌برد. اگرچه signals از نظر تئوری کارآمدتر است، اما در عمل [الگوریتم‌های Virtual DOM Dioxus](https://dioxuslabs.com/blog/templates-diffing) تفاوت قابل توجهی ایجاد نمی‌کنند. [مقایسه‌ها نشان داده‌اند](https://krausest.github.io/js-framework-benchmark/2024/table_chrome_123.0.6312.59.html) که حتی Dioxus سریع‌تر است.
|
||||
- **کنترل جریان (Control flow)**: در Leptos، signals باعث محدود شدن به primitives خاص می‌شود. این موضوع ممکن است اشکال‌زدایی خطاهای رابط کاربری (UI) را دشوار کند. در Dioxus، از iterators، حلقه‌های `for` معمولی و شرایط `if` Rust استفاده می‌کنید، و همچنان برنامه شما reactive باقی می‌ماند.
|
||||
|
||||
</div>
|
||||
|
||||
```rust
|
||||
fn Counters() -> Element {
|
||||
let mut counters = use_signal(|| vec![0; initial_length]);
|
||||
|
||||
rsx! {
|
||||
button { onclick: move |_| counters.push(counters.len()); "Add Counter" }
|
||||
ul {
|
||||
for idx in 0..counters.len() {
|
||||
li {
|
||||
button { onclick: move |_| counters[idx] += 1; "{counters[idx]}" }
|
||||
button { onclick: move |_| { counters.write().remove(idx); } "Remove" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<div dir="rtl">
|
||||
<blockquote>
|
||||
<a href="https://book.leptos.dev/view/04_iteration.html#dynamic-rendering-with-the-for-component">
|
||||
اما برای Leptos این وضعیت نیازمند ردیابی کلیدها (key tracking)، استفاده از کامپوننت <code><For></code>، ایجاد سیگنال‌های جدید و در نهایت پاک‌سازی دستی حافظه است.
|
||||
</a>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
```rust
|
||||
fn Counters() -> Element {
|
||||
let initial_counters = (0..initial_length)
|
||||
.map(|id| (id, create_signal(id + 1)))
|
||||
.collect::<Vec<_>>();
|
||||
|
||||
let (counters, set_counters) = create_signal(initial_counters);
|
||||
|
||||
let add_counter = move |_| {
|
||||
let sig = create_signal(next_counter_id + 1);
|
||||
set_counters.update(move |counters| counters.push((next_counter_id, sig)));
|
||||
next_counter_id += 1;
|
||||
};
|
||||
|
||||
view! {
|
||||
<div>
|
||||
<button on:click=add_counter>
|
||||
"Add Counter"
|
||||
</button>
|
||||
<ul>
|
||||
<For
|
||||
each=counters
|
||||
key=|counter| counter.0
|
||||
children=move |(id, (count, set_count))| {
|
||||
view! {
|
||||
<li>
|
||||
<button
|
||||
on:click=move |_| set_count.update(|n| *n += 1)
|
||||
>
|
||||
{count}
|
||||
</button>
|
||||
<button
|
||||
on:click=move |_| {
|
||||
set_counters.update(|counters| {
|
||||
counters.retain(|(counter_id, (signal, _))| {
|
||||
|
||||
if counter_id == &id {
|
||||
signal.dispose();
|
||||
}
|
||||
counter_id != &id
|
||||
})
|
||||
});
|
||||
}
|
||||
>
|
||||
"Remove"
|
||||
</button>
|
||||
</li>
|
||||
}
|
||||
}
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<div dir="rtl">
|
||||
|
||||
- **حالت `Copy` (روش ایجاد کپی)**: در نسخه‌های 0.1 تا 0.4 Dioxus، برای افزایش انعطاف‌پذیری مکانیزم borrow checker (سیستمی برای اطمینان از اعتبار متغیرها در استانداردهای Rust)، از ویژگی‌های lifetime (طول عمر در Rust، سیستمی برای کنترل موجودیت متغیرها در بازه مورد نیاز) استفاده می‌شد. این روش برای مدیریت event handlers (مدیریت‌کننده‌های رویداد) به‌خوبی عمل می‌کرد، اما در زمینه async (غیرهمزمان) پیچیدگی‌هایی ایجاد می‌کرد. با انتشار نسخه 0.5 Dioxus، مدل [`Copy`](https://crates.io/crates/generational-box) از Leptos وام گرفته شد.
|
||||
|
||||
- **اهداف متفاوت**: Dioxus یک رندرر برای وب، دسکتاپ، موبایل، LiveView و پلتفرم‌های متعدد دیگر ارائه می‌دهد. همچنین، کتابخانه‌های جامعه‌محور و یک SDK چندپلتفرمی را توسعه می‌دهیم. این دامنه وسیع منجر به کندتر شدن انتشار نسخه‌های جدید نسبت به Leptos می‌شود. Leptos بیشتر بر fullstack و وب تمرکز دارد و ویژگی‌هایی مانند HTML streaming (پخش HTML)، islands (جزایر: گروه‌بندی کامپوننت‌ها برای ارسال همراه با WebAssembly)، و کامپوننت‌هایی مانند `<Suspense />` و `<Form />` ارائه می‌دهد که مختص وب هستند. به‌طور کلی، برنامه‌های وب ساخته‌شده با Leptos، footprint (حجم کمتری) خواهند داشت.
|
||||
|
||||
- **زبان‌های خاص دامنه (DSLs)**: هر دو فریمورک برای وب مناسب هستند، اما Dioxus برای ایجاد UI از یک DSL مشابه Rust استفاده می‌کند، در حالی که Leptos ساختاری شبیه به HTML دارد. دلیل انتخاب این روش توسط Dioxus، استفاده از امکاناتی مانند code folding (باز و بسته کردن بخش‌هایی از کد) و syntax highlighting (برجسته‌سازی نحو کد) در محیط‌های توسعه یکپارچه (IDE) است. به‌طور کلی، DSL در Dioxus امکانات بیشتری ارائه می‌دهد. برای مثال، Dioxus به‌طور خودکار متون را ترکیب می‌کند، در حالی که Leptos نیازمند استفاده از closures (توابع ناشناس)، و ماکروهایی مانند `format!` یا `format_args!` است.
|
||||
|
||||
</div>
|
||||
|
||||
```rust
|
||||
// dioxus
|
||||
rsx! {
|
||||
div { class: "my-class", enabled: true, "سلام، {name}" }
|
||||
}
|
||||
|
||||
// leptos
|
||||
view! {
|
||||
<div class="my-class" enabled={true}>
|
||||
"سلام "
|
||||
{move || name()}
|
||||
</div>
|
||||
}
|
||||
```
|
||||
|
||||
<div dir="rtl">
|
||||
### مقایسه Dioxus و Yew
|
||||
|
||||
Yew که برای توسعه برنامه‌های تک‌صفحه‌ای وب طراحی شده است، یکی از منابع الهام برای Dioxus بوده است. با این حال، محدودیت‌های معماری Yew باعث شد که Dioxus توسعه یابد.
|
||||
|
||||
- **برنامه‌های تک‌صفحه‌ای وب**: Yew به‌طور خاص برای توسعه برنامه‌های تک‌صفحه‌ای وب طراحی شده است و به همین دلیل محدود به وب است. اما Dioxus به دلیل پشتیبانی از برنامه‌های چندپلتفرمی fullstack، برای وب، دسکتاپ، موبایل و سرور مناسب است.
|
||||
|
||||
- **ابزارهای توسعه‌دهنده**: Dioxus ابزارهایی مانند فرمت خودکار، بارگذاری مجدد فوری و بسته‌بندی (bundler) ارائه می‌دهد.
|
||||
|
||||
- **پشتیبانی مداوم**: Dioxus با افزودن ویژگی‌های جدید و رفع اشکالات به‌صورت روزانه، به‌طور فعال در حال توسعه است.
|
||||
|
||||
### مقایسه Dioxus و egui
|
||||
|
||||
egui یک کتابخانه Rust برای ایجاد رابط‌های کاربری گرافیکی (GUI) چندپلتفرمی است که پروژه‌هایی مانند [Rerun.io](https://www.rerun.io) از آن استفاده می‌کنند.
|
||||
|
||||
- **Immediate vs Retained (به‌روزرسانی فوری در مقابل نگهداری)**: egui برای ایجاد رندر مجدد در هر فریم طراحی شده است. این معماری برای بازی‌ها و برنامه‌های تعاملی مناسب است، اما استایل و طرح‌بندی بین فریم‌ها حفظ نمی‌شود. در مقابل، Dioxus به‌عنوان یک فریمورک رابط کاربری retained عمل می‌کند، یعنی UI فقط یک‌بار تولید شده و در بین فریم‌ها به‌روزرسانی می‌شود. این روش باعث می‌شود Dioxus از فناوری‌های بومی وب مانند HTML و CSS استفاده کند و عملکرد بهتری در زمینه عمر باتری و کارایی داشته باشد.
|
||||
|
||||
- **سفارشی‌سازی**: در حالی که egui سیستم استایل و طرح‌بندی خاص خود را دارد، Dioxus به شما اجازه می‌دهد از HTML و CSS استفاده کنید. این ویژگی امکان استفاده از کتابخانه‌هایی مانند Tailwind و Material UI را فراهم می‌کند.
|
||||
|
||||
- **مدیریت وضعیت (State Management)**: egui از یک شیء وضعیت جهانی استفاده می‌کند، اما Dioxus از کامپوننت‌ها و props برای کپسوله‌سازی وضعیت‌ها و قابلیت استفاده مجدد از آنها بهره می‌برد.
|
||||
|
||||
### مقایسه Dioxus و Iced
|
||||
|
||||
Iced یک کتابخانه رابط کاربری گرافیکی چندپلتفرمی است که از Elm الهام گرفته شده و از WGPU برای رندر بومی و همچنین DOM nodes برای وب پشتیبانی می‌کند.
|
||||
|
||||
- **مدیریت وضعیت Elm**: Iced از مدل مدیریت وضعیت Elm استفاده می‌کند که شامل reducers (توابع) و پیام‌رسانی است. این معماری در مقایسه با Dioxus می‌تواند پرجزئیات‌تر و خسته‌کننده‌تر باشد.
|
||||
|
||||
- **رابط کاربری بومی**: Dioxus از webview به‌عنوان رندرر استفاده می‌کند و ویژگی‌هایی مانند کپی/چسباندن، دسترسی‌پذیری و متون بومی را ارائه می‌دهد. رندرر Iced به دلیل عدم پشتیبانی از این ویژگی‌ها، کمتر بومی به نظر می‌رسد.
|
||||
|
||||
- **WGPU**: رندرر WGPU در Dioxus هنوز به بلوغ کافی نرسیده و برای توسعه محصول مناسب نیست. اما رندرر WGPU در Iced بسیار پیشرفته‌تر است و برای توسعه محصول استفاده می‌شود.
|
||||
|
||||
### مقایسه Dioxus و Electron
|
||||
|
||||
Dioxus و Electron دو پروژه با اهداف مشابه اما معماری کاملاً متفاوت هستند. Electron به توسعه‌دهندگان اجازه می‌دهد با استفاده از فناوری‌های وب مانند HTML، CSS و JavaScript برنامه‌های دسکتاپ چندپلتفرمی ایجاد کنند.
|
||||
|
||||
- **سبک‌تر بودن**: Dioxus از webview بومی سیستم یا به‌صورت اختیاری از WGPU برای رندر رابط کاربری استفاده می‌کند. به‌طور مثال، در macOS، یک برنامه Electron معمولاً 100 مگابایت فضا اشغال می‌کند، در حالی که برنامه مشابه Dioxus فقط 15 مگابایت است.
|
||||
|
||||
- **بلوغ**: Electron با داشتن جامعه‌ای بزرگ و ابزارهای فراوان، یک پروژه بسیار بالغ است. در مقابل، Dioxus همچنان جوان است و نیاز به کار بیشتری دارد.
|
||||
|
||||
## مشارکت
|
||||
|
||||
- برای اطلاعات بیشتر درباره مشارکت، به [صفحه مشارکت در سایت ما](https://dioxuslabs.com/learn/0.7/beyond/contributing) مراجعه کنید.
|
||||
- مشکلات خود را در [ردیاب مشکلات](https://github.com/dioxuslabs/dioxus/issues) گزارش دهید.
|
||||
- به Discord [بپیوندید](https://discord.gg/XgGxMSkvUM) و سوالات خود را مطرح کنید!
|
||||
|
||||
<a href="https://github.com/dioxuslabs/dioxus/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=dioxuslabs/dioxus&max=30&columns=10" />
|
||||
</a>
|
||||
|
||||
## مجوز
|
||||
|
||||
این پروژه تحت [مجوز MIT] ارائه شده است.
|
||||
|
||||
[مجوز MIT]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT
|
||||
|
||||
مگر اینکه به‌طور خاص ذکر شود، تمام مشارکت‌های شما در Dioxus تحت این مجوز خواهد بود.
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,367 @@
|
||||
<p>
|
||||
<p align="center" >
|
||||
<!-- <img src="./notes/header-light-updated.svg#gh-light-mode-only" >
|
||||
<img src="./notes/header-dark-updated.svg#gh-dark-mode-only" > -->
|
||||
<!-- <a href="https://dioxuslabs.com">
|
||||
<img src="./notes/flat-splash.avif">
|
||||
</a> -->
|
||||
<img src="../../notes/splash-header-darkmode.svg#gh-dark-mode-only" style="width: 80%; height: auto;">
|
||||
<img src="../../notes/splash-header.svg#gh-light-mode-only" style="width: 80%; height: auto;">
|
||||
<img src="../../notes/image-splash.avif">
|
||||
<br>
|
||||
</p>
|
||||
</p>
|
||||
<div align="center">
|
||||
<!-- Crates version -->
|
||||
<a href="https://crates.io/crates/dioxus">
|
||||
<img src="https://img.shields.io/crates/v/dioxus.svg?style=flat-square"
|
||||
alt="Crates.io version" />
|
||||
</a>
|
||||
<!-- Downloads -->
|
||||
<a href="https://crates.io/crates/dioxus">
|
||||
<img src="https://img.shields.io/crates/d/dioxus.svg?style=flat-square"
|
||||
alt="Download" />
|
||||
</a>
|
||||
<!-- docs -->
|
||||
<a href="https://docs.rs/dioxus">
|
||||
<img src="https://img.shields.io/badge/docs-latest-blue.svg?style=flat-square"
|
||||
alt="docs.rs docs" />
|
||||
</a>
|
||||
<!-- CI -->
|
||||
<a href="https://github.com/jkelleyrtp/dioxus/actions">
|
||||
<img src="https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg"
|
||||
alt="CI status" />
|
||||
</a>
|
||||
|
||||
<!--Awesome -->
|
||||
<a href="https://dioxuslabs.com/awesome">
|
||||
<img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome Page" />
|
||||
</a>
|
||||
<!-- Discord -->
|
||||
<a href="https://discord.gg/XgGxMSkvUM">
|
||||
<img src="https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square" alt="Discord Link" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
<h3>
|
||||
<a href="https://dioxuslabs.com"> Website </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/tree/main/examples"> Examples </a>
|
||||
<span> | </span>
|
||||
<a href="https://dioxuslabs.com/learn/0.7/tutorial"> Guide </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/zh-cn/README.md"> 中文 </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/pt-br/README.md"> PT-BR </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/ja-jp/README.md"> 日本語 </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/tr-tr"> Türkçe </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/ko-kr"> 한국어 </a>
|
||||
</h3>
|
||||
</div>
|
||||
<br>
|
||||
<p align="center">
|
||||
<a href="https://dioxuslabs.com/blog/release-060/">✨ Dioxus 0.6 is released - check it out here! ✨</a>
|
||||
</p>
|
||||
<br>
|
||||
|
||||
Web、デスクトップ、モバイルなど、単一のコードベースで構築します。ゼロコンフィグのセットアップ、統合されたホットリロード、シグナルベースの状態管理。サーバー機能を追加し、CLIでバンドルします。
|
||||
|
||||
```rust
|
||||
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!" }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## ⭐️ ユニークな機能:
|
||||
|
||||
- 3行のコードでクロスプラットフォームアプリ（Web、デスクトップ、モバイル、サーバーなど）
|
||||
- [人間工学に基づいた状態管理](https://dioxuslabs.com/blog/release-050)は、React、Solid、Svelteの長所を組み合わせています
|
||||
- Rustの最速のwasmフレームワーク[sledgehammer](https://dioxuslabs.com/blog/templates-diffing)によって駆動される非常に高いパフォーマンス
|
||||
- Web、macOS、Linux、Windowsにデプロイするための統合バンドラー
|
||||
- そしてもっと！[Dioxusのツアーを見てみましょう](https://dioxuslabs.com/learn/0.7/)。
|
||||
|
||||
## インスタントホットリロード
|
||||
|
||||
1つのコマンド`dx serve`でアプリを実行します。マークアップとスタイルを編集し、結果をリアルタイムで確認します。
|
||||
|
||||
<div align="center">
|
||||
<img src="https://raw.githubusercontent.com/DioxusLabs/screenshots/refs/heads/main/blitz/hotreload-video.webp">
|
||||
</div>
|
||||
|
||||
|
||||
## ファーストクラスのAndroidおよびiOSサポート
|
||||
|
||||
Dioxusは、Rustでネイティブモバイルアプリを構築する最速の方法です。単に`dx serve --platform android`を実行すると、数秒でエミュレーターまたはデバイスでアプリが実行されます。JNIおよびネイティブAPIに直接呼び出します。
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/android_and_ios2.avif" width="500">
|
||||
</div>
|
||||
|
||||
## Web、デスクトップ、モバイル用のバンドル
|
||||
|
||||
単に`dx bundle`を実行すると、アプリがビルドされ、最大化された最適化でバンドルされます。Webでは、[`.avif`生成、`.wasm`圧縮、最小化](https://dioxuslabs.com/learn/0.7/tutorial/assets)などを活用します。[50kb未満](https://github.com/ealmloff/tiny-dioxus/)のWebアプリや5mb未満のデスクトップ/モバイルアプリを構築します。
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/bundle.gif">
|
||||
</div>
|
||||
|
||||
|
||||
## 素晴らしいドキュメント
|
||||
|
||||
私たちは、クリーンで読みやすく包括的なドキュメントを作成するために多大な努力を払いました。すべてのHTML要素とリスナーはMDNドキュメントで記録されており、私たちのドキュメントサイトはDioxus自体と継続的に統合されており、ドキュメントが常に最新であることを保証します。ガイド、リファレンス、レシピなどについては、[Dioxusウェブサイト](https://dioxuslabs.com/learn/0.7/)をご覧ください。面白い事実：私たちはDioxusウェブサイトを新しいDioxus機能のテストベッドとして使用しています - [チェックしてみてください！](https://github.com/dioxusLabs/docsite)
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/docs.avif">
|
||||
</div>
|
||||
|
||||
## コミュニティ
|
||||
|
||||
Dioxusはコミュニティ主導のプロジェクトであり、非常に活発な[Discord](https://discord.gg/XgGxMSkvUM)および[GitHub](https://github.com/DioxusLabs/dioxus/issues)コミュニティを持っています。私たちは常に助けを求めており、質問に答え、あなたが始めるのを手伝うことを喜んでいます。[私たちのSDK](https://github.com/DioxusLabs/dioxus-std)はコミュニティによって運営されており、無料のアップグレードとサポートを受ける最高のDioxusクレートのための[GitHub組織](https://github.com/dioxus-community/)もあります。
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/dioxus-community.avif">
|
||||
</div>
|
||||
|
||||
## フルタイムのコアチーム
|
||||
|
||||
Dioxusは、副業プロジェクトからフルタイムのエンジニアの小さなチームに成長しました。FutureWei、Satellite.im、GitHub Acceleratorプログラムの寛大なサポートのおかげで、私たちはDioxusにフルタイムで取り組むことができました。私たちの長期的な目標は、高品質の有料エンタープライズツールを提供することでDioxusを自立させることです。あなたの会社がDioxusの採用に興味があり、私たちと一緒に働きたい場合は、お問い合わせください！
|
||||
|
||||
## サポートされているプラットフォーム
|
||||
|
||||
<div align="center">
|
||||
<table style="width:100%">
|
||||
<tr>
|
||||
<td>
|
||||
<b>Web</b>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>WebAssemblyを使用してDOMに直接レンダリング</li>
|
||||
<li>SSRで事前レンダリングし、クライアントで再ハイドレーション</li>
|
||||
<li>Reactと同等の約50kbのシンプルな「Hello World」</li>
|
||||
<li>迅速な反復のための組み込みの開発サーバーとホットリロード</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>デスクトップ</b>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>Webviewを使用してレンダリングするか、実験的にWGPUまたは<a href="https://freyaui.dev">Freya</a>（Skia）を使用してレンダリング</li>
|
||||
<li>ゼロコンフィグのセットアップ。単に`cargo run`または`dx serve`でアプリをビルド</li>
|
||||
<li>IPCなしでネイティブシステムアクセスを完全にサポート</li>
|
||||
<li>macOS、Linux、Windowsをサポート。ポータブル<3mbバイナリ</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>モバイル</b>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>Webviewを使用してレンダリングするか、実験的にWGPUまたはSkiaを使用してレンダリング</li>
|
||||
<li>iOSおよびAndroidのサポート</li>
|
||||
<li>「Hello World」から数秒でデバイス上で実行</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>サーバーサイドレンダリング</b>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>サスペンス、ハイドレーション、サーバーサイドレンダリング</li>
|
||||
<li>サーバー機能を使用してバックエンド機能を迅速に追加</li>
|
||||
<li>エクストラクタ、ミドルウェア、およびルーティングの統合</li>
|
||||
<li>静的サイト生成およびインクリメンタル再生成</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
## 例を実行する
|
||||
|
||||
> このリポジトリのメインブランチにある例は、dioxusのgitバージョンとCLIを対象としています。最新の安定版dioxusと互換性のある例を探している場合は、[0.6ブランチ](https://github.com/DioxusLabs/dioxus/tree/v0.6/examples)を確認してください。
|
||||
|
||||
このリポジトリのトップレベルにある例は、次のように実行できます：
|
||||
|
||||
```sh
|
||||
cargo run --example <example>
|
||||
```
|
||||
|
||||
ただし、dioxus-cliをダウンロードすることをお勧めします。gitバージョンのdioxusを実行している場合は、次のコマンドで一致するバージョンのCLIをインストールできます：
|
||||
|
||||
```sh
|
||||
cargo install --git https://github.com/DioxusLabs/dioxus dioxus-cli --locked
|
||||
```
|
||||
|
||||
CLIを使用すると、Webプラットフォームで例を実行することもできます。このコマンドを使用してデフォルトのデスクトップ機能を無効にし、Web機能を有効にします：
|
||||
|
||||
```sh
|
||||
dx serve --example <example> --platform web -- --no-default-features
|
||||
```
|
||||
|
||||
## Dioxusと他のフレームワークの比較
|
||||
|
||||
私たちはすべてのフレームワークを愛しており、Rustエコシステムの革新を見守るのを楽しんでいます。実際、私たちの多くのプロジェクトは他のフレームワークと共有されています。たとえば、私たちのフレックスボックスライブラリ[Taffy](https://github.com/DioxusLabs/taffy)は、[Bevy](https://bevyengine.org/)、[Zed](https://zed.dev/)、[Lapce](https://lapce.dev/)、[Iced](https://github.com/iced-rs/iced)などで使用されています。
|
||||
|
||||
Dioxusは、他のフレームワークとは異なるいくつかの重要なポイントに重点を置いています：
|
||||
|
||||
- **Reactのように**：コンポーネント、props、フックなどの概念を使用してUIを構築し、状態管理はSolidJSよりもSvelteに近いです。
|
||||
- **HTMLとCSS**：HTMLとCSSを完全に活用し、quirks（癖）もすべて受け入れます。
|
||||
- **レンダラーに依存しない**：高速なVirtualDOMのおかげで、任意のプラットフォームのレンダラーに置き換えることができます。
|
||||
- **協力的**：可能な限り、[Taffy](https://github.com/DioxusLabs/taffy)、[manganis](https://github.com/DioxusLabs/manganis)、[include_mdbook](https://github.com/DioxusLabs/include_mdbook)、[blitz](http://github.com/dioxusLabs/blitz)などのクレートを分割して、エコシステムが一緒に成長できるようにします。
|
||||
|
||||
### DioxusとTauriの比較
|
||||
|
||||
Tauriは、React、Vue、SvelteなどのWebベースのフレームワークを使用してフロントエンドが記述されたデスクトップ（およびモバイル）アプリを構築するためのフレームワークです。ネイティブの作業が必要な場合は、Rust関数を記述し、フロントエンドから呼び出すことができます。
|
||||
|
||||
- **ネイティブRust**：Tauriのアーキテクチャは、UIをJavaScriptまたはWebAssemblyに制限します。Dioxusを使用すると、Rustコードがユーザーのマシンでネイティブに実行され、スレッドの生成、ファイルシステムへのアクセスなどの操作をIPCブリッジなしで実行できます。これにより、アプリケーションのアーキテクチャが大幅に簡素化され、構築が容易になります。Dioxus-Webをフロントエンドとして使用してTauriアプリを構築することもできます。
|
||||
|
||||
- **異なる範囲**：TauriはJavaScriptとその複雑なビルドツールチェーンをサポートする必要があるため、使用できる範囲が制限されます。DioxusはRustに完全に焦点を当てているため、サーバー関数、高度なバンドル、ネイティブレンダラーなどの追加のユーティリティを提供できます。
|
||||
|
||||
- **共有DNA**：TauriとDioxusは別々のプロジェクトですが、Tauriチームが維持するウィンドウとWebviewライブラリであるTaoとWryなどのライブラリを共有しています。
|
||||
|
||||
### DioxusとLeptosの比較
|
||||
|
||||
Leptosは、SolidJSおよびSolidStartに似たフルスタックWebアプリケーションを構築するためのライブラリです。2つのライブラリはWeb上で同様の目標を共有していますが、いくつかの重要な違いがあります：
|
||||
|
||||
- **リアクティビティモデル**：Leptosは信号を基本的なリアクティビティとして使用し、DioxusはVirtualDomと再レンダリングを選択します。理論的には信号がより効率的ですが、実際には、[block-domに触発されたテンプレート](https://dioxuslabs.com/blog/templates-diffing)のおかげで、DioxusのVirtualDomは実際の違いをほとんど生じさせず、[実際にはLeptosよりも高速です](https://krausest.github.io/js-framework-benchmark/2024/table_chrome_123.0.6312.59.html)。
|
||||
|
||||
- **制御フロー**：Leptosは信号を使用してリアクティビティを実現するため、`for`ループや`if`文などのLeptosのプリミティブに制限されます。これを間違えると、アプリケーションはリアクティビティを失い、デバッグが難しいUIの問題が発生します。Dioxusを使用すると、イテレータ、通常のRustの`for`ループ、および`if`文を使用でき、アプリケーションは引き続きリアクティブです。実際には、リストにカウンターを挿入するDioxusコンポーネントは次のようになります：
|
||||
|
||||
```rust
|
||||
fn Counters() -> Element {
|
||||
let mut counters = use_signal(|| vec![0; 10]);
|
||||
|
||||
rsx! {
|
||||
button { onclick: move |_| counters.push(counters.len()), "Add Counter" }
|
||||
ul {
|
||||
for idx in 0..counters.len() {
|
||||
li {
|
||||
button { onclick: move |_| counters.write()[idx] += 1, "{counters.index(idx)}" }
|
||||
button { onclick: move |_| { counters.remove(idx); }, "Remove" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
[Leptosでは、`<For>`コンポーネントを使用します。](https://book.leptos.dev/view/04_iteration.html#dynamic-rendering-with-the-for-component):
|
||||
|
||||
```rust
|
||||
fn Counters() -> impl IntoView {
|
||||
let counters = RwSignal::new(vec![0; 10]);
|
||||
|
||||
view! {
|
||||
<button on:click=move |_| counters.update(|n| n.push(n.len()))>"Add Counter"</button>
|
||||
<For
|
||||
each=move || 0..counters.with(Vec::len)
|
||||
key=|idx| *idx
|
||||
let:idx
|
||||
>
|
||||
<li>
|
||||
<button on:click=move |_| counters.update(|n| n[idx] += 1)>
|
||||
{Memo::new(move |_| counters.with(|n| n[idx]))}
|
||||
</button>
|
||||
<button on:click=move |_| counters.update(|n| { n.remove(idx); })>
|
||||
"Remove"
|
||||
</button>
|
||||
</li>
|
||||
</For>
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- **`Copy`状態**：Dioxus 0.1から0.4までは、Rustの借用チェッカーのルールを緩和するためにライフタイムに依存していました。これはイベントハンドラにはうまく機能しましたが、非同期の面ではうまく機能しませんでした。Dioxus 0.5では、Leptosから借用した[`Copy`状態モデル](https://crates.io/crates/generational-box)に移行しました。
|
||||
|
||||
- **異なる範囲**：Dioxusは、Web、デスクトップ、モバイル、LiveViewなどのレンダラーを提供します。また、コミュニティライブラリとクロスプラットフォームSDKを維持しています。この作業の範囲は広く、歴史的にLeptosよりもリリースサイクルが遅くなっています。LeptosはフルスタックWebに焦点を当てており、Dioxusにはないislands、`<Form />`コンポーネント、およびその他のWeb専用のユーティリティなどの機能を提供します。一般的に、Leptosで構築されたWebアプリケーションは、より小さなフットプリントを持ちます。
|
||||
|
||||
- **異なるDSL**：2つのフレームワークはどちらもWebを対象としていますが、DioxusはUIを構築するために独自のカスタムRust風DSLを使用し、LeptosはよりHTML風の構文を使用します。これは、コード折りたたみや構文ハイライトなどのIDE機能との互換性を維持するために選択されました。一般的に、DioxusはそのDSLでより多くの「魔法」を活用します。たとえば、dioxusは文字列を自動的にフォーマットしますが、Leptosはクロージャと`format!`または`format_args!`マクロを使用する必要があります。
|
||||
|
||||
```rust
|
||||
// dioxus
|
||||
rsx! {
|
||||
div { class: "my-class", enabled: true, "Hello, {name}" }
|
||||
}
|
||||
|
||||
// leptos
|
||||
view! {
|
||||
<div class="my-class" enabled={true}>
|
||||
"Hello "
|
||||
{move || name()}
|
||||
</div>
|
||||
}
|
||||
```
|
||||
|
||||
### DioxusとYewの比較
|
||||
|
||||
Yewは、シングルページWebアプリケーションを構築するためのフレームワークであり、最初はDioxusのインスピレーションとなりました。残念ながら、Yewのアーキテクチャは私たちが望むさまざまな機能をサポートしていなかったため、Dioxusが誕生しました。
|
||||
|
||||
- **シングルページアプリケーション**：YewはシングルページWebアプリケーション専用に設計されており、Webプラットフォームに本質的に結びついています。Dioxusはフルスタックでクロスプラットフォームであり、Web、デスクトップ、モバイル、サーバーアプリケーションの構築に適しています。
|
||||
|
||||
- **開発者ツール**：Dioxusは、オートフォーマット、ホットリロード、バンドラーなどの多くのユーティリティを提供します。
|
||||
|
||||
- **継続的なサポート**：Dioxusは、新機能とバグ修正が毎日追加され、非常に積極的に維持されています。
|
||||
|
||||
### Dioxusとeguiの比較
|
||||
|
||||
eguiは、[Rerun.io](https://www.rerun.io)のようなツールを駆動するRust用のクロスプラットフォームGUIライブラリです。
|
||||
|
||||
- **Immediate vs Retained**：eguiは、各フレームで再レンダリングされるように設計されています。これはゲームやその他のインタラクティブなアプリケーションに適していますが、フレーム間でスタイルとレイアウトの状態を保持しません。Dioxusは、UIが一度構築され、その後フレーム間で変更される保持されたUIフレームワークです。これにより、DioxusはHTMLやCSSなどのネイティブWeb技術を使用でき、バッテリー寿命とパフォーマンスが向上します。
|
||||
|
||||
- **カスタマイズ可能**：eguiは独自のスタイリングとレイアウトソリューションを提供しますが、Dioxusは組み込みのHTMLとCSSの使用を期待しています。これにより、dioxusアプリケーションはTailwindやMaterial UIなどの任意のCSSライブラリを使用できます。
|
||||
|
||||
- **状態管理**：eguiの状態管理は、単一のグローバル状態オブジェクトに基づいています。Dioxusは、コンポーネントとプロパティを使用して状態のカプセル化を奨励し、コンポーネントの再利用性を高めます。
|
||||
|
||||
### DioxusとIcedの比較
|
||||
|
||||
Icedは、Elmに触発されたクロスプラットフォームGUIライブラリです。IcedはWGPUを使用してネイティブにレンダリングし、DOMノードを使用してWebをサポートします。
|
||||
|
||||
- **Elm状態管理**：Icedは、メッセージパッシングとリデューサーに基づくElmの状態管理モデルを使用します。これは単にDioxusとは異なる状態管理モデルであり、時にはかなり冗長になることがあります。
|
||||
|
||||
- **ネイティブな感触**：Dioxusは、レンダラーとしてwebviewを使用するため、ネイティブのテキスト入力、ペースト処理、およびアクセシビリティなどの他のネイティブ機能を自動的に取得します。Icedのレンダラーは現在これらの機能を実装していないため、あまりネイティブに感じられません。
|
||||
|
||||
- **WGPU**：DioxusのWGPUレンダラーは現在かなり未熟であり、まだプロダクションでの使用には準備ができていません。IcedのWGPUレンダラーははるかに成熟しており、プロダクションで使用されています。これにより、Icedで構築できるGPUアクセスが必要な特定のタイプのアプリケーションが可能になりますが、現在のところDioxusでは構築できません。
|
||||
|
||||
### DioxusとElectronの比較
|
||||
|
||||
DioxusとElectronは、目標が似ている完全に異なる2つのプロジェクトです。Electronは、開発者がHTML、CSS、JavaScriptなどのWeb技術を使用してクロスプラットフォームのデスクトップアプリケーションを構築できるようにします。
|
||||
|
||||
- **軽量**：Dioxusは、システムのネイティブWebView、またはオプションでWGPUレンダラーを使用してUIをレンダリングします。これにより、典型的なDioxusアプリケーションはmacOSで約15mbであり、Electronは100mbです。Electronは、ホストOSとシステムリソースをDioxusと同じように共有できない埋め込みのChromiumインスタンスも提供します。
|
||||
|
||||
- **成熟度**：Electronは、大規模なコミュニティと多くのツールを備えた成熟したプロジェクトです。Dioxusは、Electronに比べてまだ非常に若いです。deeplinkingなどの機能を実装するために追加の作業が必要な場合があります。
|
||||
|
||||
## コントリビュート
|
||||
|
||||
- [コントリビュートに関するセクション](https://dioxuslabs.com/learn/0.7/beyond/contributing)を参照してください。
|
||||
- [issue tracker](https://github.com/dioxuslabs/dioxus/issues)で問題を報告してください。
|
||||
- Discordに[参加](https://discord.gg/XgGxMSkvUM)して質問してください！
|
||||
|
||||
<a href="https://github.com/dioxuslabs/dioxus/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=dioxuslabs/dioxus&max=30&columns=10" />
|
||||
</a>
|
||||
|
||||
## ライセンス
|
||||
|
||||
このプロジェクトは[MITライセンス]の下でライセンスされています。
|
||||
|
||||
[MITライセンス]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT
|
||||
|
||||
あなたが明示的に別段の定めをしない限り、あなたによってDioxusに含めるために意図的に提出されたすべてのコントリビュートは、追加の条件なしにMITライセンスの下でライセンスされるものとします。
|
||||
@@ -0,0 +1,393 @@
|
||||
<p>
|
||||
<p align="center" >
|
||||
<img src="../../notes/header-light.svg#gh-light-mode-only" >
|
||||
<img src="../../notes/header-dark.svg#gh-dark-mode-only" >
|
||||
<a href="https://dioxuslabs.com">
|
||||
<img src="../../notes/dioxus_splash_8.avif">
|
||||
</a>
|
||||
</p>
|
||||
</p>
|
||||
<div align="center">
|
||||
<!-- Crates version -->
|
||||
<a href="https://crates.io/crates/dioxus">
|
||||
<img src="https://img.shields.io/crates/v/dioxus.svg?style=flat-square"
|
||||
alt="Crates.io version" />
|
||||
</a>
|
||||
<!-- Downloads -->
|
||||
<a href="https://crates.io/crates/dioxus">
|
||||
<img src="https://img.shields.io/crates/d/dioxus.svg?style=flat-square"
|
||||
alt="Download" />
|
||||
</a>
|
||||
<!-- docs -->
|
||||
<a href="https://docs.rs/dioxus">
|
||||
<img src="https://img.shields.io/badge/docs-latest-blue.svg?style=flat-square"
|
||||
alt="docs.rs docs" />
|
||||
</a>
|
||||
<!-- CI -->
|
||||
<a href="https://github.com/jkelleyrtp/dioxus/actions">
|
||||
<img src="https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg"
|
||||
alt="CI status" />
|
||||
</a>
|
||||
|
||||
<!--Awesome -->
|
||||
<a href="https://dioxuslabs.com/awesome">
|
||||
<img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome Page" />
|
||||
</a>
|
||||
<!-- Discord -->
|
||||
<a href="https://discord.gg/XgGxMSkvUM">
|
||||
<img src="https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square" alt="Discord Link" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
<h3>
|
||||
<a href="https://dioxuslabs.com"> Website </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/tree/main/examples"> Examples </a>
|
||||
<span> | </span>
|
||||
<a href="https://dioxuslabs.com/learn/0.7/tutorial"> Guide </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/zh-cn/README.md"> 中文 </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/pt-br/README.md"> PT-BR </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/ja-jp/README.md"> 日本語 </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/tr-tr"> Türkçe </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/ko-kr"> 한국어 </a>
|
||||
</h3>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
웹, 데스크톱, 모바일 등 다양한 플랫폼을 단일 코드베이스로 구축하세요. 제로 설정 환경, 통합 핫 리로딩, 시그널 기반 상태 관리. 서버 함수로 백엔드 기능을 추가하고 CLI를 사용하여 번들링하세요.
|
||||
|
||||
```rust
|
||||
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!" }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## ⭐️ 고유 기능:
|
||||
|
||||
- 세 줄의 코드로 크로스 플랫폼 앱 개발 (웹, 데스크톱, 모바일, 서버 등)
|
||||
- [인체공학적 상태 관리](https://dioxuslabs.com/blog/release-050)은 React, Solid, Svelte의 장점을 결합했습니다
|
||||
- 극도로 높은 성능을 자랑하며 Rust의 가장 빠른 wasm 프레임워크 [sledgehammer](https://dioxuslabs.com/blog/templates-diffing)에 의해 구동됩니다
|
||||
- 웹, macOS, Linux, Windows에 배포할 수 있는 통합 번들러
|
||||
- 그 외에도 많은 기능! [Dioxus 투어를 살펴보세요](https://dioxuslabs.com/learn/0.7/).
|
||||
|
||||
## 핫 리로딩
|
||||
|
||||
한 개의 명령어, `dx serve`로 앱을 실행하세요. 마크업과 스타일을 수정하면 실시간으로 결과를 확인할 수 있습니다. Rust 코드 핫 리로딩은 아직 1차 지원은 아니지만 [hot-lib-reloader](https://docs.rs/hot-lib-reloader/latest/hot_lib_reloader/)를 통해 가능합니다.
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/hotreload.gif">
|
||||
</div>
|
||||
|
||||
## 웹 및 데스크톱 배포를 위한 번들러
|
||||
|
||||
단순히 `dx bundle`을 실행하면 앱이 빌드되고 최적화된 번들로 패키징됩니다. 웹에서는 [`.avif` 생성, `.wasm` 압축, 최소화](https://dioxuslabs.com/learn/0.7/tutorial/assets) 등을 활용할 수 있습니다. [50kb 미만](https://github.com/ealmloff/tiny-dioxus/)의 웹앱과 15mb 미만의 데스크톱/모바일 앱을 빌드하세요.
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/bundle.gif">
|
||||
</div>
|
||||
|
||||
## 환상적인 문서
|
||||
|
||||
깨끗하고 읽기 쉽고 포괄적인 문서를 구축하는 데 많은 노력을 기울였습니다. 모든 HTML 요소와 리스너는 MDN 문서로 문서화되었으며, 저희 문서 사이트는 Dioxus 자체와 지속적인 통합을 실행하여 문서가 항상 최신 상태로 유지되도록 합니다. 가이드, 참조, 레시피 등을 보려면 [Dioxus 웹사이트](https://dioxuslabs.com/learn/0.7/)를 확인하세요. 재미있는 사실: 저희는 Dioxus 웹사이트를 새로운 Dioxus 기능의 테스트베드로 사용합니다 - [확인해보세요!](https://github.com/dioxusLabs/docsite)
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/docs.avif">
|
||||
</div>
|
||||
|
||||
## 개발자 경험에 중점
|
||||
|
||||
Dioxus는 개발자 경험을 우선시하며, end-to-end 도구 개발에 많은 노력을 기울였습니다. RSX 코드를 자동으로 포맷하고 HTML을 RSX로 변환하는 등 다양한 기능을 제공하는 [VSCode 확장 프로그램](https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus)을 제작했습니다. 또한 새로운 앱 생성, 서비스 실행, 크로스 플랫폼 번들링을 지원하는 매우 강력한 CLI 를 개발했으며, 배포는 향후 로드맵에 포함되어 있습니다.
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/autofmt.gif">
|
||||
</div>
|
||||
|
||||
## 커뮤니티
|
||||
|
||||
Dioxus는 커뮤니티 중심의 프로젝트로, 매우 활발한 [Discord](https://discord.gg/XgGxMSkvUM) 및 [GitHub](https://github.com/DioxusLabs/dioxus/issues) 커뮤니티를 보유하고 있습니다. 우리는 항상 도움을 구하고 있으며, 질문에 답변하고 시작하는 데 도움을 드릴 준비가 되어 있습니다. [우리의 SDK](https://github.com/DioxusLabs/dioxus-std)는 커뮤니티에서 운영되며, 무료 업그레이드와 지원을 받는 최고의 Dioxus 크레이트를 위한 [GitHub 조직](https://github.com/dioxus-community/)도 운영하고 있습니다.
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/dioxus-community.avif">
|
||||
</div>
|
||||
|
||||
## 풀타임 코어 팀
|
||||
|
||||
Dioxus는 사이드 프로젝트에서 소수의 전임 엔지니어 팀으로 성장했습니다. FutureWei, Satellite.im, GitHub Accelerator 프로그램의 후원 덕분에 Dioxus를 풀타임으로 개발할 수 있게 되었습니다. 저희의 장기 목표는 유료 고품질 엔터프라이즈 도구를 제공하여 Dioxus가 자립할 수 있도록 하는 것입니다. 귀사가 Dioxus 도입에 관심이 있고 저희와 함께 일하고 싶다면, 연락해 주세요!
|
||||
|
||||
## 지원 플랫폼
|
||||
|
||||
<div align="center">
|
||||
<table style="width:100%">
|
||||
<tr>
|
||||
<td>
|
||||
<b>웹</b>
|
||||
<br />
|
||||
<em>Tier 1 지원</em>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>WebAssembly을 사용하여 DOM에 직접 렌더링</li>
|
||||
<li>SSR로 사전 렌더링하고 클라이언트에서 리하이드레이션</li>
|
||||
<li>React와 유사한 약 50kb 크기의 간단한 "Hello World"</li>
|
||||
<li>내장된 개발 서버와 핫 리로딩으로 빠른 반복</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>풀스택</b>
|
||||
<br />
|
||||
<em>Tier 1 지원</em>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>서스펜스, 리하이드레이션, 서버 사이드 렌더링</li>
|
||||
<li>서버 함수로 백엔드 기능을 빠르게 추가</li>
|
||||
<li>추출기, 미들웨어, 라우팅 통합</li>
|
||||
<li>데스크톱 및 모바일과 호환 가능!</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>데스크톱</b>
|
||||
<br />
|
||||
<em>Tier 1 지원</em>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>Webview를 사용하여 렌더링하거나 실험적으로 WGPU 또는 <a href="https://freyaui.dev">Freya</a> (skia)와 함께 렌더링</li>
|
||||
<li>제로 설정. 간단히 `cargo run` 또는 `dx serve`로 앱을 빌드</li>
|
||||
<li>IPC 없이 네이티브 시스템 접근에 대한 완전한 지원</li>
|
||||
<li>macOS, Linux, Windows를 지원합니다. 3MB 미만의 포터블 바이너리</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>Liveview</b>
|
||||
<br />
|
||||
<em>Tier 1 지원</em>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>앱 전체 또는 단일 컴포넌트만을 서버에서 완전히 렌더링</li>
|
||||
<li>Axum, Warp와 같은 인기 있는 Rust 프레임워크와의 통합</li>
|
||||
<li>극도로 낮은 지연 시간과 10,000개 이상의 동시 앱 지원 가능</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>모바일</b>
|
||||
<br />
|
||||
<em>Tier 2 지원</em>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>Webview를 사용하여 렌더링하거나 실험적으로 WGPU 또는 Skia와 함께 렌더링</li>
|
||||
<li>iOS 및 Android 지원</li>
|
||||
<li>현재는 꽤 실험적이며, 2024년 내내 많은 개선 예정</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>터미널</b>
|
||||
<br />
|
||||
<em>Tier 2 지원</em>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vadimdemedes/ink">ink.js</a>와 유사하게 앱을 터미널에 직접 렌더링</li>
|
||||
<li>익숙한 브라우저의 flexbox 및 CSS 모델로 구동</li>
|
||||
<li>텍스트 입력, 버튼, 포커스 시스템과 같은 내장 위젯</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
## 예제 실행하기
|
||||
|
||||
> 이 저장소의 메인 브랜치에 있는 예제들은 dioxus의 git 버전과 CLI를 대상으로 합니다. 최신 안정 버전의 dioxus와 호환되는 예제를 찾고 있다면 [0.5 브랜치](https://github.com/DioxusLabs/dioxus/tree/v0.6/examples)를 확인하세요.
|
||||
|
||||
이 저장소 최상위에 있는 예제들은 다음과 같이 실행할 수 있습니다:
|
||||
|
||||
```sh
|
||||
cargo run --example <example>
|
||||
```
|
||||
|
||||
그러나 dioxus-cli 다운로드를 권장합니다. git 버전의 dioxus를 사용 중인 경우, 다음 명령어로 CLI의 일치하는 버전을 설치할 수 있습니다:
|
||||
|
||||
```sh
|
||||
cargo install --git https://github.com/DioxusLabs/dioxus dioxus-cli --locked
|
||||
```
|
||||
|
||||
CLI를 사용하면 웹 플랫폼에서 예제를 실행할 수도 있습니다. 이 명령어로 기본 데스크톱 기능을 비활성화하고 웹 기능을 활성화하면 됩니다:
|
||||
|
||||
```sh
|
||||
dx serve --example <example> --platform web -- --no-default-features
|
||||
```
|
||||
|
||||
## Dioxus vs 다른 프레임워크
|
||||
|
||||
우리는 모든 프레임워크를 사랑하며 Rust 생태계의 혁신을 지켜보는 것을 즐깁니다. 실제로, 많은 프로젝트가 다른 프레임워크와 공유되고 있습니다. 예를 들어, 우리의 flex-box 라이브러리 [Taffy](https://github.com/DioxusLabs/taffy)는 [Bevy](https://bevyengine.org/), [Zed](https://zed.dev/), [Lapce](https://lapce.dev/), [Iced](https://github.com/iced-rs/iced) 등에서 사용되고 있습니다.
|
||||
|
||||
Dioxus는 다른 프레임워크와 차별화되는 몇 가지 핵심 사항에 중점을 둡니다:
|
||||
|
||||
- **React처럼**: 우리는 컴포넌트, props, 훅과 같은 개념을 사용하여 UI를 구축하며, 상태 관리는 SolidJS보다 Svelte에 더 가깝습니다.
|
||||
- **HTML과 CSS**: 우리는 HTML과 CSS를 완전히 활용하며, 특이점도 모두 수용합니다.
|
||||
- **독립적 렌더러**: [우리의 빠른 VirtualDOM](https://dioxuslabs.com/blog/templates-diffing) 덕분에 원하는 플랫폼의 렌더러로 교체할 수 있습니다.
|
||||
- **협업적**: 가능한 한 [Taffy](https://github.com/DioxusLabs/taffy), [magnanis](https://github.com/DioxusLabs/manganis), [include_mdbook](https://github.com/DioxusLabs/include_mdbook), [blitz](http://github.com/dioxusLabs/blitz)와 같은 크레이트를 분리하여 생태계가 함께 성장할 수 있도록 합니다.
|
||||
|
||||
### Dioxus vs Tauri
|
||||
|
||||
Tauri는 프론트엔드가 React, Vue, Svelte 등의 웹 기반 프레임워크로 작성된 데스크톱(모바일 지원 예정) 앱을 구축하기 위한 프레임워크입니다. 네이티브 작업이 필요할 때마다 Rust 함수를 작성하여 프론트엔드에서 호출할 수 있습니다.
|
||||
|
||||
- **네이티브 Rust**: Tauri의 아키텍처는 UI를 JavaScript 또는 WebAssembly로 제한합니다. 반면 Dioxus에서는 Rust 코드가 사용자의 머신에서 네이티브로 실행되어 스레드 생성, 파일 시스템 접근 등의 작업을 IPC 브리지를 사용하지 않고 수행할 수 있습니다. 이는 앱의 아키텍처를 대폭 단순화하고 구축을 용이하게 합니다. 원하신다면 Dioxus-Web을 프론트엔드로 사용하여 Tauri 앱을 구축할 수도 있습니다.
|
||||
- **범위 차이**: Tauri는 JavaScript와 복잡한 빌드 도구를 지원해야 하므로 할 수 있는 작업의 범위가 제한됩니다. Dioxus는 Rust에 전적으로 집중하고 있기 때문에 Server Functions, 고급 번들링, 네이티브 렌더러와 같은 추가 유틸리티를 제공할 수 있습니다.
|
||||
- **공유된 DNA**: Tauri와 Dioxus는 별도의 프로젝트이지만, Tao와 Wry와 같은 라이브러리를 공유합니다. 이들은 Tauri 팀에서 유지 관리하는 윈도잉 및 웹뷰 라이브러리입니다.
|
||||
|
||||
### Dioxus vs Leptos
|
||||
|
||||
Leptos는 SolidJS와 SolidStart와 유사하게 풀스택 웹 앱을 구축하기 위한 라이브러리입니다. 두 라이브러리는 웹에서 유사한 목표를 공유하지만 몇 가지 주요 차이점이 있습니다:
|
||||
|
||||
- **반응성 모델**: Leptos는 기본 반응성으로 시그널을 사용하는 반면, Dioxus는 VirtualDom과 리렌더링을 선택합니다. 이론적으로 시그널이 더 효율적이지만, 실제로 Dioxus의 VirtualDom은 [block-dom 영감을 받은 템플릿](https://dioxuslabs.com/blog/templates-diffing) 덕분에 실제 차이점을 거의 수행하지 않으며 [실제로 Leptos보다 빠릅니다](https://krausest.github.io/js-framework-benchmark/2024/table_chrome_123.0.6312.59.html).
|
||||
|
||||
- **제어 흐름**: Leptos가 반응성으로 시그널을 사용하기 때문에, `for` 루프와 `if` 문과 같은 Leptos의 원시 구조에 제한됩니다. 이를 잘못 사용하면 앱의 반응성이 상실되어 디버깅이 어려운 UI 문제가 발생할 수 있습니다. Dioxus에서는 이터레이터, 일반 Rust의 `for` 루프 및 `if` 문을 사용할 수 있으며, 앱은 여전히 반응성을 유지합니다. 실제로, 목록에 카운터를 삽입하는 Dioxus 컴포넌트는 다음과 같을 수 있습니다:
|
||||
|
||||
```rust
|
||||
fn Counters() -> Element {
|
||||
let mut counters = use_signal(|| vec![0; 10]);
|
||||
|
||||
rsx! {
|
||||
button { onclick: move |_| counters.push(counters.len()), "Add Counter" }
|
||||
ul {
|
||||
for idx in 0..counters.len() {
|
||||
li {
|
||||
button { onclick: move |_| counters.write()[idx] += 1, "{counters.index(idx)}" }
|
||||
button { onclick: move |_| { counters.remove(idx); }, "Remove" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
[Leptos에서는 `<For>` 컴포넌트를 사용합니다.](https://book.leptos.dev/view/04_iteration.html#dynamic-rendering-with-the-for-component):
|
||||
|
||||
```rust
|
||||
fn Counters() -> impl IntoView {
|
||||
let counters = RwSignal::new(vec![0; 10]);
|
||||
|
||||
view! {
|
||||
<button on:click=move |_| counters.update(|n| n.push(n.len()))>"Add Counter"</button>
|
||||
<For
|
||||
each=move || 0..counters.with(Vec::len)
|
||||
key=|idx| *idx
|
||||
let:idx
|
||||
>
|
||||
<li>
|
||||
<button on:click=move |_| counters.update(|n| n[idx] += 1)>
|
||||
{Memo::new(move |_| counters.with(|n| n[idx]))}
|
||||
</button>
|
||||
<button on:click=move |_| counters.update(|n| { n.remove(idx); })>
|
||||
"Remove"
|
||||
</button>
|
||||
</li>
|
||||
</For>
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- **`Copy` 상태**: Dioxus 0.1부터 0.4까지는 Rust의 borrow 검사기의 규칙을 완화하기 위해 생명주기에 의존했습니다. 이는 이벤트 핸들러에는 잘 작동했지만, 비동기 작업에서는 어려움을 겪었습니다. Dioxus 0.5에서는 Leptos에서 차용한 [`Copy` 상태 모델](https://crates.io/crates/generational-box)로 전환했습니다.
|
||||
|
||||
- **범위 차이**: Dioxus는 웹, 데스크톱, 모바일, LiveView 등을 위한 렌더러를 제공합니다. 또한 커뮤니티 라이브러리와 크로스 플랫폼 SDK를 유지 관리합니다. 이 작업의 범위가 방대하여 역사적으로 Leptos보다 느린 주기로 릴리스되었습니다. Leptos는 전체 스택 웹에 중점을 두며, Dioxus에는 없는 islands, `<Form />` 컴포넌트 및 기타 웹 전용 기능과 같은 기능을 제공합니다. 일반적으로 Leptos로 구축한 웹 앱은 더 작은 용량을 가집니다.
|
||||
|
||||
- **다른 DSL**: 두 프레임워크 모두 웹을 목표로 하지만, Dioxus는 UI 구축을 위해 자체적인 Rust 유사 DSL을 사용하는 반면, Leptos는 더 HTML 유사한 구문을 사용합니다. 이는 코드 접기 및 구문 강조와 같은 IDE 기능과의 호환성을 유지하기 위해 선택한 것입니다. 일반적으로 Dioxus는 DSL에서 더 많은 "매직"을 활용합니다. 예를 들어, dioxus는 문자열을 자동으로 포맷해주지만, Leptos는 문자열을 정적 및 동적 세그먼트로 분할할 수 있습니다.
|
||||
|
||||
```rust
|
||||
// dioxus
|
||||
rsx! {
|
||||
div { class: "my-class", enabled: true, "Hello, {name}" }
|
||||
}
|
||||
|
||||
// leptos
|
||||
view! {
|
||||
<div class="my-class" enabled={true}>
|
||||
"Hello "
|
||||
{name}
|
||||
</div>
|
||||
}
|
||||
```
|
||||
|
||||
### Dioxus vs Yew
|
||||
|
||||
Yew는 싱글 페이지 웹 앱을 구축하기 위한 프레임워크로, 처음에는 Dioxus에 영감을 주었습니다. 불행히도 Yew의 아키텍처는 우리가 원하는 다양한 기능을 지원하지 않아 Dioxus가 탄생하게 되었습니다.
|
||||
|
||||
- **싱글 페이지 앱**: Yew는 싱글 페이지 웹 앱 전용으로 설계되었으며 웹 플랫폼에 본질적으로 묶여 있습니다. Dioxus는 풀스택 및 크로스 플랫폼으로, 웹, 데스크톱, 모바일, 서버 앱을 구축하는 데 적합합니다.
|
||||
|
||||
- **개발자 도구**: Dioxus는 자동 포맷팅, 핫 리로딩, 번들러 등 다양한 유틸리티를 제공합니다.
|
||||
|
||||
- **지속적인 지원**: Dioxus는 새로운 기능과 버그 수정이 매일 추가되며 매우 적극적으로 유지 관리되고 있습니다.
|
||||
|
||||
### Dioxus vs egui
|
||||
|
||||
egui는 [Rerun.io](https://www.rerun.io)와 같은 도구를 구동하는 Rust용 크로스 플랫폼 GUI 라이브러리입니다.
|
||||
|
||||
- **Immediate vs Retained**: egui는 매 프레임마다 리렌더링되도록 설계되었습니다. 이는 게임 및 기타 인터랙티브 애플리케이션에 적합하지만, 프레임 간에 스타일 및 레이아웃 상태를 유지하지 않습니다. Dioxus는 UI가 한 번 구축된 후 프레임 간에 수정되는 retained UI 프레임워크입니다. 이를 통해 Dioxus는 HTML 및 CSS와 같은 네이티브 웹 기술을 사용하여 더 나은 배터리 수명과 성능을 제공합니다.
|
||||
|
||||
- **커스터마이징 가능**: egui는 자체 스타일링 및 레이아웃 솔루션을 제공하는 반면, Dioxus는 내장된 HTML 및 CSS 사용을 기대합니다. 이를 통해 Dioxus 앱은 Tailwind 또는 Material UI와 같은 CSS 라이브러리를 사용할 수 있습니다.
|
||||
|
||||
- **상태 관리**: egui의 상태 관리는 단일 전역 상태 객체를 기반으로 합니다. Dioxus는 컴포넌트와 props를 사용하여 상태의 캡슐화를 장려하여 컴포넌트의 재사용성을 높입니다.
|
||||
|
||||
### Dioxus vs Iced
|
||||
|
||||
Iced는 Elm에서 영감을 받은 크로스 플랫폼 GUI 라이브러리입니다. Iced는 WGPU로 네이티브 렌더링을 지원하며, DOM 노드를 사용하여 웹을 지원합니다.
|
||||
|
||||
- **Elm 상태 관리**: Iced는 메시지 전달과 리듀서를 기반으로 하는 Elm의 상태 관리 모델을 사용합니다. 이는 Dioxus와는 단순히 다른 상태 관리 모델이며, 때로는 다소 장황할 수 있습니다.
|
||||
|
||||
- **네이티브 느낌**: Dioxus는 렌더러로 webview를 사용하기 때문에 네이티브 텍스트 입력, 붙여넣기 처리, 접근성과 같은 기타 네이티브 기능을 자동으로 지원합니다. 현재 Iced의 렌더러는 이러한 기능을 구현하지 않아 덜 네이티브하게 느껴집니다.
|
||||
|
||||
- **WGPU**: Dioxus의 WGPU 렌더러는 현재 상당히 미성숙하며 아직 프로덕션 사용에 준비되지 않았습니다. Iced의 WGPU 렌더러는 훨씬 더 성숙하며 프로덕션에서 사용되고 있습니다. 이는 GPU 접근이 필요한 특정 유형의 앱을 Iced로 구축할 수 있게 해주지만, 현재 Dioxus로는 구축할 수 없습니다.
|
||||
|
||||
### Dioxus vs Electron
|
||||
|
||||
Dioxus와 Electron은 유사한 목표를 가진 완전히 다른 두 프로젝트입니다. Electron은 개발자가 HTML, CSS, JavaScript와 같은 웹 기술을 사용하여 크로스 플랫폼 데스크톱 앱을 구축할 수 있도록 합니다.
|
||||
|
||||
- **경량화**: Dioxus는 시스템의 네이티브 WebView 또는 선택적으로 WGPU 렌더러를 사용하여 UI를 렌더링합니다. 이로 인해 일반적인 Dioxus 앱은 macOS에서 약 15MB인 반면, Electron은 100MB입니다. Electron은 또한 Dioxus와 동일한 방식으로 호스트 OS와 시스템 리소스를 공유할 수 없는 내장된 Chromium 인스턴스를 포함하고 있습니다.
|
||||
|
||||
- **성숙도**: Electron은 대규모 커뮤니티와 많은 도구를 갖춘 성숙한 프로젝트입니다. Dioxus는 Electron에 비해 아직 꽤 젊은 편입니다. deeplinking과 같은 기능을 구현하기 위해 추가 작업이 필요할 수 있습니다.
|
||||
|
||||
## 기여하기
|
||||
|
||||
- 웹사이트의 [기여 섹션](https://dioxuslabs.com/learn/0.7/beyond/contributing)을 확인하세요.
|
||||
- [이슈 트래커](https://github.com/dioxuslabs/dioxus/issues)에 이슈를 보고하세요.
|
||||
- [Discord](https://discord.gg/XgGxMSkvUM)에 참여하여 질문하세요!
|
||||
|
||||
<a href="https://github.com/dioxuslabs/dioxus/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=dioxuslabs/dioxus&max=30&columns=10" />
|
||||
</a>
|
||||
|
||||
## 라이선스
|
||||
|
||||
이 프로젝트는 [MIT 라이선스] 또는 [Apache-2 라이선스] 중 하나로 라이선스됩니다.
|
||||
|
||||
[apache-2 라이선스]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-APACHE
|
||||
[mit 라이선스]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT
|
||||
|
||||
별도로 명시하지 않는 한, 귀하가 Dioxus에 포함되도록 의도적으로 제출한 모든 기여는 추가 조건 없이 MIT 또는 Apache-2 라이선스로 라이선스됩니다.
|
||||
@@ -0,0 +1,171 @@
|
||||
<p align="center">
|
||||
<img src="../../notes/header.svg">
|
||||
</p>
|
||||
|
||||
<div align="center">
|
||||
<!-- Crates version -->
|
||||
<a href="https://crates.io/crates/dioxus">
|
||||
<img src="https://img.shields.io/crates/v/dioxus.svg?style=flat-square"
|
||||
alt="Crates.io version" />
|
||||
</a>
|
||||
<!-- Downloads -->
|
||||
<a href="https://crates.io/crates/dioxus">
|
||||
<img src="https://img.shields.io/crates/d/dioxus.svg?style=flat-square"
|
||||
alt="Download" />
|
||||
</a>
|
||||
<!-- docs -->
|
||||
<a href="https://docs.rs/dioxus">
|
||||
<img src="https://img.shields.io/badge/docs-latest-blue.svg?style=flat-square"
|
||||
alt="docs.rs docs" />
|
||||
</a>
|
||||
<!-- CI -->
|
||||
<a href="https://github.com/jkelleyrtp/dioxus/actions">
|
||||
<img src="https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg"
|
||||
alt="CI status" />
|
||||
</a>
|
||||
|
||||
<!--Awesome -->
|
||||
<a href="https://github.com/dioxuslabs/awesome-dioxus">
|
||||
<img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome Page" />
|
||||
</a>
|
||||
<!-- Discord -->
|
||||
<a href="https://discord.gg/XgGxMSkvUM">
|
||||
<img src="https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square" alt="Discord Link" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
<h3>
|
||||
<a href="https://dioxuslabs.com"> Website </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/example-projects"> Exemplos </a>
|
||||
<span> | </span>
|
||||
<a href="https://dioxuslabs.com/learn/0.7/"> Guia </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/zh-cn/README.md"> 中文 </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/ja-jp/README.md"> 日本語 </a>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
> 💡 Este é um documento traduzido voluntariamente. Se você viu erros de tradução e/ou erros de digitação, entre em contato: [@amindWalker](https://github.com/amindWalker), [GMail](bhrochamail@gmail.com) ou **_melhor ainda, envie um PR_**.
|
||||
|
||||
<br>
|
||||
|
||||
**Dioxus** é um framework ergonômico para construir interfaces de forma portátil, rápida, escalável e robusta com a linguagem de programação Rust.
|
||||
|
||||
```rust
|
||||
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!" }
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
O Dioxus pode ser usado para desenvolver aplicativos Web, Desktop, sites estáticos, TUI, LiveView e mais. O Dioxus é inteiramente agnóstico de renderizador e pode ser usado como uma plataforma para qualquer renderizador.
|
||||
|
||||
Se você conhece React, então você já conhece o Dioxus.
|
||||
|
||||
### Funções Únicas:
|
||||
|
||||
- Aplicativos Desktop rodam nativamente (sem ElectronJS!) em menos de 10 linhas de código.
|
||||
- Incrivelmente ergonômico e um poderoso gerenciador de estados.
|
||||
- Documentação compreensiva - guias e explicações ao apontar o mouse para todos os elementos HTML e eventos.
|
||||
- Extremamente eficiente em memória - 0 alocações globais para componentes com estado-estável.
|
||||
- Agendamento assíncrono de canais-múltiplos para suporte de `async` de primera-classe.
|
||||
- E mais! Leia as [publicações de lançamento](https://dioxuslabs.com/blog/introducing-dioxus/).
|
||||
|
||||
## Projetos de Exemplo:
|
||||
|
||||
| Navegador de Arquivos (Desktop) | WiFi Scanner (Desktop) | TodoMVC (Todas as Plataformas) | E-commerce com Tailwind (SSR/LiveView) |
|
||||
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [](https://github.com/DioxusLabs/example-projects/blob/master/file-explorer) | [](/examples/bluetooth-scanner/) | [](https://github.com/DioxusLabs/example-projects/blob/master/todomvc) | [](https://github.com/DioxusLabs/example-projects/blob/master/ecommerce-site) |
|
||||
|
||||
Veja a página [awesome-dioxus](https://github.com/DioxusLabs/awesome-dioxus) para uma lista curada do conteúdo dentro do ecossistema do Dioxus.
|
||||
|
||||
## Porquê o Dioxus e porquê o Rust?
|
||||
|
||||
TypeScript é uma adição fantástica ao JavaScript, mas ainda é fundamentalmente JavaScript. TS executa ligeiramente mais devagar, tem várias opções de configurações diferentes e nem todos os pacotes estão propriamente tipados.
|
||||
|
||||
Apenas por usar o Rust, nós ganhamos:
|
||||
|
||||
- Tipos estáticos para _todas_ as bibliotecas por padrão
|
||||
- Imutabilidade por padrão
|
||||
- Um sistema de módulos simples e intuitivo
|
||||
- Documentação integrada na própria linguagem (`go to source` _de fato vai até a fonte_)
|
||||
- Padrões de combinação avançados
|
||||
- Iteradores limpos, eficientes e combináveis
|
||||
- Testes de Unidade/Integração em linha integrados à linguagem
|
||||
- O melhor da classe em Tratamento de Erros
|
||||
- Biblioteca padrão poderosa e sensata
|
||||
- Sistema de macros flexível
|
||||
- Acesso ao `crates.io`
|
||||
|
||||
Especificamente, o Dioxus providencia para nós muitas outras garantias:
|
||||
|
||||
- Estrutura de Dados imutável apropriada
|
||||
- Garantias para Tratamento de Erros (assim você pode dormir em paz à noite sem se preocupar com erros do tipo `undefined`)
|
||||
- Desempenho móvel nativo
|
||||
- Acesso direto ao sistema de Entrada/Saída (IO)
|
||||
|
||||
E muito mais. Dioxus faz com que aplicativos em Rust sejam rápidos de escrever como os de React, mas permite mais robustez dando ao sua equipe frontend mais confiança em desenvolver grandes mudanças em pouco tempo.
|
||||
|
||||
## Porquê não o Dioxus?
|
||||
|
||||
Você não deve usar o Dioxus se:
|
||||
|
||||
- Você não gosta da metodologia do React Hooks para o frontend
|
||||
- Você precisa de um renderizador personalizado
|
||||
- Você quer suporte para navegadores que não tenham suporte ao WASM ou asm.js
|
||||
- Você precisa de uma solução `Send` + `Sync` (o Dioxus ainda não é `thread-safe`)
|
||||
|
||||
## Comparação com outras frameworks de UI em Rust:
|
||||
|
||||
Dioxus primeiramente enfatiza a **experiência do desenvolvedor** e a **familiaridade com os princípios do React**.
|
||||
|
||||
- [Yew](https://github.com/yewstack/yew): prefere o padrão `elm`, não há `props` emprestadas, suporta SSR (sem `hydration`), sem suporte direto para Desktop/Móvel.
|
||||
- [Percy](https://github.com/chinedufn/percy): suporta SSR, mas com menos ênfase em gerenciamento de estado e tratamento de eventos.
|
||||
- [Sycamore](https://github.com/sycamore-rs/sycamore): sem `VirtualDOM` usando controle preciso de reatividade, mas sem suporte direto à aplicativos Desktop/Móvel.
|
||||
- [Dominator](https://github.com/Pauan/rust-dominator): alternativa zero-custo baseada em sinais, menos ênfase em comunidade e documentação.
|
||||
- [Azul](https://azul.rs): renderizador HTML/CSS totalmente nativo para aplicações Desktop, sem suporte para Web/SSR.
|
||||
|
||||
## Paridade com React e Progresso
|
||||
|
||||
Dioxus é fortemente inspirado pelo React, mas nós queremos que sua transição pareça como um aprimoramento. Dioxus está _quase_ lá, mas ainda faltam alguma funções chave. Isto inclui:
|
||||
|
||||
- Portais
|
||||
- Suspensão integrada ao SSR
|
||||
- Componentes de Servidor / Segmentador de Pacotes / Execução Tardia (Lazy)
|
||||
|
||||
Dioxus é único no ecossistema do Rust por suportar:
|
||||
|
||||
- Componentes com propriedade que são emprestadas dos seus parentes
|
||||
- SSR com `hydration` feito pelo Cliente
|
||||
- Suporte à aplicação Desktop
|
||||
|
||||
Para mais informações sobre quais funções estão atualmente disponíveis e para o progresso futuro, veja [O Guia](https://dioxuslabs.com/learn/0.7/).
|
||||
|
||||
## Projeto dentro do ecossistema Dioxus
|
||||
|
||||
Quer adentrar e ajudar a construir o futuro do frontend em Rust? Há um vasto número de lugares em que você pode contribuir e fazer uma grande diferença:
|
||||
|
||||
- [Ferramentas CLI](https://github.com/dioxusLabs/dioxus/tree/main/packages/cli)
|
||||
- [Documentação e Exemplos de Projeto](https://github.com/dioxusLabs/docsite)
|
||||
- LiveView e Servidor Web
|
||||
- Sistema de Componentes prontos
|
||||
|
||||
## Licença
|
||||
|
||||
Este projeto é licenciado sob a licença MIT.
|
||||
|
||||
[licença mit]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT
|
||||
|
||||
### Contribuições
|
||||
|
||||
A menos que você explicitamente ateste o contrário, qualquer contribuição feita ao Dioxus por você será licenciada de acordo com a licença MIT sem nenhum outro termo ou condição.
|
||||
@@ -0,0 +1,408 @@
|
||||
<p>
|
||||
<p align="center" >
|
||||
<img src="../../notes/header-light.svg#gh-light-mode-only" >
|
||||
<img src="../../notes/header-dark.svg#gh-dark-mode-only" >
|
||||
<a href="https://dioxuslabs.com">
|
||||
<img src="../../notes/dioxus_splash_8.avif">
|
||||
</a>
|
||||
</p>
|
||||
</p>
|
||||
<div align="center">
|
||||
<!-- Crates version -->
|
||||
<a href="https://crates.io/crates/dioxus">
|
||||
<img src="https://img.shields.io/crates/v/dioxus.svg?style=flat-square"
|
||||
alt="Crates.io version" />
|
||||
</a>
|
||||
<!-- Downloads -->
|
||||
<a href="https://crates.io/crates/dioxus">
|
||||
<img src="https://img.shields.io/crates/d/dioxus.svg?style=flat-square"
|
||||
alt="Download" />
|
||||
</a>
|
||||
<!-- docs -->
|
||||
<a href="https://docs.rs/dioxus">
|
||||
<img src="https://img.shields.io/badge/docs-latest-blue.svg?style=flat-square"
|
||||
alt="docs.rs docs" />
|
||||
</a>
|
||||
<!-- CI -->
|
||||
<a href="https://github.com/jkelleyrtp/dioxus/actions">
|
||||
<img src="https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg"
|
||||
alt="CI status" />
|
||||
</a>
|
||||
|
||||
<!--Awesome -->
|
||||
<a href="https://dioxuslabs.com/awesome">
|
||||
<img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome Page" />
|
||||
</a>
|
||||
<!-- Discord -->
|
||||
<a href="https://discord.gg/XgGxMSkvUM">
|
||||
<img src="https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square" alt="Discord Link" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
<h3>
|
||||
<a href="https://dioxuslabs.com"> Website </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/example-projects"> Examples </a>
|
||||
<span> | </span>
|
||||
<a href="https://dioxuslabs.com/learn/0.7/tutorial"> Guide </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/zh-cn/README.md"> 中文 </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/pt-br/README.md"> PT-BR </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/ja-jp/README.md"> 日本語 </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/tr-tr"> Türkçe </a>
|
||||
</h3>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
> Çevirmen Notu (Translator Note): Teknik terimleri orijinal haliyle kullanıp, olabildiğince açıklamaya çalıştım ki hem tecrübeli hem de yeni başlayan arkadaşlar için daha kolay olsun diye. Sektör dilimiz İngilizce olduğundan parantez içindeki bilgiler çoğunlukla yeni dostlar için, tecrübeli arkadaşlar zaten terimlere de ne anlama geldiklerine de aşina. Teknik terimleri günlük hayatta da orijinal halinde kullandığımızdan, kavramları Türkçe'ye çevirme kısmı garip oldu. Gerekli de değildi ama yine de bilmeyen insanların da kafalarında bir şeyler canlandırmaya çalıştım. Yoksa kimse frontend için önyüz demiyor yahut framework yerine Türkçe bir şeyler kullanmıyoruz, ben de farkındayım. Çok da rahatsız etmemek adına sadece kavramlarla ilk karşılaştığınız yerlerde açıkladım devamında orijinal haliyle kullandım. Hatalar varsa affola.
|
||||
|
||||
Web, masaüstü ve mobil; tek bir kod altyapısıyla üret. Eforsuz kurulum, entegre hotreloading(sürekli kendin derlemek yerine, güncelleme tespit edildikçe otomatik aktifleşmesi) ve sinyal temelli durum yönetimi. Sunucu fonksiyonları ile backend (arkayüz) özellikleri ekle ve CLI (Command-line Interface(Komut-satırı Arayüzü, terminal uygulaması))ile paketle (`dx bundle` sayesinde).
|
||||
|
||||
```rust
|
||||
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!" }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## ⭐️ Nevi Şahsına Münhasır Özellikler:
|
||||
|
||||
- 3 satır kod ile çapraz platform uygulamalar (web, masaüstü, mobil, sunucu ve daha fazlası).
|
||||
- [Ergonomik durum yönetimi](https://dioxuslabs.com/blog/release-050) React, Solid ve Svelte'nin en iyi özelliklerini birleştirdik.
|
||||
- Rust'ın en en hızlı wasm(WebAssembly)-framework'ü (yazılım geliştirmek için kullanılan kütüphanelerin bir araya gelmesi ile oluşan yapılar) ile yüksek performans [sledgehammer](https://dioxuslabs.com/blog/templates-diffing).
|
||||
- Web, macOS, Linux ve Windows üzerinde deploy (yayınlamak) için entegre paketleyici (burada belirtilen `dx bundle` bizim için işleri hallediyor).
|
||||
- Ve daha fazlası! Gözat -> [Dioxus turu](https://dioxuslabs.com/learn/0.7/).
|
||||
|
||||
## Anında hot-reloading
|
||||
|
||||
Tek bir `dx serve` komutu ile uygulamanı çalıştır. Markup ve styles(html ve css aklınıza gelebilir burada, Dioxus da rsx ile yapıyorsunuz bu tarz şeyleri. Ekstradan css düzenlemeleri de yapabilirsiniz) düzenle ve sonucunu gerçek zamanlı gör. Rust'ın hotreloading özellikleri halen birinci sınıf olmasa da [hot-lib-reloader](https://docs.rs/hot-lib-reloader/latest/hot_lib_reloader/) ile mümkün.
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/hotreload.gif">
|
||||
</div>
|
||||
|
||||
## Web ve Masaüstü için Paketleyici
|
||||
|
||||
Basitçe `dx bundle` komutunu çalıştır ve uygulaman maksimum optimizasyon ile derlenip paketlensin. Web üzerindeki [`.avif` oluşturma, `.wasm` sıkıştırma, küçültme](https://dioxuslabs.com/learn/0.7/tutorial/assets) ve daha fazlası ile avantajı yakala. [50kb'dan daha küçük](https://github.com/ealmloff/tiny-dioxus/) hafif web uygulamaları ve 15mb'dan daha az boyutlarda masaüstü/mobil uygulamalar üret.
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/bundle.gif">
|
||||
</div>
|
||||
|
||||
## Fantastik Dökümantasyon
|
||||
|
||||
Temiz, okunabilir ve kapsayıcı döküman için bir ton uğraştık. Bütün html elementleri ve listeners(takipçiler) MDN (geliştiriciler için dökümantasyon detay için [tıkla](https://developer.mozilla.org)) ile dökümente edildi, ve güncelliğinden emin olmak için docsite(dökümanlar) Dioxus'un kendisi ile sürekli entegrasyon halinde. Rehbeler, referanslar, tarifler, ve daha fazlası için göz at [Dioxus websitesi](https://dioxuslabs.com/learn/0.7/). İlginç gerçek: Dioxus'un sitesini yeni özelliklerimizi test etmek için deneme tahtası olarak kullanıyoruz -> [Göz at!](https://github.com/dioxusLabs/docsite)
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/docs.avif">
|
||||
</div>
|
||||
|
||||
## Geliştirici Deneyimini Önemse
|
||||
|
||||
Dioxus geliştirici deneyimini önceliklendirir, bu kapsamda end-to-end tooling (uçtan uca araç desteği) için tonla efor harcadık. [VSCode eklentisi](https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus) geliştirdik bu sayede RSX kodlarınızı otomatik formatlayabilir, HTML', RSX e çevirebilir ve daha fazlasını yapabilirsiniz. Aynı zamanda geliştirdiğimiz çok güçlü CLI sayesinde yeni uygulamalar üretmenize yardım ediyor, onları serve (sunmanızı) ve çapraz platform çalışacak şekilde paketlemenizi sağlıyoruz. Yol haritamızda deployment da mevcut.
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/autofmt.gif">
|
||||
</div>
|
||||
|
||||
## Topluluk
|
||||
|
||||
Dioxus topluluk tarafından yürütülen epey aktif [Discord](https://discord.gg/XgGxMSkvUM) ve [GitHub](https://github.com/DioxusLabs/dioxus/issues) topluluğuna sahip bir proje. Her zaman yardım alıyoruz, sorularınızı cevaplamaktan mutlu oluyoruz ve projelerinize başlamanız için size destek oluyoruz. [SDK'mız (Software Development Kit (Yazılım Geliştirme Paketi))](https://github.com/DioxusLabs/dioxus-std) topluluk tarafından geliştiriliyor ve hatta [GitHub organizasyonu](https://github.com/dioxus-community/) ile ücretsiz güncelleme ve destek alan, en iyi Dioxus uygulamalarına ulaşabilirsiniz.
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/dioxus-community.avif">
|
||||
</div>
|
||||
|
||||
## Tam Zamanlı Çalışan Çekirdek Kadro
|
||||
|
||||
Ek proje olarak başlayan Dioxus küçük bir takımın tam zamanlı çalıştığı bir hale geldi. FutureWei, Satellite.im ve Github Accelerator programları sayesinde Dioxus üzerinde tam zamanlı olarak çalışabiliyoruz. Uzun vade planımız ise yüksek kaliteli ücretli kurumsal araçlar sunarak, Dioxus'u kendine yetebilen bir hale getirmek. Eğer şirketiniz Dioxus kullanmak ve bizimle çalışmak isterse, lütfen bize ulaşın!
|
||||
|
||||
## Desteklenen Platformlar
|
||||
|
||||
<div align="center">
|
||||
<table style="width:100%">
|
||||
<tr>
|
||||
<td>
|
||||
<b>Web</b>
|
||||
<br />
|
||||
<em>1. Seviye Destek</em>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>WebAssembly kullanarak doğrudan DOM'a (Document Object Model (Döküman Objesi Modeli, sayfaları manipüle etmenizi sağlayan yapı)) render(işle).</li>
|
||||
<li>SSR(Serve Side Rendering (Sunucu Tarafında İşleme)) ile ön işleme yap ve kullanıcı tarafında rehydrate(yeniden destekle).</li>
|
||||
<li>React ile kıyaslanır seviyede basit bir "Merhaba Dünya" kodu 50kb civarında.</li>
|
||||
<li>Entegre geliştirme sunucusu (`dx serve`) ve hot reloading ile hızlı iterasyonlar gerçekleştir.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>Fullstack(önyüz ve arkayüzün birlikte var olduğu)</b>
|
||||
<br />
|
||||
<em>1. Seviye Destek</em>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>Suspense(yapılması uzun sürecek işlemler için fallback(geçici gösterge diyebiliriz sanırım, yükleme ekranı örneği verilebilir) imkanı), hydration(besleme, destekleme), and server-side rendering(sunucuda işleme)</li>
|
||||
<li>Sunucu fonksiyonları sayesinde dahili backend</li>
|
||||
<li>Extractors(Ayırıcılar), middleware(ara katman), and routing(yönlendirici) entegrasyonları</li>
|
||||
<li>Mobil ve masaüstü ile uyumlu!</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>Masaüstü</b>
|
||||
<br />
|
||||
<em>1. Seviye Destek</em>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>Webview(arayüzü websiteye benzer şekilde gösteren yapı) ya da - deneysel olarak - WGPU(Web GPU(web temelli grafik arabirimi ile grafik kartını kullanarak işleme kabiliyeti sağlayan yapı)) veya <a href="https://freyaui.dev">Freya</a> (skia) ile işleme yap </li>
|
||||
<li>Kolay kurulum. Basitçe `cargo run` ya da `dx serve` ile uygulamanı derle. </li>
|
||||
<li>IPC(Inter Process Communication(İşlemleri birbiriyle konuşturan sistem)) kullanmadan doğdurdan sistem erişimi. </li>
|
||||
<li>macOS, Linux ve Windows desteklenir. Taşınabilir <3mb binaries(çalıştırılan dosya (exe örneğini vermiş olalım)) </li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>Liveview(uygulamanın sunucuda çalışıp kullanıcı tarafında işlendiği yapı)</b>
|
||||
<br />
|
||||
<em>1. Seviye Destek</em>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>Uygulamayı - ya da sadece bir componenti(komponent) - tamamıyla sunucuda işle.</li>
|
||||
<li>Axum ve Warp gibi popüler Rust frameworkleri ile entegrasyon.</li>
|
||||
<li>10.000+ uygulamayı destekleyebilme ve aşırı düşük gecikme.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>Mobil</b>
|
||||
<br />
|
||||
<em>2. Seviye Destek</em>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>Webview ya da - deneysel olarak - WGPU yahut Skia ile işleme.</li>
|
||||
<li>iOS ve Android desteği. </li>
|
||||
<li>Şuanda oldukça deneysel, birsürü geliştirme 2024 boyunca gelmeye devam edecek. </li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>Terminal</b>
|
||||
<br />
|
||||
<em>2. Seviye Destek</em>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vadimdemedes/ink"> ink.js</a> ile benzer şekilde uygulamaları doğrudan terminalde render et.</li>
|
||||
<li>Tarayıcıdaki flexbox ve CSS modeline benzer yapılardan güç alır.</li>
|
||||
<li>Metin girdisi, butonlar ve odak sistemi gibi dahili widgets(araçlar).</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
## Örnekleri Çalıştırma
|
||||
|
||||
En üst klasördeki örnekleri çalıştırmak için `cargo run --example <örnek adı>` yeterli olacaktır. Ancak, size tavsiyemiz dioxus-cli indirerek örnekleri `dx serve` ile çalıştırmanızdır, çünkü birçok örnek aynı zamanda web platformunu da destekliyor. Web için çalıştırmak isterseniz Cargo.toml üzerinde düzenleme yapmanız ya da varsayılan masaüstü özelliğini devredışı bırakmanız gerekir.
|
||||
|
||||
## Dioxus ve Diğer Frameworkleri Kıyaslayalım
|
||||
|
||||
Bizler bütün frameworkleri seviyor ve Rust ekosisteminde gelişimlerini izlemekten keyif alıyoruz. Bu bağlamda bizim projelerimizin de birçoğu diğer frameworkler tarafından kullanılıyor. Örnek vermek gerekirse, flex-box kütüphanemiz [Taffy](https://github.com/DioxusLabs/taffy); [Bevy](https://bevyengine.org/), [Zed](https://zed.dev/), [Lapce](https://lapce.dev/), [Iced](https://github.com/iced-rs/iced), ve çok daha fazla yerde kullanılmakta.
|
||||
|
||||
Dioxus'u diğer frameworklerden ayıran birkaç vurguladığı nokta var:
|
||||
|
||||
- **React-benzeri**: Components, props(fonksiyon argümanlarına benzer olan yapılar) ve hooks(fonksiyon componentlerinin diğer framework özelliklerine erişmesini sağlayan yapılar) gibi konseptler üzerine bina ettik. Bu durum bizi SolidJS'ten ziyade Svelte'ye yaklaştırdı.
|
||||
- **HTML ve CSS**: Quirks(geriye uyumluluk) ve diğer özellikler için, HTML ve CSS'i temel alıyoruz.
|
||||
- **Renderer-agnostic(İşleyen Bağımsız)**: [Ürettiğimiz Hızlı VirtualDOM](https://dioxuslabs.com/blog/templates-diffing) sayesinde istediğiniz platform için renderer değiştebilirsiniz.
|
||||
- **Collaborative(Birlikte çalışmayı destekleyen)**: Mümkün olduğu sürece bu örneklerdeki gibi crates(basitçe Rust üzerindeki kütüphaneler gibi düşünün) üretiyoruz: [Taffy](https://github.com/DioxusLabs/taffy), [manganis](https://github.com/DioxusLabs/manganis), [include_mdbook](https://github.com/DioxusLabs/include_mdbook), ve [blitz](http://github.com/dioxusLabs/blitz). Böylece ekosistemi birlikte büyütebiliriz.
|
||||
|
||||
### Dioxus ile Tauri'yi Kıyaslayalım
|
||||
|
||||
Tauri masaüstü -ve yakında mobil de dahil edilecek- üzerine frontend(önyüz) için React, Vue, Svelte vb. web temelli frameworklerini kullanan bir frameworktür. Ne zaman native (doğrudan çalışan, burada kastedilen işletim sistemine doğrudan bir işlem gerçekleştirmek istediğinizde) bir iş yapmak isterseniz Rust fonksiyonları yazarsınız ve bunları frontend üzerinden çağırmanız gerekir.
|
||||
|
||||
- **Natively Rust(Doğrudan Rust ile geliştirildi)**: Tauri'nin mimarisi sizi JavaScript ya da WebAssembly ile sınırlar. Dioxus ile Rust kodunuz kullanıcının makinesinde doğrudan çalışır. Thread spawn(iş parçacığı üretme), dosya sistemine erişme işlemlerini IPC köprü kullanmadan yapabilirsiniz.
|
||||
|
||||
- **Farklı Amaçlar**: Tauri JavaScript'i ve onun karmaşık build tooling(derleme araçlarını) desteklemek zorunda. Bu durum yapabileceğiniz işlemlerin kısıtlanmasına sebebiyet vermekte. Dioxus özel olarak Rust'a odaklandığından, server functions, gelişmiş bundling ve native renderer gibi ekstra özellikleri sunabiliyoruz.
|
||||
|
||||
- **Ortak DNA**: Tauri ve Dioxus farklı projeler olsa da windowing(pencere işlemleri) ve webview için Tao ve Wry gibi ortak olarak paylaştığı kütüphaneler mevcut.
|
||||
|
||||
### Dioxus ve Leptos'u Kıyaslayalım
|
||||
|
||||
Leptos SolidJS ve SoldStart benzeri fullstack web uygulamları geliştirebildiğiniz bir kütüphane. Dioxus ve Leptos web üzerinde benzer amaçlarla var olan 2 kütüphane ancak birkaç önemli nüans mevcut.
|
||||
|
||||
- **Reactivity model(Yeniden-aktifleştirme modeli)**: Leptops reactivity için signals (sinyaller) kullanırken, Dioxus Virtual(Sanal) DOM ve re-render(yeniden işleme) kullanır. Teoride signals çok daha verimli olurken pratikte [block-dom'dan ilham alınan taslaklar](https://dioxuslabs.com/blog/templates-diffing) sayesinde Virtual DOM neredeyse hiç fark oluşturmuyor. Kıyaslamada da görebileceğiniz gibi [aslında Leptos'tan hızlıyız](https://krausest.github.io/js-framework-benchmark/2024/table_chrome_123.0.6312.59.html).
|
||||
|
||||
- **Control flow(Karar verme mekanizmaları)**: Leptops reactivity için signals kullandığından, Leptos'un primitives (ilkelleri(her kodlama dilinde var olan, en temel şeyler için kullanılır genelde, farklı kullanımları da var tabiki. Örnek olarak veri tiplerine integer(tamsayı), bool(sadece 1 ve 0 değerini alan veri tipi) verebiliriz. Kontrol mekanizmaları için de for, if yapıları verilebilir.)) içerisinde sıkışırsınız. Örnek vermek gerekirse `for` döngüleri ve `if` ifadeleri. Eğer bu yapılarda bir hata meydana gelirse uygulamanız bütün reactivity(tepkiselliğini) özelliklerini kaybeder, bu durum UI(User Interface (Kullanıcı Arayüzü)) hatalarını debug(hata ayıklama) yapmanızı zorlaştırır. Dioxus ile birlikte iteratörler, sıradan Rust `for` döngüleri ve `if` durumlarını kullanabilir ve uygulamanız reactive kalmaya devam edebilir. Pratikte bir listeye counters(sayaçlar) eklemek istediğimiz bir örnek şu şekilde görünebilir:
|
||||
|
||||
```rust
|
||||
fn Counters() -> Element {
|
||||
let mut counters = use_signal(|| vec![0; initial_length]);
|
||||
|
||||
rsx! {
|
||||
button { onclick: move |_| counters.push(counters.len()); "Add Counter" }
|
||||
ul {
|
||||
for idx in 0..counters.len() {
|
||||
li {
|
||||
button { onclick: move |_| counters[idx] += 1; "{counters[idx]}" }
|
||||
button { onclick: move |_| { counters.write().remove(idx); } "Remove" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
[Ancak Leptos için bu durum önce key tracking (anahtarları izlemenizi) yapmanızı, `<For>` component kullanmanızı, yeni singnals oluşturmanızı ve sonunda da hafızayı manuel bir şekilde temizlemenizi gerektirir.](https://book.leptos.dev/view/04_iteration.html#dynamic-rendering-with-the-for-component):
|
||||
|
||||
```rust
|
||||
fn Counters() -> Element {
|
||||
let initial_counters = (0..initial_length)
|
||||
.map(|id| (id, create_signal(id + 1)))
|
||||
.collect::<Vec<_>>();
|
||||
|
||||
let (counters, set_counters) = create_signal(initial_counters);
|
||||
|
||||
let add_counter = move |_| {
|
||||
let sig = create_signal(next_counter_id + 1);
|
||||
set_counters.update(move |counters| counters.push((next_counter_id, sig)));
|
||||
next_counter_id += 1;
|
||||
};
|
||||
|
||||
view! {
|
||||
<div>
|
||||
<button on:click=add_counter>
|
||||
"Add Counter"
|
||||
</button>
|
||||
<ul>
|
||||
<For
|
||||
each=counters
|
||||
key=|counter| counter.0
|
||||
children=move |(id, (count, set_count))| {
|
||||
view! {
|
||||
<li>
|
||||
<button
|
||||
on:click=move |_| set_count.update(|n| *n += 1)
|
||||
>
|
||||
{count}
|
||||
</button>
|
||||
<button
|
||||
on:click=move |_| {
|
||||
set_counters.update(|counters| {
|
||||
counters.retain(|(counter_id, (signal, _))| {
|
||||
|
||||
if counter_id == &id {
|
||||
signal.dispose();
|
||||
}
|
||||
counter_id != &id
|
||||
})
|
||||
});
|
||||
}
|
||||
>
|
||||
"Remove"
|
||||
</button>
|
||||
</li>
|
||||
}
|
||||
}
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- **`Copy` state(Kopya oluşturma yöntemi)**: Dioxus 0.1 - 0.4 sürümleri boyunca Rust'ın borrow checker(ödünç almayı kontrol eden yapı (kısaca: Değişkenlerin geçerli olup olmadığını Rust standartlarında garanti eden yapı)) mekanizmasını esnetmek için lifetime(Rust lifetime yapıları(kısaca: Değişkenlerin ihtiyaç duyduğumuz zaman var olmasını kontrol eden bir sistem)) kullanılıyordu. Bu durum event handlers (olay yönetim yapıları) için iyi çalıştı ancak async (asenkron) tarafında işleri zora soktu. Dioxus 0.5 ile birlikte Leptos'tan ödünç aldığımız [`Copy`(Kopya oluşturma) modeline](https://crates.io/crates/generational-box) geçtik.
|
||||
|
||||
- **Farklı Amaçlar**: Dioxus web, masaüstü, mobil, LiveView ve çok daha fazla platform için renderer sunar. Aynı zamanda topluluk kütüphanelerini ve bir çapraz platform SDK'yi de geliştiriyoruz. Bu işlerin kapsadığı alan çok fazla ve bu durum Leptos'tan daha yavaş yeni sürüm yayınlamamıza sebebiyet veriyor. Leptos fullstack ve web'e odaklanırken aynı zamanda Dioxus'ta bulunmayan `<Suspense />` temelli HTML streaming(akış), islands(adalar(componentleri gruplandırıp wasm ile birlikte kullanıcının tarayıcısına gönderen yapı)), `<Form />`(HTML'ye benzer şekilde kullanıcı tarafında rooting(yönlendirme) yapmanızı sağlayan yapı) komponenetleri, ve başka webe özel özellikler. Genel olarak Leptos ile üreteceğiniz web uygulamaları daha küçük footprint'e(ayak izi) sahip olacaktır.
|
||||
|
||||
- **Farklı DSLs(Domain Specific Language(Bölgeye Özel Dil(Belirli alan içerisinde geçerli olan dil, meta language(dil) şeklinde de denk gelebilirsiniz))**: İki framework de web için kullanılabilir durumdadır. Dioxus UI geliştirmek için Rust benzeri DSL kullanırken Leptos daha çok HTML benzeri yapılar kullanır. Bu yöntemi seçmemizin sebebi ise codefolding(görsel olarak kodun bazı parçalarını kapatıp açmayı sağlayan özellik) ve syntax highlighting(yazım vurgulama(kod içerisinde fonksiyonları falan normal yazıdan daha ayırıcı -renkli, altı çizi- gösteren özellik)) gibi IDE(Integrated Development Environment (Entegre Geliştirme Ortamı)) tarafından sağlanan özelliklerinden yararlanabilmek. Genel olarak Dioxus DSL ile daha fazla özellik sağlamayı hedefler. Örnek vermek gerekirse Dioxus otomatik olarak stringleri(metinleri) birleştirirken Leptos closures(anonim fonksiyonlar) ile format!(Rust'ın string format makrosu(birleştirici yapı)) ya da format_args!(Rust'ın format! makrosunun temel aldığı daha genel makro) kullanmanızı bekler.
|
||||
|
||||
```rust
|
||||
// dioxus
|
||||
rsx! {
|
||||
div { class: "my-class", enabled: true, "Hello, {name}" }
|
||||
}
|
||||
|
||||
// leptos
|
||||
view! {
|
||||
<div class="my-class" enabled={true}>
|
||||
"Hello "
|
||||
{move || name()}
|
||||
</div>
|
||||
}
|
||||
```
|
||||
|
||||
### Dioxus ve Yew'i Kıyaslayalım
|
||||
|
||||
Tek sayfalı web uygulamaları geliştirmeyi sağlayan Yew, Dioxus için de ilham olmuştur. Ancak Yew'in mimarisi istediğimiz bazı özellikleri karşılamadığı için Dioxus'un doğumuna sebep oldu.
|
||||
|
||||
- **Tek Sayfa Web Uygulamaları**: Yew özel olarak tek sayfa web uygulamaları geliştirmek için tasarlandı ve doğal olarak bu onu web ile sınırlı kıldı. Dioxus ise çapraz platform fullstack uygulamalar geliştirilebilmesi sebebiyle web, masaüstü, mobil ve sunucu uygulamaları için uygun bir seçimdir.
|
||||
|
||||
- **Geliştirici Araçları**: Dioxus otomatik formatlama, hotreloading ve bundler gibi birçok araç sunar.
|
||||
|
||||
- **Devamlı Destek**: Dioxus yeni özelliklerle ve günlük olarak yapılan bug(hata) düzeltmeleri ile epey aktif bir şekilde geliştirilmekte.
|
||||
|
||||
### Dioxus ve egui'yi Kıyaslayalım
|
||||
|
||||
egui Rust için çapraz platform GUI(Grafical User Interface(Grafik Kullanıcı Arayüzü)) kütüphanesidir. [Rerun.io](https://www.rerun.io) gibi projelere de güç verir.
|
||||
|
||||
- **Immediate vs Retained(Kısaca: Her frame(kare) için sürekli yeni frame üreten mimari ile Değişiklik yapılmadıkça güncellenmeyen mimari)**: egui her frame için re-render yapılmak üzere tasarlanmıştır. Bu durum oyunlar ve başka interaktif uygulamalar için uygun olsa da style(stil) ve layout(ana yapı) frameler arasında korunmaz. Dioxus ise retained yapıda bir UI frameworktür, bu ise UI'ın bir kez üretilip frameler arasında güncelleneceği anlamına gelir. Bu durum Dioxus'un HTML, CSS gibi native web teknolojilerini kullanabilmesini, daha iyi pil ömrü ve performans göstermesini sağlar.
|
||||
|
||||
- **Özelleştirilebilirlik**: egui kendi styling ve layout çözümüyle gelirken Dioxus dahili olarak HTML ve CSS kullanmanızı bekler. Bu ise Dioxus uygulamalarının Tailwind ve Material UI gibi herhangi bir CSS kütüphanesini kullanabilmesine olanak sağlar.
|
||||
|
||||
- **State(Durum) Yönetimi**: egui'nin state yönetimi tek bir global state objesi üzerinden gerçekleşir. Dioxus ise bu bağlamda components ve props ile birlikte statelerin encapsulation(kapsülleme) işlemiyle tekrar tekrar kullanılabilmesini destekler.
|
||||
|
||||
### Dioxus ve Iced'ı Kıyaslayalım
|
||||
|
||||
Iced Elm'den esinlenmiş çapraz platform GUI kütüphanesidir. Iced WGPU ile native render sunar ve DOM nodes(düğümleri) ile webi de destekler.
|
||||
|
||||
- **Elm state Yönetimi**: Iced Elm state yönetim modelini sunar, bu ise reducers(fonksiyon gibi düşünebiliriz) ve mesaj iletim yoluyla gerçekleşir. Basitçe bu mimari Dioxus'tan farklıdır ve zaman zaman oldukça verbose (ayrıntılı, yorucu) olabilir.
|
||||
|
||||
- **Native Görünüm**: Dioxus'un renderer olarak webview kullanması sebebiyle otomatik olarak native metin kutularını, kopyala yapıştır fonksiyonlarını ve accessibility(erişilebilirlik) gibi diğer native özellikler sunar. Iced rendererı şuan için bu özellikleri içermemesi sebebiyle daha az native hissettirir.
|
||||
|
||||
- **WGPU**: Dioxus'un WGPU renderer özelliği şuan için çok olgunlaşmış değil ve ürün geliştirmeye uygun değil. Iced'ın WGPU rendererı ise çok daha olgun durumda ve ürün geliştirmek için kullanılabilir. Bu durumda bazı GPU(Graphical Processing Unit(Grafik İşleme Birimi, ekran kartınız aklınıza gelsin)) erişimi gerektiren uygulamalar için Iced kullanılabilirken Dioxus kullanılamaz.
|
||||
|
||||
### Dioxus ve Electron'u Kıyaslayalım
|
||||
|
||||
Dioxus ve Electron benzer amaçlara sahip tamamıyla farklı iki projedir. Electron geliştiricilerin HTML, CSS ve JavaScript gibi web teknolojilerini kullanarak çapraz platform masaüstü uygulamaları geliştirmelerini sağlar.
|
||||
|
||||
- **Hafif**: Dioxus sistemin native webview ya da opsiyonel olarak WGPU rendererını kullanarak UI render eder. Kıyaslamamız gerekirse bu durum tipik bir macOS uygulamasında Electron'un 100mb yer kapladığı yerde Dioxus uygulamasının 15mb ile var olmasını sağlar. Electron dahili olarak sistem kaynaklarını Dioxus'un paylaştığı gibi paylaşmayan gömülü bir chromium ile birlikte gelir.
|
||||
|
||||
- **Olgunluk**: Electron büyük bir topluluk ve birçok araç ile beraber olgun bir proje. Dioxus Electron ile kıyaslandığında halen oldukça genç. Deep link(Bazı protokoller için varsayılan olarak çalışma) gibi fazladan iş gerektiren özellikler için çalışmamız gerekiyor.
|
||||
|
||||
## Katkı Sağlama
|
||||
|
||||
- [Katkı sağlamayla alakalı kısım](https://dioxuslabs.com/learn/0.7/beyond/contributing) için web sitemizi ziyaret edin.
|
||||
- [Issue tracker(sorun takipçisi)](https://github.com/dioxuslabs/dioxus/issues) üzerinden sorunlarınızı raporlayabilirsiniz.
|
||||
- Discord'a [katıl](https://discord.gg/XgGxMSkvUM) ve sorularını sor!
|
||||
|
||||
<a href="https://github.com/dioxuslabs/dioxus/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=dioxuslabs/dioxus&max=30&columns=10" />
|
||||
</a>
|
||||
|
||||
## Lisans
|
||||
|
||||
Bu proje [MIT lisansı] altındadır.
|
||||
|
||||
[mit lisansı]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT
|
||||
|
||||
Özel olarak belirmediğiniz sürece Dioxus'a tarafınızca sağladığınız her katkı ekstra koşul ve madde olmaksızın MIT lisansı ile lisanslanacaktır.
|
||||
@@ -0,0 +1,327 @@
|
||||
<p>
|
||||
<p align="center" >
|
||||
<!-- <img src="./notes/header-light-updated.svg#gh-light-mode-only" >
|
||||
<img src="./notes/header-dark-updated.svg#gh-dark-mode-only" > -->
|
||||
<!-- <a href="https://dioxuslabs.com">
|
||||
<img src="./notes/flat-splash.avif">
|
||||
</a> -->
|
||||
<img src="../../notes/splash-header-darkmode.svg#gh-dark-mode-only" style="width: 80%; height: auto;">
|
||||
<img src="../../notes/splash-header.svg#gh-light-mode-only" style="width: 80%; height: auto;">
|
||||
<img src="../../notes/image-splash.avif">
|
||||
<br>
|
||||
</p>
|
||||
</p>
|
||||
<div align="center">
|
||||
<!-- Crates version -->
|
||||
<a href="https://crates.io/crates/dioxus">
|
||||
<img src="https://img.shields.io/crates/v/dioxus.svg?style=flat-square"
|
||||
alt="Crates.io version" />
|
||||
</a>
|
||||
<!-- Downloads -->
|
||||
<a href="https://crates.io/crates/dioxus">
|
||||
<img src="https://img.shields.io/crates/d/dioxus.svg?style=flat-square"
|
||||
alt="Download" />
|
||||
</a>
|
||||
<!-- docs -->
|
||||
<a href="https://docs.rs/dioxus">
|
||||
<img src="https://img.shields.io/badge/docs-latest-blue.svg?style=flat-square"
|
||||
alt="docs.rs docs" />
|
||||
</a>
|
||||
<!-- CI -->
|
||||
<a href="https://github.com/jkelleyrtp/dioxus/actions">
|
||||
<img src="https://github.com/dioxuslabs/dioxus/actions/workflows/main.yml/badge.svg"
|
||||
alt="CI status" />
|
||||
</a>
|
||||
|
||||
<!--Awesome -->
|
||||
<a href="https://dioxuslabs.com/awesome">
|
||||
<img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome Page" />
|
||||
</a>
|
||||
<!-- Discord -->
|
||||
<a href="https://discord.gg/XgGxMSkvUM">
|
||||
<img src="https://img.shields.io/discord/899851952891002890.svg?logo=discord&style=flat-square" alt="Discord Link" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
<h3>
|
||||
<a href="https://dioxuslabs.com"> 官网 </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/tree/main/examples"> 示例 </a>
|
||||
<span> | </span>
|
||||
<a href="https://dioxuslabs.com/learn/0.7/tutorial"> 指南 </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/zh-cn/README.md"> 中文 </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/pt-br/README.md"> PT-BR </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/ja-jp/README.md"> 日本語 </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/tr-tr"> Türkçe </a>
|
||||
<span> | </span>
|
||||
<a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/ko-kr"> 한국어 </a>
|
||||
</h3>
|
||||
</div>
|
||||
<br>
|
||||
<p align="center">
|
||||
<a href="https://dioxuslabs.com/blog/release-060/">✨ Dioxus 0.6 已经发布 - 在此查看! ✨</a>
|
||||
</p>
|
||||
<br>
|
||||
|
||||
使用单一代码库构建 Web、桌面端、移动端以及更多平台的应用。零配置、集成热重载以及基于信号 (Signals) 的状态管理。通过服务器函数添加后端功能，并使用我们的 CLI 进行打包。
|
||||
|
||||
```rust
|
||||
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!" }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## ⭐️ 独特功能:
|
||||
|
||||
- 三行代码即可构建跨平台应用（Web、桌面、移动端、服务器等）
|
||||
- [符合人体工程学的状态管理](https://dioxuslabs.com/blog/release-050)，结合了 React、Solid 和 Svelte 的优点
|
||||
- 类型安全的路由和服务器函数，由 Rust 强大的编译时能力保证
|
||||
- 集成 Web、MacOS、Linux 和 Windows 的打包工具
|
||||
- 还有更多！ [开启 Dioxus 之旅](https://dioxuslabs.com/learn/0.7/).
|
||||
|
||||
## 即时热重载
|
||||
|
||||
只需一个命令 `dx serve`，你的应用即可运行。编辑标记（markup）和样式并立刻看到结果。
|
||||
|
||||
<div align="center">
|
||||
<img src="https://raw.githubusercontent.com/DioxusLabs/screenshots/refs/heads/main/blitz/hotreload-video.webp">
|
||||
<!-- <video src="https://private-user-images.githubusercontent.com/10237910/386919031-6da371d5-3340-46da-84ff-628216851ba6.mov" width="500"></video> -->
|
||||
<!-- <video src="https://private-user-images.githubusercontent.com/10237910/386919031-6da371d5-3340-46da-84ff-628216851ba6.mov" width="500"></video> -->
|
||||
</div>
|
||||
|
||||
## 一流的 Android 和 iOS 支持
|
||||
|
||||
Dioxus 是使用 Rust 构建原生移动应用的最快方式。只需运行 `dx serve --platform android`，你的应用就会几秒钟在模拟器或实机设备上运行，并能够直接调用 JNI 和原生 API。
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/android_and_ios2.avif" width="500">
|
||||
</div>
|
||||
|
||||
## 为 Web、桌面和移动端打包
|
||||
|
||||
只需运行 `dx bundle`，你的应用将被构建和打包，并进行最大优化。
|
||||
在 Web 端，得益于 [`.avif` 生成, `.wasm` 压缩, 代码最小化](https://dioxuslabs.com/learn/0.7/tutorial/assets)等功能， Web 端的构建[体积小于 50kb](https://github.com/ealmloff/tiny-dioxus/) ，桌面/移动端体积小于 5mb。
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/bundle.gif">
|
||||
</div>
|
||||
|
||||
## 出色的文档
|
||||
|
||||
我们投入了大量精力来构建清晰、易读且全面的文档。所有 HTML 元素和监听器都附有 MDN 文档，并且我们的文档网站与 Dioxus 本身进行持续集成，以确保文档始终保持最新。请查看 [Dioxus 网站](https://dioxuslabs.com/learn/0.7/) 获取指南、参考、示例代码等。
|
||||
有趣的是：我们使用 Dioxus 网站来测试 Dioxus 的新功能 - [快来看看吧!](https://github.com/dioxusLabs/docsite)
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/docs.avif">
|
||||
</div>
|
||||
|
||||
## 社区
|
||||
|
||||
Dioxus 是一个社区驱动的项目，拥有非常活跃的 [Discord](https://discord.gg/XgGxMSkvUM) 和 [GitHub](https://github.com/DioxusLabs/dioxus/issues) 社区。 我们一直在寻求帮助，乐于回答问题并帮助你入门。[我们的 SDK](https://github.com/DioxusLabs/dioxus-std) 由社区运营，我们甚至有一个 [GitHub 组织](https://github.com/dioxus-community/) 用于那些获得免费升级和支持的最佳 Dioxus crates。
|
||||
|
||||
<div align="center">
|
||||
<img src="../../notes/dioxus-community.avif">
|
||||
</div>
|
||||
|
||||
## 全职核心团队
|
||||
|
||||
Dioxus 已从一个业余项目发展成为一个小型的全职工程师团队。感谢 FutureWei、Satellite.im 和 GitHub Accelerator 项目的慷慨支持，我们能够全职投入 Dioxus 的开发。我们的长远目标是通过提供高质量的付费企业级工具，使 Dioxus 实现自我维持。如果您的公司有兴趣使用 Dioxus 并希望与我们合作，请联系我们！
|
||||
|
||||
## 支持的平台
|
||||
|
||||
<div align="center">
|
||||
<table style="width:100%">
|
||||
<tr>
|
||||
<td>
|
||||
<b>Web 端</b>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>使用 WebAssembly 直接渲染到 DOM</li>
|
||||
<li>通过 SSR 进行预渲染并在客户端进行水合 (rehydrate)</li>
|
||||
<li>简单的 "hello world" 约 50kb，与 React 相当</li>
|
||||
<li>内置的开发服务器和热重载以实现快速迭代</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>桌面端</b>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>使用 Webview 渲染，或实验性地使用 WGPU 或 <a href="https://freyaui.dev">Freya</a> (Skia) 渲染</li>
|
||||
<li>零配置，只需 `cargo run` 或 `dx serve` 即可构建您的应用 </li>
|
||||
<li>完全支持原生系统访问，无需 IPC </li>
|
||||
<li>支持 MacOS, Linux 和 Windows，或者便携式的 <3mb 的二进制文件 </li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>移动端</b>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>使用 Webview 渲染，或实验性地使用 WGPU 或 Skia 渲染</li>
|
||||
<li>为 iOS 和 Android 构建 .ipa 和 .apk 文件</li>
|
||||
<li>以最小的开销直接调用 Java 和 Objective-C</li>
|
||||
<li>从 "hello world" 到在实机设备上运行仅需几秒钟</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<b>服务器端渲染</b>
|
||||
</td>
|
||||
<td>
|
||||
<ul>
|
||||
<li>Suspense，水合 (hydration) 和服务器端渲染</li>
|
||||
<li>通过服务器函数快速添加后端功能</li>
|
||||
<li>集成提取器（extractor）, 中间件（middleware）和路由</li>
|
||||
<li>静态站点生成和增量生成</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
## 运行示例
|
||||
|
||||
> 本仓库 main 分支中的示例针对的是 Dioxus 的 git 版本和 CLI。如果您正在寻找适用于 Dioxus 最新稳定版本的示例，请查看 [0.6 分支](https://github.com/DioxusLabs/dioxus/tree/v0.6/examples)。
|
||||
|
||||
本仓库顶层目录中的示例可以通过以下命令运行：
|
||||
|
||||
```sh
|
||||
cargo run --example <example>
|
||||
```
|
||||
|
||||
但是，我们鼓励你下载 dioxus-cli。如果你在使用 Dioxus 的 git 版本，可以使用以下命令安装相应版本的 CLI：
|
||||
|
||||
```sh
|
||||
cargo install --git https://github.com/DioxusLabs/dioxus dioxus-cli --locked
|
||||
```
|
||||
|
||||
你也使用 CLI 在 Web 平台上运行示例。只需通过如下命令禁用默认的桌面特性并启用 Web 特性：
|
||||
|
||||
```sh
|
||||
dx serve --example <example> --platform web -- --no-default-features
|
||||
```
|
||||
|
||||
## Dioxus 与其他框架的比较
|
||||
|
||||
我们热爱 Rust 生态系统中的所有框架，并享受着他们所带来的创新。实际上，我们的许多项目都与其他框架共享。例如，我们的 flex-box 库 [Taffy](https://github.com/DioxusLabs/taffy) 被 [Bevy](https://bevyengine.org/), [Zed](https://zed.dev/), [Lapce](https://lapce.dev/), [Iced](https://github.com/iced-rs/iced) 等许多项目使用。
|
||||
|
||||
Dioxus 强调以下几个关键点，使其与其他框架有所不同：
|
||||
|
||||
- **类 React**: 我们依赖组件、props 和 hooks 等概念来构建 UI，我们的状态管理更接近 Svelte 而非 SolidJS。
|
||||
- **HTML 和 CSS**: 我们完全拥抱 HTML 和 CSS，包括其所有特性和怪癖。
|
||||
- **渲染器无关**: 得益于[我们快速的虚拟 DOM](https://dioxuslabs.com/blog/templates-diffing)，你可以为任何你想要的平台替换渲染器。
|
||||
- **协作性**: 只要有可能，我们就会将像 [Taffy](https://github.com/DioxusLabs/taffy), [manganis](https://github.com/DioxusLabs/manganis), [include_mdbook](https://github.com/DioxusLabs/include_mdbook), 和 [blitz](http://github.com/dioxusLabs/blitz) 这样的 crates 分离出来，以便生态系统能够共同成长。
|
||||
|
||||
### Dioxus vs Tauri
|
||||
|
||||
Tauri 是一个用于构建桌面移动应用的框架，其前端使用基于 Web 的框架（如 React、Vue、Svelte 等）。当你需要进行原生操作时，可以编写 Rust 函数并从前端调用它们。
|
||||
|
||||
- **原生 Rust**: Tauri 的架构将您的 UI 限制在 JavaScript 或 WebAssembly。使用 Dioxus，你的 Rust 代码可以在用户的设备上原生运行，在你执行像创建线程、访问文件系统等操作时，无需任何 IPC 桥接。这极大地简化了您的应用架构，使其更易于构建。如果您愿意，也可以使用 Dioxus-Web 作为前端来构建 Tauri 应用。
|
||||
|
||||
- **不同的范围**: Tauri 需要支持 JavaScript 及其复杂的构建工具链，这限制了您可以用它做的事情的范围。由于 Dioxus 专注于 Rust，我们能够提供额外的实用工具，如服务器函数、高级打包和原生渲染器。
|
||||
|
||||
- **共享 DNA**: 虽然 Tauri 和 Dioxus 是独立的项目，但它们确实共享诸如 Tao 和 Wry 这样的库：由 Tauri 团队维护的窗口和 Webview 库。
|
||||
|
||||
### Dioxus vs Leptos
|
||||
|
||||
Leptos 是一个用于构建全栈 Web 应用的库，类似于 SolidJS 和 SolidStart。这两个库在 Web 端有着相似的目标，但存在一些关键差异：
|
||||
|
||||
- **响应式模型**: Leptos 使用信号 (signals) 来驱动响应和渲染，而 Dioxus 仅将信号用于响应。为了管理重新渲染，Dioxus 使用了高度优化的虚拟 DOM 来支持桌面和移动端架构。Dioxus 和 Leptos 都非常快。
|
||||
|
||||
- **不同的范围**: Dioxus 为 Web、桌面端、移动端、LiveView 等提供渲染器。我们还维护社区库和跨平台 SDK。 Leptos 更专注于全栈 Web，并拥有一些 Dioxus 所没有的功能，比如 islands、`<Form />` 组件和其他 Web 特有的实用工具.
|
||||
|
||||
- **不同的 DSL**: Dioxus 使用其自定义的类似 Rust 的 DSL 来构建 UI，而 Leptos 使用类似 HTML 的语法。我们选择这样做是为了保持与 IDE 功能（如代码折叠和语法高亮）的兼容性。通常，Dioxus 的 DSL 倾向于更多的“魔法”，包括字符串的自动格式化和简单 Rust 表达式的热重载。
|
||||
|
||||
```rust
|
||||
// dioxus
|
||||
rsx! {
|
||||
div {
|
||||
class: "my-class",
|
||||
enabled: true,
|
||||
"Hello, {name}"
|
||||
}
|
||||
}
|
||||
|
||||
// leptos
|
||||
view! {
|
||||
<div class="my-class" enabled={true}>
|
||||
"Hello "
|
||||
{name}
|
||||
</div>
|
||||
}
|
||||
```
|
||||
|
||||
### Dioxus vs Yew
|
||||
|
||||
Yew 是一个用于构建单页 Web 应用的框架，最初是 Dioxus 的灵感来源。不幸的是，Yew 的架构不支持我们想要的各种功能，因此 Dioxus 应运而生。
|
||||
|
||||
- **单页应用**: Yew 专为单页 Web 应用设计，并与 Web 平台紧密绑定。Dioxus 是全栈和跨平台的，使其适用于构建 Web、桌面、移动端和服务器应用。
|
||||
|
||||
- **开发者工具**: Dioxus 提供了许多实用工具，如自动格式化、热重载和打包工具。
|
||||
|
||||
- **持续支持**: Dioxus 得到非常积极的维护，每天都在添加新功能和修复错误。
|
||||
|
||||
### Dioxus vs egui
|
||||
|
||||
egui 是一个跨平台 GUI 库，为 Rust 驱动的工具提供支持，比如 [Rerun.io](https://www.rerun.io)。
|
||||
|
||||
- **立即模式 (Immediate) vs 保留模式 (Retained)**: egui 设计为每一帧都重新渲染。这更适用于游戏和其他交互式应用，但它不会在帧之间保留样式和布局状态。Dioxus 是一个保留模式的 UI 框架，这意味着 UI 构建一次后，在帧之间进行修改。这使得 Dioxus 能够使用原生的 Web 技术（如 HTML 和 CSS），并具有更好的电池寿命和性能。
|
||||
|
||||
- **可定制性**: egui 带来了自己的样式和布局解决方案，而 Dioxus 则希望您使用内置的 HTML 和 CSS。这使得 Dioxus 应用可以使用任何 CSS 库，例如 Tailwind 或 Material UI。
|
||||
|
||||
- **状态管理**: egui 的状态管理基于单个全局状态对象。Dioxus 鼓励通过使用组件和 props 来封装状态，使组件更具可复用性。
|
||||
|
||||
### Dioxus vs Iced
|
||||
|
||||
Iced 是一个受 Elm 启发的跨平台 GUI 库。Iced 使用 WGPU 进行原生渲染，并使用 DOM 节点支持 Web。
|
||||
|
||||
- **Elm 状态管理**: Iced 使用 Elm 的状态管理模型，该模型基于消息传递和 reducers。这不同于 Dioxus 的状态管理模型，它有时可能会相当冗长。
|
||||
|
||||
- **原生体验**: 由于 Dioxus 使用 Webview 作为其渲染器，它自动获得了原生文本输入、粘贴处理以及其他原生功能（比如无障碍）。Iced 的渲染器目前尚未实现这些功能，使其感觉不那么原生。
|
||||
|
||||
- **WGPU**: Dioxus 的 WGPU 渲染器目前还很不成熟，尚未准备好用于生产环境。Iced 的 WGPU 渲染器则成熟得多，并已在生产中使用。这使得某些需要 GPU 访问的应用可以使用 Iced 构建，而目前无法使用 Dioxus 构建。
|
||||
|
||||
### Dioxus vs Electron
|
||||
|
||||
Dioxus 和 Electron 是两个目标相似但完全不同的项目。Electron 使开发人员能够使用 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台桌面应用。
|
||||
|
||||
- **轻量级**: Dioxus 使用系统原生 Webview（或者可选 WGPU 渲染器）来渲染 UI。这使得典型的 Dioxus 应用在 macOS 上大约为 15MB，而 Electron 则为 100MB。Electron 还捆绑了一个嵌入式的 Chromium 实例，它无法像 Dioxus 那样与宿主操作系统共享系统资源。
|
||||
|
||||
- **成熟度**: Electron 是一个成熟的项目，拥有庞大的社区和许多工具。相比，Dioxus 与 Electron 相比还很年轻。如果遇到诸如深层链接 (deep-linking) 之类的功能，这些功能需要额外的工作来实现。
|
||||
|
||||
## 贡献
|
||||
|
||||
- 查看网站上[关于贡献的部分](https://dioxuslabs.com/learn/0.7/beyond/contributing).
|
||||
- 在我们的 [issues](https://github.com/dioxuslabs/dioxus/issues) 上报告问题.
|
||||
- [加入](https://discord.gg/XgGxMSkvUM) Discord 并提问！
|
||||
|
||||
<a href="https://github.com/dioxuslabs/dioxus/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=dioxuslabs/dioxus&max=30&columns=10" />
|
||||
</a>
|
||||
|
||||
## 开源许可
|
||||
|
||||
此项目基于 [MIT license] 或 [Apache-2 License] 发布。
|
||||
|
||||
[apache-2 license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-APACHE
|
||||
[mit license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT
|
||||
|
||||
除非您明确声明，否则您有意提交给 Dioxus 的任何贡献，均应按 MIT 或 Apache-2 授权，不附带任何附加条款或条件。
|
||||
Reference in new issue
Block a user