লাইব্রেরি এবং ফ্রেমওয়ার্ক

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

লাইব্রেরি-- লাইব্রেরি আসলে কিছু কোডের সম্ভার , যেগুলো অন্য কোনো ডেভেলপার ডেভেলপ করে রেখেছেন এবং তিনি ই মেইন্টেন করেন , আমরা ইউজার রা শুধু প্রয়োজন মত সেই কোড গুলো ব্যাবহার করি কিছু কমন প্রবলেম সলভ করার জন্য। jQuery, React

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

এই ডেফিনেশন দেখলে আমাকে পাগল বলতে পারেন। লিখলাম টা কি? এমন অস্বাভাবিক লাগলে ও ডেফিনেশন দুটোই সত্য ,ঠিক এমনটাই দেখতে পাবেন বিভিন্ন আর্টিকেলে। এখন অনেক প্রশ্ন মাথাই আসবে...

এদের মধ্যে পার্থক্য কি ? অন্যের কোড আমরা কেন ব্যাবহার করি ব্লা ব্লা।

অন্যের কোড আমরা কেন ব্যাবহার করি ?

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

এখন মাথাই আসতে পারে , তারা কিভাবে বুঝলো আমার এই মেথড গুলোরই দরকার পরবে?

আসলে প্রতিটি অ্যাপ্লিকেশনেই কিছু ফিচার থাকে যেগুলো প্রায় সকল অ্যাপ্লিকেশনেই দেখা যায় । এমন কমন কাজ গুলো করার জন্যই কোড গুলো লিখে

একসাথে করে রেখে দেওয়া হয়েছে যেন প্রতিবার প্রত্যেক ডেভেলপারকে সেই কমন কোড গুলো লেখার জন্য সময় ব্যয় করতে না হয়। কারন আমাদের

কোডকে DRY(don't repeat yourself) রাখতে হবে।

function addition(a,b) {
   const sum = a+b;
   return sum;
}

function subtraction(a,b) {
   const sum = a-b;
   return sum;
}

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

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

আচ্ছা তাহলে লাইব্রেরি এবং ফ্রেমওয়ার্ক এর মধ্যে পার্থক্য টা কোথায়?

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

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

লাইব্রেরি কিন্তু আপনাকে কন্ট্রোল করছে না। আপনি লাইব্রেরিকে কন্ট্রোল করছেন। যেখানে যেখানে দরকার সেখানে শুধু লাইব্রেরি কল করছেন।

ফ্রেমওয়ার্ক এর ব্যাপার টা পুরোপুরি উলটো । লাইব্রেরিকে আপনি কন্ট্রোল করছিলেন কিন্ত ফ্রেমওয়ার্ক আপনাকে কন্ট্রোল করবে । আপনার নিয়মে সে চলবে না বরং আপনাকে চলতে হবে ফ্রেমওয়ার্ক এর নিয়মে।

আবার ধরুন আপনি বাড়ি বানাবেন, তবে সেটা নিজে করবেন না। কন্ট্রাক্টার কে বানাতে দিলেন। এখন সে একজন আর্কিটেক্ট কে দিয়ে বাড়ির ডিজাইন করাবে। আর্কিটেক্ট ডিজাইন করবে তার নিয়ম মত । আপনি তো হুট করে ১০ টা বিমের জায়গায় ৫ টা বিম করতে বলতে পারবেন না। অথবা দরজা জানালা কোথায় হলে বাড়ি টা পার্ফেক্ট হবে সেটা ভেবেই আর্কিটেক্ট সকল ডিজাইন করে দিবে। তারপর আপনি ইচ্ছে করলেই হুট হাট যে কোনো কিছু চেইঞ্জ করতে পারবেন না।

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

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

এখন একটা উদাহরন দেখা যাক jQuery(লাইব্রেরি) এবং Vue.js(ফ্রেমওয়ার্ক) এর ----

With jQuery:.........

// app.js
// A bunch of our own code, 
// followed by calling the jQuery library
let error = false;
const errorMessage = 'An Error Occurred';
$('#myButton').on('click', () => {
  error = true; // pretend some error occurs and set error = true
  if (error) {
    $('#app')
       .append(`
${errorMessage}

`);
  } else {
    $('#error').remove();
  }
});

এখান এরর ম্যাসেজ শো করানোর জন্য আমরা জাস্ট jQuery লাইব্রেরি এর মেথড কল করে দিয়েছি। সে তার কাজ করে দিয়েছে। আমাদের কাছেই কন্ট্রোল

আছে ।

With Vue.js:...........

const vm = new Vue({
    template: `Submit
               {{ errorMessage }}`,
    el: "#vue-example",
    data: {
        error: null,
        errorMessage: "An Error Occurred",
    },
    methods: {
        checkForErrors() {
            this.error = !this.error;
        },
    },
});

এখানে Vue.js আমাদের কিছু ফাকা জায়গা দিয়ে দিয়েছিলো , আমারা সেগুলো পুরন করেছি। Vue কনস্ট্রাক্টর একটা অবজেক্ট যেখানে কিছু

প্রোপার্টি আছে। সেগুলো আমাদের বলে তার কি লাগবে আর আমরা তাকে শুধু সেগুলো দিয়ে দেই। আর বিহান্ড দা সিনে Vue.js নিজেই ডিসিশন নেই

সে কি করবে। এক্ষেত্রে আমাদের কোনো কন্ট্রোল নেই। আমরা জাস্ট ইনপুট দিয়ে দিচ্ছি।

ফ্রেমওয়ার্ক এর সুবিধাঃ

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

ফ্রেমওয়ার্ক এর অসুবিধাঃ

ফ্রেমওয়ার্ক আসলে অসংখ্য কোডের সমষ্টি, তার মানে লোডিং টাইম বেশি এবং এটা পার্ফমেন্সে ইফেক্ট করে। আবার কিছু ছোট সিম্পল অ্যাপ্লিকেশনে যদি

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

লাইব্রেরি এর সুবিধাঃ

যখন যেখানে ইচ্ছা লাইব্রেরি কল করা যাবে । অ্যাপ্লিকেশন এর পুরো কন্ট্রোল আপনার হাতে থাকবে। যেখানে যেভাবে ইচ্ছে কাস্টমাইজ করতে পারবেন।

লাইব্রেরি ব্যাবহার করে প্রোপার কাস্টমাইজেশন এর মাধ্যমে অ্যাপ্লিকেশন অনেক স্মুথ করা সম্ভব।

লাইব্রেরি এর অসুবিধাঃ

লাইব্রেরি ব্যাবহারের সময় সতর্ক থাকতে হবে , কারন এখানে পুরো কন্ট্রোল আপনার হাতে । অ্যাপ্লিকেশন এর আর্কিটেক্সার ঠিক মত না হলে সব পার্ফমেন্সে সবচেয়ে খারাপ আসবে।

শেষকথাঃ

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

ii) ডেভেলপার লাইব্রেরিকে কন্ট্রোল করে কিন্তু ডেভেলপারকে কন্ট্রোল করে ফ্রেমওয়ার্ক।