একটি ফ্রন্টএন্ড টিম একটি টাইপ-সেফ API-মকিং লেয়ার চালু করেছে যা শুধুমাত্র ডেভেলপমেন্টের সময় কাজ করে। Axios interceptors এবং Vite-এর tree-shaking ব্যবহার করার ফলে, প্রোডাকশন বান্ডেল সম্পূর্ণ অপরিবর্তিত থাকে। ইঞ্জিনিয়াররা ব্যাকএন্ড এন্ডপয়েন্টের জন্য অপেক্ষা করার সময় তাদের সাধারণ প্যাটার্ন ব্যবহার করেই ডেটা ফেচ করতে পারেন, এবং পরে শুধুমাত্র একটি এনভায়রনমেন্ট ফ্ল্যাগ পরিবর্তন করে আসল API-তে হিট করতে পারেন।
কেন টিমের মকিং করার জন্য আরও উন্নত পদ্ধতির প্রয়োজন ছিল
যখন কোনো ব্যাকএন্ড রুট অসম্পূর্ণ থাকে, তখন ফ্রন্টএন্ড ডেভেলপাররা বাধার সম্মুখীন হন। দ্রুত সমাধানের জন্য কোনো কম্পোনেন্টের ভেতরে রেসপন্স হার্ড-কোড করা বা পুরো UI-তে if (process.env.NODE_ENV === 'development') ব্লকগুলো ছড়িয়ে দেওয়া—এতে অ্যাপের কাজ চললেও টেকনিক্যাল ডেট (technical debt) তৈরি হয়। সেই মক অবজেক্টগুলো কম্পোনেন্টের লজিকের অংশ হয়ে যায়, প্রোডাকশনে ভুল বা ফেক ডেটা পাঠানোর ঝুঁকি বাড়ায় এবং কোড পড়া ও টেস্ট করা কঠিন করে তোলে।
টিম চেয়েছিল প্রতিটি মককে কম্পোনেন্ট ট্রি থেকে বের করে আনতে, ফ্রন্টএন্ড এবং ব্যাকএন্ডের মধ্যে একটি কন্ট্রাক্ট (contract) নিশ্চিত করতে এবং প্রোডাকশন বিল্ডে যেন কোনো বাড়তি কিছু না যায় তা নিশ্চিত করতে।
টিম যে তিন-ধাপের প্রক্রিয়া অনুসরণ করে
- কন্ট্রাক্ট মিটিং – ফ্রন্টএন্ড এবং ব্যাকএন্ড ইঞ্জিনিয়াররা বসে প্রতিটি রিকোয়েস্ট, এর URL, মেথড এবং প্রত্যাশিত পেলোড (payload) তালিকাভুক্ত করেন।
- টাইপড কন্ট্রাক্ট – তারা সেই তালিকাটিকে একটি TypeScript ইন্টারফেসে রূপান্তর করেন যা রিকোয়েস্ট এবং রেসপন্সের শেপ বা কাঠামোর জন্য একমাত্র সত্য উৎস (single source of truth) হিসেবে কাজ করে।
- ইন্টারসেপ্টর ওয়্যারিং – একটি Axios interceptor প্রতিটি আউটগোয়িং রিকোয়েস্ট পরীক্ষা করে। যদি URL-টি একটি নিবন্ধিত মকের সাথে মিলে যায়, তবে ইন্টারসেপ্টরটি মক ডেটা রিটার্ন করে; অন্যথায় রিকোয়েস্টটি লাইভ সার্ভারে চলে যায়।
যেহেতু ইন্টারসেপ্টরই একমাত্র জায়গা যেখানে মকিং লজিক থাকে, তাই কম্পোনেন্ট কোড অপরিবর্তিত থাকে। ডেভেলপাররা কোনো কন্ডিশনাল লজিক যোগ না করেই তাদের সাধারণ ডেটা-ফেচিং হুক—যেমন useQuery—ব্যবহার চালিয়ে যেতে পারেন।
কীভাবে প্রোডাকশন ব্লট (bloat) এড়ানো হয়
টিম তিনটি সুরক্ষা স্তর ব্যবহার করেছে যা Rollup (Vite-এ ব্যবহৃত বান্ডলার) কে প্রোডাকশনের জন্য বিল্ড করার সময় মকিং কোডটি পুরোপুরি সরিয়ে ফেলতে সাহায্য করে:
- প্রোডাকশন বিল্ডে
import.meta.env.DEVএর মানfalseহিসেবে গণ্য হয়, ফলে tree-shaking-এর সময় পুরো ইন্টারসেপ্টর মডিউলটি মুছে যায়। - ইউনিট টেস্ট চালানোর সময়
MODEভেরিয়েবলটিtestছাড়া অন্য কিছু সেট করা থাকে, যা টেস্ট-অনলি কোডকে আলাদা রাখে। - একটি কাস্টম ফ্ল্যাগ,
VITE_ENABLE_MSW, ডিফল্টভাবেfalseথাকে এবং মকিং সক্রিয় করার জন্য এটি স্পষ্টভাবে অন করতে হয়।
যখন এই তিনটি শর্তই false থাকে, তখন মক রেজিস্ট্রি কখনোই চূড়ান্ত বান্ডলে পৌঁছায় না।
মকিং ফাইলগুলো সাজানো
রিপোজিটরিটি একটি ফিচার-কেন্দ্রিক লেআউট অনুসরণ করে:
interfaces/– কন্ট্রাক্ট মিটিং থেকে তৈরি করা TypeScript ডেফিনিশনগুলো এখানে থাকে।scenarios.ts– প্রতিটি এন্ডপয়েন্টের জন্য সফল রেসপন্স এবং এরর কেসের বাস্তব উদাহরণ ধারণ করে।devHandlers.ts– এটি একটি সেন্ট্রাল রেজিস্ট্রি হিসেবে কাজ করে যা URL-গুলোকে সিনারিও ডেটার সাথে ম্যাপ করে এবং Axios-এ ইন্টারসেপ্টরটি যুক্ত করে।
একটি ছোট স্কাফোল্ডিং স্ক্রিপ্ট স্বয়ংক্রিয়ভাবে এই ফাইলগুলো তৈরি করতে পারে: এটিকে একটি URL এবং একটি ম্যাচিং ইন্টারফেস দিলে এটি স্টাব ফাইল তৈরি করে এবং মকটি রেজিস্টার করে। স্ক্রিপ্টটি প্রোডাকশন কোড পাথের বাইরে থাকে, তাই এটি বান্ডেল সাইজের ওপর কোনো প্রভাব ফেলে না।
টিম কী অর্জন করল
- কম্পোনেন্টের ভেতরে কোনো মক নেই – সমস্ত ফেক ডেটা একটি ডেডিকেটেড লেয়ারে থাকে, যা UI কোডকে পরিচ্ছন্ন রাখে।
- এন্ড-টু-এন্ড টাইপ সেফটি – মক ডেটা আসল রেসপন্সের জন্য ব্যবহৃত TypeScript ইন্টারফেসের সাথে সামঞ্জস্যপূর্ণ থাকে, ফলে কোনো অমিল থাকলে তা কম্পাইল টাইমে ধরা পড়ে।
- প্রোডাকশনে কোনো বাড়তি ওজন নেই – Tree-shaking ইন্টারসেপ্টর এবং মক ডেটা পুরোপুরি সরিয়ে ফেলে, ফলে বান্ডেল সাইজ অপরিবর্তিত থাকে।
- ডেভ এবং টেস্টের জন্য শেয়ারড সিনারিও – একই মক ডেফিনিশন লোকাল ডেভেলপমেন্ট এবং অটোমেটেড টেস্ট—উভয় ক্ষেত্রেই ব্যবহৃত হয়, যা ডুপ্লিকেশন কমায়।
সীমাবদ্ধতা এবং আপস (trade-offs)
এই পদ্ধতিটি আসল ব্যাকএন্ডের বিকল্প নয়। যদি মক কন্ট্রাক্ট লাইভ API থেকে আলাদা হয়ে যায়, তবে ডেভেলপাররা এনভায়রনমেন্ট ফ্ল্যাগ পরিবর্তন করার পরেই সেই অমিলটি বুঝতে পারেন।
পরবর্তীতে যা লক্ষ্য রাখতে হবে
- টুলিং ইন্টিগ্রেশন –
- ব্যাপক গ্রহণ –
- পারফরম্যান্স মনিটরিং –
মূল বিষয়টি পরিষ্কার: মকিং লজিককে একটি টাইপড এবং এনভায়রনমেন্ট-গেটেড লেয়ারে নিয়ে আসা ফ্রন্টএন্ড টিমকে কম্পোনেন্টগুলোকে পরিচ্ছন্ন রাখতে, টাইপ-সেফ থাকতে এবং কোনো লুকানো মক পেলোড ছাড়াই প্রোডাকশন বিল্ড শিপ করতে সাহায্য করে। একটি মসৃণ ডেভেলপমেন্ট ওয়ার্কফ্লো এবং একটি পরিচ্ছন্ন কোডবেসের জন্য একটি শেয়ারড কন্ট্রাক্ট বজায় রাখা অপরিহার্য।