Blitz: ตัวเรนเดอร์เว็บแบบเบา โมดูลาร์ และขยายต่อได้

 (github.com/DioxusLabs)
2 คะแนน โดย GN⁺ 2024-08-13 | ยังไม่มีความคิดเห็น | แชร์ทาง WhatsApp

Blitz: ตัวเรนเดอร์เว็บแบบเบา โมดูลาร์ และขยายต่อได้

Blitz เป็นตัวเรนเดอร์ HTML/CSS แบบ "เนทีฟ" ที่พัฒนาขึ้นเพื่อรองรับโปรเจกต์ "Dioxus Native" โดยใช้ Native Rust API แทน JavaScript engine ทำให้สามารถเชื่อมต่อโดยตรงกับไลบรารีด้าน reactivity/state management ของ Rust ได้

ปัจจุบันรองรับฟรอนต์เอนด์ 2 แบบ
  • ฟรอนต์เอนด์ HTML/Markdown: สามารถเรนเดอร์สตริง HTML ได้ เหมาะสำหรับการพรีวิวไฟล์ HTML และ Markdown แต่ยังขาดความสามารถในการโต้ตอบ
  • ฟรอนต์เอนด์ Dioxus: สามารถเรนเดอร์ Dioxus VirtualDom ได้ รองรับการโต้ตอบอย่างสมบูรณ์ผ่านการจัดการอีเวนต์ของ Dioxus
เทคโนโลยีพื้นฐานของ Blitz
  • Stylo: เอนจิน CSS ระดับเบราว์เซอร์แบบขนานของ Firefox
  • Vello + WGPU: การเรนเดอร์
  • Taffy: เลย์เอาต์ระดับ box
  • Parley: เลย์เอาต์ระดับข้อความ/inline
  • AccessKit: การเข้าถึง
  • Winit: การจัดการหน้าต่างและอินพุต

หมายเหตุ: รีโพซิทอรีนี้มี Blitz เวอร์ชันใหม่ที่ใช้ Stylo รวมอยู่ด้วย ซอร์สโค้ดของเวอร์ชันก่อนหน้ายังใช้งานได้ใน legacy branch แต่ไม่ได้มีการพัฒนาอย่างต่อเนื่องแล้ว

ภาพหน้าจอ

  • ตัวเรนเดอร์ 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 ขั้นสูง (selector ที่ซับซ้อน, media query, CSS variables)
  • HTML form controls
  • การเข้าถึงผ่าน AccessKit
  • ความสามารถในการขยายผ่าน custom widgets

ฟีเจอร์ที่ไม่รองรับ:

  • webrtc, websockets, bluetooth, localstorage เป็นต้น

ขณะนี้ยังไม่มี Blitz bindings สำหรับภาษาอื่น ๆ (เช่น JavaScript, Python) แต่ยินดีรับการมีส่วนร่วม

สถาปัตยกรรม

Blitz แบ่งออกเป็นหลายส่วน:

  • blitz-dom: แอบสแตรกชัน DOM แกนหลัก ซึ่งรวมการตีความสไตล์และเลย์เอาต์ แต่ไม่รวมการวาด/เพนต์
  • blitz: เพิ่มตัวเรนเดอร์ที่ใช้ Vello/WGPU บน blitz-dom
  • dioxus-blitz: เลเยอร์ผสานรวมกับ Dioxus สำหรับเรนเดอร์แอป Dioxus ด้วย Blitz ปัจจุบัน dioxus-blitz ยังรวมตัวเรนเดอร์ HTML อยู่ด้วย แต่ในอนาคตอาจแยกออกเป็นแพ็กเกจต่างหาก

สถานะ

Blitz ยังอยู่ในขั้น ทดลอง ขณะนี้กำลังพัฒนาอย่างต่อเนื่องเพื่อให้พร้อมใช้งาน แต่ยังไม่แนะนำให้นำไปใช้สร้างแอป

