หมวดหมู่: Mobile

มาลองดูแนวทางการพัฒนา Mobile App จากทีมงานของ facebook กันหน่อย

ที่มา http://www.somkiat.cc/how-facebook-make-mobile-app/

ในงาน @Scale Conference
ทีมพัฒนา Mobile application ของ Facebook ได้มาพูดเกี่ยวกับ
การพัฒนาระบบเพื่อให้สามารถทำงานได้บนมือถือและ network ต่างๆ ทั่วโลกได้

มาดูกันว่าทีมพัฒนาของ Facebook ทำการพัฒนา สร้าง product กันอย่างไร
เพื่อรองรับการใช้งานจากคนทั้งโลกกันอย่างไร

สิ่งที่ทางทีมพัฒนาชี้ประเด็นคือ

เรื่องความเร็ว network ของมือถือ
ซึ่งเป็นปัญหาแรกๆ ที่พบเจอ โดยสรุปได้ว่า

• ในประเทศสหรัฐอเมริกา นั้นความเร็วของเครื่องข่าย 3G ใช้เวลาในการรับส่งข้อมูลต่อครั้ง 280 milisecond
• ในประเทศอินเดีย นั้นความเร็วของเครื่องข่าย 3G ใช้เวลาในการรับส่งข้อมูลต่อครั้ง 500 milisecond
• ในประเทศบราซิล นั้นความเร็วของเครื่องข่าย 3G ใช้เวลาในการรับส่งข้อมูลต่อครั้ง 800 milisecond

โดยทีมพัฒนาที่ทำการวิจัยสามารถสรุปกลุ่มผู้ใช้งาน facebook ไว้ง่ายๆ ว่า

Not everyone is on a fast
Not everyone has a large screen
Not everyone is on a fast network

ดังนั้น สิ่งที่ทางทีมพัฒนาจะเน้นเป็นพิเศษ คือ เรื่องปัญหาของ network

สิ่งที่ต้องจัดการประกอบไปด้วย 3 เรื่องคือ

1. ขนาดของรูป ที่ต้องทำการ download ผ่าน network
2. การตรวจสอบคุณภาพของ network ก่อนเลือกวิธีการทำงานให้เหมาะสม
3. การแอบดึงข้อมูลบางส่วนมาก่อน

1. การลดขนาดของรูป

รูปแบบที่ใช้สำหรับรูปภาพคือ WebP
ซึ่งสร้างด้วยทีมของ Google ในปี 2010

จากข้อมูลของการใช้งาน Facebook for Android นั้นพบว่า 85% คือรูปภาพ
และ Facebook messenger นั้นพบว่า 67% คือรูปภาพ
ดังนั้น ถ้าสามารถลดขนาดของรูปภาพได้
ก็จะทำให้ application ทำงานได้เร็วขึ้น

ดังนั้นสิ่งที่ทีมพัฒนาต้องทำมีดังนี้

สิ่งแรกคือ การส่งข้อมูลที่เหมาะสมมาให้ผู้ใช้งาน
หมายความว่า จะทำการตรวจสอบก่อนว่าผู้ใช้งานนั้นเป็นอย่างไร
เช่นมีความเร็วของ network ความสามารถของมือถือ หรือ tablet และ ขนาดของหน้าจอ เป็นต้น
ทำให้ server สามารถเลือกข้อมูลที่เหมาะสมได้ เช่น ขนาดของภาพ
จะได้ไม่เปลือง bandwidth และ เปลืองเวลาในการรอของผู้ใช้งาน

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

สิ่งต่อมาคือ การเปลี่ยนรูปแบบของรูปภาพมาอยู่ในรูปแบบ WebP
ซึ่งสามารถลดขนาดของภาพ JPEG ลงไปได้ 7% เมื่อต้องการคุณภาพเท่ากัน
แต่ถ้าทำการเปลี่ยนแปลงค่าต่างๆ เช่นคุณภาพ สามารถลดขนาดภาพลงไปมากกว่า 30%
สามารถลดขนาดภาพลงไปมากกว่า 80% ของรูป PNG
เป็นการปรับปรุงที่ได้ผลดีมากมาย

สำหรับใน Android เวอร์ชั่นเก่าๆ ที่ไม่สนับสนุน WebP นั้น
ใช้วิธีการส่งข้อมูลเป็น WebP แต่ในการแสดงผลยังเป็น JPEG อยู่

2. การตรวจสอบคุณภาพของ Network

