Blitz: Renderer web ringan, modular, dan dapat diperluas

 (github.com/DioxusLabs)
2 poin oleh GN⁺ 2024-08-13 | 1 komentar | Bagikan ke WhatsApp
  • Blitz adalah mesin rendering modular yang berfokus pada rendering HTML/CSS, dengan desain yang tidak menyediakan seluruh fitur browser secara bawaan dan menjadikan fitur tambahan yang diperlukan sebagai pilihan
  • Status saat ini adalah pre-alpha; renderernya sudah memiliki cukup banyak kemampuan, tetapi masih banyak bug dan fitur yang belum ada, sehingga belum direkomendasikan untuk digunakan dalam pengembangan aplikasi
  • Target dukungan mencakup modern HTML layout, advanced CSS, kontrol form HTML, aksesibilitas berbasis AccessKit, serta ekstensi melalui custom widgets; fitur seperti WebRTC, WebSockets, Bluetooth, dan localStorage tidak disediakan
  • Strukturnya terbagi menjadi abstraksi core DOM serta modul networking, rendering, window, dan state management; crate wrapper tingkat atas bernama blitz dan dioxus-native menangani rendering HTML/Markdown atau Dioxus VirtualDom
  • Versi baru Blitz v0.2+ menggunakan Stylo; source v0.1 masih ada di branch legacy, tetapi tidak dikembangkan secara aktif

Mesin yang berfokus pada rendering HTML/CSS

  • Blitz adalah mesin rendering HTML/CSS, yang berangkat dari pandangan bahwa browser terlalu berat untuk use case dasar berupa rendering HTML/CSS
  • Tujuannya bukan mengimplementasikan seluruh fitur browser, melainkan berfokus pada fitur yang diperlukan untuk rendering HTML/CSS dan sebisa mungkin menjadikan fitur lainnya sebagai opt-in
  • Saat ini statusnya pre-alpha
    • Renderernya sudah memiliki cukup banyak kemampuan
    • Masih banyak bug dan fitur yang belum ada
    • Belum direkomendasikan untuk digunakan membuat aplikasi
    • Progres lebih detail dapat dilihat di roadmap issue

Fitur yang ingin didukung dan yang dikecualikan

  • Cakupan yang ingin didukung Blitz diarahkan pada rendering UI HTML/CSS
    • modern HTML layout seperti flexbox, grid, table, block, inline, absolute/fixed
    • advanced CSS seperti complex selectors, media queries, dan CSS variables
    • kontrol form HTML
    • aksesibilitas berbasis AccessKit
    • ekstensibilitas melalui custom widgets
  • Blitz tidak menyediakan fitur seperti WebRTC, WebSockets, Bluetooth, dan localStorage
    • Di aplikasi native, sebagian besar fitur seperti ini dapat ditangani dengan crate Rust umum
    • Posisinya adalah fitur seperti ini tidak perlu digabungkan dengan renderer
  • Binding untuk bahasa lain seperti JavaScript dan Python belum ada, tetapi kontribusi terkait dapat diterima

Cara menjalankan dan contoh

  • Setelah meng-clone repositori, Anda dapat menjalankan package browser
cargo run --release --package browser
  • Contoh yang disediakan mencakup aplikasi TODO kecil, renderer Markdown, dan integrasi rendering raw WGPU
cargo run --release --package todomvc

cargo run --release --package readme ./README.md

cargo run --release --package wgpu_texture

