Blitz: hafif, modüler ve genişletilebilir bir web renderer

Blitz: hafif, modüler ve genişletilebilir bir web renderer

Blitz, "Dioxus Native" projesini desteklemek için geliştirilen "native" bir HTML/CSS renderer’dır. JavaScript motoru yerine native Rust API’lerini kullanır; böylece Rust reaktivite/durum yönetimi kütüphaneleriyle doğrudan arayüz kurabilir.

Şu anda iki frontend’i destekliyor

• HTML/Markdown frontend’i: HTML dizelerini render edebilir. HTML ve Markdown dosyalarını önizlemek için kullanışlıdır, ancak etkileşim yeteneği sınırlıdır.
• Dioxus frontend’i: Dioxus VirtualDom’u render edebilir. Dioxus’un olay işleme sistemi sayesinde tam etkileşim desteği sunar.

Blitz’in dayandığı teknolojiler

• Stylo: Firefox’un paralel, tarayıcı seviyesinde CSS motoru
• Vello + WGPU: render işlemi
• Taffy: kutu seviyesi yerleşim
• Parley: metin/satır içi seviye yerleşim
• AccessKit: erişilebilirlik
• Winit: pencere ve girdi işleme

Not: Bu depo, Stylo kullanan Blitz’in yeni sürümünü içerir. Eski sürümün kaynak kodu legacy branch’te hâlâ kullanılabilir, ancak aktif olarak geliştirilmemektedir.

Ekran görüntüleri

• Dioxus renderer
• HTML renderer (google.com render edilmesi)

Deneyin

1. Bu depoyu klonlayın
2. Örnekleri çalıştırın:
   • cargo run --example google
   • cargo run --example url https://myurl.com
   • Diğer örnekler de kullanılabilir
   • Daha iyi çalışma zamanı performansı için --release ekleyin
3. Ölçeği Ctrl/Cmd + + / Ctrl/Cmd + - ile değiştirin, yerleşim dikdörtgenlerini göstermek için F1’e basın

Hedefler

Blitz, HTML ve CSS render etmek için tasarlanmıştır. Bir tarayıcının tüm özelliklerini desteklemez; bu tür "ek" özellikleri isteğe bağlı olarak sunmayı planlamaktadır. Temel HTML/CSS render etme için tarayıcıların gereğinden fazla karmaşık olduğunu düşünmektedir.

Desteklenmesi planlanan özellikler:

• Modern HTML yerleşimi (flexbox, grid, table, block, inline, absolute/fixed vb.)
• Gelişmiş CSS (karmaşık seçiciler, medya sorguları, CSS değişkenleri)
• HTML form kontrolleri
• AccessKit üzerinden erişilebilirlik
• Özel widget’lar aracılığıyla genişletilebilirlik

Desteklenmeyen özellikler:

• webrtc, websockets, bluetooth, localstorage vb.

Blitz için diğer dillere (JavaScript, Python vb.) bağlayıcılar henüz yok, ancak katkılar memnuniyetle karşılanıyor.

Mimari

Blitz birkaç parçaya ayrılır:

• blitz-dom: stil çözümleme ve yerleşimi içeren, ancak çizim/painting içermeyen çekirdek DOM soyutlaması
• blitz: blitz-dom üzerine Vello/WGPU tabanlı renderer ekler
• dioxus-blitz: Dioxus uygulamalarını render etmek için Blitz kullanan Dioxus entegrasyon katmanı. Şu anda dioxus-blitz HTML renderer’ı da içeriyor, ancak bunun ileride ayrı bir pakete ayrılması mümkün.

Durum

Blitz şu anda deneyseldir. Kullanılabilir hâle getirmek için aktif olarak çalışılıyor, ancak henüz bununla uygulama geliştirmeniz önerilmiyor.

TODO

• Çekirdek DOM ağacı soyutlaması
• html5ever kullanarak stil ayrıştırma
• html5ever belgeleri için stil hesaplama
• Taffy kullanarak yerleşim hesaplama
• WGPU kullanarak render etme

Render

• Pencereye render etme
• Görüntüye render etme
• Gradyanlar
• Kenarlıklar/dış çizgiler
• Raster görseller (png, jpeg vb.)
• Yakınlaştırma
• SVG
  • Harici SVG (temel destek)
  • Satır içi SVG
• Gölgeler
• Animasyonlar/geçişler
• Standart form kontrolleri (onay kutusu/açılır liste/kaydırıcı vb.)
• Özel widget’lar
• Gölge öğeler

Yerleşim

• Inline (kısmi destek - olgunlaşmamış uygulama)
• Block
• Flexbox
• Grid
  • Adlandırılmış grid çizgileri
  • Subgrid
• Table
• Z-index
• Ek CSS özellikleri
  • box-sizing: content-box
  • calc()
  • position: static
  • direction: rtl
  • transform

Metin

• Yazı tipi yükleme
  • Sistem yazı tiplerini yükleme
  • Web yazı tiplerini yükleme
• Metin
  • Şekillendirme / Bidi
  • Yerleşim / satır kırma
  • Yazı tipi boyutu / satır yüksekliği
  • Metin rengi
  • Kalın / italik
  • Altı çizili / üstü çizili
• Metin seçimi

Girdi

• Kaydırma
  • Kök görünüm
  • overflow: scroll öğeleri
• Hover algılama
• Tıklama işleme
• Metin girişi

Performans

• Hot reloading
• Stil ve yerleşimi yeniden çözümlemeden kaydırma
• Stil önbellekleme
• Yerleşim önbellekleme

Diğer

• Çoklu pencere
• Erişilebilirlik ağacı
• Odak
• Geliştirici araçları
• Bağlam menüsü için hook’lar
• Öğeleri rastgele bir render yüzeyine almak için use_wgpu_context()

Lisans

Bu proje Apache 2.0 ve MIT lisanslarıyla çift lisanslanmıştır. Aksi ayrıca belirtilmediği sürece, kullanıcının stylo-dioxus’a dahil edilmek üzere kasıtlı olarak gönderdiği tüm katkılar ek koşul olmadan MIT lisansı altında lisanslanır.

GN⁺ Özeti

• Blitz, Dioxus projesini desteklemek için geliştirilen Rust tabanlı hafif bir HTML/CSS renderer’dır.
• Tarayıcıların karmaşık özelliklerini dışarıda bırakır ve temel HTML/CSS render etmeye odaklanır.
• Deneysel aşamadadır ve henüz uygulama geliştirmek için önerilmez.
• Benzer işlevlere sahip projeler arasında Servo, WebRender vb. bulunur.