เปิดตัว Flitter 1.0.0: ไลบรารี svg ที่มาแทนที่ D3

แนะนำไลบรารี Flitter

เบื้องหลังการกำเนิดของ Flitter

ในสภาพแวดล้อมการพัฒนาเว็บไซต์ในปัจจุบัน การแสดงข้อมูลเชิงภาพเป็นสิ่งจำเป็นอย่างยิ่ง การเปลี่ยนแปลงชุดข้อมูลที่ซับซ้อนให้กลายเป็นรูปแบบที่เข้าใจง่ายเป็นความท้าทายอย่างต่อเนื่องสำหรับนักพัฒนา Flitter ถือกำเนิดขึ้นเพื่อตอบสนองต่อความท้าทายนี้ แม้ว่าจะมีไลบรารีการแสดงข้อมูลเชิงภาพมากมายอยู่แล้ว แต่นักพัฒนามักพบว่ายากที่จะค้นหาฟังก์ชันที่ตรงตามความต้องการของตนเองในตัวเลือกที่มีอยู่ การนำเสนอแผนภูมิหรือไดอะแกรมง่ายๆ ก็อาจต้องใช้เวลาและความพยายามในการเรียนรู้มากเกินไป

ปัญหาที่ Flitter แก้ไข

เป้าหมายหลักของ Flitter คือการช่วยให้นักพัฒนาสามารถสร้างการแสดงข้อมูลเชิงภาพ เช่น แผนภูมิ ไดอะแกรม ฯลฯ ได้อย่างง่ายดายและรวดเร็ว Flitter จึงมีฟังก์ชันหลักสองอย่าง

1. การเขียนโค้ดแบบประกาศโดยใช้ Widget : Flitter นำเสนอแบบจำลองการเขียนโปรแกรมแบบประกาศ ทำให้นักพัฒนาสามารถแสดงองค์ประกอบภาพที่ต้องการได้อย่างง่ายดายและใช้งานง่าย วิธีการนี้ใช้แบบแผนที่ได้รับการยอมรับอย่างกว้างขวางในเฟรมเวิร์กเว็บไซต์ยุคใหม่ เช่น React มาใช้กับการแสดงข้อมูลเชิงภาพ
2. การคำนวณレイアウトขั้นสูง : การคำนวณレイアウトและตำแหน่งที่แม่นยำเป็นองค์ประกอบสำคัญในการแสดงข้อมูลเชิงภาพ Flitter ทำให้กระบวนการคำนวณレイアウトที่ซับซ้อน เช่น การอนุมานความกว้างของข้อความ เป็นแบบอัตโนมัติ ช่วยให้นักพัฒนาสามารถมุ่งเน้นไปที่การพัฒนาตรรกะที่สำคัญยิ่งขึ้นได้

เมื่อใดที่ควรใช้ Flitter

Flitter เหมาะอย่างยิ่งสำหรับโครงการที่มีความต้องการในการแสดงข้อมูลเชิงภาพที่ซับซ้อน หรือสถานการณ์ที่ต้องสร้างแผนภูมิหรือไดอะแกรมอย่างรวดเร็ว นอกจากนี้ยังมีไวยากรณ์และโครงสร้างที่คุ้นเคยสำหรับนักพัฒนาที่มีประสบการณ์ในการพัฒนา Flutter ทำให้สามารถเพิ่มประสิทธิภาพสูงสุดระหว่างแพลตฟอร์มเว็บและมือถือได้

การอัปเดตและการปรับปรุงที่สำคัญ

ฟังก์ชันใหม่ๆ