TODO

  • แอบสแตรกชัน DOM tree แกนหลัก
  • การพาร์สสไตล์ด้วย html5ever
  • การคำนวณสไตล์สำหรับเอกสาร html5ever
  • การคำนวณเลย์เอาต์ด้วย Taffy
  • การเรนเดอร์ด้วย WGPU

การเรนเดอร์

  • เรนเดอร์ลงหน้าต่าง
  • เรนเดอร์เป็นภาพ
  • ไล่สี
  • เส้นขอบ/เส้นขอบนอก
  • ภาพแรสเตอร์ (png, jpeg เป็นต้น)
  • ซูม
  • SVG
    • SVG ภายนอก (รองรับพื้นฐาน)
    • SVG แบบ inline
  • เงา
  • แอนิเมชัน/ทรานซิชัน
  • form controls มาตรฐาน (checkbox/dropdown/slider เป็นต้น)
  • custom widgets
  • shadow elements

เลย์เอาต์

  • inline (รองรับบางส่วน - การติดตั้งใช้งานยังไม่สมบูรณ์)
  • block
  • flexbox
  • grid
    • named grid lines
    • subgrid
  • table
  • Z-index
  • ฟีเจอร์ CSS เพิ่มเติม
    • box-sizing: content-box
    • calc()
    • position: static
    • direction: rtl
    • transform

ข้อความ

  • การโหลดฟอนต์
    • โหลดฟอนต์ระบบ
    • โหลดเว็บฟอนต์
  • ข้อความ
    • shaping / Bidi
    • เลย์เอาต์ / การตัดบรรทัด
    • ขนาดฟอนต์ / ความสูงบรรทัด
    • สีข้อความ
    • ตัวหนา / ตัวเอียง
    • ขีดเส้นใต้ / ขีดทับ
  • การเลือกข้อความ

อินพุต

  • การเลื่อน
    • root view
    • องค์ประกอบ overflow: scroll
  • การตรวจจับ hover
  • การจัดการคลิก
  • การป้อนข้อความ

ประสิทธิภาพ

  • hot reloading
  • การเลื่อนโดยไม่ต้องตีความสไตล์และเลย์เอาต์ใหม่
  • การแคชสไตล์
  • การแคชเลย์เอาต์

อื่น ๆ

  • หลายหน้าต่าง
  • accessibility tree
  • โฟกัส
  • เครื่องมือสำหรับนักพัฒนา
  • hooks สำหรับ context menu
  • use_wgpu_context() สำหรับดึงองค์ประกอบไปยังพื้นผิวเรนเดอร์แบบกำหนดเอง

ไลเซนส์

โปรเจกต์นี้ใช้ไลเซนส์แบบคู่ Apache 2.0 และ MIT เว้นแต่จะระบุไว้เป็นอย่างอื่น การมีส่วนร่วมทั้งหมดที่ผู้ใช้ส่งเข้ามาโดยเจตนาเพื่อนำไปรวมใน stylo-dioxus จะถูกใช้ภายใต้ไลเซนส์ MIT โดยไม่มีเงื่อนไขเพิ่มเติม

สรุปโดย GN⁺

  • Blitz เป็นตัวเรนเดอร์ HTML/CSS แบบเบาที่พัฒนาด้วย Rust เพื่อรองรับโปรเจกต์ Dioxus
  • ตัดความสามารถที่ซับซ้อนของเบราว์เซอร์ออกไป และมุ่งเน้นที่การเรนเดอร์ HTML/CSS พื้นฐาน
  • ยังอยู่ในขั้นทดลอง และยังไม่แนะนำให้นำไปใช้สร้างแอป
  • โปรเจกต์ที่มีความสามารถคล้ายกัน ได้แก่ Servo, WebRender เป็นต้น

บทความที่เกี่ยวข้อง

ยังไม่มีความคิดเห็น

ยังไม่มีความคิดเห็น