Hologram เฟรมเวิร์ก full-stack สำหรับเว็บที่ช่วยให้นักพัฒนาสามารถสร้างเว็บแอปพลิเคชันแบบโต้ตอบได้ทั้งหมดด้วย Elixir ได้ปล่อยเวอร์ชัน 0.5.0 พร้อมกับการปรับปรุงประสิทธิภาพอย่างมาก เฟรมเวิร์กนี้แปลงโค้ด Elixir เป็น JavaScript ทำให้สามารถทำงานฝั่งไคลเอนต์ได้โดยที่นักพัฒนาไม่ต้องเขียน JavaScript โดยตรง
การปล่อยเวอร์ชันนี้เป็นจุดสำคัญที่มีการ commit มากกว่า 950 ครั้งตั้งแต่เวอร์ชันก่อนหน้า โดยเน้นไปที่การปรับปรุงประสิทธิภาพและประสบการณ์ของนักพัฒนาเป็นหลัก
การเพิ่มประสิทธิภาพอย่างมากเปลี่ยนแปลงประสบการณ์ผู้ใช้
การปรับปรุงที่โดดเด่นที่สุดในรีลีสนี้คือการเขียน bitstring implementation ใหม่ทั้งหมด ซึ่งให้ความเร็วในการเรนเดอร์เพิ่มขึ้นประมาณ 50 เท่า การเพิ่มประสิทธิภาพนี้ได้เปลี่ยนประสบการณ์ผู้ใช้จากการโต้ตอบที่ช้าเป็นอินเทอร์เฟซที่ลื่นไหลและตอบสนองที่ทำงานที่ 60+ เฟรมต่อวินาที
สมาชิกในชุมชนสังเกตเห็นความแตกต่างอย่างมากทันที เว็บไซต์ของเฟรมเวิร์กเอง ซึ่งทำหน้าที่เป็นการสาธิตในโลกจริง ตอนนี้ให้การนำทางหน้าเว็บที่เกือบจะทันทีและการโต้ตอบเมนูที่ตอบสนองซึ่งก่อนหน้านี้ใช้เวลามากกว่าหนึ่งวินาทีในการทำงานให้เสร็จ
การปรับปรุงประสิทธิภาพขยายไปเกินกว่าการเรนเดอร์ โดยเวลาในการทำงานลดลงจากมิลลิวินาทีเป็นไมโครวินาทีสำหรับการทำงานหลักฝั่งไคลเอนต์หลายอย่าง สิ่งนี้ทำให้ Hologram เร็วพอที่จะจัดการกับการโต้ตอบแบบเรียลไทม์ที่ต้องการประสิทธิภาพสูง เช่น การติดตามการเคลื่อนไหวของเมาส์สำหรับแอปพลิเคชันการวาดภาพ ตามที่แสดงใน SVG Drawing Demo ใหม่
การปรับปรุงประสิทธิภาพ
- ความเร็วในการเรนเดอร์เพิ่มขึ้น ~50 เท่าจากการเขียน bitstring ใหม่
- เวลาในการประมวลผลลดลงจากมิลลิวินาทีเป็นไมโครวินาที
- ความสามารถในการเรนเดอร์หน้าเว็บได้มากกว่า 60 FPS
- เวลาในการ build แบบ incremental เร็วขึ้น 2-10 เท่า
ประสบการณ์การพัฒนาได้รับการอัพเกรดครั้งใหญ่
เวอร์ชัน 0.5.0 นำเสนอการจัดการเซสชันและคุกกี้แบบครอบคลุม ทำให้ Hologram ใกล้เคียงกับความสามารถของเฟรมเวิร์กเว็บแบบดั้งเดิมมากขึ้น นักพัฒนาตอนนี้สามารถใช้ฟังก์ชันที่คุ้นเคย เช่น put_session/3, get_session/2 และฟังก์ชันการจัดการคุกกี้พร้อมกับการรองรับตัวเลือกคุกกี้มาตรฐานอย่างเต็มรูปแบบ
การปล่อยเวอร์ชันนี้ยังเพิ่มฟังก์ชัน live reload พร้อมกับการติดตามไฟล์อย่างชาญฉลาดและ error overlay ที่สวยงามสำหรับปัญหาการคอมไพล์ เมื่อรวมกับการคอมไพล์แบบเพิ่มหน่วยที่ให้เวลาการ build เร็วขึ้น 2 ถึง 10 เท่า ประสบการณ์การพัฒนาจึงกลายเป็นสิ่งที่น่าพอใจและมีประสิทธิภาพมากขึ้นอย่างมาก
การรองรับอีเวนต์ใหม่รวมถึง pointer events และ mouse move events พร้อมกับการติดตามพิกัดแบบครอบคลุม ทำให้สามารถโต้ตอบกับผู้ใช้ได้อย่างซับซ้อนมากขึ้นซึ่งก่อนหน้านี้ยากที่จะทำให้ทำงานได้อย่างลื่นไหล
ฟีเจอร์ใหม่ใน v0.5.0
- ระบบจัดการ session แบบครบครันพร้อม
put_session/3,get_session/2,get_session/3,delete_session/2 - รองรับ cookie อย่างเต็มรูปแบบด้วย
put_cookie/3,put_cookie/4,get_cookie/2,get_cookie/3,delete_cookie/2 - เหตุการณ์ใหม่:
pointer_move,pointer_cancel,pointer_down,pointer_up,mouse_move,select - Live reload พร้อมการติดตามไฟล์และ error overlay
- การใช้งาน CRDT ( Last Writer Wins Map ) สำหรับ distributed state
สถาปัตยกรรมเปลี่ยนไปสู่การสื่อสารแบบ HTTP
การเปลี่ยนแปลงสถาปัตยกรรมที่สำคัญเกี่ยวข้องกับการย้ายจาก WebSocket ไปเป็นการสื่อสารแบบ HTTP สำหรับการทำงานที่ต้องเข้าถึงข้อมูลคุกกี้และเซสชัน การเปลี่ยนแปลงนี้รวมถึงระบบ HTTP ping ใหม่ที่รักษาสุขภาพการเชื่อมต่อในขณะที่ให้ latency เกือบเท่ากับการเชื่อมต่อ WebSocket
เฟรมเวิร์กตอนนี้ใช้การ implement WebSocket แบบกำหนดเองแทนที่จะพึ่งพา Phoenix Channels ทำให้นักพัฒนามีการควบคุมการจัดการการเชื่อมต่อมากขึ้นและลดการพึ่งพาภายนอก
การเปลี่ยนแปลงสถาปัตยกรรม
- การย้ายจาก WebSocket ไปใช้ HTTP สำหรับการดำเนินงาน cookie/session
- ระบบ HTTP ping ที่มีช่วงเวลา 30 วินาที
- การใช้งาน WebSocket แบบกำหนดเอง (ลบการพึ่งพา Phoenix Channels )
- รูปแบบ Serialization เวอร์ชัน 2 พร้อมความเข้ากันได้แบบย้อนหลัง
การยอมรับของชุมชนและข้อกังวลเรื่องประสิทธิภาพ
แม้ว่าการปรับปรุงประสิทธิภาพจะทำให้ผู้ใช้งานแรกๆ ประทับใจ แต่สมาชิกในชุมชนบางคนได้แสดงความกังวลเกี่ยวกับขนาดของ bundle และเวลาในการโหลดหน้าเว็บครั้งแรก การทดสอบ Google PageSpeed Insights เผยให้เห็น runtime bundle ขนาด 104 KiB พร้อมกับคะแนน Largest Contentful Paint 1.5 วินาที ซึ่งบางคนถือว่ามากเกินไปสำหรับเว็บไซต์เอกสาร
อย่างไรก็ตาม ผู้สร้างเฟรมเวิร์กยอมรับข้อกังวลเหล่านี้และเน้นย้ำว่าการปรับปรุง bundle ยังไม่ใช่ความสำคัญอันดับแรก เวอร์ชันในอนาคตคาดว่าจะลดขนาด bundle ลงอย่างมากผ่านเทคนิคการปรับปรุงที่เหมาะสม
การวิเคราะห์ขนาด Bundle
- Runtime bundle ปัจจุบัน: ขนาดการถ่ายโอน 104 KiB
- Google PageSpeed Insights LCP: 1.5 วินาที
- การปรับปรุง bundle ยังไม่ได้ดำเนินการ
- คาดหวังการลดขนาดอย่างมีนัยสำคัญในเวอร์ชันอนาคต
การวางตำแหน่งเทียบกับ Phoenix LiveView
Hologram วางตำแหน่งตัวเองเป็นทางเลือกแทน Phoenix LiveView สำหรับสถานการณ์ที่ต้องการการโต้ตอบฝั่งไคลเอนต์แบบทันที ในขณะที่ LiveView เรนเดอร์การอัพเดต UI บนเซิร์ฟเวอร์และส่งไปยังไคลเอนต์ Hologram แปลงโค้ด UI ของ Elixir เป็น JavaScript ที่ทำงานทั้งหมดในเบราว์เซอร์
วิธีการนี้ขจัดการเดินทางไปกลับของเซิร์ฟเวอร์สำหรับการโต้ตอบ UI ทำให้เหมาะสำหรับแอปพลิเคชันที่ต้องการความสามารถในการทำงานออฟไลน์ ลดโหลดเซิร์ฟเวอร์ หรือส่วนติดต่อผู้ใช้ที่ตอบสนองอย่างแท้จริง เฟรมเวิร์กสามารถอยู่ร่วมกันในแอปพลิเคชัน Phoenix เดียวกันได้ ทำให้นักพัฒนาสามารถเลือกวิธีการที่ดีที่สุดสำหรับฟีเจอร์ต่างๆ ได้
การปล่อยเวอร์ชันนี้แสดงให้เห็นความมุ่งมั่นของ Hologram ในการนำโมเดลการเขียนโปรแกรมที่ทรงพลังของ Elixir มาสู่การพัฒนาฝั่งไคลเอนต์ในขณะที่รักษาข้อได้เปรียบของการ deploy แบบทันทีและการเข้าถึงได้แบบสากลของเว็บแอปพลิเคชัน ด้วยการรองรับ CRDT พื้นฐานที่รวมไว้สำหรับฟีเจอร์แบบกระจายในอนาคต เวอร์ชัน 0.5.0 สร้างรากฐานที่มั่นคงสำหรับการพัฒนาต่อเนื่องของเฟรมเวิร์ก
อ้างอิง: Hologram v0.5.0 Released!