মডিউল ফেডারেশন: মাইক্রো-ফ্রন্টএন্ডে রানটাইম মডিউল শেয়ারিং এর চূড়ান্ত নির্দেশিকা

ওয়েব ডেভেলপমেন্টের সদা পরিবর্তনশীল জগতে, আমরা একটি গুরুত্বপূর্ণ আর্কিটেকচারাল পরিবর্তন দেখেছি। আমরা মনোলিথিক আর্কিটেকচার থেকে ব্যাকএন্ড মাইক্রোসার্ভিসে যাত্রা করেছি, স্কেলেবিলিটি এবং দলের স্বাধীনতার খোঁজে। এখন, সেই একই বিপ্লব ফ্রন্টএন্ডকে রূপান্তরিত করছে। মাইক্রো-ফ্রন্টএন্ডের যুগ এখন শুরু হয়েছে, এবং এর কেন্দ্রবিন্দুতে রয়েছে একটি শক্তিশালী প্রযুক্তি যা সবকিছুকে বাস্তবসম্মত করে তুলেছে: মডিউল ফেডারেশন।

মাইক্রো-ফ্রন্টএন্ডের মূল চ্যালেঞ্জটি বলা সহজ হলেও সমাধান করা কঠিন ছিল: কিভাবে একাধিক, স্বাধীনভাবে ডিপ্লয় করা অ্যাপ্লিকেশন থেকে একটি একক, সুসংহত ব্যবহারকারীর অভিজ্ঞতা তৈরি করা যায়, যা ধীর, ভারাক্রান্ত এবং অব্যবস্থাপনাযোগ্য হবে না? কিভাবে আমরা কম্পোনেন্ট লাইব্রেরি বা রিয়্যাক্টের মতো ফ্রেমওয়ার্কগুলোর সাধারণ কোড শেয়ার করতে পারি, সংস্করণ সংক্রান্ত দুঃস্বপ্ন বা সমন্বিত রিলিজের বাধ্যবাধকতা ছাড়াই?

এই সমস্যাটিই মডিউল ফেডারেশন সুন্দরভাবে সমাধান করে। ওয়েবপ্যাক ৫-এ প্রবর্তিত, এটি শুধু আরেকটি ফিচার নয়; এটি ওয়েব অ্যাপ্লিকেশন তৈরি এবং ডিপ্লয় করার চিন্তাভাবনায় একটি দৃষ্টান্তমূলক পরিবর্তন। এই বিস্তারিত নির্দেশিকায় মডিউল ফেডারেশনের কী, কেন এবং কীভাবে কাজ করে তা অন্বেষণ করা হবে, এর সবচেয়ে রূপান্তরকারী ক্ষমতা অর্থাৎ রানটাইম মডিউল শেয়ারিংয়ের উপর আলোকপাত করে।

একটি দ্রুত পুনরালোচনা: মাইক্রো-ফ্রন্টএন্ডস কী?

মডিউল ফেডারেশনের কার্যকারিতা বোঝার আগে, আসুন মাইক্রো-ফ্রন্টএন্ডস বলতে আমরা কী বুঝি সে বিষয়ে একমত হই। একটি বড় ই-কমার্স ওয়েবসাইটের কথা ভাবুন। একটি মনোলিথিক জগতে, পুরো ফ্রন্টএন্ড—প্রোডাক্ট সার্চ, প্রোডাক্টের বিবরণ, শপিং কার্ট এবং চেকআউট—একটিমাত্র বড় অ্যাপ্লিকেশন। চেকআউট বাটনে একটি পরিবর্তন আনার জন্য পুরো অ্যাপ্লিকেশনটি পরীক্ষা এবং পুনরায় ডিপ্লয় করার প্রয়োজন হতে পারে।

একটি মাইক্রো-ফ্রন্টএন্ড আর্কিটেকচার এই মনোলিথকে ব্যবসায়িক ডোমেইন বরাবর ভেঙে দেয়। আপনার থাকতে পারে:

• একটি সার্চ টিম যা সার্চ বার এবং ফলাফলের পেজের মালিক।
• একটি প্রোডাক্ট টিম যা প্রোডাক্টের বিবরণ এবং সুপারিশের মালিক।
• একটি চেকআউট টিম যা শপিং কার্ট এবং পেমেন্ট প্রক্রিয়ার মালিক।

প্রতিটি দল তাদের অ্যাপ্লিকেশনের অংশ স্বাধীনভাবে তৈরি, পরীক্ষা এবং ডিপ্লয় করতে পারে। এর ফলে কয়েকটি মূল সুবিধা পাওয়া যায়:

