ท่านผู้ใช้ทั้งหลายคงได้เห็นความเปลี่ยนแปลงของการแสดงผลเมื่อเราเรียกดูรูปภาพใน Facebook กันไปแล้วนะครับ ซึ่ง Facebook ก็ได้เปิดเผยที่มา แนวคิด และการสร้างระบบ Photo Viewer นี้ไว้ใน Facebook Engineering ซึ่งผมอ่านดูแล้วเห็นว่าน่าสนใจ และน่าจะแปลมาให้ได้อ่านกัน โดยมีรายละเอียดอย่างย่อดังต่อไปนี้ครับ
เกริ่นนำ
- Photo เป็นระบบหลักระบบหนึ่งของ Facebook ซึ่งเป็นส่วนที่มีโค้ดที่เก่าแก่ตั้งแต่ยุคแรก ๆ และก็แก้ไขต่อเติมกันเรื่อยมา ไม่ได้ยกเครื่องกันเสียที
- มีปริมาณการอัพโหลดรูปภาพมากกว่า 100 ล้านภาพต่อวัน
- หลังจากที่ได้ปรับเปลี่ยนระบบ Photo ใหม่แล้ว มีผู้ใช้เปิดดูรูปมากขึ้นกว่าเดิม 5% ซึ่งเท่ากับการเพิ่มขึ้นประมาณ 1,000 ล้านภาพต่อวัน
ปัญหาของระบบเก่า
- การโหลดภาพทำได้ช้า และในหลาย ๆ ครั้งก็ทำให้เครื่องหรือเบราว์เซอร์ค้างไปเลย
- การเปิดดูรูปจากหน้ารวมข่าว (News Feed) ทำให้เเบราว์เซอร์เปิดแท็บเพิ่มหรือเปิดเป็นหน้าใหม่ ทำให้หน้าที่ดูอยู่เดิมหายไป ซึ่งผู้ใช้ส่วนใหญ่ต้องการกลับไปยังหน้าเดิมที่อ่านค้างไว้หลังจากดูรูปเสร็จ
- การอ่านคอมเม้นต์ใต้รูปลำบากเกินไป โดยขั้นตอนที่ทำคือ ดูรูป เลื่อนลงเพื่อดูหัวข้อของรูปและคอมเม้นต์ เลื่อนกลับขึ้นมาเพื่อเปลี่ยนรูป และก็ทำซ้ำเช่นเดิมกับรูปต่อไป
- จาวาสคริปต์ที่ใช้ในการโหลดและเก็บรูปบนเครื่องชั่วคราว (cache) นั้นหนัก ซับซ้อน อันเป็นผลมาจากการเปลี่ยนแปลงต่อเติมที่สะสมมานาน เพื่อให้ทันกับความเปลี่ยนแปลงของเทคโนลียีของเบราว์เซอร์ที่เปลี่ยนไป
- จุดมุ่งหมายหลักของการเปลี่ยนแปลงคือ ทำให้ใช้งานได้ง่ายขึ้นทั้งในส่วนของการดูรูป คอมเม้นต์ การใส่แท็ก และการกด like
ทดลองออกแบบ
ในขั้นนี้เป็นการเล่าที่มาที่ไปว่ากว่าจะได้หน้าตา Photo ตัวใหม่นี้ ได้ผ่านการทดลองออกแบบอะไรมาบ้าง และแต่ละแบบมีปัญหาอย่างไร และเค้าแก้ปัญหาอย่างไร รายละเอียดโดยสรุปมีดังนี้ครับ
- ในช่วงแรก เริ่มต้นด้วยการออกแบบให้การดูรูปมีลักษณะเป็น pop-up (รูปแรกในต้นฉบับ) ซึ่งแก้ปัญหาการเปลี่ยนหน้าของเบราว์เซอร์ และโค้ดที่เขียนค่อนข้างเบา ไม่ซับซ้อนมากนัก อย่างไรก็ตามปัญหาที่ยังมีอยู่ก็คือ ไม่มีที่สำหรับแสดงหัวเรื่องของภาพ คอมเม้นต์ และแท็ก
- ดังนั้นจึงออกแบบให้เป็น pop-up ทั้งหน้า เหมือนกับเป็นหน้าใหม่อีกชั้นซ้อนขึ้นมาบนหน้าจอเดิม (ต้นฉบับใช้คำว่า lightbox, รูปที่ 2 ในต้นฉบับ) ซึ่งได้เนื้อที่เพิ่มขึ้นมามาก ทำให้ดูภาพได้เต็มขนาดมากขึ้น และมีพื้นที่สำหรับหัวเรื่อง คอมเม้นต์ และแท็กด้วย
- lightbox ดังกล่าว จะมีลักษณะโปร่งแสงและมีโทนสีดำ ซึ่งแสดงให้เห็นการแยกชั้นจากหน้าเดิมชัดเจน และขับให้ภาพดูสวยขึ้น
- อย่างไรก็ตาม ผู้พัฒนาพบว่าตัวอักษรต่าง ๆ ใต้ภาพนั้นไม่เข้ากับพื้นโทนสีดำ จึงทำให้พื้นบริเวณด้านล่างนี้เป็นสีขาวแทน สุดท้ายก็เลยมีลักษณะเป็นทูโทนอย่างที่เห็นในปัจจุบัน (รูปที่ 3 ของต้นฉบับ)
- สำหรับรูปที่ใหญ่มาก ๆ ระบบจะปรับขนาดความละเอียดให้เข้ากับหน้าจอที่ใช้ เพื่อที่ผู้ใช้จะได้ไม่ต้องลำบากเลื่อนไปมา
สรุปความต้องการจริงของระบบ
จากที่มาที่ไปที่ได้อธิบายไปแล้ว เค้าจึงได้ความต้องการของระบบใหม่มาเป็นดังนี้ครับ
- มีการกันเนื้อที่ไว้อย่างน้อย 100 พิกเซลใต้ภาพสำหรับหัวข้อของภาพและคอมเม้นต์
- ชั้นการแสดงภาพ lightbox จะแสดงซ้อนบนหน้าเดิม และสามารถเลื่อนไปมาได้หากจำเป็น แต่หน้าเว็บเดิมด้านล่างนั้น จะต้องไม่มีการเปลี่ยนแปลง
- จะต้องสามารถเพิ่มความสามารถใหม่ ๆ ในอนาคตได้โดยที่ไม่ต้องเปลี่ยนแปลง API ของระบบ
- รองรับการทำงานบนเบราว์เซอร์ต่าง ๆ ได้ โดยอาจย้อนไปถึง IE6
- ใช้จาวาสคริปต์ให้น้อยที่สุดเท่าที่จะเป็นไปได้
รายละเอียดเพิ่มเติมทางเทคนิค
- เค้ามีโค้ดบางส่วนมาให้ดูพร้อมคำอธิบายด้วยครับ ผู้ที่สนใจเข้าไปดูได้เองที่ต้นฉบับเลยครับ ผมขอข้ามส่วนนี้ไปครับ
- การโหลดภาพ หัวข้อ และคอมเม้นต์จะโหลดแยกกัน ทำให้ลดเวลาการโหลดต่อการเรียก AJAX แต่ละครั้งลงได้พอสมควร
- แต่ละครั้งที่ผู้ใช้เปลี่ยนรูป โปรแกรมจะดูว่าเปลี่ยนไปทิศทางไหน (รูปก่อนหน้าหรือรูปถัดไป) แล้วจะโหลดรูปถัดไปในทิศทางนั้นอีก 5 รูปมาเก็บไว้ที่เครื่องเลย
- ผลลัพท์ที่ได้ก็คือ โค้ดที่เบา ไม่ซับซ้อน ทำงานได้เร็ว ตอบสนองกับผู้ใช้ได้ดีขึ้น และข้อผิดพลาดน้อยลง
ที่มา - Facebook Engineering's Notes