instagram

จากงาน @Scale conference ทีมพัฒนา Android application ของ Instagram
ได้มาพูดเกี่ยวกับสิ่งที่ทางทีมได้ทำมาตลอด 1 ปี
ซึ่งสิ่งที่ทำนั้นประกอบไปด้วย

  • การออกแบบ
  • ปรับปรุงความเร็วของ Startup time หรือเวลาในการเปิด application

มาดูกันว่า ทีมพัฒนาของ Instagram เขาทำกันอย่างไร

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

1. เรื่องการออกแบบ (Design)

ในการออกแบบใช้แนวคิด Flat design มีเป้าหมาย 3 อย่าง ประกอบไปด้วย

  • ระบบจะต้องทำงานเร็วขึ้น
  • ระบบจะต้องสวยขึ้น
  • ระบบรองรับหน้าจอขนาดต่างๆ ได้ดีขึ้น
  • ระบบต้องใช้งานได้ง่ายขึ้น

ดังนั้น Flat design มันไม่ใช่เพียงการออกแบบให้สวยขึ้นเท่านั้นนะเออ ..

โดยสิ่งที่ทางทีมพัฒนาได้เรียนรู้ก็คือ

Flat design มันช่วยให้งานต่างๆ น้อยลงไป ส่งผลให้สามารถพัฒนาได้เร็วขึ้น ส่งมอบและ deploy ได้เร็วขึ้น
แน่นอนว่า เป้นสิ่งที่นักพัฒนาชอบมากๆ

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

Flat design ช่วยทำให้พวก asset ต่างๆ น้อยลง ส่งผลให้ขนาดของไฟล์ APK ลดลง
นั่นคือสามารถติดตั้งได้ง่ายและเร็ว
โดยขนาดของไฟล์ APK ลดไป 50% กันเลยทีเดียว
มันมีประโยชน์มากๆ สำหรับระบบ mobile network ที่มีความเร็วไม่สูง
รวมทั้งลดขนาดของข้อมูลทาง mobile network ลงไปได้อีกเยอะ

Flat design ช่วยทำให้ทีมพัฒนาแก้ไขเรื่องสีต่างๆ ของระบบงานได้ง่ายขึ้น เพราะว่า มันคือการแก้ไขจาก code ไม่ใช่รูปภาพ หรือ พวก asset ต่างๆ

ทีมพัฒนา มี 3 คน ประกอบไปด้วย นักพัฒนา 2 คน และ นักออกแบบ 1 คน
ใช้เวลาการพัฒนา 4 เดือน

2. ปรับปรุงความเร็วของ Startup time หรือเวลาในการเปิด application

แน่นอนว่าผู้ใช้งานไม่ต้องการรอนานๆ เมื่อเปิด application ขึ้นมาใช้งาน
ต้องไป load โน่นนี่นั่น เยอะเยอะไปหมด
ยิ่งเป็นบน Android ด้วยแล้ว ยิ่งต้องระวัง เพราะว่าบางเครื่องอาจจะมีทรัพยากรที่ต่ำ
ทั้ง CPU, Memory และ Storage อาจจะเป็นสิ่งที่มาฆ่า application ของเราได้
หรืออาจจะทำให้ผู้ใช้งานรอนานขึ้น กว่าจะเข้าใช้งานได้

เป้าหมายที่ทางทีมพัฒนาทำก็คือ ลดเวลาในการเปิดของ application ลงไป 50% จากเดิม
ทำให้ Instagram เป็นหนึ่งใน application ที่เปิดได้รวดเร็วที่สุด

แต่สิ่งที่ได้มา ต้องแลกด้วยหลายๆ สิ่งไป
ดังนั้นมาดูกันว่าทีมพัฒนาเขาทำกันอย่างไร ?

ขั้นตอนแรก เริ่มด้วยการทำ profile ของ application
เพื่อที่จะทำให้รู้ว่าส่วนไหนของ application ที่ทำงานช้า
ทั้งใช้เครื่องมือ คือ  Android Traceview
และการใส่ logging ต่างๆ ไว้ใน code เอง

