ফ্রন্ট এন্ড ডেভেলপমেন্ট বনাম ব্যাক এন্ড ডেভেলপমেন্ট ? Front End Development VS Back End Development)

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

সাধারনত ওয়েব ডিজাইন বা ডেভেলপমেন্ট শুরুর প্রথম পর্যায়ে, আমরা ডিজাইন এবং ডেভেলপমেন্ট এর মধ্যে পার্থক্য সম্পর্কে বিভ্রান্তিতে পরে যাই। ওয়েব ডিজাইনারের ভূমিকা কী? ওয়েব ডিজাইন নিয়ে কাজ করার সাথে কী জড়িত? ওয়েব ডিজাইন এবং ওয়েব ডেভেলপমেন্ট কি একই? এগুলি কি একই অর্থে আলাদা নাম কিংবা একই ভুমিকা পালন করে?

সহজ উত্তর হবে না। প্রত্যেকের ভূমিকা একে অপরের থেকে সম্পূর্ণ পৃথক। তবে আসুন একজন ওয়েব ডিজাইনার এবং ওয়েব ডেভেলপার উভয়েরই বিভিন্ন ভূমিকা ও পদ্ধতিগুলি এবং এদের মধ্যে যে পার্থ্যক্য রয়েছে তা দেখে নেওয়া যাক।

ওয়েব ডিজাইন

ওয়েব ডিজাইন সম্পর্কে সামান্য কিছু আবারো বলি, সহজ ভাষায় বললে একটা ওয়েবসাইট দেখতে কেমন হবে বা এর সাধারন রূপ কেমন হবে তা নির্ধারণ করা। ওয়েবপেজ ডিজাইন করা হয় বিভিন্ন ধরনের ইউ আই(UI)(User Interface) টুলস ব্যবহার করে, যেমনঃ Adobe Photoshop, Adobe XD, Figma ইত্যাদি বহুল ব্যবহৃত টুলসগুলো।

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

উদাহরনঃ যেমন ফেসবুকের কথাই ধরি, যখন আপনি ফেসবুকে আপনার প্রোফাইলে লগিন করেন তখন আপনি আপনার ছবি, আপনার ডিটেইলস, আপনার বন্ধুদের পোষ্ট ইত্যাদি দেখতে পান, এইযে দেখতে পাচ্ছেন আপনি আলাদা ছবি, লেখা, আলাদা ভিডিও ইত্যাদি হলো ডাইনামিক ওয়েব কন্টেন্ট এর কারনে, এই কন্টেন্ট গুলো আপনার প্রোফাইলে একরকম আর আপনার বন্ধুর প্রফাইলে লগিন করলে সে আরেক রকম দেখতে পায়।

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

ওয়েব পেজ এর ডিজাইন পার্ট কে ইউ আই ডিজাইন ও বলা হয়, ডিজাইনকে আরো বিভিন্নভাবে ভাগ করা যায়, সেটা ডিজাইন নিয়ে আলোচনায় বিস্তারিত আলোচনা করা যাবে।

ওয়েব ডেভেলপমেন্ট

অপরদিকে ওয়েব ডেভেলপমেন্ট অংশ কে দুটি ভাগে ভাগ করা হয়ঃ-

১। ফ্রন্ট এন্ড ডেভেলপমেন্ট
২। ব্যাক এন্ড ডেভেলপমেন্ট

ফ্রন্ট এন্ড ডেভেলপমেন্ট(Front End Development)

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

একটা বাস্তব উদাহরণ দেই,
ধরুন আপনি একজন খাদ্যপ্রিয় মানুষ, রেস্টুরেন্টে বসে খেতে বেশ পছন্দ করেন। একটা রেস্টুরেন্টের দুইটা পার্ট থাকে এর মধ্যে একটা বাইরের অংশ, যেখানে রেস্টুরেন্টের বয় আপনার কাছে খাবার পরিবেশন করে আর একটা ভিতরের অংশ(রান্নাঘর) যেখানে খাবার তৈরি করা হয় কাস্টমার এর চাহিদা অনুযায়ী। এখানে ফ্রন্ড এন্ড এর কাজ করে রেষ্টুরেন্টের প্রথম অংশ যেখানে অর্ডার ম্যানেজমেন্ট, খাবারের মেনু দেখা, খাবার খাওয়া, বিল পেমেন্ট ইত্যাদি।

