পাঠ ০১ · ৫৮-এর মধ্যে · মডিউল ১
Home / Courses / Full-Stack Web Frameworks / পরিচিতি

ফুল-স্ট্যাক ওয়েব ডেভেলপমেন্ট কী ও কেন ফ্রেমওয়ার্ক গুরুত্বপূর্ণ

What is full-stack web development & why frameworks matter
৮ মিনিট পড়া শুরু · Beginner Python কোডসহ সম্পূর্ণ বাংলায়

এই পাঠে যা শিখবেন

  • ফুল-স্ট্যাক ওয়েব ডেভেলপমেন্টের সংজ্ঞা এবং এর তিনটি স্তর — ফ্রন্ট-এন্ড, ব্যাক-এন্ড, ডেটাবেস
  • ফ্রেমওয়ার্ক বনাম লাইব্রেরি — ইনভার্সন অফ কন্ট্রোলের মূল ধারণা
  • ফ্রেমওয়ার্ক কেন ব্যবহার করা হয় — কনভেনশন ওভার কনফিগারেশন, সমাধান হওয়া সমস্যা পুনরায় সমাধান না করা
  • Python দিয়ে একটি ছোট্ট, সত্যিকারের "ম্যানুয়াল রাউটিং বনাম ফ্রেমওয়ার্ক-স্টাইল রাউটার" তুলনা — M5-এ আসা রাউটিং প্যাটার্নের একটি প্রিভিউ

১ · ফুল-স্ট্যাক ওয়েব ডেভেলপমেন্ট কী

ফুল-স্ট্যাক ওয়েব ডেভেলপমেন্টFull-Stack Web Developmentএকটি ওয়েব অ্যাপ্লিকেশনের সবগুলো স্তর — ফ্রন্ট-এন্ড, ব্যাক-এন্ড, ডেটাবেস — বোঝা ও তৈরি করার সক্ষমতা। মানে একটি ওয়েব অ্যাপ্লিকেশনের প্রতিটি স্তরে কাজ করতে পারা। একটি সাধারণ ওয়েব অ্যাপ (যেমন একটি সোশ্যাল মিডিয়া সাইট বা ই-কমার্স স্টোর) আসলে তিনটি আলাদা স্তরের সমন্বয়ে গঠিত — প্রতিটি স্তর ভিন্ন দায়িত্ব পালন করে, এবং একসাথে মিলে সম্পূর্ণ অ্যাপ্লিকেশনটি তৈরি করে।

ফ্রন্ট-এন্ড যা ব্যবহারকারী দেখে (M3-M4) ব্যাক-এন্ড লজিক ও API (M5-M6) ডেটাবেস ডেটা সংরক্ষণ (M7) HTML/CSS/JS, React/Vue/Angular Express/Django/Rails/Laravel PostgreSQL/MySQL/MongoDB
ফ্রন্ট-এন্ড রিকোয়েস্ট পাঠায়, ব্যাক-এন্ড লজিক প্রসেস করে ও ডেটাবেসের সাথে কথা বলে, ডেটাবেস ডেটা সংরক্ষণ/ফেরত দেয় — এই কোর্স প্রতিটি স্তরের ফ্রেমওয়ার্ক-স্তরের ধারণা গভীরভাবে শেখাবে।

২ · ফ্রেমওয়ার্ক বনাম লাইব্রেরি — ইনভার্সন অফ কন্ট্রোল

"ফ্রেমওয়ার্ক" ও "লাইব্রেরি" শব্দদুটো প্রায়ই এলোমেলোভাবে ব্যবহৃত হয়, কিন্তু এদের মধ্যে একটি স্পষ্ট, গুরুত্বপূর্ণ পার্থক্য আছে — কে কাকে "কল" করে তার দিক।

লাইব্রেরি (Library)
আপনার কোড লাইব্রেরির ফাংশন কল করে, যখন-যেভাবে আপনি চান — আপনি নিয়ন্ত্রণে থাকেন (যেমন একটি ডেট-ফরম্যাটিং ফাংশন)।
ফ্রেমওয়ার্ক (Framework)
ফ্রেমওয়ার্ক আপনার কোড কল করে (আপনি নির্দিষ্ট "স্লট" পূরণ করেন — যেমন একটি রুট হ্যান্ডলার) — ফ্রেমওয়ার্ক নিয়ন্ত্রণে থাকে। একে বলা হয় ইনভার্সন অফ কন্ট্রোল।
JavaScript ও Python Programming কোর্সের সাথে সম্পর্ক