ขั้นตอนที่สอง ทำการปรับปรุงในส่วนที่ทำงานช้า ดังนี้

  • ลดจำนวนข้อมูลหรืองานที่ต้องดึงมาในณะที่เปิด application ออกไป เรียกว่า Lazy load
  • เขียน code ชุดใหม่ แทนที่ code ชุดเดิมที่มันช้า เช่นการจัดการข้อมูล JSON ที่ทางทีมพัฒนาเขียนขึ้นมาใหม่ ซึ่งเร็วกว่าเดิม ซึ่งทางทีมพัฒนาเปิดให้เรานำไปใช้งานได้ฟรีๆ Instagram JSON Parser
  • พยายามใช้ background process ในการทำงานต่างๆ  เพื่อไม่ให้ผู้ใช้งานรอ หรือไม่ให้เกิดการ block ui ขึ้น

ขั้นตอนที่สาม กลับไปทำข้อ 1 ต่อไป

ทีมพัฒนาอธิบาย 2 ส่วนงาน ที่ต้องใช้ความพยายามและ ความคิดสร้างสรร มากๆ
เพื่อปรับปรุง application ให้เป็นไปตามที่ต้องการ ดังนี้

ปัญหาแรก เมื่อทำการเปิด application ขึ้นมา จะต้องทำงานดังนี้

  • การใช้ HTTP Client เพื่อดึงข้อมูล
  • การจัดเก็บข้อมูล Cookie
  • การทำ caching ของรูปภาพ
  • การทำ caching ของ VDO

ดังนั้นสิ่งที่ต้องการก็คือ ลดการทำงานเหล่านี้ลงไปในฝั่งผู้ใช้งาน หรือ การแสดงผล
ผลที่ได้คือ ให้ทำงานเป็น background process แบบขนานกัน
และข้อมูลต่างๆ ไม่จำเป็นต้องดึงมาพร้อมกัน หรือ ดึงมาทีหลังได้
แต่ก็ไม่ต้องการรูปแบบการเขียน code ที่ซับซ้อนด้วยเช่นกัน

วิธีการที่นำมาใช้ เรียกว่า Two-part Lazy Loading 

  • ส่วนที่ 1 ทำการสร้าง object สำหรับทำงานเป็น background process ขึ้นมา
  • ส่วนที่ 2 ทำงานขั้นตอนต่างๆ ใน backgrpund process โดยจะมีการทำงานที่เยอะเยอะมาก แยกทำงานอย่างอิสระต่อกัน ดังนั้นในฝั่งของการแสดงผลจะมีเท่าที่จำเป็นเท่านั้น งานอื่นๆ โยนไปให้ backgrpund process ทั้งหมด

ปัญหาที่สอง คือ ในหน้า News ทำงานช้า
ในหน้านี้จะทำการดึงข้อมูล activity ต่างขึ้นมา มีทั้งรูปภาพ การ like, comment ขึ้นมาเยอะมากๆ
การพัฒนาครั้งแรกใช้ WebView  เมื่อทำการ profiling ส่วนนี้พบว่า
มีการสร้าง process/thread การทำงานเยอะมากๆ
เนื่องจาก Webview ต้อง load ข้อมูลเยอะมากๆ
และพบว่าเราไม่สามารถควบคุมการทำงานของมันได้เลย
จะทำการ caching รูปภาพที่ระดับ network หรือ server ก็ยากมาก และ ซ้ำซ้อน

ดังนั้น สิ่งที่ทางทีมพัฒนาแก้ไขก็คือ เขียนใหม่ด้วย Native  view มันไปเลย
ทำให้สามารถควบคุมการดึงข้อมูลต่างๆ ได้ง่าย
รวมทั้งจำนวน process/thread ที่เกิดขึ้นด้วย และเรื่อง caching ต่างๆ ที่ทำได้ง่าย
การพัฒนาใช้เวลา 2-4 สัปดาห์ ลดเวลาการทำงานลงไป 30%

โดยรวมแล้ว

ทีมพัฒนาของ Instagram นั้น เน้นในเรื่องของ Simplicity อย่างมาก
รวมทั้งเน้นในเรื่องประสบการณ์การใช้งาน ทั้งความสวยงาม ใช้ง่าย
และความเร็วต่างๆ  เพื่อส่งมอบสิ่งที่มีคุณค่าต่อผู้ใช้งานสูงสุด

แนวทางพัฒนาของ Instagram น่าจะพอช่วยแนะนำอะไรให้กับนักพัฒนา Mobile application ได้ไม่มากก็น้อยครับ

Reference Websites
http://instagram-engineering.tumblr.com/post/97740520316/betterandroid
https://www.youtube.com/watch?v=GHTO2WKDO6I#t=8933