એક ફ્રન્ટએન્ડ ટીમે ટાઇપ-સેફ (type-safe) API-mocking લેયર રજૂ કર્યું છે જે ફક્ત ડેવલપમેન્ટમાં જ રહે છે. Axios interceptors અને Vite ના tree-shaking નો ઉપયોગ કરીને, પ્રોડક્શન બંડલ અસ્પૃશ્ય રહે છે. એન્જિનિયરો બેકએન્ડ એન્ડપોઇન્ટ્સની રાહ જોતી વખતે તેમના સામાન્ય પેટર્ન સાથે ડેટા ફેચ કરે છે, અને પછી વાસ્તવિક API નો ઉપયોગ કરવા માટે ફક્ત એક એન્વાયરમેન્ટ ફ્લેગ બદલે છે.

ટીમને મોકિંગ માટે વધુ સારી રીતની જરૂર કેમ પડી

જ્યારે બેકએન્ડ રૂટ અધૂરું હોય ત્યારે ફ્રન્ટએન્ડ ડેવલપર્સ મુશ્કેલીમાં મુકાય છે. ઝડપી ઉકેલ—કોમ્પોનન્ટની અંદર રિસ્પોન્સ હાર્ડ-કોડ કરવો અથવા UI માં ઠેર ઠેર if (process.env.NODE_ENV === 'development') બ્લોક્સ ઉમેરવા—એપને ચાલુ રાખે છે પરંતુ ટેકનિકલ ડેબ્ટ (technical debt) છોડી જાય છે. તે મોક ઓબ્જેક્ટ્સ કોમ્પોનન્ટના લોજિકનો ભાગ બની જાય છે, પ્રોડક્શનમાં ફેક ડેટા મોકલવાનું જોખમ વધારે છે, અને કોડને વાંચવામાં અને ટેસ્ટ કરવામાં મુશ્કેલ બનાવે છે.

ટીમ દરેક મોકને કોમ્પોનન્ટ ટ્રીમાંથી બહાર કાઢવા, ફ્રન્ટ અને બેક એન્ડ વચ્ચે કરાર (contract) લાગુ કરવા અને પ્રોડક્શન બિલ્ડમાં કંઈપણ વધારાનું ન જાય તેની ખાતરી કરવા માંગતી હતી.

ટીમ દ્વારા અનુસરવામાં આવતી ત્રણ-પગલાંની પ્રક્રિયા

  1. Contract meeting – ફ્રન્ટએન્ડ અને બેકએન્ડ એન્જિનિયરો સાથે બેસે છે અને દરેક રિક્વેસ્ટ, તેનું URL, મેથડ અને અપેક્ષિત પેલોડ (payload) ની યાદી બનાવે છે.
  2. Typed contract – તેઓ આ યાદીને TypeScript interface માં ફેરવે છે જે રિક્વેસ્ટ અને રિસ્પોન્સના આકાર માટે સિંગલ સોર્સ ઓફ ટ્રુથ (single source of truth) બને છે.
  3. Interceptor wiring – એક Axios interceptor દરેક બહાર જતી રિક્વેસ્ટની તપાસ કરે છે. જો URL રજિસ્ટર્ડ મોક સાથે મેચ થાય છે, તો interceptor મોક ડેટા રિટર્ન કરે છે; અન્યથા રિક્વેસ્ટ લાઈવ સર્વર પર જાય છે.

કારણ કે interceptor એ એકમાત્ર જગ્યા છે જ્યાં મોક લોજિક રહે છે, કોમ્પોનન્ટ કોડ અપરિવર્તિત રહે છે. ડેવલપર્સ કોઈપણ કન્ડિશનલ લોજિક ઉમેર્યા વિના તેમના સામાન્ય ડેટા-ફેચિંગ હૂક્સ—જેમ કે useQuery—નો ઉપયોગ કરવાનું ચાલુ રાખે છે.

પ્રોડક્શન બ્લોટ (production bloat) કેવી રીતે ટાળવામાં આવે છે

ટીમે ત્રણ સુરક્ષા કવચ (safeguards) બનાવ્યા છે જે Rollup (Vite દ્વારા ઉપયોગમાં લેવાતું બંડલર) ને પ્રોડક્શન માટે બિલ્ડ કરતી વખતે મોક કોડને સંપૂર્ણપણે દૂર કરવા દે છે:

  • import.meta.env.DEV પ્રોડક્શન બિલ્ડમાં false તરીકે રિઝોલ્વ થાય છે, તેથી tree-shaking દરમિયાન આખો interceptor મોડ્યુલ ગાયબ થઈ જાય છે.
  • યુનિટ ટેસ્ટ ચલાવતી વખતે MODE વેરિએબલ test સિવાયના અન્ય કંઈક પર સેટ કરવામાં આવે છે, જેથી ટેસ્ટ-ઓન્લી કોડ અલગ રહે છે.
  • એક કસ્ટમ ફ્લેગ, VITE_ENABLE_MSW, ડિફોલ્ટ રીતે false હોય છે અને મોક એક્ટિવેશન માટે તેને સ્પષ્ટપણે ચાલુ કરવો પડે છે.

