MVVM Pattern

MayFest2024

1. Giới thiệu về MVVM Pattern

MVVM (Model-View-ViewModel) là một mô hình phát triển phần mềm phổ biến, giúp tách biệt rõ ràng giữa dữ liệu, giao diện người dùng và logic xử lý trong ứng dụng.

2. Các thành phần của MVVM Pattern

Model: Là thành phần chứa dữ liệu và logic liên quan đến xử lý dữ liệu, tương tự như trong MVP.
View: Là giao diện người dùng hiển thị dữ liệu và tương tác với người dùng.
ViewModel: Là thành phần trung gian giữa Model và View, chịu trách nhiệm chuyển đổi dữ liệu từ Model thành định dạng phù hợp để hiển thị trên View và xử lý các sự kiện từ View.

3. Lợi ích của MVVM Pattern

Tách biệt logic: MVVM tách biệt rõ ràng giữa logic ứng dụng và giao diện người dùng, giúp cho việc phát triển và bảo trì trở nên dễ dàng hơn.
Two-way binding: MVVM sử dụng binding dữ liệu để tự động cập nhật giao diện người dùng khi có thay đổi trong dữ liệu, giúp giảm bớt mã lệnh và tăng hiệu suất phát triển.
Tích hợp thử nghiệm: MVVM cho phép triển khai các bài kiểm tra một cách dễ dàng nhờ vào tính tách biệt cao giữa các thành phần.

4. Ví dụ code cụ thể

Dưới đây là một ví dụ cụ thể về cách triển khai MVVM Pattern trong một ứng dụng quản lý danh sách công việc bằng ngôn ngữ Java:

Model

// TaskModel.java
import java.util.ArrayList;
import java.util.List;

public class TaskModel {
    private List<String> tasks;

    public TaskModel() {
        this.tasks = new ArrayList<>();
    }

    public List<String> getTasks() {
        return tasks;
    }

    public void addTask(String task) {
        tasks.add(task);
    }

    public void deleteTask(int index) {
        tasks.remove(index);
    }
}

ViewModel

// TaskViewModel.java
import java.util.List;

public class TaskViewModel {
    private TaskModel model;

    public TaskViewModel(TaskModel model) {
        this.model = model;
    }

    public List<String> getTasks() {
        return model.getTasks();
    }

    public void addTask(String task) {
        model.addTask(task);
    }

    public void deleteTask(int index) {
        model.deleteTask(index);
    }
}

View

// TaskView.java
import java.util.List;
import java.util.Scanner;

public class TaskView {
    private TaskViewModel viewModel;
    private Scanner scanner;

    public TaskView(TaskViewModel viewModel) {
        this.viewModel = viewModel;
        this.scanner = new Scanner(System.in);
    }

    public void displayTasks() {
        List<String> tasks = viewModel.getTasks();
        System.out.println("List of tasks:");
        for (int i = 0; i < tasks.size(); i++) {
            System.out.println((i + 1) + ". " + tasks.get(i));
        }
    }

    public String getInput() {
        System.out.print("Enter a new task: ");
        return scanner.nextLine();
    }
}

Main Program

public class Main {
    public static void main(String[] args) {
        TaskModel model = new TaskModel();
        TaskViewModel viewModel = new TaskViewModel(model);
        TaskView view = new TaskView(viewModel);

        // Add tasks
        view.addTask("Task 1");
        view.addTask("Task 2");

        // Display tasks
        view.displayTasks();

        // Add another task
        String newTask = view.getInput();
        view.addTask(newTask);

        // Display updated tasks
        view.displayTasks();

        // Delete a task
        viewModel.deleteTask(0);

        // Display updated tasks
        view.displayTasks();
    }
}

Trong ví dụ này, Model chứa dữ liệu công việc và các phương thức để thêm, sửa và xóa công việc. ViewModel là lớp trung gian giữa Model và View, nhận dữ liệu từ Model và cung cấp cho View để hiển thị. View là giao diện người dùng hiển thị danh sách công việc và tương tác với người dùng. Khi chạy chương trình, các phương thức trong ViewModel được gọi để thực hiện các thao tác như thêm mới công việc, hiển thị danh sách công việc và xóa công việc.

5. Khi nào nên sử dụng MVVM?

MVVM là một mô hình phát triển phần mềm linh hoạt và mạnh mẽ, phù hợp cho nhiều loại dự án khác nhau. Dưới đây là một số trường hợp khi nào nên sử dụng MVVM cùng với các ví dụ cụ thể:

Ứng dụng di động đa nền tảng (Cross-platform mobile apps): MVVM là một lựa chọn tốt cho việc phát triển ứng dụng di động đa nền tảng bằng các framework như Xamarin (cho C#), Flutter (cho Dart) hoặc React Native (cho JavaScript).

Ví dụ: Ứng dụng di động đa nền tảng quản lý việc hàng ngày, trong đó ViewModel có thể xử lý logic xác nhận các sự kiện như thêm, sửa hoặc xóa công việc và cung cấp dữ liệu cho View để hiển thị.
Ứng dụng web động (Dynamic web apps): MVVM thường được sử dụng trong các ứng dụng web động để tách biệt logic xử lý dữ liệu và giao diện người dùng.

Ví dụ: Ứng dụng web quản lý nhật ký cá nhân, trong đó ViewModel chịu trách nhiệm gửi yêu cầu API để lấy dữ liệu từ máy chủ và cung cấp dữ liệu đó cho View để hiển thị.
Ứng dụng desktop (Desktop apps): Trong phát triển ứng dụng desktop, MVVM giúp tách biệt rõ ràng giữa logic ứng dụng và giao diện người dùng.

Ví dụ: Ứng dụng quản lý bài viết trên máy tính, trong đó ViewModel có thể xử lý logic tìm kiếm bài viết, lọc theo thể loại và cung cấp dữ liệu cho View để hiển thị.
Ứng dụng IoT (Internet of Things): MVVM cũng có thể được sử dụng trong phát triển ứng dụng IoT để tách biệt logic xử lý dữ liệu từ thiết bị và giao diện người dùng trên các nền tảng khác nhau.

Ví dụ: Ứng dụng quản lý thiết bị thông minh trong nhà, trong đó ViewModel có thể xử lý logic điều khiển các thiết bị và cung cấp trạng thái của chúng cho View để hiển thị.

Tóm lại, MVVM là một mô hình phát triển phần mềm linh hoạt và phù hợp cho nhiều loại dự án khác nhau, bao gồm cả ứng dụng di động, web, desktop và IoT. Việc sử dụng MVVM giúp tách biệt rõ ràng giữa logic ứng dụng và giao diện người dùng, giúp cho quá trình phát triển và bảo trì trở nên dễ dàng hơn.

Kết luận

MVVM Pattern là một lựa chọn tốt cho phát triển ứng dụng phần mềm, giúp tách biệt logic và giao diện người dùng một cách rõ ràng và hiệu quả. Bằng cách sử dụng binding dữ liệu và ViewModel, MVVM giúp giảm bớt mã lệnh và tăng tính linh hoạt và hiệu suất cho quá trình phát triển ứng dụng.

MVVM pattern