SingleSPA ಕೆಲಸ ಮಾಡುತ್ತದೆ. Import Maps ಅವುಗಳನ್ನು ತಾವೇ ನಿರ್ವಹಿಸುವುದಿಲ್ಲ
SingleSPA ಕೆಲಸ ಮಾಡುತ್ತದೆ. ನಾವು ಒಂದೇ ಪುಟದಲ್ಲಿ React, Vue, ಮತ್ತು Angular ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ರನ್ ಮಾಡುತ್ತೇವೆ. ಅವು ಸ್ವತಂತ್ರವಾಗಿ ಲೋಡ್ ಆಗುತ್ತವೆ. ಈ ಫ್ರೇಮ್ವರ್ಕ್ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
ಸಮಸ್ಯೆ ಫ್ರೇಮ್ವರ್ಕ್ನಲ್ಲಲ್ಲ. ಸಮಸ್ಯೆ ಅದರ ಸುತ್ತಲಿರುವ ಪರಿಸರ ವ್ಯವಸ್ಥೆಯಲ್ಲಿದೆ (ecosystem).
ವಿತರಿಸಿದ ಆರ್ಕಿಟೆಕ್ಚರ್ನಲ್ಲಿ (distributed architecture), ನಿಮಗೆ ಮಾಲೀಕತ್ವ (ownership) ಬೇಕು. ನಿಮಗೆ ಆಡಿಟಿಂಗ್ ಬೇಕು. ನಿಮಗೆ ಗವರ್ನೆನ್ಸ್ ಬೇಕು. SingleSPA ಈ ಅಗತ್ಯಗಳನ್ನು ಎದ್ದು ಕಾಣುವಂತೆ ಮಾಡುತ್ತದೆ, ಏಕೆಂದರೆ ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ (import map) ಸಂಯೋಜನೆಯ ಕೇಂದ್ರ ಬಿಂದುವಾಗಿದೆ.
ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ ನಿಮ್ಮ ರೂಟ್ ಕಾನ್ಫಿಗರೇಶನ್ನಲ್ಲಿರುತ್ತದೆ. ಇದು ಒಂದು JSON ಫೈಲ್. ಪ್ರತಿ ಮೈಕ್ರೋ ಫ್ರಂಟ್ಎಂಡ್ (MFE) ಯಾವ ವರ್ಷನ್ನ React ಅನ್ನು ಲೋಡ್ ಮಾಡಬೇಕು ಎಂದು ಇದು ತಿಳಿಸುತ್ತದೆ. ಸಿದ್ಧಾಂತದ ಪ್ರಕಾರ, ಇದು ಸತ್ಯದ ಮೂಲ (source of truth). ಆದರೆ ಪ್ರಾಯೋಗಿಕವಾಗಿ, ಇದನ್ನು ಯಾರೂ ನಿರ್ವಹಿಸುವುದಿಲ್ಲ.
ಪ್ರತಿ ತಂಡವು ತನ್ನದೇ ಆದ MFE ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಆದರೆ ಮ್ಯಾಪ್ ಅನ್ನು ಯಾರೂ ನಿರ್ವಹಿಸುವುದಿಲ್ಲ.
ಇದು ಈ ಕೆಳಗಿನ ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡುತ್ತದೆ:
- ತಂಡಗಳು ಒಂದು MFE ಅನ್ನು ನಿಲ್ಲಿಸಿದರೂ (retire), ಅದರ ಎಂಟ್ರಿ ಮ್ಯಾಪ್ನಲ್ಲಿ ಉಳಿಯುತ್ತದೆ.
- ಹೊಸ ಡಿಪೆಂಡೆನ್ಸಿಗಳು (dependencies) ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತವೆ, ಆದರೆ ಯಾರೂ ಅವುಗಳನ್ನು ಮ್ಯಾಪ್ಗೆ ಸೇರಿಸುವುದಿಲ್ಲ.
- ನೀವು ಅದನ್ನು ನಿರ್ಲಕ್ಷಿಸಿದಾಗ ಮ್ಯಾಪ್ ಹಳೆಯದಾಗಿ/ಅಪ್ರಸ್ತುತವಾಗುತ್ತದೆ (rots).
ನಮ್ಮ ಮ್ಯಾಪ್ನಲ್ಲಿ ಎಂಟು ತಿಂಗಳಿನಿಂದ ಡಿಪ್ಲಾಯ್ ಮಾಡದ ಒಂದು MFE ಅನ್ನು ನಾವು ಕಂಡುಕೊಂಡೆವು. ಅದು ಬಳಕೆಯಲ್ಲಿರಲಿಲ್ಲ, ಆದರೂ ಅದು ಪ್ರೊಡಕ್ಷನ್ನಲ್ಲಿ ಲೋಡ್ ಆಗುತ್ತಿತ್ತು. ಯಾರೂ ಗಮನಿಸದ ಕಾರಣ ಯಾರಿಗೂ ತಿಳಿಯಲಿಲ್ಲ.
ಬಿಲ್ಡ್ ಮಾಡುವಾಗ ಮ್ಯಾಪ್ ಅನ್ನು ಆಟೋ-ಜನರೇಟ್ ಮಾಡುವುದನ್ನು ನೀವು ಯೋಚಿಸಬಹುದು. ನಾವು ಅದನ್ನು ಪ್ರಯತ್ನಿಸಿದೆವು. ಅದು ಹೊಸ ಸಮಸ್ಯೆಯನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ: ಮರ್ಜ್ ಕಾನ್ಫ್ಲಿಕ್ಟ್ಸ್ (merge conflicts). ಹದಿನಾಲ್ಕು ತಂಡಗಳು ಪ್ರತಿ ಡಿಪ್ಲಾಯ್ ಸಮಯದಲ್ಲಿ ಒಂದೇ JSON ಫೈಲ್ಗೆ ಬರೆಯಲು ಪ್ರಯತ್ನಿಸಿದರೆ, ನಿಮ್ಮ CI ಪೈಪ್ಲೈನ್ ಗೊಂದಲಮಯವಾಗುತ್ತದೆ.
ಮತ್ತೊಂದು ಸಮಸ್ಯೆ ಡ್ರಿಫ್ಟ್ (drift). ಇದರ ಮಾದರಿ ಸರಳವಾಗಿದೆ: ನಿಮ್ಮ ಕಾನ್ಫಿಗರೇಶನ್ನಲ್ಲಿ React ಅನ್ನು ಎಕ್ಸ್ಟರ್ನಲ್ (external) ಎಂದು ಗುರುತಿಸಿ. ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ ಅದನ್ನು ಸರ್ವ್ ಮಾಡಲು ಬಿಡಿ. ಇದು ಡ್ಯುಪ್ಲಿಕೇಟ್ ಬಂಡಲ್ಗಳನ್ನು ತಡೆಯುತ್ತದೆ.
ಆದರೆ ನಂತರ ಯಾರಾದರೂ ತಮ್ಮ ಕೋಡ್ ಅನ್ನು ರಿಫ್ಯಾಕ್ಟರ್ (refactor) ಮಾಡುತ್ತಾರೆ. ಅವರು ಅಚಾನಕ್ಕಾಗಿ React ಅನ್ನು ಮತ್ತೆ ತಮ್ಮ MFE ಒಳಗೆ ಬಂಡಲ್ ಮಾಡುತ್ತಾರೆ. ಬಿಲ್ಡ್ ಯಶಸ್ವಿಯಾಗುತ್ತದೆ. ಟೆಸ್ಟ್ಗಳು ಪಾಸಾಗುತ್ತವೆ. ಡಿಪ್ಲಾಯ್ ಕೂಡ ಯಶಸ್ವಿಯಾಗುತ್ತದೆ (green).
ನೀವು ಇದನ್ನು ಈ ಕೆಳಗಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ ಮಾತ್ರ ಗಮನಿಸಬಹುದು:
- ಬಂಡಲ್ ಗಾತ್ರವು (Bundle size) ಅತಿಯಾಗಿ ಹೆಚ್ಚಾದಾಗ.
- ವರ್ಷನ್ ಮಿಸ್ಮ್ಯಾಚ್ (version mismatch) ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಹಾಳುಮಾಡಿದಾಗ.
- Chrome DevTools ನಲ್ಲಿ React ಎರಡು ಬಾರಿ ಲೋಡ್ ಆಗುತ್ತಿರುವುದನ್ನು ನೀವು ನೋಡಿದಾಗ.
ನಾವು ನಮ್ಮ ಸಿಸ್ಟಮ್ ಅನ್ನು ಆಡಿಟ್ ಮಾಡಿದೆವು ಮತ್ತು ಎರಡು MFEಗಳು ತಮ್ಮದೇ ಆದ React ಅನ್ನು ಕಳುಹಿಸುತ್ತಿರುವುದನ್ನು ಕಂಡುಕೊಂಡೆವು. ಅವುಗಳ ಬಿಲ್ಡ್ಗಳು ಯಶಸ್ವಿಯಾಗಿದ್ದವು. ಅವು ನಿಯಮಬದ್ಧವಾಗಿಲ್ಲ (out of compliance) ಎಂಬ ಅರಿವು ಅವುಗಳಿಗೆ ಇರಲಿಲ್ಲ.
ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ ಮತ್ತು ನಿಮ್ಮ package.json ಫೈಲ್ಗಳು ಎರಡು ಪ್ರತ್ಯೇಕ ಇನ್ಪುಟ್ಗಳು. ಅವು ನಿಧಾನವಾಗಿ ಪರಸ್ಪರ ಹೊಂದಾಣಿಕೆಯಿಲ್ಲದಂತೆ ಬದಲಾಗುತ್ತವೆ.
CI ಚೆಕ್ ಡ್ಯುಪ್ಲಿಕೇಟ್ ಬಂಡಲ್ಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಬಲ್ಲದು. ಆದರೆ ಅದು ವರ್ಷನ್ ಮಿಸ್ಮ್ಯಾಚ್ಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲಾರದು. ಒಂದು ವೇಳೆ MFE A, React 18.2 ಅನ್ನು ಮತ್ತು MFE B, 18.3 ಅನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ, ಬಿಲ್ಡ್ ಫೇಲ್ ಆಗುವುದಿಲ್ಲ. ಆದರೆ ನಿಮ್ಮ ಶೇರ್ಡ್ ಕಾಂಪೊನೆಂಟ್ಗಳು ರನ್ಟೈಮ್ನಲ್ಲಿ (runtime) ಕೆಲಸ ಮಾಡದೆ ಹೋಗುತ್ತವೆ.
ನಾವು React ಅನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡಬೇಕಾದಾಗ, ಹದಿನಾಲ್ಕು ವಿಭಿನ್ನ ರೆಪೊಸಿಟರಿಗಳಲ್ಲಿ (repositories) ಹುಡುಕಲು ಗಂಟೆಗಟ್ಟಲೆ ಸಮಯ ವ್ಯಯಿಸುತ್ತೇವೆ. ಇದು ಅಸಮರ್ಥವಾಗಿದೆ.
ಇದನ್ನು ಸರಿಪಡಿಸಲು ನಾವು ಒಂದು ಸಾಧನವನ್ನು ನಿರ್ಮಿಸಿದ್ದೇವೆ. ಇದು ಎರಡು ಕೆಲಸಗಳನ್ನು ಮಾಡುತ್ತದೆ:
- ಇದು ಪ್ರತಿಯೊಂದು MFE ನ
package.jsonನಿಂದ ವರ್ಷನ್ ಮ್ಯಾಟ್ರಿಕ್ಸ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ. - ಇದು ಆ ಮ್ಯಾಟ್ರಿಕ್ಸ್ ಅನ್ನು ನಿಮ್ಮ ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ ಜೊತೆಗೆ ಹೋಲಿಸುತ್ತದೆ.
ಈ ಸಾಧನವು ನಿಮಗೆ ಅಂತರವನ್ನು ತೋರಿಸುತ್ತದೆ. ಯಾವ ತಂಡಗಳು ನಿಯಮ ಪಾಲನೆ ಮಾಡುತ್ತಿವೆ ಮತ್ತು ಯಾವ ತಂಡಗಳು ದಾರಿ ತಪ್ಪಿವೆ ಎಂಬುದನ್ನು ಇದು ತೋರಿಸುತ್ತದೆ. ಇದು ಹಳೆಯದಾದ ಎಂಟ್ರಿಗಳನ್ನು ಮತ್ತು ಕೆಟ್ಟುಹೋದ URL ಗಳನ್ನು ಸಹ ಪತ್ತೆಹಚ್ಚುತ್ತದೆ. ನಾವು ಇದನ್ನು ಪ್ರತಿ ಸೋಮವಾರ ಬೆಳಿಗ್ಗೆ ರನ್ ಮಾಡುತ್ತೇವೆ. ಇದಕ್ಕೆ ಕೇವಲ 12 ಸೆಕೆಂಡುಗಳು ಬೇಕಾಗುತ್ತದೆ.
ನಮ್ಮ ಪಾಠವು ತಾಂತ್ರಿಕವಾಗಿರಲಿಲ್ಲ. ಪ್ರತಿಯೊಂದು ವಿತರಿಸಿದ ಆರ್ಕಿಟೆಕ್ಚರ್ಗೆ (distributed architecture) ಹಂಚಿಕೆಯ ಮೂಲಸೌಕರ್ಯಕ್ಕಾಗಿ (shared infrastructure) ಒಬ್ಬ ಮಾಲೀಕನ ಅಗತ್ಯವಿರುತ್ತದೆ. SingleSPA ನಲ್ಲಿ, ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ ಎಂಬುದು ಮೂಲಸೌಕರ್ಯವಾಗಿದೆ. ಇದನ್ನು ಕೇವಲ ಒಂದು ಹಂಚಿಕೆಯ ಫೈಲ್ನಂತೆ ಪರಿಗಣಿಸಬೇಡಿ. ಇದನ್ನು ನಿರ್ವಹಿಸಲ್ಪಡುವ ಆಸ್ತಿಯಂತೆ (managed asset) ಪರಿಗಣಿಸಿ.
ನೀವು ಇದನ್ನು ಹೇಗೆ ನಿಭಾಯಿಸುತ್ತೀರಿ? ನಿಮ್ಮಲ್ಲಿ ಇಂಪೋರ್ಟ್ ಮ್ಯಾಪ್ ಮಾಲೀಕರಿರುತ್ತಾರೆಯೇ? ಅಥವಾ ನೀವು ನಿಮ್ಮ ಸೋಮವಾರದ ಬೆಳಿಗ್ಗೆಗಳನ್ನು ಫೈಲ್ಗಳನ್ನು ಗ್ರೆಪ್ (grepping) ಮಾಡುವುದರಲ್ಲಿ ಕಳೆಯುತ್ತೀರಾ?
ಮೂಲ: https://dev.to/siongsheng/singlespa-works-import-maps-dont-manage-themselves-4jbe