જ્યારે ત્રણેય શરતો false હોય, ત્યારે મોક રજિસ્ટ્રી ક્યારેય ફાઈનલ બંડલમાં પહોંચતી નથી.

મોક ફાઇલોનું આયોજન

રેપો (repo) ફીચર-સેન્ટ્રિક લેઆઉટ અનુસરે છે:

  • interfaces/ – કોન્ટ્રાક્ટ મીટિંગમાંથી જનરેટ થયેલ TypeScript વ્યાખ્યાઓ ધરાવે છે.
  • scenarios.ts – દરેક એન્ડપોઇન્ટ માટે સફળ રિસ્પોન્સ અને એરર કેસના ચોક્કસ ઉદાહરણો ધરાવે છે.
  • devHandlers.ts – કેન્દ્રીય રજિસ્ટ્રી તરીકે કામ કરે છે જે URL ને સિનારિયો ડેટા સાથે મેપ કરે છે અને Axios માં interceptor ને પ્લગ કરે છે.

એક નાની સ્કેફોલ્ડિંગ સ્ક્રિપ્ટ આ ફાઇલો આપમેળે જનરેટ કરી શકે છે: તેને URL અને મેચિંગ ઇન્ટરફેસ આપો, અને તે સ્ટબ ફાઇલો બનાવે છે અને મોકને રજિસ્ટર કરે છે. સ્ક્રિપ્ટ પ્રોડક્શન કોડ પાથની બહાર રહે છે, તેથી તે બંડલ સાઈઝ પર અસર કરતી નથી.

ટીમને શું ફાયદો થયો

  • કોમ્પોનન્ટ્સની અંદર ઝીરો મોક્સ – બધો જ ફેક ડેટા એક સમર્પિત લેયરમાં રહે છે, જેનાથી UI કોડ ક્લીન રહે છે.
  • એન્ડ-ટુ-એન્ડ ટાઇપ સેફ્ટી – મોક ડેટા વાસ્તવિક રિસ્પોન્સ દ્વારા ઉપયોગમાં લેવાતા સમાન TypeScript interfaces મુજબ હોય છે, જેથી મિસમેચ કમ્પાઈલ ટાઈમમાં જ પકડાઈ જાય છે.
  • પ્રોડક્શનમાં કોઈ વધારાનું વજન નહીં – Tree-shaking ઇન્ટરસેપ્ટર અને મોક ડેટાને સંપૂર્ણપણે દૂર કરે છે, જેનાથી બંડલ સાઈઝ અપરિવર્તિત રહે છે.
  • ડેવ અને ટેસ્ટ માટે શેર કરેલા સિનારિયો – સમાન મોક વ્યાખ્યાઓ લોકલ ડેવલપમેન્ટ અને ઓટોમેટેડ ટેસ્ટ બંનેને ચલાવે છે, જેનાથી ડુપ્લીકેશન ઘટે છે.

ટ્રેડ-ઓફ્સ (trade-offs) અને મર્યાદાઓ

આ અભિગમ વાસ્તવિક બેકએન્ડનું સ્થાન લેતું નથી. જો મોક કોન્ટ્રાક્ટ લાઈવ API થી અલગ પડે છે, તો ડેવલપર્સને એન્વાયરમેન્ટ ફ્લેગ બદલ્યા પછી જ મિસમેચની જાણ થાય છે.

આગળ શું જોવું

  • ટૂલિંગ ઇન્ટિગ્રેશન –
  • વ્યાપક સ્વીકૃતિ –
  • પરફોર્મન્સ મોનિટરિંગ –

નિષ્કર્ષ સ્પષ્ટ છે: મોક લોજિકને ટાઇપ્ડ, એન્વાયરમેન્ટ-ગેટ્ડ લેયરમાં ખસેડવાથી ફ્રન્ટએન્ડ ટીમો કોમ્પોનન્ટ્સને શુદ્ધ રાખી શકે છે, ટાઇપ-સેફ રહી શકે છે, અને છુપાયેલા મોક પેલોડ વગર પ્રોડક્શન બિલ્ડ્સ મોકલી શકે છે. સ્મૂધ ડેવલપમેન્ટ વર્કફ્લો અને ક્લીન કોડબેઝ માટે શેર કરેલા કોન્ટ્રાકટને જાળવી રાખવો એ જરૂરી છે.