Arsitektur modular

  • Blitz terdiri dari core DOM abstraction, modul fitur tambahan, dan dua wrapper tingkat atas
    • Fitur seperti networking, rendering, window, dan state management dipisahkan ke modul tersendiri
    • Potongan-potongan ini dapat digabungkan untuk membuat satu web engine

  • Crate wrapper tingkat atas

    • blitz: frontend HTML/Markdown yang dapat merender string HTML
    • Berguna untuk pratinjau file HTML atau Markdown
    • Saat ini belum memiliki interaksi
    • Menggunakan blitz-dom, blitz-html, blitz-shell, dan blitz-renderer-vello
    • dioxus-native: frontend Dioxus yang merender Dioxus VirtualDom
    • Mendukung interaksi penuh melalui penanganan event Dioxus
    • Menggunakan blitz-dom, dioxus-core, blitz-shell, dan blitz-renderer-vello
    • Kedua wrapper dapat menggunakan blitz-net secara opsional untuk mengambil resource turunan

  • Crate inti dan crate tambahan

    • blitz-dom: core DOM abstraction yang mencakup style resolution, layout, dan event handling
    • Tidak mencakup parsing, rendering, maupun integrasi sistem
    • Menggunakan Stylo, Taffy, dan Parley
    • blitz-traits: crate fondasi minimal yang memungkinkan crate lain saling beroperasi tanpa bergantung langsung satu sama lain
    • blitz-net: modul networking yang mengambil resource dari HTTP, filesystem, dan encoded data URI
    • Menggunakan reqwest
    • blitz-paint: mengubah tree blitz-dom menjadi draw commands anyrender
    • Menggunakan anyrender
    • blitz-html: menambahkan HTML parsing ke blitz-dom
    • Menggunakan html5ever dan xml5ever
    • blitz-shell: shell yang memungkinkan Blitz merender ke window
    • Mengintegrasikan Winit event loop, AccessKit, Muda, dan lainnya
    • Menggunakan winit, accesskit, dan muda
    • Abstraksi rendering AnyRender dipindahkan ke repositori terpisah, anyrender

Menggunakan versi pengembangan Dioxus Native

  • Versi pengembangan terbaru Dioxus Native ada di repositori ini
  • Karena Dioxus Native sedang dikembangkan dengan cepat, Anda dapat menggunakan versi git untuk memakai fitur terbaru dan perbaikan bug sebelum rilis resmi
  • Prosedur menggunakan versi git adalah sebagai berikut
    • Hapus sepenuhnya dependensi crate dioxus
    • Tambahkan dioxus-native = { git = "https://github.com/DioxusLabs/blitz";, rev = "e64a3d8", features = ["prelude"] }
    • Ganti e64a3d8 dengan git commit id dari versi yang diinginkan
    • Di kode Rust, ubah use dioxus::prelude::* menjadi use dioxus_native::prelude::*
    • Jika memerlukan fitur dioxus yang tidak diekspor oleh Dioxus Native prelude, import dari sub-crate terpisah seperti dioxus-html, dioxus-signals, dan dioxus-router
  • Versi git Dioxus Native masih bergantung pada versi stabil Dioxus v0.7.x dari crates.io
    • Library tambahan seperti dioxus-sdk, dioxus-components, dan dioxus-free-icons seharusnya tetap berfungsi

Versi dan lisensi

  • Repositori ini berisi versi baru Blitz v0.2+ dan menggunakan Stylo
  • Source versi sebelumnya, v0.1, masih ada di branch legacy
    • v0.1 tidak dikembangkan secara aktif
  • Proyek ini didistribusikan dengan dual license Apache 2.0 dan MIT
  • Crate stylo_taffy juga menerapkan MPL 2.0 sebagai tambahan untuk memudahkan interoperabilitas dengan proyek Servo
    • Dengan demikian, stylo_taffy memiliki triple license Apache 2.0, MIT, dan MPL 2.0
  • Kontribusi yang sengaja diajukan ke Blitz akan diperlakukan sebagai dual licensed Apache 2.0 dan MIT, kecuali ada ketentuan lain
    • Kontribusi yang diajukan ke stylo_taffy juga mencakup MPL 2.0

Bacaan terkait

