▲

GN⁺: Blitz: 경량 모듈형 확장 가능한 웹 렌더러

 (github.com/DioxusLabs)
2P by neo 3달전 | favorite | 댓글과 토론

Blitz: 경량, 모듈형, 확장 가능한 웹 렌더러

Blitz는 "Dioxus Native" 프로젝트를 지원하기 위해 개발된 "네이티브" HTML/CSS 렌더러임. JavaScript 엔진 대신 네이티브 Rust API를 사용하여 Rust 반응성/상태 관리 라이브러리와 직접 인터페이스할 수 있음.

현재 두 가지 프론트엔드 지원
  • HTML/마크다운 프론트엔드: HTML 문자열을 렌더링할 수 있음. HTML 및 마크다운 파일 미리보기에 유용하지만 상호작용성은 부족함.
  • Dioxus 프론트엔드: Dioxus VirtualDom을 렌더링할 수 있음. Dioxus의 이벤트 처리를 통해 완전한 상호작용성 지원.
Blitz의 기반 기술
  • Stylo: Firefox의 병렬 브라우저급 CSS 엔진
  • Vello + WGPU: 렌더링
  • Taffy: 박스 수준 레이아웃
  • Parley: 텍스트/인라인 수준 레이아웃
  • AccessKit: 접근성
  • Winit: 윈도우 및 입력 처리

참고: 이 저장소에는 Stylo를 사용하는 새로운 버전의 Blitz가 포함되어 있음. 이전 버전의 소스 코드는 레거시 브랜치에서 여전히 사용할 수 있지만, 적극적으로 개발 중이지 않음.

스크린샷

  • Dioxus 렌더러
  • HTML 렌더러 (google.com 렌더링)

사용해보기

  1. 이 저장소를 클론
  2. 예제 실행:
    • cargo run --example google
    • cargo run --example url https://myurl.com
    • 다른 예제도 사용 가능
    • 더 나은 런타임 성능을 위해 --release 추가
  3. Ctrl/Cmd + + / Ctrl/Cmd + -로 스케일 변경, F1을 눌러 레이아웃 사각형 표시

목표

Blitz는 HTML과 CSS를 렌더링하기 위해 설계됨. 브라우저의 모든 기능을 지원하지 않으며, 이러한 "추가" 기능은 선택적으로 제공할 계획임. 브라우저는 기본 HTML/CSS 렌더링의 경우 과도하게 복잡하다고 생각함.

지원 예정 기능:

  • 현대적 HTML 레이아웃 (flexbox, grid, table, block, inline, absolute/fixed 등)
  • 고급 CSS (복잡한 선택자, 미디어 쿼리, CSS 변수)
  • HTML 폼 컨트롤
  • AccessKit을 통한 접근성
  • 사용자 정의 위젯을 통한 확장성

지원하지 않는 기능:

  • webrtc, websockets, bluetooth, localstorage 등

다른 언어(JavaScript, Python 등)에 대한 Blitz 바인딩은 아직 없지만, 기여를 환영함.

아키텍처

Blitz는 여러 부분으로 나뉨:

  • blitz-dom: 스타일 해석과 레이아웃을 포함하지만 그리기/페인팅은 포함하지 않는 핵심 DOM 추상화
  • blitz: blitz-dom에 Vello/WGPU 기반 렌더러 추가
  • dioxus-blitz: Blitz를 사용하여 Dioxus 앱을 렌더링하는 Dioxus 통합 레이어. 현재 dioxus-blitz는 HTML 렌더러도 포함하지만, 이는 향후 별도의 패키지로 분리될 가능성이 있음.

상태

Blitz는 현재 실험적임. 사용 가능한 상태로 만들기 위해 적극적으로 작업 중이지만, 아직 앱을 구축하는 것은 권장하지 않음.

TODO

  • 핵심 DOM 트리 추상화
  • html5ever를 사용한 스타일 파싱
  • html5ever 문서에 대한 스타일 계산
  • Taffy를 사용한 레이아웃 계산
  • WGPU를 사용한 렌더링

렌더링

  • 창에 렌더링
  • 이미지에 렌더링
  • 그라디언트
  • 테두리/외곽선
  • 래스터 이미지 (png, jpeg 등)
  • 줌
  • SVG
    • 외부 SVG (기본 지원)
    • 인라인 SVG
  • 그림자
  • 애니메이션/전환
  • 표준 폼 컨트롤 (체크박스/드롭다운/슬라이더 등)
  • 사용자 정의 위젯
  • 그림자 요소

레이아웃

  • 인라인 (부분 지원 - 구현 미성숙)
  • 블록
  • 플렉스박스
  • 그리드
    • 명명된 그리드 라인
    • 서브그리드
  • 테이블
  • Z-인덱스
  • 추가 CSS 기능
    • box-sizing: content-box
    • calc()
    • position: static
    • direction: rtl
    • transform

텍스트

  • 폰트 로딩
    • 시스템 폰트 로딩
    • 웹 폰트 로딩
  • 텍스트
    • 셰이핑 / Bidi
    • 레이아웃 / 줄 나누기
    • 폰트 크기 / 줄 높이
    • 텍스트 색상
    • 굵게 / 기울임
    • 밑줄 / 취소선
  • 텍스트 선택

입력

  • 스크롤
    • 루트 뷰
    • overflow: scroll 요소
  • 호버 감지
  • 클릭 처리
  • 텍스트 입력

성능

  • 핫 리로딩
  • 스타일 및 레이아웃 재해석 없이 스크롤
  • 스타일 캐싱
  • 레이아웃 캐싱

기타

  • 다중 창
  • 접근성 트리
  • 포커스
  • 개발 도구
  • 컨텍스트 메뉴를 위한 훅
  • 임의의 렌더링 표면으로 요소를 가져오기 위한 use_wgpu_context()

라이선스

이 프로젝트는 Apache 2.0 및 MIT 라이선스로 이중 라이선스됨. 별도로 명시하지 않는 한, 사용자가 stylo-dioxus에 포함시키기 위해 의도적으로 제출한 모든 기여는 추가 조건 없이 MIT 라이선스로 라이선스됨.

GN⁺의 정리

  • Blitz는 Rust 기반의 경량 HTML/CSS 렌더러로, Dioxus 프로젝트를 지원하기 위해 개발됨.
  • 브라우저의 복잡한 기능을 배제하고, 기본적인 HTML/CSS 렌더링에 집중함.
  • 실험적 단계에 있으며, 아직 앱 구축에는 권장되지 않음.
  • 비슷한 기능을 가진 프로젝트로는 Servo, WebRender 등이 있음.