สถาปัตยกรรมแอปพลิเคชันฟรอนต์เอนด์ระดับองค์กร

• เมื่อ codebase ใหญ่ขึ้น = ทั้งทำความเข้าใจและแก้ไขก็ยากขึ้น
• วิธีแก้คือ? ทำให้ codebase มีขนาดเล็กไว้
• แยก codebase ตามโดเมน & ไมโครฟรอนต์เอนด์เข้ามาช่วย!
• ความต้องการอย่างการกำหนดความสัมพันธ์การพึ่งพาของไลบรารีภายใน monorepo และการตรวจสอบ dependency แก้ได้ด้วยการนำ Nx มาใช้
• แยกโค้ดออกเป็น application และ library
• application ทำหน้าที่ฉีด dependency และการตั้งค่า
• ฟีเจอร์ส่วนใหญ่ถูกพัฒนาไว้ใน library
  • ใน library มีทั้ง design system, การทำ internationalization, third-party module ที่ใช้ได้ทั่วไป รวมถึงโค้ดที่ไม่ได้ถูกนำกลับมาใช้ซ้ำ เช่น hero banner ของหน้าแรก, หน้ารายละเอียดสินค้า, ประวัติคำสั่งซื้อ

ไลบรารี Feature

• โดยพื้นฐานแล้ว คอมโพเนนต์ทั้งหมดที่ใช้ในหน้าเดียวกันจะถูกเขียนไว้ในไลบรารี Feature ที่มีชื่อเดียวกัน
  • เช่น คอมโพเนนต์ทั้งหมดของหน้า SignInPage ในโดเมน account จะถูกเขียนไว้ในไลบรารี account/feature-sign-in
• คอมโพเนนต์ที่แชร์กันระหว่างตั้งแต่สองหน้าขึ้นไปในโดเมนเดียวกัน จะแยกออกเป็น feature ต่างหากภายในโดเมนนั้น
  • เช่น หากหน้า SignInPage และ SignUpPage ของโดเมน account ใช้คอมโพเนนต์ KakaoLoginButton ร่วมกัน คอมโพเนนต์นั้นจะถูกเขียนไว้ในไลบรารี account/feature-social-login
• คอมโพเนนต์ที่แชร์กันระหว่างหน้าของคนละโดเมน จะแยกออกเป็น feature ต่างหากภายในโดเมนส่วนกลาง
  • เช่น คอมโพเนนต์ GlobalNavigation ที่ใช้ร่วมกันใน HomePage ของโดเมน landing และ LecturePage ของโดเมน classroom จะถูกเขียนไว้ในไลบรารี shared/feature-navigation

ไลบรารี Shell

• นำคอมโพเนนต์จากไลบรารี Feature และ UI มาประกอบกันเป็นหน้าเพจ
  • เช่น คอมโพเนนต์ SignInPage เป็นคอมโพเนนต์ของไลบรารี account/shell-kr-web และภายในยังมี SignUpPage, PhoneVerificationPage เป็นต้น
• ไลบรารี Shell คือจุดเข้าใช้งานของโดเมนเฉพาะที่ส่งให้กับ application
• สามารถมีจุดเข้าใช้งานที่ต่างกันตามแต่ละ application ได้
  • ตัวอย่างเช่น..
  • คอมโพเนนต์ที่ใช้ใน HomePage ถูกเขียนไว้ในไลบรารี landing/feature-home
  • แต่ถึงจะเป็น HomePage เหมือนกัน ก็จะมีองค์ประกอบต่างกันตามว่าเป็น HomePage ของเว็บไซต์สหรัฐฯ เว็บไซต์ญี่ปุ่น หรือเว็บไซต์เกาหลี
  • ดังนั้นจึงสามารถสร้างไลบรารี shell สำหรับแต่ละ application ที่เข้าถึงโดเมน landing ได้ (shell-us-web, shell-jp-web, shell-kr-web)

ไลบรารี Provider

• ไลบรารีที่จัดการ state ที่แชร์กันระหว่างตั้งแต่สอง Feature library ขึ้นไป
  • เช่น shared/provider-auth-state ที่จัดการสถานะการล็อกอิน

ไลบรารี UI

• ชุดของคอมโพเนนต์แบบ Presentational ที่แชร์กันระหว่างตั้งแต่สองไลบรารีขึ้นไป

ไลบรารี Utility

• โมดูลทั้งหมดที่ไม่เข้ากับ 4 ประเภทข้างต้น
• ควรให้ความสามารถที่เป็นอิสระมากพอจะทดสอบและ deploy ได้ โดยไม่ผูกกับ domain model ของ CLASS101
  • เช่น shared/utils-apollo-client, shared/utils-i18n

แอปพลิเคชัน

• ทำหน้าที่แค่จัดการการตั้งค่าและ dependency เท่านั้น = แทบไม่มีโค้ดอยู่ใน application เลย