ফ্রন্টএন্ড বনাম ব্যাকএন্ড: পার্থক্যটা কী?
ফ্রন্টএন্ড হলো অ্যাপের সেই অংশ যা ব্যবহারকারীর ব্রাউজারে চলে — পেজ, বোতাম, ফর্ম আর অ্যানিমেশন, যা তারা দেখে ও ক্লিক করে। ব্যাকএন্ড হলো সেই অংশ যা এমন একটি সার্ভারে চলে যেটি ব্যবহারকারী কখনো দেখেন না: এটি ডেটা সংরক্ষণ ও পুনরুদ্ধার করে, ব্যবসায়িক নিয়ম প্রয়োগ করে, কে কী করতে পারবে তা যাচাই করে এবং পেমেন্ট ও ইমেইলের মতো অন্য সেবার সাথে যোগাযোগ করে। দুটো অংশ একটি API-র মাধ্যমে কথা বলে, আর ডেটাবেসের সাথে মিলে এগুলোই একটি "ফুল-স্ট্যাক" অ্যাপ তৈরি করে।
এআই দিয়ে বানানোর সময় এটা কেন গুরুত্বপূর্ণ
কোনো এআই বিল্ডারকে অ্যাপের বর্ণনা দিলে, আপনি বুঝুন বা না বুঝুন, একসাথে দুটো অংশেরই বর্ণনা দিচ্ছেন। "গ্রাহকরা একটি স্লট বুক করতে পারবেন" বললে বোঝায় একটি বুকিং ফর্ম (ফ্রন্টএন্ড), কোন স্লট খালি আছে সে নিয়ম (ব্যাকএন্ড) এবং বুকিংগুলো রাখার একটি জায়গা (ডেটাবেস)।
এই ভাগটা জানা তিনটি ব্যবহারিক সুবিধা দেয়:
- নিরাপত্তা। ফ্রন্টএন্ডে যা আছে, ব্যবহারকারী তা দেখতে ও বদলাতে পারেন। নিয়ম ও সিক্রেট থাকতে হবে ব্যাকএন্ডে।
- ডিবাগিং। "বোতাম সাড়া দিচ্ছে না" আর "বোতাম সাড়া দিচ্ছে, কিন্তু কিছু সেভ হচ্ছে না" — দুটো আলাদা অংশের সমস্যা। আপনি কোনটা দেখছেন তা বললে এআই দ্রুত কারণ খুঁজে পায়।
- হোস্টিং ও খরচ। শুধু ফ্রন্টএন্ডের সাইট সস্তা ও সহজে হোস্ট করা যায়। ব্যাকএন্ড কোথাও না কোথাও চালাতে হয়, যা খরচ এবং অ্যাপ অলস থাকলে কেমন আচরণ করে তাতে প্রভাব ফেলে।
একটি দৈনন্দিন উপমা
একটি রেস্তোরাঁর কথা ভাবুন।
ফ্রন্টএন্ড হলো ডাইনিং রুম: মেনু, টেবিল, সাজসজ্জা, অর্ডার নিতে আসা ওয়েটার। এটি গ্রাহকদের জন্য বানানো, আর তারা এর সবকিছু দেখতে ও ছুঁতে পারেন।
ব্যাকএন্ড হলো রান্নাঘর ও অফিস: শেফদের রান্না, স্টক রুম, ক্যাশ কাউন্টার, কার ছাড় পাওয়া উচিত তার ম্যানেজারের নিয়ম। গ্রাহকরা সেখানে ঢোকেন না, আর ঢোকা উচিতও নয়।
API হলো এই দুইয়ের মাঝের সেতু — অর্ডার ঢোকানো ও খাবার বের হওয়ার সেই কাউন্টার, যেখানে একটি নির্ধারিত ফরম্যাট মেনে আদান-প্রদান হয়। ডেটাবেস হলো স্টক রুম আর অর্ডার খাতা।
গ্রাহক তার অর্ডার স্লিপ বদলে ফেলতে পারেন (ফ্রন্টএন্ড তো তাঁর নিয়ন্ত্রণেই), কিন্তু রান্নাঘরই ঠিক করে কী রাঁধবে আর কত দাম নেবে। এ কারণেই গুরুত্বপূর্ণ যাচাইগুলো থাকে পেছনে।
প্রতিটি অংশ কী করে
| ফ্রন্টএন্ড | ব্যাকএন্ড | |
|---|---|---|
| কোথায় চলে | ব্যবহারকারীর ডিভাইসে, ব্রাউজারে | একটি সার্ভারে, যা আপনি (বা আপনার হোস্ট) নিয়ন্ত্রণ করেন |
| প্রধান কাজ | জিনিস দেখানো, ইনপুট নেওয়া, ক্লিকে সাড়া দেওয়া | ডেটা সংরক্ষণ, নিয়ম প্রয়োগ, অনুমতি বাস্তবায়ন, অন্য সেবা ব্যবহার |
| ব্যবহারকারী কি কোড দেখতে ও বদলাতে পারেন? | হ্যাঁ — এটি তাদের ব্রাউজারে ডাউনলোড হয় | না |
| সিক্রেট API কী রাখা যায়? | না | হ্যাঁ, এনভায়রনমেন্ট ভেরিয়েবলে |
| সাধারণ প্রযুক্তি | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python (FastAPI, Django), C#, Java, Go, Ruby |
| যা ভুল হতে পারে | মোবাইলে লেআউট ভাঙা, বোতাম কাজ না করা, ধীর পেজ | ডেটা সেভ না হওয়া, ভুল ডেটা দেখানো, এরর, নিরাপত্তা ফাঁকফোকর |
কিছু ফ্রেমওয়ার্ক এই রেখাটা ঝাপসা করে দেয়। যেমন Next.js একটি প্রজেক্টে ব্রাউজারের কোড ও সার্ভারের কোড দুটোই রাখতে দেয়। ধারণাটা একই থাকে: প্রশ্ন সবসময় হলো এই অংশটি কোথায় চলে?
একটি বাস্তব উদাহরণ: একটি ক্লাস বুক করা
কেউ যখন একটি যোগ ক্লাস বুক করেন, তখন ধাপে ধাপে কী ঘটে দেখুন।
| ধাপ | কোথায় | কী ঘটে |
|---|---|---|
| 1 | ফ্রন্টএন্ড | সময়সূচির পেজ লোড হয় এবং এই সপ্তাহের ক্লাসের তালিকা ব্যাকএন্ডের কাছে চায়। |
| 2 | ব্যাকএন্ড | ডেটাবেস থেকে ক্লাস ও বুকিং পড়ে, কত সিট খালি আছে হিসাব করে, তালিকাটি JSON হিসেবে ফেরত দেয়। |
| 3 | ফ্রন্টএন্ড | প্রতিটি ক্লাস সময়, শিক্ষক ও খালি সিটসহ দেখায়। |
| 4 | ফ্রন্টএন্ড | ব্যবহারকারী একটি ক্লাস বেছে নাম ও ইমেইল লেখেন। ফর্ম যাচাই করে ইমেইলটি ঠিক দেখাচ্ছে কি না (এটি সৌজন্যমূলক, নিশ্চয়তা নয়)। |
| 5 | ফ্রন্টএন্ড → ব্যাকএন্ড | API এর মাধ্যমে একটি POST /api/bookings অনুরোধ পাঠায়। |
| 6 | ব্যাকএন্ড | ইনপুট আবার যাচাই করে, ক্লাস পূর্ণ কি না দেখে, বুকিং সেভ করে, এবং একটি সিক্রেট কী দিয়ে ইমেইল সেবাকে নিশ্চিতকরণ ইমেইল পাঠাতে বলে। |
| 7 | ব্যাকএন্ড → ফ্রন্টএন্ড | "বুক হয়েছে" অথবা "দুঃখিত, ক্লাস পূর্ণ" ফেরত দেয়। |
| 8 | ফ্রন্টএন্ড | নিশ্চিতকরণের পর্দা দেখায়। |
ধাপ 4 ও 6 লক্ষ করুন: ইনপুট দুইবার যাচাই হয়। ফ্রন্টএন্ডের যাচাই তাৎক্ষণিক প্রতিক্রিয়া দেয়; আসল কাজ করে ব্যাকএন্ডের যাচাই, কারণ কোনো নির্দিষ্ট ব্যবহারকারী ফ্রন্টএন্ড পুরোপুরি এড়িয়েও যেতে পারেন।
সাধারণ পরিভাষা
| শব্দ | অর্থ |
|---|---|
| ক্লায়েন্ট / সার্ভার | ক্লায়েন্ট হলো অনুরোধ পাঠানো ব্রাউজার (বা অ্যাপ); সার্ভার সেই অনুরোধের উত্তর দেয়। |
| UI | ইউজার ইন্টারফেস — পর্দা ও নিয়ন্ত্রণগুলো। |
| API | ফ্রন্টএন্ড কীভাবে ব্যাকএন্ডের কাছে ডেটা বা কাজ চায় তার নির্ধারিত পদ্ধতি। |
| Endpoint | API-র একটি নির্দিষ্ট URL, যেমন /api/bookings। |
| ফুল স্ট্যাক | ফ্রন্টএন্ড + ব্যাকএন্ড + ডেটাবেস একসাথে। দেখুন ফুল-স্ট্যাক অ্যাপ কী। |
| Static site | নিজস্ব ব্যাকএন্ড ছাড়া ফ্রন্টএন্ড; সবার জন্য একই ফাইল। |
| SPA | Single-page application: নতুন পেজ লোড না করে ব্রাউজারেই পেজ আপডেট করে এমন ফ্রন্টএন্ড। |
| Server-side rendering (SSR) | পাঠানোর আগে সার্ভার পেজের HTML তৈরি করে, যা গতি ও SEO-তে সহায়ক হতে পারে। |
| এনভায়রনমেন্ট ভেরিয়েবল | ব্যাকএন্ডকে রানটাইমে দেওয়া সেটিংস ও সিক্রেট, যা কোড থেকে আলাদা রাখা হয়। |
আপনার অ্যাপে কি ব্যাকএন্ড লাগবে?
| আপনার অ্যাপ যদি… | ব্যাকএন্ড লাগবে? |
|---|---|
| সবার জন্য একই তথ্য দেখায় | না |
| শুধু আপনাকে ইমেইল পাঠায় এমন একটি যোগাযোগ ফর্ম রাখে | সাধারণত একটি ছোট ব্যাকএন্ড, বা একটি ফর্ম সেবা |
| অন্যরা দেখবে এমন ডেটা সেভ করে | হ্যাঁ |
| লগইন ও ব্যক্তিগত ডেটা থাকে | হ্যাঁ |
| পেমেন্ট নেয় | হ্যাঁ — অন্তত চেকআউট তৈরি ও পেমেন্ট ওয়েবহুক গ্রহণের জন্য |
| সিক্রেট কী সহ কোনো পেইড AI বা অন্য API ব্যবহার করে | হ্যাঁ, কী ব্রাউজারের বাইরে রাখতে |
সাধারণ ভুল ও ভুল ধারণা
- ফ্রন্টএন্ডে সিক্রেট কী রাখা। ব্রাউজারের ডেভেলপার টুল খুললেই যে কেউ এটি দেখতে পারবেন। এআই দিয়ে বানানো অ্যাপে এটিই সবচেয়ে সাধারণ গুরুতর ভুল।
- শুধু ফ্রন্টএন্ডে নিয়ম প্রয়োগ করা। অ-অ্যাডমিনদের জন্য "ডিলিট" বোতাম লুকিয়ে রাখা কোনো সুরক্ষা নয়; ব্যাকএন্ডকেই অনুরোধ প্রত্যাখ্যান করতে হবে।
- ধরে নেওয়া ব্যাকএন্ড মানে শুধু ডেটাবেস। ডেটাবেস তথ্য জমা রাখে। কে তা পড়তে ও বদলাতে পারবে এবং কীভাবে, সেটা ঠিক করে ব্যাকএন্ড।
- ভাবা যে JavaScript মানেই ফ্রন্টএন্ড। JavaScript ও TypeScript Node.js দিয়ে সার্ভারেও চলে।
- ভুল অংশকে দোষ দেওয়া। পেজ ঠিক দেখাচ্ছে কিন্তু ডেটা ভুল হলে সমস্যা সাধারণত ব্যাকএন্ড বা ডেটাবেসে থাকে, ডিজাইনে নয়।
- অতিরিক্ত বানানো। একটি পোর্টফোলিওর কাস্টম ব্যাকএন্ড লাগে না। যোগ করলে খরচ ও চলমান অংশ বাড়ে।
আপনার এআই বিল্ডারকে কী চাইবেন
- "এই অ্যাপের কোন অংশ ব্রাউজারে চলে আর কোনটি সার্ভারে?"
- "সব API কী ব্যাকএন্ডে সরিয়ে এনভায়রনমেন্ট ভেরিয়েবল থেকে পড়ুন।"
- "প্রতিটি ফর্ম ব্রাউজারের পাশাপাশি সার্ভারেও যাচাই করুন।"
- "ব্যাকএন্ডে নিশ্চিত করুন যে শুধু অ্যাডমিনরাই বুকিং মুছতে পারবেন।"
- "পেজ ঠিক দেখাচ্ছে কিন্তু ডেটা সেভ হচ্ছে না — ব্যাকএন্ড লগে অনুরোধটি খুঁজে দেখুন।"
- "এটি একটি সাধারণ মার্কেটিং সাইট; আমরা লাগলে ব্যাকএন্ড যোগ না করে শুধু ফ্রন্টএন্ড রাখুন।"
Mythex-এ ফ্রন্টএন্ড ও ব্যাকএন্ড
নতুন Mythex প্রজেক্ট শুরু হয় Vite, React, TypeScript ও Tailwind দিয়ে তৈরি একটি ফ্রন্টএন্ড থেকে, আর আপনার অ্যাপের প্রয়োজন হলে এজেন্ট একটি ব্যাকএন্ড যোগ করে। আপনি চাইলে একই প্রজেক্টে ফ্রন্টএন্ডের পাশাপাশি Node, Python (FastAPI), C# বা Java দিয়ে তৈরি আলাদা একটি API-ও চালাতে পারেন। প্রিভিউতে ওয়েবসাইট ও API সার্ভারের মধ্যে বদলানো যায়, আর প্রকাশ করলে দুটোই ডিপ্লয় হয়, প্রয়োজন হলে ডেটাবেস ও ফাইল স্টোরেজও যোগ হয়। ডক্সে আছে মাল্টি-সার্ভিস অ্যাপ সম্পর্কে, ওয়েব হোস্টিং গাইডে লাইভ হওয়ার পর দুটো অংশ কোথায় চলে তা আছে, এবং অ্যাপ টেমপ্লেট থেকে ফুল-স্ট্যাক উদাহরণ দ্রুত দেখে নেওয়া যায়।
প্রশ্নোত্তর
ফ্রন্টএন্ড আর ব্যাকএন্ডের মধ্যে পার্থক্য কী?
ফ্রন্টএন্ড হলো অ্যাপের সেই অংশ যা ব্যবহারকারীর ব্রাউজারে চলে — পেজ, বোতাম আর ফর্ম, যা তারা দেখে ও ক্লিক করে। ব্যাকএন্ড চলে এমন একটি সার্ভারে, যা ব্যবহারকারী কখনো দেখতে পান না; এটি ডেটা সংরক্ষণ করে, ব্যবসায়িক নিয়ম প্রয়োগ করে, অনুমতি যাচাই করে এবং অন্য সেবার সাথে যোগাযোগ করে।
প্রতিটি অ্যাপের কি ব্যাকএন্ড লাগে?
না। একটি মার্কেটিং সাইট, পোর্টফোলিও বা সাধারণ ল্যান্ডিং পেজ শুধু ফ্রন্টএন্ড দিয়েই হতে পারে। অ্যাপকে যখনই শেয়ার করা ডেটা সংরক্ষণ করতে হয়, ব্যবহারকারীকে লগইন করাতে হয়, পেমেন্ট নিতে হয় বা সিক্রেট API কী ব্যবহার করতে হয়, তখন কোনো না কোনো ধরনের ব্যাকএন্ড লাগবেই।
HTML কি ফ্রন্টএন্ড না ব্যাকএন্ড?
ব্রাউজারে চলা HTML, CSS ও JavaScript হলো ফ্রন্টএন্ড। Node.js ব্যবহার করে JavaScript সার্ভারেও চলতে পারে, তখন সেটি ব্যাকএন্ড কোড। ভাষা দিয়ে নির্ধারিত হয় না; কোডটি কোথায় চলে, সেটাই আসল বিষয়।
ফুল স্ট্যাক মানে কী?
ফুল স্ট্যাক মানে ফ্রন্টএন্ড ও ব্যাকএন্ড দুটোই (এবং সাধারণত ডেটাবেসও) অন্তর্ভুক্ত করা। একটি ফুল-স্ট্যাক অ্যাপে এই তিনটি অংশই থাকে, আর ফুল-স্ট্যাক ডেভেলপার এগুলোর সবগুলোতেই কাজ করেন।