• การสนับสนุน SSR ที่ได้รับการปรับปรุงเวอร์ชัน 1.0.0 ได้ปรับปรุงการสนับสนุน SSR (การแสดงผลแบบ Server-Side Rendering) อย่างมาก ในเวอร์ชันก่อนหน้า อาจมีการพึ่งพา Node.js ในบางกรณี แต่ตอนนี้ได้ลบการพึ่งพาเหล่านั้นออกทั้งหมด ทำให้สามารถทำงานได้อย่างเสถียรในสภาพแวดล้อมต่างๆ เช่น Vercel หรือ Cloudflare ซึ่งช่วยให้นักพัฒนาสามารถผสานรวม Flitter เข้ากับโครงการของตนเองได้ง่ายขึ้นโดยไม่ต้องคำนึงถึงเฟรมเวิร์ก
• ฟังก์ชัน GuestureDetector ที่ได้รับการปรับปรุงตอนนี้ Flitter มีผลกระทบจากการส่งต่อเหตุการณ์ที่ตรงกับต้นไม้ Widget ซึ่งช่วยให้สามารถควบคุมปฏิสัมพันธ์ของผู้ใช้ได้อย่างละเอียดมากขึ้น และให้นักพัฒนาสามารถปรับแต่งปฏิสัมพันธ์ที่ซับซ้อนได้อย่างยืดหยุ่นมากขึ้น
• เพิ่ม Widget ZIndexก่อนหน้านี้ SVG ไม่ได้สนับสนุนแอตทริบิวต์ z-index โดยตรง Flitter 1.0.0 แก้ไขข้อจำกัดนี้โดยใช้ Widget ZIndex ทำให้นักพัฒนาสามารถควบคุมลำดับชั้นแนวตั้งขององค์ประกอบได้อย่างชัดเจน

การปรับปรุงประสิทธิภาพ

• Flitter ได้ปรับปรุงความเร็วในการแสดงผลครั้งแรกของไดอะแกรมและประสิทธิภาพการโต้ตอบอย่างมาก โดยเน้นที่การปรับปรุงประสิทธิภาพ เช่น การลดความเร็วในการแสดงผลของไดอะแกรมที่ซับซ้อนจาก 140 มิลลิวินาทีเหลือ 30 มิลลิวินาที
• เมื่อการเปลี่ยนแปลงสถานะเกิดขึ้นใน Call Stack เดียวกัน จะดำเนินการประมวลผลแบบ Batch เพื่อลดจำนวนครั้งในการแสดงผลซ้ำ

การแก้ไขข้อบกพร่องที่สำคัญ

• แก้ไขปัญหาที่การเรียกใช้ setState ภายในตัวจัดการเหตุการณ์ที่ลงทะเบียนโดย addPostFrameCallback() ไม่ได้ทำให้เกิดการแสดงผลซ้ำ
• แก้ไขปัญหาที่ความสูงไม่ตรงกับความสูงของส่วนประกอบหลักเมื่อตั้งค่าความสูงเป็น 100% ในการนำเสนอแบบตอบสนองของเบราว์เซอร์

ตัวอย่างการใช้งานและเอกสารประกอบ

React

ในการใช้งานกับ React ให้ติดตั้งแพ็คเกจทั้งสองนี้

การนำเข้า Widget จาก flitter-react ช่วยให้สามารถใช้ Flitter ในสภาพแวดล้อม React ได้อย่างง่ายดาย

สามารถดูเอกสารประกอบและตัวอย่างการใช้งาน Flitter เพิ่มเติมได้จาก เว็บไซต์เอกสารอย่างเป็นทางการ ซึ่งมีข้อมูลต่างๆ มากมาย ตั้งแต่การใช้งานพื้นฐานไปจนถึงฟังก์ชันขั้นสูง

ชุมชนและวิธีการมีส่วนร่วม

ชุมชน Flitter สื่อสารกันอย่างแข็งขันผ่าน GitHub และ Discord นักพัฒนาสามารถเสนอฟังก์ชันหรือรายงานข้อบกพร่องโดยตรงผ่าน GitHub และ ช่อง Discord สามารถใช้สำหรับแบ่งปันไอเดียหรือประสบการณ์เกี่ยวกับ Flitter ผู้มีส่วนร่วมทุกคนมีบทบาทสำคัญในการพัฒนาโครงการ Flitter

แผนในอนาคตและวิสัยทัศน์

ในระยะสั้น Flitter จะมุ่งเน้นไปที่การแก้ไขข้อบกพร่องและการปรับปรุงประสิทธิภาพ ในขณะที่ในระยะยาวจะมุ่งเน้นไปที่การพัฒนาประสบการณ์ SSR ที่ดีขึ้นและฟังก์ชันเพิ่มเติมสำหรับการแสดงข้อมูลเชิงภาพ วิสัยทัศน์สูงสุดของ Flitter คือการมอบโซลูชันแบบครบวงจรและขยายได้สำหรับการแสดงข้อมูลเชิงภาพ เพื่อปฏิวัติการเข้าถึงการแสดงข้อมูลเชิงภาพในระบบนิเวศการพัฒนาเว็บ