𝗦𝗶𝗻𝗴𝗹𝗲𝗦𝗣𝗔 𝗰𝗮𝗷 𝗸𝗼𝗿𝗲. 𝗜𝗺𝗽𝗼𝗿𝘁 𝗠𝗮𝗽𝘀 𝗻𝗶𝗷𝗲 𝗻𝗶𝗷𝗲 𝗲𝗴𝘂𝗹𝗼𝗸𝗲 𝗽𝗼𝗿𝗶𝗰𝗵𝗮𝗹𝗮𝗻𝗮 𝗸𝗮𝗿𝘁𝗲 𝗽𝗮𝗿𝗲 𝗻𝗮
SingleSPA কাজ করে। আমরা একটি পেজে React, Vue এবং Angular অ্যাপ চালাই। সেগুলো স্বাধীনভাবে লোড হয়। ফ্রেমওয়ার্কটি চমৎকার কাজ করে।
সমস্যাটি ফ্রেমওয়ার্কের নয়। সমস্যাটি এর চারপাশের ইকোসিস্টেমের।
একটি ডিস্ট্রিবিউটেড আর্কিটেকচারে, আপনার মালিকানা (ownership) প্রয়োজন। আপনার অডিটিং প্রয়োজন। আপনার গভর্নেন্স প্রয়োজন। SingleSPA এই প্রয়োজনগুলোকে দৃশ্যমান করে তোলে কারণ import map হলো সমন্বয়ের একটি কেন্দ্রীয় বিন্দু।
import map আপনার root config-এ থাকে। এটি একটি JSON ফাইল। এটি প্রতিটি micro frontend (MFE)-কে বলে দেয় কোন ভার্সনের React লোড করতে হবে। তাত্ত্বিকভাবে, এটিই হলো source of truth। কিন্তু বাস্তবে, এর কোনো মালিক নেই।
প্রতিটি টিম তাদের নিজস্ব MFE-এর মালিক। কিন্তু কেউ এই ম্যাপের মালিক নয়।
এটি কিছু সমস্যা তৈরি করে:
- টিম একটি MFE বন্ধ করে দেয়, কিন্তু ম্যাপে তার এন্ট্রি থেকে যায়।
- নতুন ডিপেন্ডেন্সি (dependencies) আসে, কিন্তু কেউ সেগুলো ম্যাপে যোগ করে না।
- আপনি অবহেলা করার ফলে ম্যাপটি অকেজো হয়ে পড়ে।
আমরা আমাদের ম্যাপে এমন একটি MFE খুঁজে পেয়েছি যা গত আট মাস ধরে ডেপ্লয় করা হয়নি। এটি অকেজো ছিল, কিন্তু প্রোডাকশনে এটি তখনও লোড হচ্ছিল। কেউ এটি লক্ষ্য করেনি কারণ কেউ এটি দেখছিল না।
আপনি হয়তো বিল্ডের সময় ম্যাপটি অটো-জেনারেট করার কথা ভাবতে পারেন। আমরা সেটি চেষ্টা করেছি। এটি একটি নতুন সমস্যা তৈরি করে: merge conflicts। যদি চৌদ্দটি টিম প্রতিটি ডেপ্লয়ের সময় একটি মাত্র JSON ফাইলে লেখার চেষ্টা করে, তবে আপনার CI পাইপলাইন একটি বিশৃঙ্খলায় পরিণত হবে।
আরেকটি সমস্যা হলো drift। পদ্ধতিটি সহজ: আপনার কনফিগারেশনে React-কে একটি external হিসেবে চিহ্নিত করুন। import map-কে এটি সার্ভ করতে দিন। এটি ডুপ্লিকেট বান্ডেল (duplicate bundles) প্রতিরোধ করে।
কিন্তু তারপর কেউ তার কোড রিফ্যাক্টর (refactor) করে। তারা ভুলবশত তাদের MFE-এর ভেতরেই React-কে বান্ডেল করে ফেলে। বিল্ড সফল হয়। টেস্টগুলো পাস করে। ডেপ্লয়ও সফল (green) হয়।
আপনি কেবল তখনই এটি লক্ষ্য করেন যখন:
- বান্ডেল সাইজ হঠাৎ বেড়ে যায়।
- ভার্সন মিসম্যাচ (version mismatch) কোনো কম্পোনেন্টকে ভেঙে ফেলে।
- আপনি Chrome DevTools-এ React-কে দুবার লোড হতে দেখেন।
আমরা আমাদের সিস্টেম অডিট করেছি এবং দেখেছি দুটি MFE তাদের নিজস্ব React শিপ করছে। তাদের বিল্ড সফল ছিল। তারা জানত না যে তারা কমপ্লায়েন্স (compliance) লঙ্ঘন করছে।
import map এবং আপনার package.json ফাইল দুটি আলাদা ইনপুট। এগুলো নিঃশব্দে একে অপরের থেকে দূরে সরে যায় (drift apart)।
একটি CI চেক ডুপ্লিকেট বান্ডেল খুঁজে পেতে পারে। কিন্তু এটি ভার্সন মিসম্যাচ খুঁজে পেতে পারে না। যদি MFE A ব্যবহার করে React 18.2 এবং MFE B ব্যবহার করে 18.3, তবে বিল্ড ফেইল করবে না। কিন্তু রানটাইমে (runtime) আপনার শেয়ার্ড কম্পোনেন্টগুলো ভেঙে যাবে।
যখন আমাদের React আপডেট করার প্রয়োজন হয়, তখন আমাদের চৌদ্দটি ভিন্ন ভিন্ন রিপোজিটরিতে (repositories) ঘণ্টার পর ঘণ্টা grep করতে হয়। এটি অত্যন্ত অদক্ষ পদ্ধতি।
আমরা এটি সমাধানের জন্য একটি টুল তৈরি করেছি। এটি দুটি কাজ করে:
- এটি প্রতিটি MFE-এর package.json থেকে একটি ভার্সন ম্যাট্রিক্স তৈরি করে।
- এটি সেই ম্যাট্রিক্সটিকে আপনার import map-এর সাথে তুলনা করে।
এই টুলটি আপনাকে ব্যবধানটি (gap) দেখিয়ে দেয়। এটি দেখায় কোন টিমগুলো নিয়ম মেনে চলছে এবং কোন টিমগুলো বিচ্যুত হয়েছে। এটি পুরনো এন্ট্রি (stale entries) এবং ভাঙা URL-ও খুঁজে বের করে। আমরা প্রতি সোমবার সকালে এটি চালাই। এটি মাত্র ১২ সেকেন্ড সময় নেয়।
আমাদের শিক্ষাটি প্রযুক্তিগত ছিল না। প্রতিটি ডিস্ট্রিবিউটেড আর্কিটেকচারের জন্য শেয়ারড ইনফ্রাস্ট্রাকচারের একজন ওনার (owner) প্রয়োজন। SingleSPA-তে, import map হলো ইনফ্রাস্ট্রাকচার। এটিকে কোনো সাধারণ শেয়ারড ফাইল হিসেবে গণ্য করবেন না। এটিকে একটি ম্যানেজড অ্যাসেট (managed asset) হিসেবে বিবেচনা করুন।
আপনি এটি কীভাবে সামলান? আপনার কি কোনো import map ওনার আছে? নাকি আপনি আপনার সোমবারের সকালগুলো ফাইল grepping করতে ব্যয় করেন?
উৎস: https://dev.to/siongsheng/singlespa-works-import-maps-dont-manage-themselves-4jbe