1 komentar

 
GN⁺ 2024-08-13
Pendapat di Hacker News

  • Saya lead developer Blitz. Ini belum berada di tahap selesai, dan input teks/sistem fokus masih dasar serta scrolling selain viewport root belum didukung. Selector CSS kompleks seperti nth-child dan :has belum berfungsi dengan benar, dan integrasi penanganan event dengan Dioxus, framework mirip React yang berjalan di atas Blitz, juga baru sebatas klik; belum ada preventDefault. Networking saat ini sangat sederhana: request sinkron dilakukan di thread utama, sehingga diperlukan networking async atau multithread yang benar. Pekerjaan performa juga hampir belum dilakukan, jadi style/layout/paint dihitung ulang di setiap frame, dan ada beberapa kebocoran memori karena node yang tidak dibersihkan. Shadow, web font, calc, layout float, serta kontrol form selain input teks juga masih belum ada. Pada akhirnya, ini lebih dekat ke “membuat webview adalah pekerjaan besar dan kami belum sampai ke sana”, dan kami berharap bentuk yang lebih lengkap dalam 2–3 bulan. Screenshot juga ada di sini: https://github.com/DioxusLabs/blitz/issues/23

    • Secara pribadi, saya ingin merancang format dokumen baru dengan semantik yang lebih sederhana dan lebih mudah dirender. HTML terasa cukup kompleks, dan juga bukan sesuatu yang dirancang untuk rendering dinamis. Sebagai orang yang menyukai pendekatan lean dan KISS, HTML tidak terlihat cukup ringan atau sederhana.
    • Saya sedang mencari solusi untuk menangkap screenshot situs web, dan kalau bisa ingin membuatnya dari representasi yang sudah pernah di-crawl. Layanan yang ada umumnya menjalankan instance Chromium lalu meminta screenshot, sehingga biaya operasional maupun biaya SaaS tampak cukup mahal. Kalau begitu, Blitz sepertinya cocok, tetapi saya penasaran apakah saat ini bisa dijalankan dalam mode headless untuk menyimpan screenshot.
    • Saya penasaran dengan motivasi untuk tidak membangun di atas sesuatu seperti Servo atau WebKit, melainkan merangkai sendiri berbagai komponen.
    • Saya penasaran bagian engineering paling kompleks yang harus ditangani itu apa. Meski masih dalam pengerjaan, akan bagus kalau bisa membagikan dokumen desain. Secara pribadi, saya tertarik bagaimana engine seperti Blitz dan Servo bisa dibuat dengan metode formal ke depannya. Misalnya dengan memulai dari definisi lalu menghasilkan sebagian sistem; belakangan ini LLM juga termasuk di dalamnya, tetapi saya melihatnya lebih sebagai alat yang hebat daripada sistem AI. Hal seperti Z3 juga terlintas. Sebagian perusahaan saya juga memiliki organisasi riset untuk topik seperti ini.
    • Saya penasaran apakah Blitz dibuat agar orang lain bisa membuat browser. Saya sedang membuat Wootzapp(https://github.com/wootzapp/wootz-browser), semacam Robinhood untuk pelabelan data, tempat orang bisa menghabiskan waktu pada data web atau pelabelan gambar dan mendapat imbalan. Saat ini berbasis Chromium, dan saya penasaran apakah Blitz bertujuan menjadi renderer yang bisa dipasang ke browser lain. Kami juga mengerjakan mobile; sekarang Android, berikutnya iOS.

  • Sekilas proyek ini tampak sangat berguna. Pendekatannya adalah membuat aplikasi native dengan paradigma layout HTML/CSS yang banyak dipakai, tetapi tanpa bagian berat yang tersirat dari JS/DOM/browser API lengkap. Ini tampaknya bisa memungkinkan peningkatan yang jauh lebih besar daripada memaketkan engine browser seperti Electron. Kebetulan baru-baru ini saya mendengar Casey Muratori berbicara sangat kritis tentang CSS di podcast Richard Feldman. Contoh-contoh ketika mereka harus melakukan prarender halaman web dan mengukurnya secara dinamis hanya untuk membuat relasi layout sederhana terasa sangat mengena. Seperti kata Muratori, menulis CSS lebih terasa seperti membela perkara di pengadilan daripada membangun di atas elemen dasar yang sederhana. Tentu saja, karena familiaritas, kompatibilitas, dan “jalur CSS yang berjalan baik” sangat produktif, ada permintaan besar yang dipenuhi proyek seperti ini. Namun, tampaknya juga ada peluang untuk menyediakan lapisan yang lebih sederhana dan umum yang bisa dipakai pengguna saat ingin turun ke level lebih rendah. Bisa juga mengambil inspirasi dari CSS Houdini yang mencoba membuat CSS dapat diperluas lewat JS API, dan mungkin inilah yang dimaksud dengan “Custom Widgets”.

    • Itu hampir persis seperti proposal Blitz. Algoritma layout yang bisa di-plug-in adalah bagian yang benar-benar ingin kami mungkinkan di Blitz. Jika layout dilakukan dengan JS, sepertinya akan terlalu lambat dalam kebanyakan kasus, tetapi fakta bahwa API-nya Rust memberi keuntungan. Engine layout Taffy(https://github.com/DioxusLabs/taffy) juga sudah cukup modular. Custom widget dimaksudkan untuk memungkinkan layout, paint, aksesibilitas, penanganan event, dan sebagainya yang sepenuhnya kustom, layaknya widget dalam toolkit GUI tradisional, melampaui sekadar layout. Kami juga punya proposal untuk menambahkan unit baru ke CSS itu sendiri. Ini terinspirasi dari cara banyak sistem UI non-web melakukan layout, dan berpotensi sangat menyederhanakan layout web dalam kasus umum: https://github.com/w3c/csswg-drafts/issues/8267 Sempat tersisih selama beberapa waktu, tetapi suatu saat harus dikerjakan lagi, dan saya benar-benar ingin mencoba mengimplementasikan algoritmanya.
    • Saya penasaran apakah rasanya seperti Dillo yang ditingkatkan: https://en.m.wikipedia.org/wiki/Dillo Untuk browsing web atau aplikasi sederhana, akan menyenangkan kalau ada sesuatu seperti itu. Hal serupa yang saya tahu hanya Sciter; itu software proprietary, tetapi model lisensinya inovatif.
    • Kita perlu CSS yang ketat yang menghapus hal-hal tidak perlu dan menjanjikan peningkatan performa. Saya tidak tahu mengapa browser belum menyediakannya, dan misalnya cukup dengan menghilangkan float saja.

  • Beberapa tahun lalu, atau lebih tepatnya 20 tahun lalu, saya membuat proyek open-source serupa bernama Flying Saucer. Itu adalah renderer HTML + CSS2 berbasis Java murni. Saya membayangkan itu akan dipakai untuk merender UI teks kaya di game, tetapi penggunaan inti sebenarnya adalah pembuatan PDF di sisi server. Saat itu, jauh lebih mudah membuat HTML lalu merendernya menjadi PDF daripada memakai berbagai API pembuatan laporan PDF yang tersedia. Blitz terlihat keren, dan saya menantikan lebih banyak library GUI Rust. https://en.wikipedia.org/wiki/Flying_Saucer_(library) Mengejutkan, ternyata masih diperbarui: https://github.com/flyingsaucerproject/flyingsaucer/releases...

  • “Webview ringan yang mengganti mesin JavaScript dengan API Rust native” terdengar menjanjikan. Kalau pada dasarnya ini seperti Tauri tanpa JS di jalurnya, kedengarannya saja sudah bagus

    • Kurang lebih benar, tetapi Tauri memakai webview sistem, sedangkan kami membuat webview sendiri Sebagiannya dibangun di atas komponen Servo dan pustaka umum, sebagiannya kami buat sendiri. Dalam beberapa hal, ini lebih dekat ke Sciter tanpa JS
    • Sepertinya Sciter adalah pembanding yang lebih baik: https://sciter.com/ Itu mengimplementasikan rendering HTML dan CSS dari nol. Seingat saya dulu punya bahasa pemrograman sendiri, dan sekarang memakai JS Saya sudah lama tertarik pada hal semacam ini, tetapi belum pernah memakai Sciter secara mendalam. Dulu lisensinya membuat saya khawatir, tetapi melihat situsnya sekarang, syaratnya tampak jauh lebih fleksibel Perlu juga ditambahkan bahwa jika ingin memakai webview sistem tanpa JS, Anda bisa saja mematikan JS di webview sistem
    • Tauri berbeda di tiap platform karena memakai webview native. Blitz adalah renderer sendiri

  • Menarik. Baru hari ini saya mengalami hal buruk dengan puppeteer dan Chromium headless, lalu sedang mencari pengganti wkhtmltopdf Jangan pernah menjalankannya dengan memasukkan jemalloc ke LD_PRELOAD. Masalahnya memang terselesaikan, tetapi saya lebih suka renderer yang sederhana

    • Anda bukan orang pertama yang tertarik memakainya untuk rendering PDF Mungkin dibutuhkan lebih banyak dukungan untuk properti CSS berorientasi cetak dan layout berbasis halaman. Maksudnya kemampuan membagi layout ke beberapa halaman terpisah dan mengontrol posisi pemisahan halaman Meski begitu, saya melihat ini sebagai area yang suatu saat pasti harus bisa didukung
    • Kebutuhan saya agak berbeda. Saya mencoba merender satu elemen di halaman menggunakan Chromium Headless lewat Playwright, tetapi di Playwright sering muncul “Page crashed” dan “Timed out after 30s” secara acak Setelah beralih ke Firefox Headless, masalah-masalah ini hilang, dan ternyata setelah beralih ke Firefox, renderernya sekitar 3× lebih cepat daripada Chromium Headless Blitz sangat menarik dan dekat dengan yang saya butuhkan. Saya memakai browser headless alih-alih merender semuanya sendiri dengan Java Graphics2D, karena layout objek yang harus dirender cukup rumit dan saya tidak ingin menciptakan ulang roda dengan membuat mesin layout sendiri
    • Coba lihat gotenberg[0]; mungkin bisa memenuhi kebutuhan Anda. Saya memakainya untuk mengonversi resume ke PDF di GitHub Actions [0]: https://github.com/gotenberg/gotenberg
    • Benar, Wkhtmltopdf benar-benar monster pemakan sumber daya Solusi lain dukungan spesifikasi HTML-nya tidak lengkap, sehingga sulit membuat PDF yang diinginkan dengan benar. Kecuali ada yang menemukan cara dengan hanya memakai fitur yang tidak terlalu modern

  • Ini bukan soal Blitz itu sendiri, tetapi saya baru mengetahui Dioxus Saya bertanya-tanya apakah ada aturan tak tertulis bahwa framework yang dikompilasi ke WASM tidak menampilkan demo dengan benar atau tidak meng-host situsnya sendiri memakai framework tersebut. Rasanya saya sudah melihat ini 5–6 kali Di beranda Dioxus terlihat ada file WASM yang dimuat, tetapi tidak jelas dipakai untuk apa, atau apakah benar-benar dipakai

    • Situs Dioxus memang di-host dengan framework mereka sendiri, tetapi karena mendukung server-side rendering dan hydration, bundle WASM hanya dipakai untuk fitur interaktif Demo video juga sedang disiapkan. Saya penasaran apakah ada hal khusus yang ingin Anda lihat

  • Ini bisa keren kalau dipakai bersama backend dan htmx. Namun sepertinya sama sekali tidak ada mesin JS yang terlibat, jadi saya penasaran bagaimana caranya

    • Sepertinya ini bisa menjadi kombinasi legendaris Idealnya, web renderer harus mendukung HTMX secara native Gagasan umum HTMX adalah mendukung fitur yang membuat HTML lebih lengkap. Mengapa hanya dan yang boleh melakukan request HTTP, mengapa hanya event klik dan submit yang boleh memicu request, mengapa hanya GET dan POST yang bisa dipakai, mengapa yang bisa diganti hanya seluruh layar Dilihat dari sisi lain, HTMX membuat elemen HTML tidak terlalu terbatas dan lebih umum. Jika web renderer mempertimbangkan ini saat dirancang, justru bisa menjadi lebih sederhana
    • Ada arus untuk memasukkan fitur inti HTMX ke spesifikasi HTML, sehingga JS mungkin tidak lagi diperlukan https://www.reddit.com/r/htmx/comments/1ehjw7v/comment/lg09w...
    • Sederhana. Ganti htmx dengan Dioxus, atau nanti mungkin dengan leptos

  • Saya baru mengetahui Dioxus hari ini https://dioxuslabs.com/

  • Sangat keren. Saya ingin mencobanya di proyek C++ Satu pertanyaan yang muncul adalah performa. Saya penasaran apakah ia bisa merender halaman yang relatif kompleks dengan frame rate tinggi Biasanya saya memakai ImGUI, dan performanya sangat bagus sampai hampir tidak perlu memikirkan masalah performa saat menampilkan data real-time. Sebaliknya, rendering web Chromium bisa membakar CPU hanya dengan update teks DOM sederhana pada 10 frame per detik; kalau ini terselesaikan, itu bisa mengubah permainan

    • Performa saat ini buruk sekali Namun kami sama sekali belum mengerahkan upaya untuk optimasi, dan karena dibangun di atas dependensi yang cukup cepat, ada kemungkinan besar bisa jauh membaik Saya rasa kami tidak akan mengalahkan Chromium dalam “pertarungan yang adil”, tetapi ada potensi untuk memungkinkan hal-hal yang mustahil di Chrome. Misalnya API mirip canvas yang jauh lebih kuat