JavaScript Programming ও Python Programming কোর্সে ভাষার সিনট্যাক্স — ভ্যারিয়েবল, ফাংশন, লুপ, ক্লাস — শেখানো হয়েছে। এই কোর্স ধরে নেয় সেই ভিত্তি ইতিমধ্যে আছে, এবং তার উপর ফ্রেমওয়ার্ক-স্তরের আর্কিটেকচার — কীভাবে একটি ফ্রেমওয়ার্ক আপনার লেখা ছোট ছোট ফাংশনগুলোকে বড় একটি সিস্টেমে সংগঠিত করে — শেখায়।

৩ · ফ্রেমওয়ার্ক কেন ব্যবহার করা হয়

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

  • কনভেনশন ওভার কনফিগারেশন: একটি প্রমিত উপায়ে কোড সংগঠিত করার নিয়ম দেয়, যাতে প্রতিটি ডেভেলপারকে প্রতিটি সিদ্ধান্ত (ফাইল কোথায় রাখব, নাম কী দেব) নতুন করে নিতে না হয়।
  • সমাধান হওয়া সমস্যা পুনরায় সমাধান না করা: রাউটিং, সেশন হ্যান্ডলিং, CSRF সুরক্ষা — এগুলো হাজারো প্রজেক্টে বারবার প্রয়োজন হয়েছে; ফ্রেমওয়ার্ক এগুলো টেস্টেড, প্রমাণিত আকারে প্রদান করে (M8, cross-ref ../cybersecurity/)।
  • দলগত কাজে ধারাবাহিকতা: একটি টিমের সব ডেভেলপার একই প্যাটার্ন অনুসরণ করলে কোড পড়া ও মেইনটেইন করা সহজ হয় — নতুন কেউ যোগ দিলে দ্রুত বুঝে যায় কোথায় কী পাওয়া যাবে।

৪ · একটি ছোট্ট রাউটিং প্রিভিউ — ম্যানুয়াল বনাম ফ্রেমওয়ার্ক-স্টাইল

নিচের কোড সেলে দেখা যাক ফ্রেমওয়ার্কের "ইনভার্সন অফ কন্ট্রোল" ধারণাটি বাস্তবে কী রকম দেখতে — একই তিনটি রুট দুইভাবে হ্যান্ডল করে: প্রথমে ম্যানুয়াল if/elif চেইন দিয়ে (ফ্রেমওয়ার্ক ছাড়া), তারপর একটি ছোট্ট, সত্যিকারের ডেকোরেটর-ভিত্তিক Router ক্লাস দিয়ে (ফ্রেমওয়ার্ক-স্টাইল) — M5-এ এই প্যাটার্নটি সম্পূর্ণভাবে শেখানো হবে।

Python
# পদ্ধতি ১ -- ম্যানুয়াল রাউটিং (কোনো ফ্রেমওয়ার্ক ছাড়া)
def handle_request_manual(path):
    if path == '/':
        return "হোমপেজ"
    elif path == '/users':
        return "ইউজার লিস্ট"
    elif path == '/about':
        return "সম্পর্কে"
    else:
        return "404 Not Found"

# পদ্ধতি ২ -- ফ্রেমওয়ার্ক-স্টাইল রাউটার (ইনভার্সন অফ কন্ট্রোল)
# এখানে "ফ্রেমওয়ার্ক" (Router ক্লাস) নিয়ন্ত্রণে থাকে -- আপনার ফাংশনগুলো
# শুধু নির্দিষ্ট "স্লট" পূরণ করে, ফ্রেমওয়ার্কই ঠিক করে কোনটা কখন কল হবে
class Router:
    def __init__(self):
        self.routes = {}

    def route(self, path):
        def decorator(handler_fn):
            self.routes[path] = handler_fn
            return handler_fn
        return decorator

    def dispatch(self, path):
        handler = self.routes.get(path)
        if handler is None:
            return "404 Not Found"
        return handler()