สิ่งหนึ่งที่ทางทีมพัฒนาได้เรียนรู้ก็คือ อย่าตัดสินเรื่องความเร็วของ Network ต่างๆ
ตาม technology เช่น 2G, 3G, LTE และ WIFI เป็นต้น
เพราะว่า แต่ละประเทศมันมีความเร็วที่แตกต่างกันมากพอสมควร

ดังนั้น สิ่งที่นำมาใช้ในการตัดสินใจก็คือ
การวัดจากความเร็วจากผู้ใช้งานที่เกิดขึ้นจริงๆ ณ ขณะนั้น

โดยจะวัดจากความเร็วของ network ที่ใช้งานตอนนั้น
ซึ่งทุกๆ response ที่ส่งกลับมาจาก server ของ Facebook
จะมี RTT (Round Trip Time) มาให้เสมอ เพื่อใช้ประมาณเวลาการรับส่งข้อมูล
และการตัดสินใจว่าจะส่งข้อมูลมาให้ด้วยคุณภาพสูงหรือต่ำเพียงใด
แบ่งออกเป็น 4 ระดับคือ

1. Poor มีความเร็วน้อยกว่า 150kbps
2. Moderate มีความเร็วระหว่าง 150-600kbps
3. Good มีความเร็วระหว่า 600-2000kbps
4. Excellent มีความเร็วมากกว่า 2000kbps ขึ้นไป

เมื่อรู้คุณภาพของ network แล้ว สิ่งที่จะต่อไปที่ต้องทำก็คือ

• การเพิ่มหรือลดคุณภาพของข้อมูล
• การส่งข้อมูลแบบขนานหรือไม่
• การเปิดและปิด Auto play ของ VDO
• การแอบดึงข้อมูลบางอย่างมาก่อน

ในการทดสอบนั้น ทีมพัฒนาได้สร้างระบบภายในที่เรียกว่า  Air Traffic Control ขึ้นมา
เพื่อจำลองรูปแบบต่างๆ ของ network
ทำให้เจอปัญหาที่ไม่คาดคิด บนระบบ network ที่ช้าได้อย่างรวดเร็ว
ซึ่งทำให้แก้ไขได้อย่างรวดเร็ว

3. การดึงข้อมูลบางส่วนมาไว้ก่อน (Prefetch content)

เนื่องจากปัญหาความเร็วของ Network ดังนั้นระบบอาจจะต้องทำการดึงข้อมูลบางอย่าง
ที่ยังไม่ถูกใช้งานมาเก็บไว้ก่อน ซึ่งข้อมูลเหล่านี้จำเป็นต่อการทำงาน

ยิ่งถ้า network ที่ช้าๆ แล้วจะพบว่า จะทำการดึงข้อมูลมาไม่ทัน
เช่นดึงข้อมูลมาไม่ได้ แล้ว ผู้ใช้งานจะพบเจอกับรูปภาพหน้าขาวขึ้นมา (ผมเจอประจำเลย)

โดยการดึงข้อมูลมาก่อนนั้น สามารถทำได้ตั้งแต่ตอนเปิด application ขึ้นมาใช้งาน
หรือทำในขณะที่กำลังใช้งานก็ได้

แต่สิ่งที่ต้องคำนึง คือ การดึงข้อมูลต้องไม่ไปทำให้ผู้ใช้งานสะดุด
หรือ block การใช้งานของผู้ใช้งานโดยเด็ดขาด
นั่นคือต้องแยกการทำงานระหว่าง foreground process และ background process ออกจากกัน
รวมทั้งไม่ดึงข้อมูลที่ผู้ใช้งานไม่จำเป็นมาด้วย

และสิ่งสำคัญสุดๆ ก็คือ
ต้องมีระบบ monitoring สำหรับดูว่าผู้ใช้งานแต่ละคนหรือแต่ละเครื่อง
ไม่ทำการดึงข้อมูลมาไว้ก่อนมากจนเกินไป ไม่เช่นนั้นจะเปลือง bandwidth การใช้งานมากๆ

ปิดท้าย

ทีมพัฒนานายังบอกด้วยว่า Facebook application for Android นั้นมีไฟล์ APK มากกว่า 20 ไฟล์
ซึ่งแยกตาม API Level, ขนาดของหน้าจอ และ สถาปัตยกรรมของ CPU อีกด้วย
มันไม่ใช่เรื่องที่ง่าย หรือ เล่นๆ เลยนะ

ดังนั้นลองนำแนวคิดเหล่านี้ ไปใช้เพื่อปรับปรุง Mobile application กันได้
น่าจะมีประโยชน์ไม่มากก็น้อยครับ

Reference VDO