Angular Micro-frontends
Module federation, สถาปัตยกรรม micro-frontend, dependency ที่ใช้ร่วมกัน, กลยุทธ์การ deploy, รูปแบบการสื่อสาร
1สถาปัตยกรรม micro-frontend ในบริบทของ Angular คืออะไร?
สถาปัตยกรรม micro-frontend ในบริบทของ Angular คืออะไร?
คำตอบ
สถาปัตยกรรม micro-frontend แบ่งแอปพลิเคชัน Angular แบบ monolithic ออกเป็นแอปพลิเคชันอิสระขนาดเล็กกว่า โดยแต่ละแอปพลิเคชันได้รับการพัฒนาและ deploy แยกกัน micro-frontend แต่ละตัวสามารถมี repository, pipeline CI/CD และทีมเฉพาะของตัวเอง Module Federation ของ Webpack 5 เป็นเทคโนโลยีที่แนะนำสำหรับการ implement สถาปัตยกรรมนี้ใน Angular โดยอนุญาตให้โหลดโค้ดแบบไดนามิกจากแอปพลิเคชันอื่นๆ ที่ runtime
2บทบาทของ Module Federation ในสถาปัตยกรรม micro-frontend ของ Angular คืออะไร?
บทบาทของ Module Federation ในสถาปัตยกรรม micro-frontend ของ Angular คืออะไร?
คำตอบ
Module Federation อนุญาตให้แชร์โค้ดระหว่างแอปพลิเคชัน Angular ที่ runtime โดยไม่ต้อง rebuild micro-frontend แต่ละตัวจะ expose module (remote) ที่สามารถถูกใช้งานโดยแอปพลิเคชันอื่น (host) ได้ ซึ่งช่วยหลีกเลี่ยงการซ้ำซ้อนของโค้ด ลดขนาด bundle และเปิดใช้งานการ deploy แบบอิสระ Module Federation จะจัดการการโหลดแบบ asynchronous, การ resolve dependency และการแชร์ library ทั่วไปเช่น Angular core โดยอัตโนมัติ
3ความแตกต่างระหว่างแอปพลิเคชัน host และแอปพลิเคชัน remote ใน Module Federation คืออะไร?
ความแตกต่างระหว่างแอปพลิเคชัน host และแอปพลิเคชัน remote ใน Module Federation คืออะไร?
คำตอบ
แอปพลิเคชัน host จะใช้งาน module ที่ถูก expose โดย remote โดยกำหนดค่า remote ใน webpack.config และโหลด module ของพวกเขาแบบไดนามิก แอปพลิเคชัน remote จะ expose module (component, service) เพื่อให้แอปพลิเคชันอื่นใช้งาน แอปพลิเคชันเดียวกันสามารถเป็นทั้ง host และ remote ได้ host ควบคุม shell ของแอปพลิเคชัน (header, navigation, layout) ขณะที่ remote จัดเตรียมฟีเจอร์ทางธุรกิจ
วิธีกำหนดค่า Module Federation ในโปรเจค Angular ด้วย @angular-architects/module-federation อย่างไร?
ทำไมการกำหนดค่า shared scope ใน Module Federation จึงสำคัญ?
+17 คำถามสัมภาษณ์
หัวข้อสัมภาษณ์ Angular อื่นๆ
พื้นฐาน TypeScript
TypeScript ขั้นสูง
พื้นฐาน Angular
คอมโพเนนต์และวงจรชีวิต
Services & Dependency Injection
การจัดระเบียบโมดูล Angular
Angular CLI
Directives และ Pipes
Routing และการนำทาง
Reactive Forms
Template-driven Forms
พื้นฐาน RxJS
Operator ของ RxJS
HttpClient และการเรียก API
การจัดการ state พื้นฐาน
Change Detection
Angular Signals
Standalone Components
การทำ Unit Testing ใน Angular
การทดสอบ End-to-End
Build และการเพิ่มประสิทธิภาพ
พื้นฐาน NgRx
NgRx ขั้นสูง
สถาปัตยกรรม Angular
การปรับแต่งประสิทธิภาพ
ความปลอดภัยและแนวทางปฏิบัติที่ดี
รูปแบบ RxJS ขั้นสูง
Angular Universal และ SSR
เชี่ยวชาญ Angular สำหรับการสัมภาษณ์ครั้งถัดไป
เข้าถึงคำถามทั้งหมด flashcards แบบทดสอบเทคนิค แบบฝึกหัด code review และตัวจำลองสัมภาษณ์
เริ่มใช้ฟรี