บันทึกการพัฒนาเว็บ ELECT Live!

เว็บไซต์ ELECT Live! (opens new window) เป็นเว็บไซต์ที่ให้ผู้ใช้ติดตามผลการนับคะแนนเลือกตั้งได้แบบเรียลไทม์ เราตั้งใจทำให้เป็นอีกหนึ่งแพลตฟอร์ม ที่หวังจะอำนวยความสะดวกให้คนไทยมีอีกหนึ่งช่องทางในการรับข้อมูลข่าวสารเกี่ยวกับการเลือกตั้ง

เว็บไซต์นี้เกิดขึ้นจากทีม Developer และ Designer หลายคน จากที่ต่างๆ อาสามาร่วมกันพัฒนาโดยไม่มีค่าตอบแทนใดๆ ใช้เวลาพัฒนาเพียง 8 วันก่อนการเลือกตั้ง (ซึ่งเป็นเวลาส่วนตัวของอาสาสมัคร ไม่ใช่งานแบบ Full-time)

เราพัฒนาเว็บนี้กันแบบโอเพนซอร์ซ โดยมีการวางระบบการทำงาน เพื่อให้ทุกคนสามารถเข้ามาร่วมพัฒนาได้ ถึงแม้ไม่ได้อยู่ในทีมงานหลัก จนมีอาสาสมัครมาร่วมพัฒนาเว็บเรากว่า 20 คน (opens new window) และสามารถปิด issue ได้กว่า 100 issue (opens new window) ภายในเวลา 8 วัน โดยสามารถเข้าไปดูโค้ดได้ที่โปรเจกต์ codeforthailand/election-live (opens new window) บน GitHub

ในวันที่ 24 มีนาคม 2562 เว็บ ELECT Live! สามารถรองรับผู้ใช้ 100,000 คนที่เข้ามาใช้ในเวลาพร้อมกัน รวมผู้ใช้กว่า 1.5 ล้านคนในวันนั้น

มีหลายเรื่องที่เราอยากจะเล่าเกี่ยวกับการพัฒนาเว็บนี้ บันทึกนี้จึงแบ่งเป็นหลายๆ หัวข้อย่อย

---

Overview

• ภาพรวมทั้งหมดของระบบรายงานผลเลือกตั้ง

Setting up the project for success

• เห็นภาพเดียวกันถึงแม้ไม่ได้อยู่ที่เดียวกัน ด้วยการ Wireframe และ Visualize กันบน Freehand
• อย่าลืมสำรวจผู้ใช้ก่อนเริ่มพัฒนา
• ออกแบบเว็บแบบ Mobile-first ไม่ต้องทำงานซ้ำสอง
• ทำ MVP ทีละหน้า แทนที่จะแบ่งหน้ากันทำแล้วอาจจะไม่เสร็จสักหน้า
• เลือกใช้ Gatsby เพราะจะได้เอาเวลามาพัฒนาเว็บ ไม่ใช่มานั่งเซ็ตอัพ webpack, Babel, React Router, ฯลฯ
• ทำให้ทุกคนเขียนโค้ดเป็นสไตล์เดียวกันโดยอัตโนมัติด้วย Prettier, Husky และ lint-staged
• ทดสอบโค้ดของคนอื่นโดยไม่ต้อง Checkout มารันเองด้วย Netlify
• แบ่งงานใหญ่ๆ เป็นงานย่อยๆ ด้วย Puzzle-Driven Development
• เตรียมโปรเจกต์ให้คนจากภายนอกสามารถมาร่วม Contribute ได้
• เตรียมรับ Traffic เยอะๆ ด้วย Static files และกลยุทธ์ caching
• ได้ดีไซน์มาอย่าเพิ่งรีบโค้ดทันที มาตั้งชื่อกันก่อน
• แบ่งคอมโพเนนต์ย่อยๆ ยังไงให้ทำงานไปพร้อมๆ กันได้โดยไม่เสียภาพรวมงาน

Engineering and development

• นึกถึง User experience (UX) แล้วอย่าลืมนึกถึง Developer experience (DX) ด้วย
• ย้อนเวลาได้ด้วยการไม่เขียนทับไฟล์เก่า
• สละเวลาเขียน JSDoc สักนิด ไม่ใช่แค่ทำให้คนอื่นอ่านโค้ดเราเข้าใจง่ายขึ้น แต่ช่วยให้เขียนโค้ดได้เร็วขึ้นอีกด้วย

Operations and preparing for potential problems

• สร้าง Control Panel อย่างด่วนๆ ด้วย Google Sheets
• คอมโพเนนต์เกิดปัญหาอย่าให้มันพังทั้งหน้า ใส่ ErrorBoundary กันไว้ด้วย
• ทำไมเราถึงรับ Traffic ทั้งหมดด้วยเครื่องเดียว ไม่ใช้พวก Firebase/S3/Google Cloud Storage หรือพวกระบบเก็บข้อมูลที่มัน Auto-scale ได้
• ถ้าปล่อยให้ทุกคนปล่อยเวอร์ชั่นใหม่กันเอง สับสนแน่นอน สร้างบอท ChatOps มาทำหน้าที่ Release manager แทนคนดีกว่า