• স্বায়ত্তশাসিত দল: দলগুলো তাদের নিজস্ব সময়সূচী অনুযায়ী কাজ এবং রিলিজ করতে পারে, যা ডেভেলপমেন্টকে ত্বরান্বিত করে।
• স্বাধীন ডিপ্লয়মেন্ট: সুপারিশ ইঞ্জিনের একটি বাগ পেমেন্ট ফ্লো-এর একটি গুরুত্বপূর্ণ আপডেটকে বাধা দেয় না।
• প্রযুক্তিগত নমনীয়তা: সার্চ টিম Vue.js ব্যবহার করতে পারে যখন প্রোডাক্ট টিম React ব্যবহার করে, যা দলগুলোকে তাদের নির্দিষ্ট ডোমেনের জন্য সেরা টুল বেছে নেওয়ার সুযোগ দেয় (যদিও এর জন্য সতর্ক ব্যবস্থাপনার প্রয়োজন)।

তবে, এই পদ্ধতিতে নিজস্ব কিছু চ্যালেঞ্জও রয়েছে, প্রধানত শেয়ারিং এবং সামঞ্জস্যতাকে কেন্দ্র করে, যা আমাদের পুরনো পদ্ধতির দিকে নিয়ে যায়।

কোড শেয়ার করার পুরনো পদ্ধতি (এবং কেন সেগুলো ব্যর্থ)

ঐতিহাসিকভাবে, দলগুলো বিভিন্ন ফ্রন্টএন্ড অ্যাপ্লিকেশনের মধ্যে কোড শেয়ার করার জন্য বেশ কয়েকটি পদ্ধতি চেষ্টা করেছে, যার প্রত্যেকটিরই মাইক্রো-ফ্রন্টএন্ড প্রেক্ষাপটে উল্লেখযোগ্য ত্রুটি রয়েছে।

এনপিএম প্যাকেজ

সবচেয়ে সাধারণ পদ্ধতি হলো শেয়ারড কম্পোনেন্ট বা ইউটিলিটিগুলোকে একটি ভার্সনড এনপিএম প্যাকেজ হিসাবে প্রকাশ করা। একটি শেয়ারড কম্পোনেন্ট লাইব্রেরি এর একটি ক্লাসিক উদাহরণ।

• সমস্যা: এটি একটি বিল্ড-টাইম ডিপেন্ডেন্সি। যদি টিম A শেয়ারড `Button` কম্পোনেন্টটি `my-ui-library`-তে ১.১ সংস্করণ থেকে ১.২-এ আপডেট করে, তবে টিম B এবং টিম C সেই আপডেটটি পাবে না যতক্ষণ না তারা ম্যানুয়ালি তাদের `package.json` আপডেট করে, `npm install` চালায়, এবং তাদের সম্পূর্ণ মাইক্রো-ফ্রন্টএন্ড পুনরায় ডিপ্লয় করে। এটি একটি দৃঢ় কাপলিং তৈরি করে এবং স্বাধীন ডিপ্লয়মেন্টের উদ্দেশ্যকে ব্যর্থ করে। এর ফলে ব্রাউজারে একই কম্পোনেন্টের একাধিক সংস্করণ লোড হয়, যা চূড়ান্ত বান্ডেলকে ভারাক্রান্ত করে তোলে।

শেয়ারড ওয়ার্কস্পেস সহ মনোরেপো

মনোরেপো (Lerna বা Yarn/NPM ওয়ার্কস্পেসের মতো টুল ব্যবহার করে) সমস্ত মাইক্রো-ফ্রন্টএন্ডকে একটি একক রিপোজিটরিতে রাখে। এটি শেয়ারড প্যাকেজ পরিচালনাকে সহজ করে।

• সমস্যা: যদিও মনোরেপো ডেভেলপারদের অভিজ্ঞতা উন্নত করতে সাহায্য করে, এটি মূল রানটাইম সমস্যার সমাধান করে না। আপনি এখনও বিল্ড-টাইম ডিপেন্ডেন্সির উপর নির্ভরশীল। একটি শেয়ারড লাইব্রেরিতে পরিবর্তন আনার জন্য এখনও সমস্ত ব্যবহারকারী অ্যাপ্লিকেশনকে পরিবর্তনটি প্রতিফলিত করার জন্য পুনর্নির্মাণ এবং পুনরায় ডিপ্লয় করতে হয়।

`