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

Slices และ Segments

Slices​

Slices เป็นระดับที่สองในลำดับชั้นการจัดระเบียบของ Feature-Sliced Design จุดประสงค์หลักคือเพื่อจัดกลุ่มโค้ดตามความหมายที่มีต่อ Product, Business หรือแค่ต่อ Application

ชื่อของ Slices ไม่ได้ถูกกำหนดเป็นมาตรฐานเพราะมันถูกกำหนดโดยตรงจาก Business domain ของ Application คุณ ตัวอย่างเช่น Photo gallery อาจมี Slices photo, effects, gallery-page ส่วน Social network อาจต้องการ Slices ที่ต่างออกไป เช่น post, comments, news-feed

Layers Shared และ App ไม่มี Slices นั่นเป็นเพราะ Shared ไม่ควรมี Business logic เลย จึงไม่มีความหมายในแง่ Product และ App ควรประกอบด้วยโค้ดที่เกี่ยวข้องกับทั้ง Application เท่านั้น ดังนั้นการแบ่งแยกจึงไม่จำเป็น

Zero coupling และ High cohesion​

Slices ตั้งใจให้เป็นกลุ่มของไฟล์โค้ดที่อิสระ (Independent) และมีความเกาะเกี่ยวสูง (Highly cohesive) ภาพกราฟิกด้านล่างอาจช่วยให้เห็นภาพคอนเซปต์ที่เข้าใจยากอย่าง Cohesion (ความเกาะเกี่ยว) และ Coupling (การผูกมัด):

ภาพจาก https://enterprisecraftsmanship.com/posts/cohesion-coupling-difference/

Slice ในอุดมคติจะเป็นอิสระจาก Slices อื่นๆ ใน Layer เดียวกัน (Zero coupling) และประกอบด้วยโค้ดส่วนใหญ่ที่เกี่ยวข้องกับเป้าหมายหลักของมัน (High cohesion)

ความเป็นอิสระของ Slices ถูกบังคับใช้โดย กฎการ Import บน Layers:

Module (ไฟล์) ใน Slice สามารถ Import Slices อื่นได้เฉพาะเมื่อพวกมันอยู่ใน Layers ที่ต่ำกว่าอย่างเคร่งครัดเท่านั้น

กฎ Public API บน Slices​

ภายใน Slice โค้ดสามารถจัดระเบียบแบบไหนก็ได้ที่คุณต้องการ นั่นไม่ก่อให้เกิดปัญหาตราบใดที่ Slice จัดเตรียม Public API ที่ดีสำหรับ Slices อื่นเพื่อใช้งาน สิ่งนี้ถูกบังคับใช้ด้วย กฎ Public API บน Slices:

ทุกๆ Slice (และ Segment บน Layers ที่ไม่มี Slices) ต้องมีคำนิยามของ Public API

Modules ภายนอก Slice/Segment นี้สามารถอ้างอิงถึง Public API เท่านั้น ไม่ใช่โครงสร้างไฟล์ภายในของ Slice/Segment

อ่านเพิ่มเติมเกี่ยวกับเหตุผลของ Public APIs และแนวทางปฏิบัติที่ดีที่สุดในการสร้างมันได้ใน Public API reference

Slice groups​

Slices ที่เกี่ยวข้องกันอย่างใกล้ชิดสามารถจัดกลุ่มทางโครงสร้างใน Folder ได้ แต่พวกมันควรใช้กฎการแยกตัว (Isolation rules) เดียวกันกับ Slices อื่นๆ — ไม่ควรมีการ แชร์โค้ด (Code sharing) ใน Folder นั้น

Features "compose", "like" and "delete" grouped in a folder "post". In that folder there is also a file "some-shared-code.ts" that is crossed out to imply that it's not allowed.

Segments​

Segments เป็นระดับที่สามและระดับสุดท้ายในลำดับชั้นการจัดระเบียบ และจุดประสงค์ของพวกมันคือเพื่อจัดกลุ่มโค้ดตาม "ธรรมชาติทางเทคนิค (Technical nature)"

มีชื่อ Segment มาตรฐานอยู่ไม่กี่ชื่อ:

  • ui — ทุกอย่างที่เกี่ยวกับการแสดงผล UI: UI components, Date formatters, Styles, ฯลฯ
  • api — Backend interactions: Request functions, Data types, Mappers, ฯลฯ
  • model — Data model: Schemas, Interfaces, Stores, และ Business logic
  • lib — Library code ที่ Modules อื่นใน Slice นี้ต้องการ
  • config — Configuration files และ Feature flags

ดู หน้า Layers สำหรับตัวอย่างว่าแต่ละ Segments เหล่านี้อาจถูกใช้ทำอะไรได้บ้างใน Layers ที่แตกต่างกัน

คุณยังสามารถสร้าง Custom segments ได้ด้วย ที่ที่พบบ่อยที่สุดสำหรับ Custom segments คือ App layer และ Shared layer ซึ่งเป็นที่ที่ Slices ไม่ค่อยสมเหตุสมผล

ตรวจสอบให้แน่ใจว่าชื่อของ Segments เหล่านี้อธิบายจุดประสงค์ของเนื้อหา ไม่ใช่แก่นแท้ของมัน ตัวอย่างเช่น components, hooks, และ types เป็นชื่อ Segment ที่แย่เพราะมันไม่ได้ช่วยเท่าไหร่เวลาคุณมองหาโค้ด