Microsoft Technologies MVVM (Model-View-ViewModel) Pattern এবং এর প্রয়োগ গাইড ও নোট

MVVM (Model-View-ViewModel) একটি জনপ্রিয় আর্কিটেকচার প্যাটার্ন যা বিশেষভাবে WPF (Windows Presentation Foundation), Xamarin, এবং UWP (Universal Windows Platform) অ্যাপ্লিকেশন ডেভেলপমেন্টে ব্যবহৃত হয়। এটি অ্যাপ্লিকেশনের UI (User Interface) এবং ব্যবসায়িক লজিক এর মধ্যে ক্লিন এবং প্রায়োগিকভাবে ভেঙে দেয়। MVVM প্যাটার্নের মাধ্যমে কোডের পুনঃব্যবহারযোগ্যতা, টেস্টেবিলিটি, এবং রক্ষণাবেক্ষণযোগ্যতা বৃদ্ধি পায়।

MVVM প্যাটার্নের উপাদানসমূহ (Components of MVVM Pattern)

MVVM প্যাটার্ন মূলত তিনটি প্রধান উপাদান নিয়ে গঠিত:

1. Model

Model হল অ্যাপ্লিকেশনের ডেটা এবং ব্যবসায়িক লজিকের অংশ। এটি ডেটাবেস, ওয়েব সার্ভিস, ব্যবসায়িক নিয়ম, এবং অ্যাপ্লিকেশনের ডেটা সংক্রান্ত অন্যান্য ফিচার সমন্বিত করে। মডেলটি সাধারণত View বা ViewModel এর সাথে সরাসরি যোগাযোগ রাখে না।

• কাজ: ডেটা সংগ্রহ করা, প্রক্রিয়া করা এবং আপডেট করা।
• উদাহরণ: অ্যাপ্লিকেশনের ব্যবহারকারীর তথ্য, পণ্য তালিকা, বা কোনও আর্থিক হিসাব সম্পর্কিত তথ্য।

2. View

View হল ইউজার ইন্টারফেস যা ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন করে। এটি মূলত XAML ফাইল দ্বারা গঠিত যেখানে কন্ট্রোল এবং ইউআই উপাদানসমূহ থাকে। View কখনোই ডেটা বা লজিকের সাথে সরাসরি কাজ করে না, এটি শুধুমাত্র ViewModel থেকে ডেটা প্রদর্শন করে।

• কাজ: ইউজারের ইন্টারঅ্যাকশন এবং ViewModel এর সাথে ডেটা প্রেজেন্টেশন।
• উদাহরণ: উইন্ডো, বাটন, টেক্সটবক্স, ড্রপডাউন লিস্ট ইত্যাদি।

3. ViewModel

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

• কাজ: Model এর ডেটা প্রক্রিয়া করা এবং View এর সাথে ইন্টারঅ্যাকশন এর মাধ্যমে ডেটা শেয়ার করা।
• উদাহরণ: ইউজার ইনপুট প্রক্রিয়া করা, ডেটা ফিল্টার করা, এবং View এর জন্য ডেটা প্রদান করা।

MVVM প্যাটার্নের কাজ করার প্রক্রিয়া (How MVVM Works)

1. Model:
   Model সাধারণত একটি ডেটা ক্লাস বা সেবা হিসেবে কাজ করে যা ডেটার প্রসেসিং বা ক্যালকুলেশন পরিচালনা করে। এটি ডেটাবেস থেকে ডেটা নিয়ে আসে অথবা সিস্টেমের কোনো অংশ থেকে ডেটা সংগ্রহ করে।
2. ViewModel:
   ViewModel ডেটা থেকে প্রয়োজনীয় রূপান্তর করে এবং View এর জন্য প্রস্তুত করে। ViewModel Model এর ডেটার উপর নির্ভর করে এবং ইউজারের ইন্টারঅ্যাকশন অনুযায়ী তা আপডেট করে। এটি INotifyPropertyChanged ইন্টারফেস ব্যবহার করে View কে পরিবর্তন জানায়।
