วิธีอ่านซอร์สโค้ด: ตัวอย่างจาก Frappe Framework

การอ่านซอร์สโค้ดคือสุดยอดทักษะของนักพัฒนา
ไม่ว่าคุณจะต้องการ contribute โอเพนซอร์ส แก้บั๊ก หรือแค่อยากรู้ว่าระบบที่คุณใช้ทำงานอย่างไร “การอ่านและเข้าใจโค้ดขนาดใหญ่” คือทักษะสำคัญ

ในโพสต์นี้ ผมขอแนะนำแนวทางการอ่านซอร์สโค้ด ด้วยตัวอย่างจริงจาก Frappe Framework (เอ็นจิ้นของ ERPNext)

---

⭐ แนวทางทั่วไปในการอ่านซอร์สโค้ด

ก่อนจะลงมืออ่านโค้ดของโปรเจ็กต์ใด ๆ ลองดูเคล็ดลับเหล่านี้ ใช้ได้กับ Frappe และทุกโค้ดเบสขนาดใหญ่:

1. เริ่มจากอ่านเอกสาร
   • ไล่อ่าน README, wiki, และ documentation เพื่อเข้าใจวัตถุประสงค์และโครงสร้างหลัก
2. สำรวจโครงสร้างโฟลเดอร์
   • สแกนไล่โฟลเดอร์ ดูชื่อโมดูล จุดเริ่มต้นของโปรเจ็กต์ และ naming convention
3. อย่าพยายามอ่านทุกบรรทัด
   • โฟกัสเฉพาะส่วนที่เกี่ยวข้องกับโจทย์หรือสิ่งที่อยากรู้จริง ๆ
4. ตาม flow ของฟีเจอร์ทีละขั้น
   • เลือกฟีเจอร์ง่าย ๆ (เช่น “สร้างเอกสาร” หรือ “ล็อกอิน”) แล้วตามรอยตั้งแต่ UI ยัน backend
5. ติดตามข้อมูล
   • ดูว่าข้อมูลถูกเรียก ส่งต่อ และแสดงผลอย่างไร
6. ใช้เครื่องมือช่วย
   • ใช้ฟีเจอร์ค้นหา “ไปที่นิยาม” หรือ “หาการอ้างอิง” ของ IDE
   • ใส่ log หรือ print() เพื่อดูว่าโค้ดไหนรัน
7. หาตัวอย่างจากเทสต์
   • เทสต์มักแสดงให้เห็นวิธีใช้งานจริงของโค้ด
8. จดแผนผังหรือ flowchart
   • วาดผัง/จดโน้ตระหว่างที่สำรวจไปด้วย
9. ถาม/หาคำตอบจากคอมมูนิตี้
   • ค้นหาใน GitHub, Stack Overflow, กลุ่ม/ฟอรั่มต่าง ๆ
10. ฝึกฝนบ่อย ๆ
    • ยิ่งอ่านโค้ดโปรเจ็กต์มากขึ้น ก็จะเข้าใจและจับจุดเร็วขึ้น

---

1. เริ่มจากภาพรวม

ก่อนเปิดไฟล์ใด ๆ ให้อ่าน README และ docs ของ Frappe
ดูเอกสารหลักที่นี่ หรือบน GitHub
จะเข้าใจโครงสร้างและสถาปัตยกรรมโปรเจ็กต์นี้ได้เร็วขึ้น

---

2. ไล่โครงสร้างโฟลเดอร์

เปิด repo ใน editor ที่ชอบ จะเจอประมาณนี้:

frappe/
├── app.py
├── desk/
├── core/
├── model/
├── utils/
├── public/
├── website/
├── workflow/
└── ...

• app.py: จุดเริ่ม web app (WSGI)
• desk/: ส่วนของ Desk (admin UI)
• core/: โมดูลหลัก (user, role, permission, session ฯลฯ)
• model/: ORM และตรรกะ DocType
• utils/: ฟังก์ชันอรรถประโยชน์
• workflow/: โลจิกระบบ workflow

Tip: เปิดอ่าน comment หรือ __init__.py ในแต่ละโฟลเดอร์เพื่อเข้าใจภาพรวม

---

3. หา entry point

สำหรับเว็บแอป มักจะเป็นไฟล์ app.py หรือ wsgi.py
ใน Frappe คือ frappe/app.py ซึ่งมีโค้ดแบบนี้:

application = get_wsgi_application()

เมื่อลง Frappe ผ่าน Docker, Bench หรืออื่น ๆ ไฟล์นี้คือจุดเริ่มต้นแรกสำหรับ web request

---

4. ไล่ฟีเจอร์ตัวอย่างจากต้นจนจบ

เช่น ถ้าอยากรู้ว่าเอกสาร “Task” ถูกโหลดขึ้นฟอร์ม Desk ยังไง:

• ผู้ใช้เปิดฟอร์ม Task ใน Desk
• ฝั่ง JS (public/js/frappe/desk/) เรียก API โหลดข้อมูล
• ฝั่ง backend รับที่ frappe/desk/form/load.py (ฟังก์ชัน getdoc)
• ORM ใน frappe/model/document.py จะดึงข้อมูลจากฐานข้อมูลมาใช้งาน

เคล็ดลับ: ใช้ฟีเจอร์ “Go to Definition” หรือ “Find All References” ใน editor เพื่อไล่ตามฟังก์ชันและคลาสได้เร็ว

---

5. ดูจุดเชื่อมต่อ config/hook

จุดเด่นของ Frappe คือรองรับ hook ผ่านไฟล์ hooks.py
อยากรู้ว่าแต่ละโมดูลเชื่อมกันยังไงหรือเพิ่ม/override โลจิกตรงไหน ดูที่นี่ก่อน

---

6. อ่านจากไฟล์ test

Test เปรียบเหมือนเอกสารคู่มือที่มีชีวิต!
ดูในโฟลเดอร์ /tests/ หรือ /testing/ จะเห็นตัวอย่างการใช้งานฟีเจอร์ต่าง ๆ

---

7. ไม่ต้องอ่านทุกบรรทัด—เน้น scan/skimming

มองหาชื่อ function/class, docstring, comment, TODO, และโครงสร้างหลัก
ลงลึกเฉพาะส่วนที่ต้องการจริง ๆ

---

8. ลองใช้งานจริง

การรันแอปบนเครื่องช่วยได้มาก:

• ใช้ UI ทดลองสร้าง/แก้ไข แล้วดู log/console
• เพิ่ม print() หรือใช้ debugger ไล่ flow ของโค้ด

---

บทสรุป

การอ่านโค้ดก็เหมือนการท่องเที่ยวเมืองใหม่ — ใช้แผนที่ (docs), ถามคนท้องถิ่น (community, comment), และกล้า “หลง” เพื่อเข้าใจระบบ
ยิ่งฝึกบ่อยจะยิ่งคล่องและเห็นแพทเทิร์นของระบบขนาดใหญ่ได้ง่ายขึ้น

ขอให้สนุกกับการสำรวจ Frappe Framework!

---

อ่านต่อ

• Frappe Framework Documentation
• แนะนำหนังสือ: Code Reading: The Open Source Perspective — Diomidis Spinellis

---

อยากให้ dissect เฟรมเวิร์คไหนต่อ? เม้นท์เลย!