অপরদিকে (রান্নাঘরের খাবার প্রসেস করা) ব্যাক এন্ড এর কাজ।

ফ্রন্ট এন্ড ডেভেলপমেন্ট করতে HTML,CSS,JS এর ব্যাবহার হয়। HTML দিয়ে ওয়েব পেজ এর কন্টেন্ট গুলা ওয়েবসাইটে বসানো হয়, এর পর CSS দিয়ে সেটা ডিজাইনকৃত লেআউট এর সাথে মিল রেখে স্টাটিক ওয়েব পেজ এ কনভার্ট করা হয়, এর পর JS এর সহযোগিতায় ইউজার ইন্টারেকশন এর কাজগুলো করা হয়, যেমন বিভিন্ন বাটনে ক্লিক করা, ওয়েব সাইটের বিভিন্ন প্রানবন্ত ইফেক্ট তৈরী করা, ইত্যাদি কাজগুলো করা হয়। উদাহরণস্বরূপ রেস্টুরেন্টের ডেকোরেশন, বা সাজসজ্জা অংশ, খাবারের মেন্যু, ওয়েটার, ক্যাশ কাউন্টার ইত্যাদি ফ্রন্ড এন্ড এর অংশ।

অর্ডার প্রসেসিংঃ

প্রথমে খাবারের মেন্যু দেখে কাস্টমার খাবার অর্ডার করে। এটা স্টাটিক কন্টেন্ট কাস্টমারকে দেখতে সহযোগিতা করে যে, কাস্টমার কি দেখতেছে। একই ব্যাপার ওয়েবসাইটে ওয়েব কন্টেন্ট গুলো দেখানোর জন্য৷ HTML & CSS ব্যবহার করা হয়।

এরপর কাস্টমার অর্ডার প্লেস করতে চায় রান্নার কাজে সক্রিয় লোকদের(Kitchen Staf) কাছে। এক্ষেত্রে একজন ওয়েটার(Waiter) এর কাজ যেমন কাস্টমার এর সাথে কথোপকথন, কাস্টমার এর চাহিদা বুঝে খাবারের অর্ডার নেয় এবং রান্নাঘরে(Kitchen) অর্ডার পাঠায়। খাবার পছন্দ করে অর্ডার করার মতই ব্যাপারটা, ভিজিটর ওয়েবসাইটে এসে কিছু চায়।

তাহলে ফ্রন্ট এন্ড এর সারাংশ হলোঃ
১। ভিজিটর ওয়েবসাইটে ভিজিট করে এবং দেখে আপনি কি অফার করছেন বা কি প্রদর্শন করছেন(HTML).
২। কাস্টমার আরো তথ্য চায় সিন্ধান্ত নেওয়ার জন্য( Interactivity/JavaScript)
৩। ভিজিটর/কাস্টমার পদক্ষেপ নেয় যা চায় তার উপর(User Request/JavaScript)

 

ব্যাক এন্ড ডেভেলপমেন্ট(Back End Development)

আপনি কি দেখেছেন রেস্টুরেন্ট এর রান্নাঘরের অংশ? আপনি যা দেখেছেন রেস্টুরেন্টের খাবার পরিবেশন, ক্যাশ কাউন্টার অংশে, তার থেকে সম্পূর্ণ আলাদা কিচেন অংশ।
এটা ফ্রন্ড এন্ড এবং ব্যাক এন্ড এর মধ্যে পার্থ্যক্য। রেস্টুরেন্ট এর মতই সার্ভার সাইড বা ব্যাক এন্ড সম্পূর্ণ আলাদা।
ব্যাক এন্ড সার্ভারে রয়েছে অনেক বেশি ক্ষমতা ফ্রন্ড এন্ড ব্রাউজার এর তুলনায় অথবা যেকোনো ব্যবহৃত ডিভাইস এর তুলনায় ।

সার্ভার(Server) কি সেটা অন্য আলোচনা তবে এক লাইনে বলতে গেলে সার্ভার তাকেই বলা হয় যে সার্ভ (serve)করে(সার্ভিস প্রদান করা)।
ব্যাক এন্ড সার্ভারে যে কাজ হয় তার মুল উদ্দ্যেশ্য হলো দক্ষতা এবং উৎপাদনশীলতা।

ব্যাক এন্ড এর সারাংশঃ

