UNDERSTAND FRONTEND APPLICATION

 UNDERSTAND THE BIG PICTURE OF FRONTEND APPLICATION

UNDERSTAND THE BIG PICTURE OF FRONTEND APPLICATION

hello programmers আশা করি সবাই ভালো আছেন । আজকে মূলত আমরা ফ্রন্টএন্ড এর big picture সম্পর্কে ধারণা নিবো । বর্তমানে ফ্রন্টএন্ড টেকনোলজির দুনিয়াটা পুরোপুরি change হয়ে গিয়েছে । so আমরা এপ্লিকেশন ডেভেলপমেন্ট এ পুরপুরি jump করার পূর্বে আমাদের উচিত সবকিছু সম্পর্কে একটা proper overview নেওয়া । তো চলুন দেরি না করে শুরু করা যাক ।

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

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

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

প্রথম কনসেপ্ট টা হলো রিপ্রেসেন্টেশন লেয়ার - আমাদের এপ্লিকেশন এর যে পোরশন টাতে আমরা ui নিয়ে কাজ করি সে পোরশন টাকেই আমি বলছি রিপ্রেসেন্টেশন লেয়ার । এই লেয়ারে বেসিক্যালি আমরা এপ্লিকেশন এর ui টা দেখতে কেমন হবে তা বর্ণনা করে থাকি । সহজভাবে বললে এই রিপ্রেসেন্টেশন লেয়ারটা আমাদের এপ্লিকেশন এর ui কে রিপ্রেসেন্ট করার কাজটা করে । এই হলো রিপ্রেসেন্টেশন লেয়ার যে লেয়ারটা সব গুলা ফ্রন্টএন্ড application এই থাকে ।

দ্বিতীয় কনসেপ্ট টা হলো ডাটা লেয়ার - সাধারণত আমাদের এপ্লিকেশন এ কি থাকে ? ডাটা থাকে । ডাটা কে নিয়েই যত কাজকারবার । তাহলে এই ডাটা নিয়ে কাজ করতে হলে অবশ্যই আমাদের একটা স্টোরেজ দরকার আর এই স্টোরেজ কেই আমি বলছি ডাটা লেয়ার । এই লেয়ারেই আমার এপ্লিকেশন এর সমস্ত ডাটা থাকবে । ডাটা লেয়ারে মূলত দুই ধরণের ডাটা থাকে - একটা হচ্ছে এপ্লিকেশন ডাটা আরেকটা হচ্ছে সার্ভার ডাটা । এপ্লিকেশন ডাটা হলো সেই ডাটা যেই ডাটা টা শুধুমাত্র এপ্লিকেশন লেভেল এই ব্যবহার করা হয় এবং যে ডাটা টা নিয়ে সার্ভার এর সাথে কোনো ডিল করা হয় না বা প্রয়োজন পরে না সেগুলোই হলো এপ্লিকেশন ডাটা । আর সার্ভার ডাটা হলো সেই ডাটা যেই ডাটা গুলো আমরা সার্ভার থেকে পায় । তাহলে এইটা বোঝা গেলো যে আমাদের এপ্লিকেশন এর সমস্ত ডাটা এই ডাটা লেয়ার এ থাকবে হোক সেটা এপ্লিকেশন ডাটা অথবা হোক সেটা সার্ভার সাইড থেকে আসা ডাটা । আশা করি ডাটা লেয়ার এর বিষয় টা ক্লিয়ার ।

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

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

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

এখন এই চারটা কাজকে যদি আমি story আকারে বলি তাহলে যা দাড়ায় - ব্যাকএন্ড থেকে somehow আমার ডাটা আসবে । so ডাটা গুলো আসবে নেটওয়ার্ক লেয়ার এর মাদ্ধমে । নেটওয়ার্ক লেয়ারের মাধ্যমে ডাটা এনে লজিক লেয়ারে ডাটাগুলো process করে ডাটা লেয়ার এ রাখবো । যাতে পরবর্তীতে এই ডাটাগুলো সুন্দর করে process করে রিপ্রেসেন্টেশন লেয়ার এ দেখাইতে পারি । এবং রিপ্রেসেন্টেশন লেয়ার থেকে ডাটা নিয়ে নেটওয়ার্ক লেয়ার ব্যবহার করে ব্যাকএন্ড এর কাছে ডাটা টা পৌঁছে দিতে পারি । that is the story…

এই হলো একটি ফ্রন্টএন্ড এপ্লিকেশন এর whole জিনিসপাতি বা বিষয় বস্তু । আমরা যদি এই কনসেপ্ট গুলো ভালোভাবে grab করতে পারি তাহলে আমরা সব ধরণের ফ্রন্টএন্ড এপ্লিকেশন নিয়ে খুব সহজেই কাজ করতে পারবো, হোক সেটা mobile application , web application অথবা desktop application. concept is same সব এপ্লিকেশনই same way তে কাজ করে । হইতে পারে তার ইমপ্লিমেন্টেশন একটু ভিন্ন । হইতে পারে সেখানে ব্যবহার করা প্রোগ্রামিং language একটু ভিন্ন । হইতে পারে সেখানে ব্যবহার করা framework বা library একটু ভিন্ন । কিন্তু the way of thinking is 100% same.

NOTE -কারেন্ট ছিল না তাই ভাবছিলাম কি করি । তখন মাথায় চিন্তা আসলো যে HM Nayem ভাইয়ের ফুল স্ট্যাক আর্মির লাস্ট দুই - তিনটা লেকচার থেকে যা শিখেছি তা লিখে প্রকাশ করলে কেমন হয় । so এই চিন্তা থেকেই আর্টিকেল টা লেখা । যদি কোথাও ভুল কিছু লিখে থাকি তাহলে please correct me i would massively appreciate it thank you