app = Router()

@app.route('/')
def home():
    return "হোমপেজ"

@app.route('/users')
def users():
    return "ইউজার লিস্ট"

@app.route('/about')
def about():
    return "সম্পর্কে"

# দুই পদ্ধতিই একই ফলাফল দেয় কি না যাচাই করা
test_paths = ['/', '/users', '/about', '/contact']
print("পাথ       | ম্যানুয়াল ফলাফল | রাউটার ফলাফল | মিলেছে?")
print("-" * 60)
all_match = True
for path in test_paths:
    manual_result = handle_request_manual(path)
    router_result = app.dispatch(path)
    match = manual_result == router_result
    all_match = all_match and match
    print(f"{path:10s} | {manual_result:16s} | {router_result:13s} | {match}")

print(f"\nসব রুট মিলেছে: {all_match}")

    
লক্ষ্য করুন Router ক্লাসে @app.route('/users') লেখার পর আপনি আর কখনো সরাসরি users() ফাংশনটি কল করেননি — Router নিজেই সিদ্ধান্ত নেয় কখন কোন ফাংশন কল করবে (dispatch()-এর ভেতরে)। এটিই ইনভার্সন অফ কন্ট্রোল — নিয়ন্ত্রণ আপনার কোড থেকে ফ্রেমওয়ার্কের হাতে চলে গেছে। Express, Django, Flask-সহ প্রায় প্রতিটি ওয়েব ফ্রেমওয়ার্কেই এই একই মূল ধারণা কাজ করে, শুধু সিনট্যাক্স আলাদা।
মূল কথা · Key takeaway

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

ভাবনার প্রশ্ন

প্রতিটি প্রশ্ন নিজে কিছুক্ষণ ভাবুন — তারপর "→ উত্তর" চাপুন।

প্র ০১ "ইনভার্সন অফ কন্ট্রোল" নামটা কেন এমন — কীসের নিয়ন্ত্রণ কার থেকে কার কাছে "উল্টে" যাচ্ছে?

সাধারণ প্রোগ্রামিং-এ আপনার কোডই নিয়ন্ত্রণে থাকে — এটি সিদ্ধান্ত নেয় কখন কোন ফাংশন কল হবে (যেমন লাইব্রেরি ব্যবহারের সময়)। ফ্রেমওয়ার্ক ব্যবহারের সময় এই নিয়ন্ত্রণ "উল্টে" যায় — এখন ফ্রেমওয়ার্কই সিদ্ধান্ত নেয় কখন আপনার লেখা ফাংশন কল হবে (যেমন একটি নির্দিষ্ট রিকোয়েস্ট এলে)। "নিয়ন্ত্রণ কে করে" এই প্রশ্নের উত্তর আপনার কোড থেকে ফ্রেমওয়ার্কে "ইনভার্ট" (উল্টে) হয়ে যায় বলেই এই নাম।

প্র ০২ একটি ছোট, ২-৩ পেজের সাইটের জন্যও কি ফুল ফ্রেমওয়ার্ক ব্যবহার করা উচিত?

সবসময় না। ফ্রেমওয়ার্কের সুবিধা (কনভেনশন, বিল্ট-ইন সমাধান) তখনই সবচেয়ে বেশি মূল্যবান হয় যখন প্রজেক্ট জটিলতা বা টিমের আকার বাড়ে। খুব ছোট, সাধারণ সাইটের জন্য একটি ফুল ফ্রেমওয়ার্কের ওভারহেড (শেখার খরচ, অতিরিক্ত কোড) অপ্রয়োজনীয় জটিলতা যোগ করতে পারে — এই ট্রেড-অফ বিবেচনা M13-এ "সঠিক স্ট্যাক বাছাই করা" পাঠে বিস্তারিত আলোচনা করা হবে।

প্র ০৩ উপরের কোডে app.dispatch('/contact') "404 Not Found" রিটার্ন করে কেন?

