SingleSPA పనిచేస్తుంది. Import Maps వాటిని స్వయంగా నిర్వహించలేవు
SingleSPA పనిచేస్తుంది. మేము ఒకే పేజీలో React, Vue, మరియు Angular యాప్లను నడుపుతాము. అవి స్వతంత్రంగా లోడ్ అవుతాయి. ఈ ఫ్రేమ్వర్క్ అద్భుతంగా పనిచేస్తుంది.
సమస్య ఫ్రేమ్వర్క్లో లేదు. సమస్య దాని చుట్టూ ఉన్న ఎకోసిస్టమ్లో ఉంది.
డిస్ట్రిబ్యూటెడ్ ఆర్కిటెక్చర్లో, మీకు ఓనర్షిప్ (ownership) అవసరం. మీకు ఆడిటింగ్ అవసరం. మీకు గవర్నెన్స్ (governance) అవసరం. SingleSPA ఈ అవసరాలను స్పష్టంగా చూపిస్తుంది, ఎందుకంటే import map అనేది కోఆర్డినేషన్ కోసం ఒక కేంద్ర బిందువు.
Import map మీ root configలో ఉంటుంది. ఇది ఒక JSON ఫైల్. ప్రతి micro frontend (MFE) ఏ వెర్షన్ Reactను లోడ్ చేయాలో ఇది చెబుతుంది. సిద్ధాంతపరంగా, ఇది 'source of truth'. కానీ ఆచరణలో, దీనికి ఎవరూ బాధ్యత వహించరు.
ప్రతి టీమ్ తమ స్వంత MFEని నిర్వహిస్తుంది. కానీ మ్యాప్ను ఎవరూ నిర్వహించరు.
ఇది ఈ క్రింది సమస్యలను సృష్టిస్తుంది:
- టీమ్లు ఒక MFEని నిలిపివేసినా (retire), ఆ ఎంట్రీ మ్యాప్లో అలాగే ఉండిపోతుంది.
- కొత్త డిపెండెన్సీలు (dependencies) వస్తాయి, కానీ ఎవరూ వాటిని మ్యాప్లో చేర్చరు.
- మీరు దానిని పట్టించుకోకపోతే, మ్యాప్ కాలక్రమేణా పనికిరాకుండా పోతుంది (rots).
మా మ్యాప్లో ఎనిమిది నెలలుగా డిప్లాయ్ చేయని ఒక MFEని మేము గుర్తించాము. అది పని చేయకపోయినా (dead), ప్రొడక్షన్లో అది ఇంకా లోడ్ అవుతూనే ఉంది. ఎవరూ గమనించకపోవడం వల్ల అది ఎవరికీ తెలియలేదు.
బిల్డ్ సమయంలో మ్యాప్ను ఆటో-జనరేట్ చేయడం గురించి మీరు ఆలోచించవచ్చు. మేము దానిని ప్రయత్నించాము. అది ఒక కొత్త సమస్యను సృష్టిస్తుంది: merge conflicts. ప్రతి డిప్లాయ్మెంట్ సమయంలో పద్నాలుగు టీమ్లు ఒకే JSON ఫైల్లో రాయడానికి ప్రయత్నిస్తే, మీ CI పైప్లైన్ గందరగోళంగా మారుతుంది.
మరొక సమస్య 'drift'. దీని పద్ధతి సరళమైనది: మీ కాన్ఫిగరేషన్లో Reactను ఒక 'external'గా గుర్తించండి. దానిని import map ద్వారానే లోడ్ చేయనివ్వండి. ఇది డూప్లికేట్ బండిల్స్ (duplicate bundles) రాకుండా నిరోధిస్తుంది.
కానీ అప్పుడు ఎవరైనా తమ కోడ్ను రీఫ్యాక్టర్ (refactor) చేస్తారు. వారు పొరపాటున Reactను మళ్ళీ తమ MFEలోకి బండిల్ చేస్తారు. బిల్డ్ సక్సెస్ అవుతుంది. టెస్ట్లు పాస్ అవుతాయి. డిప్లాయ్మెంట్ కూడా గ్రీన్ (green) గానే కనిపిస్తుంది.
మీరు వీటిని గమనించగలరు:
- బండిల్ సైజులు అకస్మాత్తుగా పెరిగినప్పుడు.
- వెర్షన్ మిస్మ్యాచ్ (version mismatch) వల్ల ఏదైనా కాంపోనెంట్ విఫలమైనప్పుడు.
- Chrome DevToolsలో React రెండుసార్లు లోడ్ అవుతున్నట్లు కనిపించినప్పుడు.
మేము మా సిస్టమ్ను ఆడిట్ చేసినప్పుడు, రెండు MFEs తమ స్వంత Reactను పంపిస్తున్నట్లు గుర్తించాము. వాటి బిల్డ్లు గ్రీన్ గానే ఉన్నాయి. అవి నిబంధనలకు విరుద్ధంగా (out of compliance) ఉన్నాయని వాటికి తెలియదు.
Import map మరియు మీ package.json ఫైల్లు రెండు వేర్వేరు ఇన్పుట్లు. అవి నిశ్శబ్దంగా ఒకదానికొకటి సంబంధం లేకుండా మారిపోతాయి (drift apart).
ఒక CI చెక్ డూప్లికేట్ బండిల్స్ను గుర్తించగలదు. కానీ వెర్షన్ మిస్మ్యాచ్లను గుర్తించలేదు. ఒకవేళ MFE A, React 18.2ని మరియు MFE B, 18.3ని ఉపయోగిస్తే, బిల్డ్ ఫెయిల్ అవ్వదు. కానీ రన్టైమ్లో (runtime) మీ షేర్డ్ కాంపోనెంట్స్ విఫలమవుతాయి.
మేము Reactను అప్డేట్ చేయాల్సి వచ్చినప్పుడు, పద్నాలుగు వేర్వేరు రిపోజిటరీలలో గంటల తరబడి వెతకాల్సి (grepping) వస్తుంది. ఇది చాలా అసమర్థమైన పద్ధతి.
దీనిని పరిష్కరించడానికి మేము ఒక సాధనాన్ని రూపొందించాము. ఇది రెండు పనులు చేస్తుంది:
- ఇది ప్రతి MFE యొక్క package.json నుండి ఒక వెర్షన్ మ్యాట్రిక్స్ను రూపొందిస్తుంది.
- ఇది ఆ మ్యాట్రిక్స్ను మీ import map తో పోల్చి చూస్తుంది.
ఈ సాధనం మధ్య ఉన్న వ్యత్యాసాన్ని మీకు చూపుతుంది. ఏ బృందాలు నిబంధనలకు అనుగుణంగా ఉన్నాయి మరియు ఏ బృందాలు వాటి నుండి విచలనం చెందుతున్నాయి (drifted) అనేది ఇది చూపిస్తుంది. ఇది పాతబడిన ఎంట్రీలను మరియు పనిచేయని URLలను కూడా గుర్తిస్తుంది. మేము దీనిని ప్రతి సోమవారం ఉదయం రన్ చేస్తాము. దీనికి కేవలం 12 సెకన్లు పడుతుంది.
మేము నేర్చుకున్న పాఠం సాంకేతికమైనది కాదు. ప్రతి డిస్ట్రిబ్యూటెడ్ ఆర్కిటెక్చర్కు షేర్డ్ ఇన్ఫ్రాస్ట్రక్చర్ కోసం ఒక యజమాని అవసరం. SingleSPAలో, import map అనేది ఇన్ఫ్రాస్ట్రక్చర్. దానిని ఒక షేర్డ్ ఫైల్లా చూడకండి. దానిని ఒక నిర్వహించబడే ఆస్తిలా (managed asset) పరిగణించండి.
మీరు దీనిని ఎలా నిర్వహిస్తారు? మీకు import map యజమాని ఉన్నారా? లేదా మీ సోమవారం ఉదయాన్నంతా ఫైళ్లను grep చేస్తూనే గడుపుతున్నారా?
మూలం: https://dev.to/siongsheng/singlespa-works-import-maps-dont-manage-themselves-4jbe