ข้ามไปยังเนื้อหาหลัก

ทางเลือกอื่นๆ

WIP

บทความนี้อยู่ระหว่างการเขียน

หากต้องการให้บทความนี้เสร็จเร็วขึ้น คุณสามารถ:


🍰 Stay tuned!

ประวัติความเป็นมาของแนวทางการออกแบบสถาปัตยกรรม (Architecture Approaches)

Big Ball of Mud​

WIP

บทความนี้อยู่ระหว่างการเขียน

หากต้องการให้บทความนี้เสร็จเร็วขึ้น คุณสามารถ:


🍰 Stay tuned!

มันคืออะไร? ทำไมถึงพบบ่อย? เมื่อไหร่ที่เริ่มสร้างปัญหา? จะทำอย่างไรและ FSD ช่วยเรื่องนี้ได้อย่างไร?

Smart & Dumb components​

WIP

บทความนี้อยู่ระหว่างการเขียน

หากต้องการให้บทความนี้เสร็จเร็วขึ้น คุณสามารถ:


🍰 Stay tuned!

เกี่ยวกับแนวทางนี้ ความสามารถในการนำไปใช้ในฝั่ง Frontend และจุดยืนของระเบียบวิธี (Methodology)

เกี่ยวกับความล้าสมัย และมุมมองใหม่จากระเบียบวิธีนี้

ทำไมแนวทาง component-containers ถึงไม่ค่อยเวิร์ค?

หลักการออกแบบ (Design Principles)​

WIP

บทความนี้อยู่ระหว่างการเขียน

หากต้องการให้บทความนี้เสร็จเร็วขึ้น คุณสามารถ:


🍰 Stay tuned!

เรากำลังพูดถึงเรื่องอะไร และจุดยืนของ FSD

SOLID, GRASP, KISS, YAGNI, ... - และทำไมหลักการพวกนี้ถึงทำงานร่วมกันได้ไม่ค่อยดีในทางปฏิบัติ

และระเบียบวิธีนี้รวบรวมแนวปฏิบัติเหล่านี้ไว้ด้วยกันได้อย่างไร

DDD​

WIP

บทความนี้อยู่ระหว่างการเขียน

หากต้องการให้บทความนี้เสร็จเร็วขึ้น คุณสามารถ:


🍰 Stay tuned!

เกี่ยวกับแนวทางนี้ และทำไมถึงใช้งานจริงได้ยาก

ข้อแตกต่างคืออะไร มันช่วยปรับปรุงการนำไปใช้ได้อย่างไร และรับแนวปฏิบัติส่วนไหนมาใช้บ้าง

Clean Architecture​

WIP

บทความนี้อยู่ระหว่างการเขียน

หากต้องการให้บทความนี้เสร็จเร็วขึ้น คุณสามารถ:


🍰 Stay tuned!

เกี่ยวกับแนวทางนี้ ความสามารถในการนำไปใช้ในฝั่ง Frontend และจุดยืนของ FSD

มีความคล้ายคลึงกันอย่างไร (ในหลายๆ จุด) และแตกต่างกันอย่างไร

เฟรมเวิร์ก (Frameworks)​

WIP

บทความนี้อยู่ระหว่างการเขียน

หากต้องการให้บทความนี้เสร็จเร็วขึ้น คุณสามารถ:


🍰 Stay tuned!

ความสามารถในการนำไปใช้ในฝั่ง Frontend ทำไมเฟรมเวิร์กถึงแก้ปัญหาไม่ได้ทั้งหมด ทำไมถึงไม่มีแนวทางเดียวที่ใช้ได้กับทุกอย่าง และจุดยืนของ FSD

ความเป็น Framework-agnostic (ไม่ยึดติดกับเฟรมเวิร์ก) และแนวทางแบบ Conventional

Atomic Design​

มันคืออะไร?​

ใน Atomic Design ขอบเขตความรับผิดชอบจะถูกแบ่งออกเป็นเลเยอร์ที่เป็นมาตรฐาน