১। রেস্টূরেন্টের রান্নাঘরের কাজ আর ব্যাক এন্ড এর কাজ একই টাইপের।
২। এর সমস্ত উপাদান সবসময় সঠিক যায়গায় থাকা উচিত।
৩। সকল উপাদানগুলির নিজ নিজ কাজ সম্পর্কে অবশ্যই জানতে হবে এবং ধারাবাহিক ভাবে পারফরমেন্স করতে থাকবে, যেমনটি রেস্টুরেন্ট এর কিচেন অংশে হয়ে থাকে।
৪। সঠিক অর্ডার গ্রহন করে কোয়ালিটি সম্পূর্ন এবং সঠিকভাবে খাবার তৈরি করে ওয়েটার কতৃক খাবার সরবারহ করার মতই সার্ভারকে অবশ্যই কোনও ওয়েবসাইট বা কোনও অ্যাপ্লিকেশন থেকে ডেটা সংগহ করতে হবে এবং প্রতি সময় সঠিক রেসপন্স প্রেরণ করতে হবে।

সারাংশঃ ফ্রন্ট এন্ড ডেভেলপমেন্ট করতে যা যা শিখতে হয় তার মধ্যে অন্যতম হলোঃ HTML,CSS এবং JS,
অপরদিকে ব্যাক এন্ড এ কাজ করতে হলে (Server Side Language(Php, Python, Node.js, Java, C# and more), সার্ভার সাইড যেকোনো একটি ল্যাংগুয়েজ ভালোভাবে শিখতে হবে এবং যেকোনো একটি ডাটাবেইজ ভালোভাবে শিখতে হবে (Database, MySql, MongoDB or others).

ফ্রন্ট এন্ড ডেভেলপমেন্ট ও ব্যাক এন্ড ডেভেলপমেন্ট এর গুরুত্ব(Importance of front end development and back end development):

একটি কমপ্লিট ওয়েবসাইট অথবা মোবাইল এপ্লিকেশন তৈরী করতে গেলে ফ্রন্ট এন্ড এবং ব্যাক এন্ড দুইটাই সমান ভাবে গুরুত্বপূর্ন, একটি রেস্টুরেন্টে যেমন কিচেন স্টাফ ও ওয়েটিং স্টাফ খুবই গুরুত্বপূর্ন ভূমিকা রাখে তেমনি একটি ব্যবসার ডিজিটাল সলুশন তৈরী করতে ফ্রন্ট এন্ড এবং ব্যাক এন্ড এর গুরুত্ব অপরিসীম।

ফ্রন্ট এন্ড বনাম ব্যাক এন্ড ডেভেলপমেন্ট নিয়ে কোনো প্রশ্ন বা পরামর্শ থাকলে, আমাদেরকে নিচে কমেন্টের মাধ্যমে জানাতে ভুলবেন না।

ধন্যবাদ আপনার মূল্যবান সময় দিয়ে আমাদের পুরো পোস্টটি পরার জন্য।

               MUHAMMED JUWEL AHMED 

আসসালামু আলাইকুম, আমি মোহাম্মদ জুয়েল আহমদ। ফাউন্ডার জুয়েল আহমদ ব্লগ । অনলাইন ইন্ড্রাস্টিতে কাজ করছি গত ৬ বছর ধরে। পড়ালেখা করেছি ইংরেজি নিয়ে পাশাপাশি সফটওয়্যার  ইঞ্জিনিয়ারিং নিয়ে। এ জন্য অনলাইন ক্যারিয়ার বিষয়ক গাইডলাইন দিতে পছন্দ করি। যারা আমার কাছে অনলাইন ক্যারিয়ার গাইড নেয় তাদেরকে আমি আমার জ্ঞান থেকে বিশুদ্ধ জিনিস টা দেওয়ার চেষ্টা করি এবং যাতে সফলতা অর্জন করতে পারে সেজন্য যথাসাধ্য সহযোগীতা করার চেষ্টা করি। আর এই প্রয়াস থেকে আমার লেখালেখি, যাতে করে অনলাইন ক্যারিয়ার এর বিষয়ক সঠিক গাইড লাইন গুলো মানুষ পায় এবং ভুল পথে পা না বাড়ায়। এছাড়াও আমি কাজ করছি ডিজিটাল মার্কেটিং এর অন্যতম গুরুত্বপূর্ন সেক্টর (এস ই ও) কৌশল নিয়ে।