สรุปทอล์คที่ 16 ของงาน #JavaScriptBangkok: ทำ Data Visualization ให้เร็วปรี๊ด ด้วย WebAssembly และ Rust! 🤯
- ปัญหาคือ ก่อนที่จะแสดงผลกราฟสวยๆ ได้ มันต้องคำนวณข้อมูลเยอะมากๆ การวาดก็ซับซ้อน แถมตอนเรนเดอร์ก็จะเจอปัญหาเรื่อง repaints และ reflows อีก ทำให้แอพช้า กระตุก และค้างไปเลย 🙁
- เจ้า WebAssembly มันเป็น low-level bytecode ทำให้ควบคุม performance ได้ดีกว่า และ Rust ทำงานกับ WebAssembly ได้ดีมากๆ มีระบบไทป์ที่ดี ไม่ต้องมี GC ด้วย
- Rust สามารถคอมไพล์ออกมาเป็น WebAssembly Target โดยใช้ wasm-bindgen ในการเชื่อมระหว่าง JavaScript กับ WebAssembly โดยสามารถเรียกไปมากันได้ (wasm call js, js call wasm)
- งานที่บริษัทแอพแมนต้องนำเสนอข้อมูลลูกค้าด้านประกันภัยเยอะมากๆ ทำให้การคำนวณเยอะ
- ลองเขียนส่วนของการคำนวณที่เคยเป็น JS เปลี่ยนไปเขียนเป็น Rust แทน ปรากฎว่าเร็วขึ้น 50% เลย!
- แต่เนื่องจาก chart ที่ใช้ มันไม่ได้ทำงานบน canvas/webgl แต่ดันไป manipulate dom เอง ทำให้ตอน render ไม่ได้เร็วขึ้นมากขนาดนั้น (ถ้าใช้ canvas/gl ส่วนนี้คงเร็วขึ้น)
- การเข้าถึง JS Object ตรงๆ จะช้าอยู่ดี (น่าจะต้องใช้ SharedArrayBuffer) และยังเข้าถึง DOM ตรงๆ ยังทำไม่ได้ (ต้องรอ WebIDL หรือ mutate shared canvas memory เอา)
- การนำไปใช้ที่น่าสนใจ เช่นการทำ pathfinding หรือ physics ในกราฟ น่าจะไปลองเล่นในอนาคต 😉
#สรุปJavaScriptBangkok #JSBangkok