Atomic Design แบ่งออกเป็น 5 เลเยอร์ (จากบนลงล่าง):

  1. pages - ฟังก์ชันการทำงานคล้ายกับเลเยอร์ pages ใน FSD
  2. templates - คอมโพเนนต์ที่กำหนดโครงสร้างของหน้าเว็บโดยไม่ยึดติดกับเนื้อหาเฉพาะเจาะจง
  3. organisms - โมดูลที่ประกอบด้วย molecules และมี Business Logic
  4. molecules - คอมโพเนนต์ที่ซับซ้อนขึ้น ซึ่งปกติจะไม่มี Business Logic
  5. atoms - UI คอมโพเนนต์พื้นฐานที่ไม่มี Business Logic

โมดูลในเลเยอร์หนึ่งจะโต้ตอบกับโมดูลในเลเยอร์ที่ต่ำกว่าเท่านั้น ซึ่งคล้ายกับ FSD นั่นคือ molecules สร้างจาก atoms, organisms สร้างจาก molecules, templates สร้างจาก organisms และ pages สร้างจาก templates Atomic Design ยังเน้นการใช้ Public API ภายในโมดูลเพื่อการแยกส่วน (Isolation) ด้วย

การนำไปใช้กับ Frontend​

Atomic Design ค่อนข้างแพร่หลายในโปรเจกต์ต่างๆ แต่มักจะเป็นที่นิยมในหมู่นักออกแบบเว็บมากกว่านักพัฒนา นักออกแบบเว็บมักใช้ Atomic Design เพื่อสร้างดีไซน์ที่สเกลได้และดูแลง่าย ในส่วนของการพัฒนา Atomic Design มักจะถูกนำมาผสมผสานกับระเบียบวิธีทางสถาปัตยกรรมอื่นๆ

อย่างไรก็ตาม เนื่องจาก Atomic Design เน้นไปที่ UI คอมโพเนนต์และการประกอบกันของคอมโพเนนต์เหล่านั้น ปัญหาจึงเกิดขึ้นเมื่อต้อง implement Business Logic เข้าไปในสถาปัตยกรรม

ปัญหาคือ Atomic Design ไม่ได้กำหนดระดับความรับผิดชอบของ Business Logic ไว้อย่างชัดเจน ทำให้ Logic กระจายไปตามคอมโพเนนต์และเลเวลต่างๆ ซึ่งทำให้การดูแลรักษาและการทดสอบทำได้ยาก Business Logic จะเริ่มเบลอๆ ไม่ชัดเจน ทำให้แยกความรับผิดชอบได้ยาก และทำให้ โค้ดมีความเป็นโมดูล (Modular) และนำกลับมาใช้ใหม่ (Reusable) ได้น้อยลง

มันเกี่ยวข้องกับ FSD อย่างไร?​

ในบริบทของ FSD องค์ประกอบบางอย่างของ Atomic Design สามารถนำมาใช้สร้าง UI คอมโพเนนต์ที่ยืดหยุ่นและสเกลได้ เลเยอร์ atoms และ molecules สามารถ implement ได้ใน shared/ui ของ FSD ซึ่งช่วยให้การนำกลับมาใช้ใหม่และ การดูแลรักษา UI element พื้นฐานง่ายขึ้น

├── shared
│   ├── ui
│   │   ├── atoms
│   │   ├── molecules
│   ...

การเปรียบเทียบระหว่าง FSD และ Atomic Design แสดงให้เห็นว่าทั้งสองระเบียบวิธีต่างมุ่งเน้นความเป็นโมดูล (Modularity) และการนำกลับมาใช้ใหม่ (Reusability) แต่เน้นคนละด้าน Atomic Design เน้นไปที่ visual components และการประกอบกัน ส่วน FSD เน้นไปที่การแบ่งฟังก์ชันการทำงานของแอปพลิเคชันออกเป็นโมดูลอิสระและการเชื่อมต่อระหว่างโมดูลเหล่านั้น

Feature Driven​

WIP

บทความนี้อยู่ระหว่างการเขียน

หากต้องการให้บทความนี้เสร็จเร็วขึ้น คุณสามารถ:


🍰 Stay tuned!

เกี่ยวกับแนวทางนี้ ความสามารถในการนำไปใช้ในฝั่ง Frontend และจุดยืนของ FSD

ความเข้ากันได้ ประวัติการพัฒนา และการเปรียบเทียบ