জনপ্রিয় ফুল-স্ট্যাক কম্বিনেশন (MERN, MEVN, Django+React, Rails, Laravel, Spring)
এই পাঠে যা শিখবেন
- ব্যাটারিজ-ইনক্লুডেড ফুল-স্ট্যাক ফ্রেমওয়ার্ক বনাম অ্যাসেম্বলড স্ট্যাক — পার্থক্যের মূল মানদণ্ড
- MERN, MEVN, Django+React, Ruby on Rails, Laravel, ও Spring+React/Angular — প্রতিটির উপাদান ও সাধারণ ব্যবহারক্ষেত্র
- একটি পাশাপাশি তুলনা টেবিলে সবগুলো কম্বিনেশন এক জায়গায়
- Python দিয়ে একটি সত্যিকারের ছোট্ট "স্ট্যাক ক্লাসিফায়ার" — একটি স্ট্যাক ব্যাটারিজ-ইনক্লুডেড না অ্যাসেম্বলড তা নিয়ম অনুযায়ী স্বয়ংক্রিয়ভাবে নির্ণয় করা
১ · ব্যাটারিজ-ইনক্লুডেড বনাম অ্যাসেম্বলড স্ট্যাক
একটি ফুল-স্ট্যাক ওয়েব প্রজেক্টে ফ্রন্ট-এন্ড ও ব্যাক-এন্ড কোথা থেকে আসছে, তার ভিত্তিতে দুটি ভিন্ন ধরনের কম্বিনেশন হয়ে থাকে —
একটিমাত্র ফ্রেমওয়ার্ক (Rails, Laravel, Django) নিজেই রাউটিং, ORM, টেমপ্লেটিং/ভিউ রেন্ডারিং, ফর্ম হ্যান্ডলিং — সবকিছু একসাথে প্রদান করে। ফ্রন্ট-এন্ড ও ব্যাক-এন্ড একই প্রজেক্টের ভেতরে, একই কনভেনশন মেনে চলে।
ফ্রন্ট-এন্ড (যেমন React/Vue) ও ব্যাক-এন্ড (যেমন Express) আলাদা আলাদা প্রজেক্ট/লাইব্রেরি হিসেবে নিজে বেছে নিয়ে জোড়া লাগাতে হয় — দুটোর মধ্যে যোগাযোগ সাধারণত একটি REST বা GraphQL API-এর মাধ্যমে।
লক্ষণীয়, একটি ব্যাটারিজ-ইনক্লুডেড ফ্রেমওয়ার্ক (যেমন Django)-কেও ইচ্ছা করলে আলাদাভাবে বেছে নেওয়া একটি ফ্রন্ট-এন্ড (যেমন React)-এর সাথে জোড়া লাগানো যায় — তখন সেই নির্দিষ্ট কম্বিনেশনটি নিজেই অ্যাসেম্বলড হয়ে যায়, যদিও Django একা ব্যবহার করলে (নিজস্ব টেমপ্লেট দিয়ে) এটি ব্যাটারিজ-ইনক্লুডেডভাবে কাজ করতে পারত।
২ · প্রতিটি কম্বিনেশনের সংক্ষিপ্ত পরিচিতি
MERN (MongoDB + Express + React + Node.js) — সম্পূর্ণ জাভাস্ক্রিপ্ট স্ট্যাক (ফ্রন্ট-এন্ড ও ব্যাক-এন্ড দুটোই JS/Node), স্কিমা-লেস MongoDB ব্যবহার করে দ্রুত প্রোটোটাইপিং-এর জন্য জনপ্রিয়। MEVN ঠিক একই কম্বিনেশন, শুধু React-এর জায়গায় Vue।
Django + React — Python-ভিত্তিক Django ব্যাক-এন্ড API সরবরাহ করে (Django REST Framework-সহ), React ফ্রন্ট-এন্ড সেই API খেয়ে UI রেন্ডার করে। ডেটা-ভারী বা মেশিন-লার্নিং-সংশ্লিষ্ট ব্যাক-এন্ডে Python-এর ইকোসিস্টেমের কারণে জনপ্রিয়।
Ruby on Rails ও Laravel নিজেরাই সম্পূর্ণ ফুল-স্ট্যাক ফ্রেমওয়ার্ক — উভয়ই "কনভেনশন ওভার কনফিগারেশন" দর্শনে তৈরি, বিল্ট-ইন ORM (যথাক্রমে Active Record ও Eloquent), রাউটিং, ও টেমপ্লেটিং/ভিউ ইঞ্জিন দেয় (Rails-এ ERB/Hotwire, Laravel-এ Blade/Livewire), ফলে দ্রুত MVP তৈরির জন্য জনপ্রিয়।
Spring + React/Angular — Java-ভিত্তিক Spring Boot ব্যাক-এন্ড এন্টারপ্রাইজ-গ্রেড অ্যাপ্লিকেশনে (বড় ব্যাংকিং/ফিন্যান্স/এন্টারপ্রাইজ সিস্টেম) জনপ্রিয়, সাধারণত React বা Angular-এর সাথে আলাদাভাবে জোড়া লাগানো হয়।
৩ · পাশাপাশি তুলনা টেবিল
| কম্বিনেশন | ফ্রন্ট-এন্ড | ব্যাক-এন্ড | সাধারণ ডেটাবেস | ধরন |
|---|---|---|---|---|
| MERN | React | Express (Node.js) | MongoDB | অ্যাসেম্বলড |
| MEVN | Vue | Express (Node.js) | MongoDB | অ্যাসেম্বলড |
| Django + React | React | Django (Python) | PostgreSQL/MySQL | অ্যাসেম্বলড (Django একা ব্যাটারিজ-ইনক্লুডেড, কিন্তু React আলাদাভাবে যোগ করা) |
| Ruby on Rails | Rails views (ERB/Hotwire) — বিল্ট-ইন | Rails (Ruby) | PostgreSQL/MySQL | ব্যাটারিজ-ইনক্লুডেড |
| Laravel | Blade/Livewire — বিল্ট-ইন | Laravel (PHP) | MySQL/PostgreSQL | ব্যাটারিজ-ইনক্লুডেড |
| Spring + React/Angular | React অথবা Angular | Spring Boot (Java) | PostgreSQL/MySQL | অ্যাসেম্বলড |
৪ · কোড দিয়ে যাচাই — একটি স্ট্যাক ক্লাসিফায়ার
নিচের কোড সেলে উপরের টেবিলের ডেটাকে একটি Python লিস্ট-অফ-ডিকশনারি হিসেবে রাখা হয়েছে, এবং একটি সহজ নিয়ম প্রয়োগ করে (ফ্রন্ট-এন্ড ও ব্যাক-এন্ড একই প্রজেক্ট থেকে এসেছে কি না) প্রতিটি স্ট্যাককে "ব্যাটারিজ-ইনক্লুডেড" নাকি "অ্যাসেম্বলড" হিসেবে শ্রেণীবদ্ধ করা হয়েছে — উপরের টেবিলের সাথে ফলাফল মিলিয়ে দেখুন।
# same_project == True মানে ফ্রন্ট-এন্ড ও ব্যাক-এন্ড একই ফ্রেমওয়ার্ক প্রজেক্ট থেকে আসে
# (আলাদাভাবে বেছে নেওয়া হয়নি) -- এটিই ব্যাটারিজ-ইনক্লুডেড হওয়ার মূল শর্ত
STACKS = [
{"name": "MERN", "frontend": "React", "backend": "Express (Node.js)", "same_project": False},
{"name": "MEVN", "frontend": "Vue", "backend": "Express (Node.js)", "same_project": False},
{"name": "Django + React", "frontend": "React", "backend": "Django (Python)", "same_project": False},
{"name": "Ruby on Rails", "frontend": "Rails views (built-in)", "backend": "Rails (Ruby)", "same_project": True},
{"name": "Laravel", "frontend": "Blade/Livewire (built-in)","backend": "Laravel (PHP)", "same_project": True},
{"name": "Spring + React/Angular", "frontend": "React/Angular", "backend": "Spring Boot (Java)", "same_project": False},
]
def classify_stack(stack):
if stack["same_project"]:
return "ব্যাটারিজ-ইনক্লুডেড"
return "অ্যাসেম্বলড"
print(f"{'কম্বিনেশন':22s} | {'ফ্রন্ট-এন্ড':24s} | {'ব্যাক-এন্ড':20s} | ধরন")
print("-" * 95)
for stack in STACKS:
kind = classify_stack(stack)
print(f"{stack['name']:22s} | {stack['frontend']:24s} | {stack['backend']:20s} | {kind}")
batteries_included = [s["name"] for s in STACKS if classify_stack(s) == "ব্যাটারিজ-ইনক্লুডেড"]
assembled = [s["name"] for s in STACKS if classify_stack(s) == "অ্যাসেম্বলড"]
print(f"\nব্যাটারিজ-ইনক্লুডেড ({len(batteries_included)}টি): {', '.join(batteries_included)}")
print(f"অ্যাসেম্বলড ({len(assembled)}টি): {', '.join(assembled)}")
classify_stack() ফাংশনটি শুধু একটি বুলিয়ান পতাকা (same_project)
দেখে সিদ্ধান্ত নেয় — এটিই এই দুই ধরনের মূল, সরলীকৃত পার্থক্যকারী প্রশ্ন: "ফ্রন্ট-এন্ড ও ব্যাক-এন্ড কি একই
ফ্রেমওয়ার্ক প্রজেক্ট সরবরাহ করেছে, নাকি আলাদাভাবে বেছে নিয়ে জোড়া লাগানো হয়েছে?"
ব্যাটারিজ-ইনক্লুডেড ফ্রেমওয়ার্ক (Rails, Laravel, Django একা) দ্রুত শুরু করার সুবিধা দেয়, কারণ প্রতিটি সিদ্ধান্ত (কোন ORM, কোন রাউটার, কোন টেমপ্লেটিং) আগে থেকেই নেওয়া থাকে। অ্যাসেম্বলড স্ট্যাক (MERN, MEVN, বা যেকোনো ব্যাক-এন্ড + আলাদা ফ্রন্ট-এন্ড) বেশি নমনীয়তা দেয় — প্রতিটি অংশ স্বাধীনভাবে বদলানো যায় — কিন্তু প্রতিটি টুকরো নিজে বেছে নেওয়া ও জোড়া লাগানোর দায়িত্বও প্রজেক্টের উপর বর্তায়। পরের পাঠে (L56) এই ট্রেড-অফ কীভাবে একটি নির্দিষ্ট প্রজেক্টের জন্য সিদ্ধান্তে রূপান্তরিত করা যায় তা দেখব।
ভাবনার প্রশ্ন
প্রতিটি প্রশ্ন নিজে কিছুক্ষণ ভাবুন — তারপর "→ উত্তর" চাপুন।
প্র ০১ Rails ও Laravel-কে "ব্যাটারিজ-ইনক্লুডেড" বলা হয়, অথচ MERN-কে বলা হয় না কেন — মূল পার্থক্যটা ঠিক কোথায়?
Rails ও Laravel-এ ফ্রন্ট-এন্ড (ভিউ/টেমপ্লেটিং) ও ব্যাক-এন্ড (রাউটিং, ORM) একই ফ্রেমওয়ার্ক প্রজেক্টের অংশ — কোনো আলাদা ফ্রন্ট-এন্ড লাইব্রেরি বেছে নিতে হয় না, ফ্রেমওয়ার্ক নিজেই সবকিছু দেয়। MERN-এ React (ফ্রন্ট-এন্ড) ও Express (ব্যাক-এন্ড) সম্পূর্ণ আলাদা দুটি প্রজেক্ট/লাইব্রেরি, যেগুলো ডেভেলপার নিজে বেছে নিয়ে একটি API-এর মাধ্যমে জোড়া লাগান — তাই এটি "অ্যাসেম্বলড"।
প্র ০২ MERN আর MEVN দুটোই "অ্যাসেম্বলড" ক্যাটাগরিতে পড়ে কেন, যদিও একটিতে React আর অন্যটিতে Vue?
ক্যাটাগরি নির্ধারিত হয় ফ্রন্ট-এন্ড ও ব্যাক-এন্ড আলাদা প্রজেক্ট থেকে এসেছে কি না তার উপর ভিত্তি করে —
নির্দিষ্ট কোন ফ্রন্ট-এন্ড লাইব্রেরি (React বা Vue) ব্যবহার হচ্ছে তার উপর নয়। উভয় ক্ষেত্রেই ব্যাক-এন্ড
(Express) ও ফ্রন্ট-এন্ড (React/Vue) সম্পূর্ণ আলাদা প্রজেক্ট, একই ধরনের API-ভিত্তিক যোগাযোগে জোড়া লাগানো —
তাই কোডে same_project দুটির জন্যই False।
প্র ০৩ একটি টিম যদি আগে থেকেই Python-এ দক্ষ হয়, Django+React বনাম MERN কোনটা তাদের জন্য বেশি স্বাভাবিক পছন্দ হতে পারে?
সম্ভবত Django+React — কারণ ব্যাক-এন্ডের ভাষা (Python) টিমের পরিচিত, তাই শেখার খরচ কম। তবে ফ্রন্ট-এন্ডে এখনও JavaScript/React শিখতে হবে, যেটা উভয় কম্বিনেশনেই সমান। এই ধরনের "টিমের পরিচিতি" একটি গুরুত্বপূর্ণ সিদ্ধান্ত-নির্ধারক ফ্যাক্টর — পরের পাঠে (L56) এটি ও আরও কয়েকটি ফ্যাক্টর একসাথে ওজন দিয়ে তুলনা করা হবে।
অনুশীলন
-
চিন্তা করুন: Next.js (একটি React ফ্রেমওয়ার্ক, যেটি একটি প্রজেক্টের ভেতরেই API রুট লেখারও
সুবিধা দেয়) কি ব্যাটারিজ-ইনক্লুডেড, নাকি অ্যাসেম্বলড — উপরের নিয়ম অনুযায়ী কীভাবে যুক্তি দেবেন?
Next.js নিজে একটি একক প্রজেক্টের ভেতরে ফ্রন্ট-এন্ড রেন্ডারিং ও সাধারণ API রুট (হালকা ব্যাক-এন্ড লজিক) দুটোই দিতে পারে বলে অনেকটা ব্যাটারিজ-ইনক্লুডেডের মতো আচরণ করে। তবে এটি Rails/Laravel/Django-র মতো সম্পূর্ণ ORM, ভারী ব্যাক-এন্ড লজিক, বা ডেটাবেস মাইগ্রেশন টুলিং নিজে দেয় না — বাস্তবে একটি "হাইব্রিড" অবস্থানে থাকে, যা দেখায় এই দুই ক্যাটাগরি সবসময় পুরোপুরি কালো-সাদা নয়, বরং একটি স্পেকট্রাম।
-
পরীক্ষা করুন: উপরের কোড সেলের
STACKSলিস্টে একটি নতুন এন্ট্রি যোগ করুন —{"name": "ASP.NET Core MVC", "frontend": "Razor views (built-in)", "backend": "ASP.NET Core (C#)", "same_project": True}— তারপর Run চেপে দেখুন এটি ঠিকভাবে "ব্যাটারিজ-ইনক্লুডেড" গণনায় যুক্ত হয় কি না।নতুন এন্ট্রিতে
same_project: Trueথাকায়classify_stack()এটিকে "ব্যাটারিজ-ইনক্লুডেড" হিসেবে চিহ্নিত করবে, এবং শেষের সারাংশ লাইনে ব্যাটারিজ-ইনক্লুডেড তালিকার সংখ্যা ও নাম দুটোই আপডেট হয়ে যাবে (৩টির বদলে ৪টি) — এটাই দেখায় একই নিয়ম নতুন যেকোনো স্ট্যাকের জন্যও সমানভাবে কাজ করে, আলাদা করে কোনো if/elif যোগ করতে হয় না।
আরও পড়ুন · ABCL TECH-এ আপনার পরবর্তী পদক্ষেপ
- পরবর্তী পাঠ L56 প্রজেক্টের জন্য সঠিক স্ট্যাক বাছাই করা — একটি ওজনযুক্ত সিদ্ধান্ত-ম্যাট্রিক্স দিয়ে।
- কোর্সের সম্পূর্ণ সিলেবাস দেখুন ৫৮টি পাঠ আর্কিটেকচার প্যাটার্ন, ফ্রন্ট-এন্ড/ব্যাক-এন্ড ফ্রেমওয়ার্ক ফান্ডামেন্টাল, স্টেট ম্যানেজমেন্ট, REST API, ORM, অথেন্টিকেশন, রেন্ডারিং স্ট্র্যাটেজি ও ডিপ্লয়মেন্ট।
- JavaScript Programming কোর্স সহোদর কোর্স MERN/MEVN-এর React ও Vue ফ্রন্ট-এন্ডের ভাষাগত ভিত্তি সেই কোর্সেই তৈরি হয়েছে।
- সব Courses দেখুন ABCL TECH C, C++, Python, Java, JavaScript, DSA, DBMS, Discrete Mathematics, System Design, Cybersecurity, Cloud Computing & DevOps, Computer Networks, Operating Systems, Computer Architecture, Programming Languages & Compiler Design, Software Engineering & Git, Theory of Computation, Engineering Economics ও Full-Stack Web Frameworks — সব এক জায়গায়।