Optimistic UI ดีต่อใจยังไง~~~ [Frontend 101]

JJ Witaya
odds.team
Published in
Nov 12, 2020
Image from https://sematext.com/docs/experience/user-satisfaction/

Optimistic UI คือ เทคนิคในการทำให้ User ที่ใช้งาน Application ของเราไม่รู้สึกติดขัดจาก State ของการรอ Response ของ API จากการที่เราสมมติว่ามันได้รับ Response กลับมาแล้วนั้นเอง

ง่ายเนอะๆ……ลองมาดูตัวอย่างนะ

มาลองดูตัวอย่างกันนะ

แบบแรกคือแบบที่ถ้าเขียน App ปกติโดยไม่ได้ใช้เทคนิคนี้ (Simulate API Response delay ที่ 500ms นะ)

ตัวอย่างการทำงานของ UI ที่ไม่ใช้ Optimistic UI

แบบที่ 2 แบบนี้จะใช้เทคนิค Optimistic UI เข้ามาช่วย

จะสังเกตุได้ว่าแบบที่ 2 เราจะรู้สึกว่ามัน seamlessly มากๆ แล้วก็ทำให้ดูเป็น App ที่น่าใช้งานมากขึ้น 😎 พอเรารู้จักมันแล้ว ลองสังเกตุกลับไปที่ App รอบๆตัวของเราล้วนจะใช้เทคนิคนี้กันทั้งสิ้นไม่ว่าจะเป็น Facebook, Instagram, Trello, etc.

เดียววันหลังจะมา Implement ให้ดูว่าจริงๆแล้วเทคนิคนี้ใช้งานง่ายมากจริงๆ (เริ่มงานง่ายแต่ Edge Case อย่างเยอะ 🤣)

วันนี้น่าจะพอแค่นี้แหละ

แต่ !! ถ้าใครสนใจต่อจริงๆเรื่องนี้จะมีเรื่องให้ดูต่ออีกหลายอย่างเช่น การ Handle Progress ของ API ในกรณีที่เราต้องการให้ User ยังรู้ว่าถึงมันจะทำงานต่อได้แล้วแต่ API เรายังทำงานไม่เสร็จนะ หรือไม่ก็การ Handle Error ว่าเราควรจะทำยังไงถ้า API ที่เราเรียกไปนั้นทำงานไม่สำเร็จ และเรื่องอื่นๆอีกมากมายเลย

แต่วันนี้ไปจริงๆละง่วงงงง (ตอนนี้ 00:50 ละ) หวังว่าคนที่หลงเข้ามาคงได้อะไรกลับไปไม่มากก็น้อยนะครับ ขอบคุณที่หลงเข้ามารับชมครับ

--

--

JJ Witaya
odds.team

A FullStack Developer who has a passion for DevOps.