วันนี้เขียน Mobile app ด้วย Flutter เลยไปเจอ code ส่วนหนึ่งที่เกิดปัญหา
คือ เมื่อมีการเปลี่ยน state แล้วพบว่า app ทำการ render ใหม่ทั้งหน้า
แน่นอนว่า ทำให้การ render ช้า หรือ performance แย่ลง
ทีมพัฒนามองว่าเป็นเรื่องปกติแต่ผมคิดว่า ไม่น่าจะเป็นเรื่องที่ปกติ
ดังนั้นจึงมาแก้ไขกันหน่อย
เริ่มต้นมาดูระบบก่อนว่า ทำงานอย่างไร ?
- ในหน้าจะมี state หลายส่วน ซึ่งทำการดึงข้อมูลจาก API มาแสดงผล
- โดยทำการเรียก API 4-5 ตัว (ไม่รู้จะเรียกเยอะไปไหน)
- การทำงานจะทำการดึงข้อมูลมาทั้งหมดก่อน แล้วจึงทำการ render
ผลที่ตามมาคือ กว่าจะ render หน้านี้เสร็จ ใช้เวลานานมาก
หรือเมื่อมีการแก้ไขบาง state ก็จะ render ทั้งหน้า
ดังนั้นจึงทำการแก้ไขปัญหานี้นิดหน่อย
ถ้าไม่คิดอะไรมาก ก็ปรับเปลี่ยน API ให้น้อยลง และให้ทำงานเร็วขึ้น !!
แน่นอนว่า ไม่ทำ ซึ่งจะอ้างว่า มันใช้เวลาเยอะ !!
ดังนั้นมีทางเดียวที่ทำได้คือ ฝั่ง mobile app ที่ใช้ Flutter นั่นเอง
โดยทำการเปลี่ยนมาใช้งาน StreamBuilder และ FutureBuilder Widget ไปเลย
เพราะว่าทั้งสองตัวนี้ ออกแบบมาให้ทำงานกับข้อมูล
ที่มาแบบ asynchronous และ stream
ที่สำคัญคือ จะทำการ render เฉพาะ Widget นั้น ๆ ด้วย
ไม่ได้ทำการ render ทั้งหน้าแบบเดิม
รวมทั้งไม่ต้องรอให้ดึงข้อมูลเสร็จก่อน render อีกด้วย
คำถามที่ตามมาคือ ใช้อะไรดีระหว่าง StreamBuilder vs FutureBuilder Widget ?
ตามจริงทั้งคู่มีพฤติกรรมการทำงานเหมือนกัน
คือจะ listen การเปลี่ยนแปลงของข้อมูล
ถ้ามีการเปลี่ยนแปลงก็จะทำการ build และ render widget ใหม่
แต่ต่างกันดังนี้
- FutureBuilder จะรับข้อมูลกลับมาเพียงครั้งเดียว เช่นข้อมูล API เป็นต้น
- ส่วน StreamBuilder มากกว่า 1 ครั้ง เพราะว่าข้อมูลจะค่อย ๆ มา เช่นข้อมูล Location, VDO, Sound เป็นต้น
เพียงเท่านี้ก็สามารถแก้ไขปัญหาที่เจอได้แล้ว
