บทนำ

แนวคิดหลักเบื้องหลังไมโครฟรอนท์เอนด์คือการโหลดโค้ดแบบ Lazy Loading ที่รันไทม์ โดยที่คอมไพเลอร์ Angular ไม่จำเป็นต้องรู้เกี่ยวกับโมดูลฟีเจอร์ Lazy Loading ที่รันไทม์ สิ่งนี้มีประโยชน์อย่างยิ่ง เมื่อหลายทีมกำลังทำงานในโครงการและการปรับใช้อิสระเป็นสิ่งจำเป็นสำหรับประสิทธิภาพการทำงาน

await import('http://localhost:4200').then(m => m.ROUTES)

หากคุณไม่คุ้นเคยกับแนวคิดพื้นฐาน เราขอแนะนำให้คุณอ่านบทความนี้ก่อน:

ในส่วนถัดไป ฉันจะถือว่าคุณรู้อยู่แล้วว่าการเชื่อมโยงโมดูลสามารถใช้เพื่อโหลดไมโครฟรอนท์เอนด์แบบสถิตด้วย URL แบบฮาร์ดโค้ดได้อย่างไร เห็นได้ชัดว่าการมี URL แบบฮาร์ดโค้ดนั้นไม่ดี เนื่องจากเราอาจต้องการใช้ตรรกะบางอย่างที่ตัดสินใจว่าควรโหลดไมโครฟรอนต์เอนด์ใดโดยขึ้นอยู่กับการอนุญาตของผู้ใช้ หรือเพียงแค่ขั้นตอนการปรับใช้ (dev, staging, prod)

กวดวิชา

ฉันได้สร้าง monorepository ที่มีรีโมต สองตัว (remote1, remote2) และหนึ่งเชลล์ ทั้ง remote1 และ remote2 เปิดเผยคอนฟิกูเรชันการกำหนดเส้นทางในการกำหนดค่า webpack เพื่อให้เชลล์สามารถโหลดคอนฟิกูเรชันการเราต์ได้ เชลล์มีเฉพาะเต้ารับเราเตอร์ที่ใช้เพื่อแสดงรีโมต และยังมีแถบนำทางที่มีลิงค์เราเตอร์หนึ่งอันสำหรับรีโมตแต่ละตัว นี่เป็นรหัสที่จำเป็นสำหรับการนำเสนอโดยพื้นฐาน ส่วนที่ยุ่งยากคือการกำหนดเส้นทางแบบไดนามิกซึ่งอิงตามไฟล์รายการ

ไฟล์ Manifest อย่างน้อยควรใช้ RemoteConfig จาก แพ็คเกจ @angular-architects/module-federationและสามารถขยายคุณสมบัติที่กำหนดเองเพิ่มเติมที่จำเป็นสำหรับแอปพลิเคชันของคุณ ตัวอย่างรายการของฉันขยายดังต่อไปนี้:

ไฟล์ Manifest นี้ควรถูกจัดเก็บไว้ในโฟลเดอร์ asset จากนั้นเราจึงมั่นใจได้ว่าเมื่อทำการบู๊ตสแตรปว่ารีโมตสามารถโหลดได้

ตอนนี้ การกำหนดเส้นทางเป็นปัญหาหลักเพราะเราไม่สามารถแค่เขียนโค้ดคอนฟิกูเรชันการกำหนดเส้นทางแบบคงที่ได้ แต่เราสามารถใช้โทเค็นการพึ่งพาระดับต่ำจากเราเตอร์เชิงมุมเพื่อให้เราสามารถใช้คุณสมบัติuseFactory สิ่งสำคัญคือต้องจัดเตรียมการกำหนดค่าการกำหนดเส้นทางที่ว่างเปล่า จากนั้นเราสามารถเข้าถึงโทเค็นการฉีดROUTES ได้

ฟังก์ชันcreateRoutesเป็นฟังก์ชันยูทิลิตี้ที่ส่งคืนอ็อบเจ็กต์ Routes ตามไฟล์รายการ โดยพื้นฐานแล้ว ไฟล์ Manifest จะถูกทำซ้ำและจับคู่กับการกำหนดค่าเส้นทางโดยใช้ค่าของรายการ ในการโหลดรายการสามารถใช้ฟังก์ชันgetManifest ได้

และนั่นก็เกือบแล้ว สิ่งเดียวที่เหลือคือการเพิ่มลิงค์เราเตอร์ไปยังแถบนำทางแบบไดนามิก คอมโพเนนต์ยังใช้ฟังก์ชัน getManifest และในเทมเพลต เราสามารถวนซ้ำรายการใน ngFor ได้

ผลลัพธ์:

มติ

วิธีการแบบไดนามิกนี้สามารถใช้ได้กับกรณีที่น่าสนใจหลายกรณี รหัสเป็นแบบคงที่ แต่ตรรกะมีอยู่ในไฟล์รายการ ดังนั้นไปป์ไลน์ CI/CD สามารถแลกเปลี่ยนไฟล์ได้ขึ้นอยู่กับระยะ มิฉะนั้น ไฟล์ Manifest สามารถโหลดได้จากแบ็กเอนด์ทั้งนี้ขึ้นอยู่กับการอนุญาตของผู้ใช้ที่เข้าสู่ระบบ หรือจะใช้สำหรับการทดสอบ A/B ก็ได้

• ขั้นตอนการปรับใช้
• การทดสอบ A/B
• แดชบอร์ด
• การแสดงผลแบบมีเงื่อนไขตามการอนุญาต
• สถาปัตยกรรมปลั๊กอิน

GitHub Repo

เข้าร่วมสื่อ

อ่านเพิ่มเติม