개요

Dioxus는 Rust로 크로스 플랫폼 사용자 인터페이스를 구축하기 위한 휴대성, 성능, 그리고 인체공학성을 갖춘 프레임워크입니다. 개발자는 한 번 작성한 애플리케이션을 최소한의 구성 변경만으로 웹, 데스크톱, 모바일, 서버 플랫폼에 배포할 수 있습니다.

 

핵심 철학

Dioxus는 최신 프런트엔드 프레임워크의 가장 뛰어난 기능들을 결합하는 동시에 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!" }
    }
}

아키텍처 개요

Dioxus는 핵심 기능을 집중적인 패키지로 분리하는 모듈식 아키텍처를 따르므로 개발자는 대상 플랫폼에 필요한 기능만 사용할 수 있습니다.

플랫폼 지원

Dioxus는 각각 해당 환경에 최적화된 다양한 배포 대상에 대해 최고 수준의 지원을 제공합니다.

플랫폼	렌더링방법	주요 특징	번들 사이즈
웹	웹어셈블리 + DOM	SSR, 수화, ~50kb hello world	최적화된 WASM
데스크톱	웹뷰/WGPU	네이티브 시스템 액세스, <3mb 바이너리	플랫폼 네이티브
모바	웹뷰/WGPU	직접 JNI/네이티브 API 호출	.ipa/.apk 파일
서버	SSR/라이브뷰	정적 생성, 스트리밍	Variable

주요 특징

크로스 플랫폼 개발

Dioxus의 선언적 RSX 구문을 사용하여 애플리케이션을 한 번만 작성하고 지원되는 모든 플랫폼에 배포하세요. 이 프레임워크는 모든 대상에서 일관된 동작을 유지하면서 플랫폼별 차이를 처리합니다.

신호 기반 상태 관리

Dioxus는 기존 상태 관리 패턴의 복잡성 없이 세밀한 반응성을 제공하는 정교한 시그널 시스템을 사용합니다. 이는 React의 Hooks, Solid의 반응성, 그리고 Svelte의 컴파일러 최적화의 장점을 모두 결합한 것입니다.

통합 개발 경험

• 핫 리로딩dx serve : 명령을 사용하여 Rust 코드와 자산 모두에 대한 1초 미만의 업데이트
• 내장 CLI : 개발, 빌드 및 배포를 위한 포괄적인 툴링
• DevTools 통합 : 최고 수준의 디버깅 및 성능 프로파일링 도구

 

풀스택 기능

Dioxus는 서버 기능, 웹소켓, 스트리밍, 파일 처리 등을 포함한 완전한 풀스택 프레임워크를 포함합니다. 이를 통해 외부 종속성 없이 원활한 클라이언트-서버 통신이 가능합니다.

 

프로젝트 구조

Dioxus 저장소는 프레임워크의 특정 측면을 처리하는 각 패키지로 구성됩니다.

packages/
├── core/           ├── rsx/            # RSX template compiler
├── signals/        # State management system
├── hooks/          # React hooks implementation
├── web/            # Web platform renderer
├── desktop/        # Desktop platform renderer
├── fullstack/      # Fullstack framework
├── router/         # Navigation and routing
└── html/           # HTML element definitions

시작하기

Dioxus는 귀하의 요구 사항에 따라 다양한 진입점을 제공합니다.

• 초보자 : 다음으로 시작하세요빠른 시작부드러운 소개를 위한 가이드
• 설치 : 다음을 따르세요설치 및 설정자세한 환경 구성을 위해
• 첫 번째 앱 : 첫 번째 애플리케이션을 빌드하세요첫 번째 Dioxus 앱지도 시간
• 예 : 탐색실행 예제Dioxus가 실제로 작동하는 모습을 보는 가이드

가장 간단한 Dioxus 애플리케이션에는 몇 줄의 코드만 필요합니다.

use dioxus::prelude::*;
 
fn main() {
    dioxus::launch(app);
}
 
fn app() -> Element {
    rsx! {
        div { "Hello, world!" }
    }
}