3. View:
   View শুধুমাত্র ViewModel এর ডেটা প্রদর্শন করে এবং ইউজার ইন্টারঅ্যাকশন (যেমন বাটন ক্লিক, ইনপুট) গ্রহণ করে। View এর সবকিছু ViewModel এর সাথে ডেটা বাইন্ডিংয়ের মাধ্যমে যুক্ত থাকে। এটি ইউজারকে দৃশ্যমান উপাদান প্রদান করে।

MVVM প্যাটার্নের উদাহরণ (MVVM Pattern Example)

এখানে একটি সাধারণ MVVM প্যাটার্নের উদাহরণ দেওয়া হলো, যেখানে একটি User এর নাম এবং বয়স প্রদর্শন করা হয়।

1. Model (UserModel)

public class UserModel
{
    public string Name { get; set; }
    public int Age { get; set; }
}

2. ViewModel (UserViewModel)

using System.ComponentModel;

public class UserViewModel : INotifyPropertyChanged
{
    private string name;
    private int age;

    public string Name
    {
        get { return name; }
        set
        {
            if (name != value)
            {
                name = value;
                OnPropertyChanged(nameof(Name));
            }
        }
    }

    public int Age
    {
        get { return age; }
        set
        {
            if (age != value)
            {
                age = value;
                OnPropertyChanged(nameof(Age));
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public UserViewModel(UserModel user)
    {
        Name = user.Name;
        Age = user.Age;
    }
}

3. View (XAML for UserView)

<Window x:Class="MVVMExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MVVM Example" Height="200" Width="400">
    <Grid>
        <TextBox Text="{Binding Name}" HorizontalAlignment="Left" VerticalAlignment="Top" Width="200" Margin="10"/>
        <TextBox Text="{Binding Age}" HorizontalAlignment="Left" VerticalAlignment="Top" Width="200" Margin="10,50,10,10"/>
    </Grid>
</Window>

4. MainWindow.xaml.cs (Code-behind)

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        var user = new UserModel { Name = "John", Age = 30 };
        this.DataContext = new UserViewModel(user);
    }
}

MVVM প্যাটার্নের সুবিধা (Advantages of MVVM Pattern)

• Separation of Concerns:
  MVVM প্যাটার্নটি ইউজার ইন্টারফেস এবং লজিককে আলাদা রাখে, যা কোডের রক্ষণাবেক্ষণ এবং পুনঃব্যবহারযোগ্যতা বাড়ায়।
• Data Binding:
  ViewModel এবং View এর মধ্যে ডেটা বাইন্ডিং ব্যবহার করার মাধ্যমে, View তে ডেটার পরিবর্তন স্বয়ংক্রিয়ভাবে প্রতিফলিত হয়, যা ইউজার ইন্টারফেসকে আরও ইন্টারঅ্যাকটিভ এবং সহজ করে তোলে।
• Testability:
  ViewModel সবার আগে লজিক ধারণ করে এবং এটি Model থেকে ডেটা নেয়, যা একে ইউনিট টেস্ট করতে সহায়ক করে তোলে। View এবং ViewModel এর মধ্যে কোনো সরাসরি লজিক বা ডেটা সম্পর্ক নেই, তাই টেস্টিং সহজ হয়।
• Maintainability:
  MVVM অ্যাপ্লিকেশনগুলি অন্যান্য অ্যাপ্লিকেশনগুলির তুলনায় আরও সহজে রক্ষণাবেক্ষণ করা যায় কারণ UI এবং লজিক আলাদা থাকে, যা ছোট ছোট পরিবর্তন করা সহজ করে তোলে।

সারাংশ

MVVM (Model-View-ViewModel) একটি শক্তিশালী আর্কিটেকচার প্যাটার্ন যা WPF, Xamarin, এবং UWP অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। এটি Model (ডেটা), View (UI), এবং ViewModel (ডেটা প্রক্রিয়া এবং বাইন্ডিং) এর মধ্যে স্পষ্টভাবে দায়িত্ব ভাগ করে দিয়ে অ্যাপ্লিকেশনের রক্ষণাবেক্ষণ, টেস্টিং, এবং স্কেলেবিলিটি সহজ করে তোলে। MVVM ডেভেলপারদের জন্য একটি ক্লিন এবং মডুলার ডেভেলপমেন্ট পরিবেশ তৈরি করে, যা বৃহৎ প্রকল্পে বিশেষভাবে উপকারী।