কারণ '/contact' পাথের জন্য কোনো @app.route('/contact') ডেকোরেটর দিয়ে কোনো হ্যান্ডলার রেজিস্টার করা হয়নি — তাই self.routes ডিকশনারিতে এই কী (key) নেই। dispatch() ফাংশনে self.routes.get(path) তখন None রিটার্ন করে, এবং কোড সেই None চেক করে "404 Not Found" রিটার্ন করে — ঠিক যেমন বাস্তব ফ্রেমওয়ার্কে অনির্ধারিত (undefined) রুটে গেলে হয়।

অনুশীলন

  1. চিন্তা করুন: আপনার পরিচিত কোনো টুল বা সার্ভিস (ফ্রেমওয়ার্ক না হোক) কি "ইনভার্সন অফ কন্ট্রোল" প্যাটার্ন অনুসরণ করে? (হিন্ট: যেকোনো সিস্টেম যেখানে আপনি একটি ফাংশন/কলব্যাক "রেজিস্টার" করেন, আর সিস্টেম নিজেই ঠিক করে কখন সেটি কল করবে।)

    অনেক উদাহরণ আছে — একটি বাটনের onClick ইভেন্ট হ্যান্ডলার রেজিস্টার করা (ব্রাউজার নিজেই ঠিক করে কখন সেটি কল হবে, ব্যবহারকারী ক্লিক করলে), অথবা একটি টেস্টিং ফ্রেমওয়ার্কে test() ফাংশন রেজিস্টার করা (টেস্ট রানার নিজেই ঠিক করে কোন ক্রমে সেগুলো চালাবে)। এই সবগুলোই একই ইনভার্সন-অফ-কন্ট্রোল প্যাটার্ন — আপনি লজিক লেখেন, সিস্টেম ঠিক করে কখন সেটি চালাবে।

  2. পরীক্ষা করুন: উপরের কোড সেলে Router ক্লাসে একটি নতুন রুট @app.route('/contact') যোগ করে একটি contact() ফাংশন লিখুন যা "যোগাযোগ করুন" রিটার্ন করে, তারপর test_paths-এ '/contact' রাখুন এবং Run চেপে দেখুন এখন এটি "404 Not Found"-এর বদলে সঠিক ফলাফল দেয় কি না।

    নতুন রুট যোগ করার পর self.routes ডিকশনারিতে '/contact': contact এন্ট্রি যুক্ত হয়ে যায়, তাই app.dispatch('/contact') এখন "যোগাযোগ করুন" রিটার্ন করবে, "404 Not Found" নয়। তবে handle_request_manual() ফাংশনে যদি একই পরিবর্তন না করেন, তাহলে ম্যানুয়াল ও রাউটার ফলাফল আর মিলবে না (match হবে False) — এটাই দেখায় ম্যানুয়াল পদ্ধতিতে প্রতিটি জায়গায় আলাদাভাবে পরিবর্তন করতে হয়, ফ্রেমওয়ার্কে একবার রেজিস্টার করলেই হয়।

আরও পড়ুন · ABCL TECH-এ আপনার পরবর্তী পদক্ষেপ

  • কোর্সের সম্পূর্ণ সিলেবাস দেখুন ৫৮টি পাঠ এখন সবগুলো পাঠ উপলব্ধ — আর্কিটেকচার প্যাটার্ন, ফ্রন্ট-এন্ড/ব্যাক-এন্ড ফ্রেমওয়ার্ক ফান্ডামেন্টাল, স্টেট ম্যানেজমেন্ট, REST API, ORM, অথেন্টিকেশন, রেন্ডারিং স্ট্র্যাটেজি, GraphQL/WebSocket, টেস্টিং, ডিপ্লয়মেন্ট থেকে শুরু করে চূড়ান্ত ফুল-স্ট্যাক সিমুলেশন ক্যাপস্টোন পর্যন্ত।
  • JavaScript Programming কোর্স সহোদর কোর্স এই কোর্সের ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক মডিউলগুলোর ভাষাগত ভিত্তি সেই কোর্সেই তৈরি হয়েছে।
  • Database Management Systems কোর্স সহোদর কোর্স এই কোর্সের ORM ও ডেটাবেস ইন্টিগ্রেশন মডিউলের SQL ভিত্তি সেই কোর্সেই তৈরি হয়েছে।
  • সব 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 — সব এক জায়গায়।
কোর্সে ফিরে যান
Full-Stack Web Frameworks — সব পাঠ