ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್‌ನ ರನ್‌ಟೈಮ್ ಹಂಚಿಕೆ ಸಾಮರ್ಥ್ಯಗಳು, ವಿಸ್ತರಿಸಬಲ್ಲ ಮತ್ತು ಸಹಯೋಗದ ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅದರ ಪ್ರಯೋಜನಗಳು ಮತ್ತು ಪ್ರಾಯೋಗಿಕ ಅನುಷ್ಠಾನ ತಂತ್ರಗಳನ್ನು ಅನ್ವೇಷಿಸಿ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್: ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ ರನ್‌ಟೈಮ್ ಹಂಚಿಕೆಯ ಶಕ್ತಿಯನ್ನು ಅನಾವರಣಗೊಳಿಸುವುದು
ಇಂದಿನ ವೇಗವಾಗಿ ವಿಕಸಿಸುತ್ತಿರುವ ಡಿಜಿಟಲ್ ಜಗತ್ತಿನಲ್ಲಿ, ವಿಸ್ತರಿಸಬಲ್ಲ, ನಿರ್ವಹಿಸಬಲ್ಲ, ಮತ್ತು ಸಹಯೋಗದ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿದೆ. ಅಭಿವೃದ್ಧಿ ತಂಡಗಳು ಬೆಳೆದಂತೆ ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದಂತೆ, ದಕ್ಷ ಕೋಡ್ ಹಂಚಿಕೆ ಮತ್ತು ಡಿಕಪ್ಲಿಂಗ್‌ನ ಅವಶ್ಯಕತೆ ಹೆಚ್ಚುತ್ತಾ ಹೋಗುತ್ತದೆ. ವೆಬ್‌ಪ್ಯಾಕ್ 5 ರೊಂದಿಗೆ ಪರಿಚಯಿಸಲಾದ ಒಂದು ಕ್ರಾಂತಿಕಾರಿ ವೈಶಿಷ್ಟ್ಯವಾದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್, ಸ್ವತಂತ್ರವಾಗಿ ನಿಯೋಜಿಸಲಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ನಡುವೆ ಕೋಡ್‌ನ ರನ್‌ಟೈಮ್ ಹಂಚಿಕೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವ ಮೂಲಕ ಪ್ರಬಲ ಪರಿಹಾರವನ್ನು ನೀಡುತ್ತದೆ. ಈ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್ ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್‌ನ ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಗಳನ್ನು, ಅದರ ರನ್‌ಟೈಮ್ ಹಂಚಿಕೆ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಕೇಂದ್ರೀಕರಿಸಿ ವಿವರಿಸುತ್ತದೆ, ಮತ್ತು ಜಾಗತಿಕ ತಂಡಗಳು ತಮ್ಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವ ಮತ್ತು ನಿರ್ವಹಿಸುವ ವಿಧಾನವನ್ನು ಇದು ಹೇಗೆ ಕ್ರಾಂತಿಗೊಳಿಸಬಹುದು ಎಂಬುದನ್ನು ಅನ್ವೇಷಿಸುತ್ತದೆ.
ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ವಿಕಾಸ ಮತ್ತು ಹಂಚಿಕೆಯ ಅವಶ್ಯಕತೆ
ಐತಿಹಾಸಿಕವಾಗಿ, ವೆಬ್ ಅಭಿವೃದ್ಧಿಯು ಏಕಶಿಲೆಯ (monolithic) ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿತ್ತು, ಅಲ್ಲಿ ಎಲ್ಲಾ ಕೋಡ್ ಒಂದೇ ಕೋಡ್‌ಬೇಸ್‌ನಲ್ಲಿ ಇರುತ್ತಿತ್ತು. ಈ ವಿಧಾನವು ಸಣ್ಣ ಯೋಜನೆಗಳಿಗೆ ಸೂಕ್ತವಾಗಿದ್ದರೂ, ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ವಿಸ್ತರಿಸಿದಂತೆ ಇದು ನಿರ್ವಹಿಸಲು ಕಷ್ಟಕರವಾಗುತ್ತದೆ. ಅವಲಂಬನೆಗಳು (dependencies) ಸಿಕ್ಕಿಹಾಕಿಕೊಳ್ಳುತ್ತವೆ, ಬಿಲ್ಡ್ ಸಮಯ ಹೆಚ್ಚಾಗುತ್ತದೆ, ಮತ್ತು ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ನಿಯೋಜಿಸುವುದು ಸಂಕೀರ್ಣ ಮತ್ತು ಅಪಾಯಕಾರಿ ಕಾರ್ಯವಾಗಬಹುದು. ಬ್ಯಾಕೆಂಡ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಮೈಕ್ರೋಸರ್ವಿಸ್‌ಗಳ ಉದಯವು ಫ್ರಂಟೆಂಡ್‌ನಲ್ಲಿ ಇದೇ ರೀತಿಯ ವಾಸ್ತುಶಿಲ್ಪದ ಮಾದರಿಗಳಿಗೆ ದಾರಿ ಮಾಡಿಕೊಟ್ಟಿತು, ಇದು ಮೈಕ್ರೋಫ್ರಂಟೆಂಡ್‌ಗಳ ಹೊರಹೊಮ್ಮುವಿಕೆಗೆ ಕಾರಣವಾಯಿತು.
ಮೈಕ್ರೋಫ್ರಂಟೆಂಡ್‌ಗಳು ದೊಡ್ಡ, ಸಂಕೀರ್ಣ ಫ್ರಂಟೆಂಡ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಸಣ್ಣ, ಸ್ವತಂತ್ರ, ಮತ್ತು ನಿಯೋಜಿಸಬಲ್ಲ ಘಟಕಗಳಾಗಿ ವಿಭಜಿಸುವ ಗುರಿಯನ್ನು ಹೊಂದಿವೆ. ಇದು ವಿವಿಧ ತಂಡಗಳಿಗೆ ಅಪ್ಲಿಕೇಶನ್‌ನ ವಿವಿಧ ಭಾಗಗಳಲ್ಲಿ ಸ್ವಾಯತ್ತವಾಗಿ ಕೆಲಸ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಇದರಿಂದಾಗಿ ವೇಗದ ಅಭಿವೃದ್ಧಿ ಚಕ್ರಗಳು ಮತ್ತು ಸುಧಾರಿತ ತಂಡದ ಸ್ವಾಯತ್ತತೆ ಉಂಟಾಗುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಮೈಕ್ರೋಫ್ರಂಟೆಂಡ್ ಆರ್ಕಿಟೆಕ್ಚರ್‌ಗಳಲ್ಲಿ ದಕ್ಷ ಕೋಡ್ ಹಂಚಿಕೆಯು ಯಾವಾಗಲೂ ಒಂದು ಪ್ರಮುಖ ಸವಾಲಾಗಿದೆ. ಸಾಮಾನ್ಯ ಲೈಬ್ರರಿಗಳು, UI ಕಾಂಪೊನೆಂಟ್‌ಗಳು, ಅಥವಾ ಯುಟಿಲಿಟಿ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ಬಹು ಮೈಕ್ರೋಫ್ರಂಟೆಂಡ್‌ಗಳಲ್ಲಿ ನಕಲು ಮಾಡುವುದರಿಂದ ಈ ಕೆಳಗಿನ ಸಮಸ್ಯೆಗಳು ಉಂಟಾಗುತ್ತವೆ:
- ಹೆಚ್ಚಿದ ಬಂಡಲ್ ಗಾತ್ರಗಳು: ಪ್ರತಿ ಅಪ್ಲಿಕೇಶನ್ ಹಂಚಿಕೆಯ ಅವಲಂಬನೆಗಳ ತನ್ನದೇ ಆದ ಪ್ರತಿಯನ್ನು ಹೊಂದಿರುತ್ತದೆ, ಇದು ಬಳಕೆದಾರರಿಗೆ ಒಟ್ಟಾರೆ ಡೌನ್‌ಲೋಡ್ ಗಾತ್ರವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.
- ಅಸಮಂಜಸ ಅವಲಂಬನೆಗಳು: ವಿವಿಧ ಮೈಕ್ರೋಫ್ರಂಟೆಂಡ್‌ಗಳು ಒಂದೇ ಲೈಬ್ರರಿಯ ವಿಭಿನ್ನ ಆವೃತ್ತಿಗಳನ್ನು ಬಳಸಬಹುದು, ಇದು ಹೊಂದಾಣಿಕೆಯ ಸಮಸ್ಯೆಗಳು ಮತ್ತು ಅನಿರೀಕ್ಷಿತ ವರ್ತನೆಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
- ನಿರ್ವಹಣೆಯ ಹೊರೆ: ಹಂಚಿಕೆಯ ಕೋಡ್ ಅನ್ನು ನವೀಕರಿಸಲು ಬಹು ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಬದಲಾವಣೆಗಳು ಬೇಕಾಗುತ್ತವೆ, ಇದು ದೋಷಗಳ ಅಪಾಯವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ ಮತ್ತು ನಿಯೋಜನೆಯನ್ನು ನಿಧಾನಗೊಳಿಸುತ್ತದೆ.
- ಸಂಪನ್ಮೂಲಗಳ ವ್ಯರ್ಥ: ಒಂದೇ ಕೋಡ್ ಅನ್ನು ಹಲವು ಬಾರಿ ಡೌನ್‌ಲೋಡ್ ಮಾಡುವುದು ಕ್ಲೈಂಟ್ ಮತ್ತು ಸರ್ವರ್ ಎರಡಕ್ಕೂ ಅಸಮರ್ಥವಾಗಿದೆ.
ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ರನ್‌ಟೈಮ್‌ನಲ್ಲಿ ಕೋಡ್ ಅನ್ನು ನಿಜವಾಗಿಯೂ ಹಂಚಿಕೊಳ್ಳುವ ಯಾಂತ್ರಿಕ ವ್ಯವಸ್ಥೆಯನ್ನು ಪರಿಚಯಿಸುವ ಮೂಲಕ ಈ ಸವಾಲುಗಳನ್ನು ನೇರವಾಗಿ ಪರಿಹರಿಸುತ್ತದೆ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ಎಂದರೇನು?
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್, ಮುಖ್ಯವಾಗಿ ವೆಬ್‌ಪ್ಯಾಕ್ 5 ಮೂಲಕ ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗಿದೆ, ಇದು ಒಂದು ಬಿಲ್ಡ್ ಟೂಲ್ ವೈಶಿಷ್ಟ್ಯವಾಗಿದ್ದು, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ರನ್‌ಟೈಮ್‌ನಲ್ಲಿ ಇತರ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಂದ ಕೋಡ್ ಅನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಲೋಡ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಮೊನೊರೆಪೊ ಅಥವಾ ಸಂಕೀರ್ಣ ಬಿಲ್ಡ್-ಟೈಮ್ ಇಂಟಿಗ್ರೇಷನ್ ಪ್ರಕ್ರಿಯೆಯ ಅಗತ್ಯವಿಲ್ಲದೆ ಕೋಡ್ ಮತ್ತು ಅವಲಂಬನೆಗಳನ್ನು ಹಂಚಿಕೊಳ್ಳಬಲ್ಲ ಬಹು ಸ್ವತಂತ್ರ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ರಚನೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.
ಇದರ ಮೂಲಭೂತ ಕಲ್ಪನೆಯು "ರಿಮೋಟ್ಸ್" (ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಒದಗಿಸುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು) ಮತ್ತು "ಹೋಸ್ಟ್ಸ್" (ರಿಮೋಟ್‌ಗಳಿಂದ ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಬಳಸುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು) ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದಾಗಿದೆ. ಈ ರಿಮೋಟ್‌ಗಳು ಮತ್ತು ಹೋಸ್ಟ್‌ಗಳನ್ನು ಸ್ವತಂತ್ರವಾಗಿ ನಿಯೋಜಿಸಬಹುದು, ಇದು ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವಲ್ಲಿ ಗಮನಾರ್ಹ ನಮ್ಯತೆಯನ್ನು ನೀಡುತ್ತದೆ ಮತ್ತು ವೈವಿಧ್ಯಮಯ ವಾಸ್ತುಶಿಲ್ಪದ ಮಾದರಿಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ.
ರನ್‌ಟೈಮ್ ಹಂಚಿಕೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು: ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್‌ನ ತಿರುಳು
ರನ್‌ಟೈಮ್ ಹಂಚಿಕೆಯು ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್‌ನ ಶಕ್ತಿಯ ಆಧಾರಸ್ತಂಭವಾಗಿದೆ. ಸಾಂಪ್ರದಾಯಿಕ ಕೋಡ್-ಸ್ಪ್ಲಿಟಿಂಗ್ ಅಥವಾ ಹಂಚಿಕೆಯ ಅವಲಂಬನೆ ನಿರ್ವಹಣಾ ತಂತ್ರಗಳಿಗಿಂತ ಭಿನ್ನವಾಗಿ, ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಬಿಲ್ಡ್ ಸಮಯದಲ್ಲಿ ನಡೆಯುತ್ತದೆ, ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಬಳಕೆದಾರರ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ನೇರವಾಗಿ ಇತರ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಂದ ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಹುಡುಕಲು ಮತ್ತು ಲೋಡ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ. ಇದರರ್ಥ ಒಂದು ಸಾಮಾನ್ಯ ಲೈಬ್ರರಿ, ಹಂಚಿಕೆಯ UI ಕಾಂಪೊನೆಂಟ್ ಲೈಬ್ರರಿ, ಅಥವಾ ಒಂದು ಫೀಚರ್ ಮಾಡ್ಯೂಲ್ ಅನ್ನು ಒಂದು ಅಪ್ಲಿಕೇಶನ್‌ನಿಂದ ಒಮ್ಮೆ ಲೋಡ್ ಮಾಡಿದರೆ, ಅದನ್ನು ಅಗತ್ಯವಿರುವ ಇತರ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಲಭ್ಯವಾಗುವಂತೆ ಮಾಡಬಹುದು.
ಇದು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ವಿಭಜಿಸೋಣ:
ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳು:
- Exposes (ಒದಗಿಸುವುದು): ಒಂದು ಅಪ್ಲಿಕೇಶನ್ ಇತರ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಬಳಸಬಹುದಾದ ಕೆಲವು ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು (ಉದಾ. ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್, ಯುಟಿಲಿಟಿ ಫಂಕ್ಷನ್) 'expose' ಮಾಡಬಹುದು. ಈ ಒದಗಿಸಲಾದ ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ರಿಮೋಟ್ ಆಗಿ ಲೋಡ್ ಮಾಡಬಹುದಾದ ಕಂಟೇನರ್‌ಗೆ ಬಂಡಲ್ ಮಾಡಲಾಗುತ್ತದೆ.
- Remotes (ರಿಮೋಟ್‌ಗಳು): ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಒದಗಿಸುವ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು 'ರಿಮೋಟ್' ಎಂದು ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ. ಇದು ತನ್ನ ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಹಂಚಿಕೆಯ ಸಂರಚನೆಯ ಮೂಲಕ ಒದಗಿಸುತ್ತದೆ.
- Consumes (ಬಳಸುವುದು): ರಿಮೋಟ್‌ನಿಂದ ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಬಳಸಬೇಕಾದ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು 'ಕನ್ಸ್ಯೂಮರ್' ಅಥವಾ 'ಹೋಸ್ಟ್' ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ. ರಿಮೋಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಎಲ್ಲಿ ಕಂಡುಹಿಡಿಯಬೇಕು ಮತ್ತು ಯಾವ ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಬೇಕು ಎಂಬುದನ್ನು ತಿಳಿಯಲು ಇದು ತನ್ನನ್ನು ತಾನು ಸಂರಚಿಸಿಕೊಳ್ಳುತ್ತದೆ.
- Shared Modules (ಹಂಚಿಕೆಯ ಮಾಡ್ಯೂಲ್‌ಗಳು): ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ಹಂಚಿಕೆಯ ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಬಹು ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಒಂದೇ ಹಂಚಿಕೆಯ ಮಾಡ್ಯೂಲ್ ಅನ್ನು ಬಳಸಿದಾಗ, ಆ ಮಾಡ್ಯೂಲ್‌ನ ಕೇವಲ ಒಂದು ಪ್ರತಿಯನ್ನು ಲೋಡ್ ಮಾಡಿ ಅವುಗಳ ನಡುವೆ ಹಂಚಿಕೊಳ್ಳಲಾಗುತ್ತದೆ. ಬಂಡಲ್ ಗಾತ್ರಗಳನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಮತ್ತು ಅವಲಂಬನೆ ಸಂಘರ್ಷಗಳನ್ನು ತಡೆಯಲು ಇದು ಒಂದು ನಿರ್ಣಾಯಕ ಅಂಶವಾಗಿದೆ.
ಕಾರ್ಯವಿಧಾನ:
ಹೋಸ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ರಿಮೋಟ್‌ನಿಂದ ಮಾಡ್ಯೂಲ್ ಬೇಕಾದಾಗ, ಅದು ರಿಮೋಟ್‌ನ ಕಂಟೇನರ್‌ನಿಂದ ಅದನ್ನು ವಿನಂತಿಸುತ್ತದೆ. ನಂತರ ರಿಮೋಟ್ ಕಂಟೇನರ್ ವಿನಂತಿಸಿದ ಮಾಡ್ಯೂಲ್ ಅನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಲೋಡ್ ಮಾಡುತ್ತದೆ. ಮಾಡ್ಯೂಲ್ ಅನ್ನು ಈಗಾಗಲೇ ಇನ್ನೊಂದು ಬಳಸುವ ಅಪ್ಲಿಕೇಶನ್ ಲೋಡ್ ಮಾಡಿದ್ದರೆ, ಅದನ್ನು ಹಂಚಿಕೊಳ್ಳಲಾಗುತ್ತದೆ. ಈ ಕ್ರಿಯಾತ್ಮಕ ಲೋಡಿಂಗ್ ಮತ್ತು ಹಂಚಿಕೆಯು ರನ್‌ಟೈಮ್‌ನಲ್ಲಿ ಮನಬಂದಂತೆ ನಡೆಯುತ್ತದೆ, ಅವಲಂಬನೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಅತ್ಯಂತ ದಕ್ಷ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಜಾಗತಿಕ ಅಭಿವೃದ್ಧಿಗಾಗಿ ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್‌ನ ಪ್ರಯೋಜನಗಳು
ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಅನುಕೂಲಗಳು ಗಣನೀಯ ಮತ್ತು ದೂರಗಾಮಿಯಾಗಿವೆ:
1. ವರ್ಧಿತ ವಿಸ್ತರಣೀಯತೆ ಮತ್ತು ನಿರ್ವಹಣೆ:
ದೊಡ್ಡ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಸಣ್ಣ, ಸ್ವತಂತ್ರ ಮೈಕ್ರೋಫ್ರಂಟೆಂಡ್‌ಗಳಾಗಿ ವಿಭಜಿಸುವ ಮೂಲಕ, ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ಅಂತರ್ಗತವಾಗಿ ವಿಸ್ತರಣೀಯತೆಯನ್ನು ಉತ್ತೇಜಿಸುತ್ತದೆ. ತಂಡಗಳು ಇತರರ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದೆ ವೈಯಕ್ತಿಕ ಮೈಕ್ರೋಫ್ರಂಟೆಂಡ್‌ಗಳಲ್ಲಿ ಕೆಲಸ ಮಾಡಬಹುದು, ಇದು ಸಮಾನಾಂತರ ಅಭಿವೃದ್ಧಿ ಮತ್ತು ಸ್ವತಂತ್ರ ನಿಯೋಜನೆಗಳಿಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದು ಬೃಹತ್ ಕೋಡ್‌ಬೇಸ್ ಅನ್ನು ನಿರ್ವಹಿಸುವುದಕ್ಕೆ ಸಂಬಂಧಿಸಿದ ಅರಿವಿನ ಹೊರೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಕಾಲಾನಂತರದಲ್ಲಿ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಲ್ಲದನ್ನಾಗಿ ಮಾಡುತ್ತದೆ.
2. ಆಪ್ಟಿಮೈಸ್ಡ್ ಬಂಡಲ್ ಗಾತ್ರಗಳು ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆ:
ರನ್‌ಟೈಮ್ ಹಂಚಿಕೆಯ ಅತ್ಯಂತ ಮಹತ್ವದ ಪ್ರಯೋಜನವೆಂದರೆ ಒಟ್ಟಾರೆ ಡೌನ್‌ಲೋಡ್ ಗಾತ್ರದಲ್ಲಿನ ಕಡಿತ. ಪ್ರತಿ ಅಪ್ಲಿಕೇಶನ್ ಸಾಮಾನ್ಯ ಲೈಬ್ರರಿಗಳನ್ನು (ರಿಯಾಕ್ಟ್, ಲೋಡಾಶ್, ಅಥವಾ ಕಸ್ಟಮ್ UI ಕಾಂಪೊನೆಂಟ್ ಲೈಬ್ರರಿಯಂತಹ) ನಕಲು ಮಾಡುವ ಬದಲು, ಈ ಅವಲಂಬನೆಗಳನ್ನು ಒಮ್ಮೆ ಲೋಡ್ ಮಾಡಿ ಹಂಚಿಕೊಳ್ಳಲಾಗುತ್ತದೆ. ಇದು ಈ ಕೆಳಗಿನವುಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ:
- ವೇಗದ ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯಗಳು: ಬಳಕೆದಾರರು ಕಡಿಮೆ ಕೋಡ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡುತ್ತಾರೆ, ಇದರಿಂದಾಗಿ ಅಪ್ಲಿಕೇಶನ್‌ನ ಆರಂಭಿಕ ರೆಂಡರಿಂಗ್ ವೇಗವಾಗಿರುತ್ತದೆ.
- ಸುಧಾರಿತ ನಂತರದ ನ್ಯಾವಿಗೇಷನ್: ಅವಲಂಬನೆಗಳನ್ನು ಹಂಚಿಕೊಳ್ಳುವ ಮೈಕ್ರೋಫ್ರಂಟೆಂಡ್‌ಗಳ ನಡುವೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವಾಗ, ಈಗಾಗಲೇ ಲೋಡ್ ಮಾಡಲಾದ ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಮರುಬಳಕೆ ಮಾಡಲಾಗುತ್ತದೆ, ಇದು ಚುರುಕಾದ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ.
- ಕಡಿಮೆಯಾದ ಸರ್ವರ್ ಲೋಡ್: ಸರ್ವರ್‌ನಿಂದ ಕಡಿಮೆ ಡೇಟಾವನ್ನು ವರ್ಗಾಯಿಸಲಾಗುತ್ತದೆ, ಇದು ಸಂಭಾವ್ಯವಾಗಿ ಹೋಸ್ಟಿಂಗ್ ವೆಚ್ಚವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
ಉತ್ಪನ್ನ ಪಟ್ಟಿಗಳು, ಬಳಕೆದಾರ ಖಾತೆಗಳು ಮತ್ತು ಚೆಕ್‌ಔಟ್‌ಗಾಗಿ ಪ್ರತ್ಯೇಕ ವಿಭಾಗಗಳಿರುವ ಜಾಗತಿಕ ಇ-ಕಾಮರ್ಸ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಅನ್ನು ಪರಿಗಣಿಸಿ. ಪ್ರತಿ ವಿಭಾಗವು ಪ್ರತ್ಯೇಕ ಮೈಕ್ರೋಫ್ರಂಟೆಂಡ್ ಆಗಿದ್ದರೆ, ಆದರೆ ಅವೆಲ್ಲವೂ ಬಟನ್‌ಗಳು, ಫಾರ್ಮ್‌ಗಳು ಮತ್ತು ನ್ಯಾವಿಗೇಷನ್‌ಗಾಗಿ ಸಾಮಾನ್ಯ UI ಕಾಂಪೊನೆಂಟ್ ಲೈಬ್ರರಿಯನ್ನು ಅವಲಂಬಿಸಿದ್ದರೆ, ಬಳಕೆದಾರರು ಮೊದಲು ಯಾವ ವಿಭಾಗಕ್ಕೆ ಭೇಟಿ ನೀಡುತ್ತಾರೆ ಎಂಬುದನ್ನು ಲೆಕ್ಕಿಸದೆ ಈ ಲೈಬ್ರರಿಯು ಒಮ್ಮೆ ಮಾತ್ರ ಲೋಡ್ ಆಗುವುದನ್ನು ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ಖಚಿತಪಡಿಸುತ್ತದೆ.
3. ಹೆಚ್ಚಿದ ತಂಡದ ಸ್ವಾಯತ್ತತೆ ಮತ್ತು ಸಹಯೋಗ:
ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ವಿವಿಧ ಜಾಗತಿಕ ಪ್ರದೇಶಗಳಲ್ಲಿ ನೆಲೆಸಿರುವ ವಿವಿಧ ತಂಡಗಳಿಗೆ ತಮ್ಮ ತಮ್ಮ ಮೈಕ್ರೋಫ್ರಂಟೆಂಡ್‌ಗಳಲ್ಲಿ ಸ್ವತಂತ್ರವಾಗಿ ಕೆಲಸ ಮಾಡಲು ಅಧಿಕಾರ ನೀಡುತ್ತದೆ. ಅವರು ತಮ್ಮದೇ ಆದ ತಂತ್ರಜ್ಞಾನ ಸ್ಟ್ಯಾಕ್‌ಗಳನ್ನು (ಕೆಲವು ಮಟ್ಟದ ಸ್ಥಿರತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು, ಮಿತಿಯೊಳಗೆ) ಮತ್ತು ನಿಯೋಜನಾ ವೇಳಾಪಟ್ಟಿಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಬಹುದು. ಈ ಸ್ವಾಯತ್ತತೆಯು ವೇಗದ ಆವಿಷ್ಕಾರವನ್ನು ಉತ್ತೇಜಿಸುತ್ತದೆ ಮತ್ತು ಸಂವಹನ ಹೊರೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಸಾಮಾನ್ಯ ಕೋಡ್ ಅನ್ನು ಹಂಚಿಕೊಳ್ಳುವ ಸಾಮರ್ಥ್ಯವು ಸಹಯೋಗವನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತದೆ, ಏಕೆಂದರೆ ತಂಡಗಳು ಹಂಚಿಕೆಯ ಲೈಬ್ರರಿಗಳು ಮತ್ತು ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗೆ ಕೊಡುಗೆ ನೀಡಬಹುದು ಮತ್ತು ಅವುಗಳಿಂದ ಪ್ರಯೋಜನ ಪಡೆಯಬಹುದು.
ಯುರೋಪ್, ಏಷ್ಯಾ ಮತ್ತು ಉತ್ತರ ಅಮೆರಿಕಾದಲ್ಲಿ ಪ್ರತ್ಯೇಕ ತಂಡಗಳನ್ನು ಹೊಂದಿರುವ ಜಾಗತಿಕ ಹಣಕಾಸು ಸಂಸ್ಥೆಯನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ, ಅವರು ವಿಭಿನ್ನ ಉತ್ಪನ್ನ ಕೊಡುಗೆಗಳಿಗೆ ಜವಾಬ್ದಾರರಾಗಿರುತ್ತಾರೆ. ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ಪ್ರತಿ ತಂಡಕ್ಕೆ ತಮ್ಮ ನಿರ್ದಿಷ್ಟ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಆದರೆ ಕೇಂದ್ರ ತಂಡವು ಅಭಿವೃದ್ಧಿಪಡಿಸಿದ ಸಾಮಾನ್ಯ ದೃಢೀಕರಣ ಸೇವೆ ಅಥವಾ ಹಂಚಿಕೆಯ ಚಾರ್ಟಿಂಗ್ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಿಕೊಳ್ಳುತ್ತದೆ. ಇದು ಮರುಬಳಕೆಯನ್ನು ಉತ್ತೇಜಿಸುತ್ತದೆ ಮತ್ತು ವಿಭಿನ್ನ ಉತ್ಪನ್ನ ಸಾಲುಗಳಲ್ಲಿ ಸ್ಥಿರತೆಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
4. ತಂತ್ರಜ್ಞಾನ ಅಜ್ಞೇಯತಾವಾದ (ಕೇವಿಯಟ್‌ಗಳೊಂದಿಗೆ):
ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ವೆಬ್‌ಪ್ಯಾಕ್ ಮೇಲೆ ನಿರ್ಮಿಸಲಾಗಿದ್ದರೂ, ಇದು ವಿಭಿನ್ನ ಮೈಕ್ರೋಫ್ರಂಟೆಂಡ್‌ಗಳ ನಡುವೆ ಸ್ವಲ್ಪ ಮಟ್ಟಿಗೆ ತಂತ್ರಜ್ಞಾನ ಅಜ್ಞೇಯತಾವಾದಕ್ಕೆ ಅನುಮತಿಸುತ್ತದೆ. ಒಂದು ಮೈಕ್ರೋಫ್ರಂಟೆಂಡ್ ರಿಯಾಕ್ಟ್‌ನೊಂದಿಗೆ, ಇನ್ನೊಂದು ವೂ.ಜೆಎಸ್‌ನೊಂದಿಗೆ ಮತ್ತು ಮತ್ತೊಂದು ಆಂಗ್ಯುಲರ್‌ನೊಂದಿಗೆ ನಿರ್ಮಿಸಬಹುದು, ಎಲ್ಲಿಯವರೆಗೆ ಅವು ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಹೇಗೆ ಒದಗಿಸುವುದು ಮತ್ತು ಬಳಸುವುದು ಎಂಬುದರ ಕುರಿತು ಒಪ್ಪಿಕೊಳ್ಳುತ್ತವೆ. ಆದಾಗ್ಯೂ, ರಿಯಾಕ್ಟ್ ಅಥವಾ ವೂ ನಂತಹ ಸಂಕೀರ್ಣ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳ ನಿಜವಾದ ರನ್‌ಟೈಮ್ ಹಂಚಿಕೆಗಾಗಿ, ಈ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳನ್ನು ಹೇಗೆ ಪ್ರಾರಂಭಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಹಂಚಿಕೊಳ್ಳಲಾಗುತ್ತದೆ ಎಂಬುದರ ಕುರಿತು ವಿಶೇಷ ಗಮನ ನೀಡಬೇಕು, ಇದರಿಂದಾಗಿ ಬಹು ನಿದರ್ಶನಗಳು ಲೋಡ್ ಆಗುವುದನ್ನು ಮತ್ತು ಸಂಘರ್ಷಗಳನ್ನು ಉಂಟುಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಬಹುದು.
ಜಾಗತಿಕ SaaS ಕಂಪನಿಯು ಒಂದು ಫ್ರೇಮ್‌ವರ್ಕ್‌ನೊಂದಿಗೆ ಅಭಿವೃದ್ಧಿಪಡಿಸಿದ ಕೋರ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಅನ್ನು ಹೊಂದಿರಬಹುದು ಮತ್ತು ನಂತರ ವಿವಿಧ ಪ್ರಾದೇಶಿಕ ತಂಡಗಳು ಇತರ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳನ್ನು ಬಳಸಿ ಅಭಿವೃದ್ಧಿಪಡಿಸಿದ ವಿಶೇಷ ವೈಶಿಷ್ಟ್ಯ ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಪ್ರಾರಂಭಿಸಬಹುದು. ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ಈ ಭಿನ್ನ ಭಾಗಗಳ ಏಕೀಕರಣವನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತದೆ, ಹಂಚಿಕೆಯ ಅವಲಂಬನೆಗಳನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ನಿರ್ವಹಿಸಿದರೆ.
5. ಸುಲಭ ಆವೃತ್ತಿ ನಿರ್ವಹಣೆ:
ಹಂಚಿಕೆಯ ಅವಲಂಬನೆಯನ್ನು ನವೀಕರಿಸಬೇಕಾದಾಗ, ಅದನ್ನು ಒದಗಿಸುವ ರಿಮೋಟ್ ಅನ್ನು ಮಾತ್ರ ನವೀಕರಿಸಿ ಮರುನಿಯೋಜಿಸಬೇಕಾಗುತ್ತದೆ. ಎಲ್ಲಾ ಬಳಸುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ತಮ್ಮ ಮುಂದಿನ ಲೋಡ್ ಸಮಯದಲ್ಲಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹೊಸ ಆವೃತ್ತಿಯನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತವೆ. ಇದು ಇಡೀ ಅಪ್ಲಿಕೇಶನ್ ಪರಿಸರದಲ್ಲಿ ಹಂಚಿಕೆಯ ಕೋಡ್ ಅನ್ನು ನಿರ್ವಹಿಸುವ ಮತ್ತು ನವೀಕರಿಸುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ.
ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು: ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ತಂತ್ರಗಳು
ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ಅನ್ನು ಆಚರಣೆಯಲ್ಲಿ ಹೇಗೆ ಹೊಂದಿಸುವುದು ಮತ್ತು ಬಳಸುವುದು ಎಂದು ನೋಡೋಣ. ನಾವು ಮೂಲ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ವಿವರಿಸಲು ಸರಳೀಕೃತ ವೆಬ್‌ಪ್ಯಾಕ್ ಸಂರಚನೆಗಳನ್ನು ಬಳಸುತ್ತೇವೆ.
ಸನ್ನಿವೇಶ: UI ಕಾಂಪೊನೆಂಟ್ ಲೈಬ್ರರಿಯನ್ನು ಹಂಚಿಕೊಳ್ಳುವುದು
ನಮ್ಮಲ್ಲಿ ಎರಡು ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿವೆ ಎಂದು ಭಾವಿಸೋಣ: 'ಉತ್ಪನ್ನ ಕ್ಯಾಟಲಾಗ್' (ರಿಮೋಟ್) ಮತ್ತು 'ಬಳಕೆದಾರ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್' (ಹೋಸ್ಟ್). ಇವೆರಡಕ್ಕೂ ಮೀಸಲಾದ 'ಹಂಚಿಕೆಯ UI' ಲೈಬ್ರರಿಯಿಂದ ಹಂಚಿಕೆಯ 'ಬಟನ್' ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಬಳಸಬೇಕಾಗಿದೆ.
1. 'ಹಂಚಿಕೆಯ UI' ಲೈಬ್ರರಿ (ರಿಮೋಟ್):
ಈ ಅಪ್ಲಿಕೇಶನ್ ತನ್ನ 'ಬಟನ್' ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ.
'ಹಂಚಿಕೆಯ UI' ಗಾಗಿwebpack.config.js (ರಿಮೋಟ್):
const { ModuleFederationPlugin } = require('webpack');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'remoteEntry.js',
path: path.resolve(__dirname, 'dist'),
publicPath: 'http://localhost:3001/dist/', // URL where the remote will be served
},
plugins: [
new ModuleFederationPlugin({
name: 'sharedUI',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/components/Button.js', // Expose Button component
},
shared: {
// Define shared dependencies
react: {
singleton: true, // Ensure only one instance of React is loaded
},
'react-dom': {
singleton: true,
},
},
}),
],
// ... other webpack configurations (babel, devServer, etc.)
};
src/components/Button.js:
import React from 'react';
const Button = ({ onClick, children }) => (
);
export default Button;
ಈ ಸೆಟಪ್‌ನಲ್ಲಿ, 'ಹಂಚಿಕೆಯ UI' ತನ್ನ Button ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ ಮತ್ತು react ಹಾಗೂ react-dom ಅನ್ನು singleton: true ನೊಂದಿಗೆ ಹಂಚಿಕೆಯ ಅವಲಂಬನೆಗಳಾಗಿ ಘೋಷಿಸುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಬಳಸುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಾದ್ಯಂತ ಅವು ಒಂದೇ ನಿದರ್ಶನಗಳಾಗಿ ಪರಿಗಣಿಸಲ್ಪಡುತ್ತವೆ.
2. 'ಉತ್ಪನ್ನ ಕ್ಯಾಟಲಾಗ್' ಅಪ್ಲಿಕೇಶನ್ (ರಿಮೋಟ್):
ಈ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಹಂಚಿಕೆಯ Button ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ ಮತ್ತು ತನ್ನದೇ ಆದ ಅವಲಂಬನೆಗಳನ್ನು ಹಂಚಿಕೊಳ್ಳಬೇಕಾಗುತ್ತದೆ.
webpack.config.js (ರಿಮೋಟ್):
const { ModuleFederationPlugin } = require('webpack');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'remoteEntry.js',
path: path.resolve(__dirname, 'dist'),
publicPath: 'http://localhost:3002/dist/', // URL where this remote will be served
},
plugins: [
new ModuleFederationPlugin({
name: 'productCatalog',
filename: 'remoteEntry.js',
exposes: {
'./ProductList': './src/components/ProductList.js', // Expose ProductList
},
remotes: {
// Define a remote it needs to consume from
sharedUI: 'sharedUI@http://localhost:3001/dist/remoteEntry.js',
},
shared: {
// Shared dependencies with the same version and singleton: true
react: {
singleton: true,
},
'react-dom': {
singleton: true,
},
},
}),
],
// ... other webpack configurations
};
'ಉತ್ಪನ್ನ ಕ್ಯಾಟಲಾಗ್' ಈಗ ತನ್ನ ProductList ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ ಮತ್ತು ತನ್ನದೇ ಆದ ರಿಮೋಟ್‌ಗಳನ್ನು ಘೋಷಿಸುತ್ತದೆ, ನಿರ್ದಿಷ್ಟವಾಗಿ 'ಹಂಚಿಕೆಯ UI' ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಸೂಚಿಸುತ್ತದೆ. ಇದು ಅದೇ ಹಂಚಿಕೆಯ ಅವಲಂಬನೆಗಳನ್ನು ಸಹ ಘೋಷಿಸುತ್ತದೆ.
3. 'ಬಳಕೆದಾರ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್' ಅಪ್ಲಿಕೇಶನ್ (ಹೋಸ್ಟ್):
ಈ ಅಪ್ಲಿಕೇಶನ್ 'ಹಂಚಿಕೆಯ UI' ನಿಂದ Button ಕಾಂಪೊನೆಂಟ್ ಮತ್ತು 'ಉತ್ಪನ್ನ ಕ್ಯಾಟಲಾಗ್' ನಿಂದ ProductList ಅನ್ನು ಬಳಸುತ್ತದೆ.
webpack.config.js (ಹೋಸ್ಟ್):
const { ModuleFederationPlugin } = require('webpack');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
publicPath: 'http://localhost:3000/dist/', // URL where this app's bundles are served
},
plugins: [
new ModuleFederationPlugin({
name: 'userDashboard',
remotes: {
// Define the remotes this host application needs
sharedUI: 'sharedUI@http://localhost:3001/dist/remoteEntry.js',
productCatalog: 'productCatalog@http://localhost:3002/dist/remoteEntry.js',
},
shared: {
// Shared dependencies that must match the remotes
react: {
singleton: true,
import: 'react', // Specify the module name for import
},
'react-dom': {
singleton: true,
import: 'react-dom',
},
},
}),
],
// ... other webpack configurations
};
'ಬಳಕೆದಾರ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್' ಗಾಗಿ src/index.js:
import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
// Dynamically import the shared Button component
const RemoteButton = React.lazy(() => import('sharedUI/Button'));
// Dynamically import the ProductList component
const RemoteProductList = React.lazy(() => import('productCatalog/ProductList'));
const App = () => {
const handleClick = () => {
alert('Button clicked from shared UI!');
};
return (
User Dashboard
Loading Button... }>
Click Me
Products
Loading Products...