ఒక ఫ్రంటెండ్ టీమ్ కేవలం డెవలప్మెంట్లో మాత్రమే ఉండే టైప్-సేఫ్ API-మాకింగ్ లేయర్ను (type-safe API-mocking layer) ప్రవేశపెట్టింది. Axios interceptors మరియు Vite యొక్క tree-shaking ఉపయోగించడం వల్ల, ప్రొడక్షన్ బండిల్ (production bundle) ప్రభావితం కాదు. ఇంజనీర్లు బ్యాకెండ్ ఎండ్పాయింట్ల కోసం వేచి ఉన్నప్పుడు, తమ సాధారణ పద్ధతుల్లోనే డేటాను ఫెచ్ (fetch) చేయవచ్చు, ఆపై కేవలం ఒక ఎన్విరాన్మెంట్ ఫ్లాగ్ను మార్చడం ద్వారా రియల్ APIని ఉపయోగించవచ్చు.
మాకింగ్ కోసం టీమ్కు మెరుగైన మార్గం ఎందుకు అవసరమైంది
బ్యాకెండ్ రూట్ ఇంకా పూర్తి కానప్పుడు ఫ్రంటెండ్ డెవలపర్లు ఇబ్బందులు ఎదుర్కొంటారు. ఒక కాంపోనెంట్ లోపలే రెస్పాన్స్ను హార్డ్-కోడ్ చేయడం లేదా UI అంతటా if (process.env.NODE_ENV === 'development') బ్లాక్లను వాడటం వంటి తక్షణ పరిష్కారాలు యాప్ను ముందుకు నడిపించినప్పటికీ, అవి టెక్నికల్ డెట్ (technical debt) ను సృష్టిస్తాయి. ఆ మాక్ ఆబ్జెక్ట్లు కాంపోనెంట్ లాజిక్లో భాగంగా మారిపోతాయి, దీనివల్ల ప్రొడక్షన్కు తప్పుడు డేటా వెళ్లే ప్రమాదం పెరుగుతుంది మరియు కోడ్ను చదవడం, టెస్ట్ చేయడం కష్టమవుతుంది.
టీమ్ ప్రతి మాక్ను కాంపోనెంట్ ట్రీ నుండి బయటకు తీయాలని, ఫ్రంట్ మరియు బ్యాక్ ఎండ్ల మధ్య ఒక కాంట్రాక్ట్ను అమలు చేయాలని మరియు ప్రొడక్షన్ బిల్డ్లో ఎటువంటి అదనపు కోడ్ చేరకుండా చూడాలని అనుకుంది.
టీమ్ అనుసరించే మూడు-అడుగుల ప్రక్రియ
- కాంట్రాక్ట్ మీటింగ్ – ఫ్రంటెండ్ మరియు బ్యాకెండ్ ఇంజనీర్లు కలిసి ప్రతి రిక్వెస్ట్, దాని URL, మెథడ్ మరియు ఆశించిన పేలోడ్ (payload) జాబితాను తయారు చేస్తారు.
- టైప్డ్ కాంట్రాక్ట్ – వారు ఆ జాబితాను ఒక TypeScript ఇంటర్ఫేస్గా మారుస్తారు, ఇది రిక్వెస్ట్ మరియు రెస్పాన్స్ రూపాలకు (shapes) ఏకైక ఆధారంగా (single source of truth) మారుతుంది.
- ఇంటర్సెప్టర్ వైరింగ్ – ఒక Axios ఇంటర్సెప్టర్ ప్రతి అవుట్గోయింగ్ రిక్వెస్ట్ను పరిశీలిస్తుంది. URL రిజిస్టర్ చేయబడిన మాక్తో సరిపోలితే, ఇంటర్సెప్టర్ మాక్ డేటాను తిరిగి ఇస్తుంది; లేకపోతే రిక్వెస్ట్ లైవ్ సర్వర్కు వెళ్తుంది.
ఇంటర్సెప్టర్ అనేది మాక్ లాజిక్ ఉండే ఏకైక ప్రదేశం కాబట్టి, కాంపోనెంట్ కోడ్ మారదు. డెవలపర్లు ఎటువంటి కండిషనల్ లాజిక్ జోడించకుండానే useQuery వంటి తమ సాధారణ డేటా-ఫెచింగ్ హుక్స్ను ఉపయోగించవచ్చు.
ప్రొడక్షన్ బ్లోట్ (production bloat) ఎలా నివారించబడుతుంది
ప్రొడక్షన్ కోసం బిల్డ్ చేసేటప్పుడు మాక్ కోడ్ను పూర్తిగా తొలగించడానికి టీమ్ మూడు రక్షణ చర్యలను (safeguards) ఏర్పాటు చేసింది:
- ప్రొడక్షన్ బిల్డ్లో
import.meta.env.DEVఅనేదిfalseగా మారుతుంది, కాబట్టి tree-shaking సమయంలో మొత్తం ఇంటర్సెప్టర్ మాడ్యూల్ తొలగించబడుతుంది. - యూనిట్ టెస్ట్లు రన్ చేస్తున్నప్పుడు
MODEవేరియబుల్testకాకుండా వేరే విధంగా సెట్ చేయబడుతుంది, తద్వారా టెస్ట్-ఓన్లీ కోడ్ విడిగా ఉంటుంది. VITE_ENABLE_MSWఅనే కస్టమ్ ఫ్లాగ్ డిఫాల్ట్గాfalseలో ఉంటుంది మరియు మాక్ యాక్టివేషన్ కోసం దీనిని స్పష్టంగా ఆన్ చేయాలి.
ఈ మూడు షరతులు false అయినప్పుడు, మాక్ రిజిస్ట్రీ ఫైనల్ బండిల్లోకి రాదు.
మాక్ ఫైళ్లను నిర్వహించడం
ఈ రిపోజిటరీ ఫీచర్-సెంట్రిక్ లేఅవుట్ను అనుసరిస్తుంది:
interfaces/– కాంట్రాక్ట్ మీటింగ్ నుండి రూపొందించబడిన TypeScript నిర్వచనాలను (definitions) కలిగి ఉంటుంది.scenarios.ts– ప్రతి ఎండ్పాయింట్ కోసం విజయవంతమైన రెస్పాన్స్లు మరియు ఎర్రర్ కేసుల యొక్క స్పష్టమైన ఉదాహరణలను కలిగి ఉంటుంది.devHandlers.ts– URLలను సినారియో డేటాతో మ్యాప్ చేసే మరియు ఇంటర్సెప్టర్ను Axiosకి అనుసంధానించే సెంట్రల్ రిజిస్ట్రీగా పనిచేస్తుంది.
ఒక చిన్న స్క్యాఫోల్డింగ్ స్క్రిప్ట్ (scaffolding script) ఈ ఫైళ్లను ఆటోమేటిక్గా రూపొందించగలదు: దానికి ఒక URL మరియు సరిపోయే ఇంటర్ఫేస్ను ఇస్తే, అది స్టబ్ ఫైళ్లను సృష్టించి మాక్ను రిజిస్టర్ చేస్తుంది. ఈ స్క్రిప్ట్ ప్రొడక్షన్ కోడ్ పాత్ వెలుపల ఉంటుంది, కాబట్టి ఇది బండిల్ సైజుపై ప్రభావం చూపదు.
టీమ్ ఏమి సాధించింది
- కాంపోనెంట్లలో సున్నా మాక్స్ – అన్ని ఫేక్ డేటాలు ఒక ప్రత్యేక లేయర్లో ఉంటాయి, దీనివల్ల UI కోడ్ క్లీన్గా ఉంటుంది.
- ఎండ్-టు-ఎండ్ టైప్ సేఫ్టీ – మాక్ డేటా రియల్ రెస్పాన్స్ల కోసం ఉపయోగించే అదే TypeScript ఇంటర్ఫేస్లకు అనుగుణంగా ఉంటుంది, కాబట్టి mismatches లు కంపైల్ టైమ్లోనే గుర్తించబడతాయి.
- ప్రొడక్షన్ బరువు ఉండదు – Tree-shaking ఇంటర్సెప్టర్ మరియు మాక్ డేటాను పూర్తిగా తొలగిస్తుంది, దీనివల్ల బండిల్ సైజు మారదు.
- డెవ్ మరియు టెస్ట్ కోసం షేర్డ్ సినారియోలు – ఒకే మాక్ నిర్వచనాలు లోకల్ డెవలప్మెంట్ మరియు ఆటోమేటెడ్ టెస్ట్లు రెండింటినీ నడిపిస్తాయి, దీనివల్ల డూప్లికేషన్ తగ్గుతుంది.
లాభనష్టాలు మరియు పరిమితులు
ఈ విధానం రియల్ బ్యాకెండ్కు ప్రత్యామ్నాయం కాదు. మాక్ కాంట్రాక్ట్ లైవ్ API నుండి భిన్నంగా ఉంటే, డెవలపర్లు ఎన్విరాన్మెంట్ ఫ్లాగ్ను మార్చిన తర్వాత మాత్రమే ఆ తేడాను గుర్తిస్తారు.
తదుపరి గమనించవలసినవి
- Tooling integration –
- Broader adoption –
- Performance monitoring –
దీని ద్వారా తేలింది ఏమిటంటే: మాక్ లాజిక్ను టైప్డ్, ఎన్విరాన్మెంట్-గేటెడ్ లేయర్లోకి మార్చడం వల్ల ఫ్రంటెండ్ టీమ్లు కాంపోనెంట్లను స్వచ్ఛంగా ఉంచుకోవచ్చు, టైప్-సేఫ్టీని పాటించవచ్చు మరియు దాగి ఉన్న మాక్ పేలోడ్లు లేకుండా ప్రొడక్షన్ బిల్డ్లను పంపవచ్చు. సులభమైన డెవలప్మెంట్ వర్క్ఫ్లో మరియు క్లీన్ కోడ్బేస్ కోసం షేర్డ్ కాంట్రాక్ట్ను నిర్వహించడం అనేది చెల్లించాల్సిన ధర.