Mô hình MVVM trên XAML

Mô hình MVVM trên XAML

Triển khai mô hình MVVM trên XAML là một trong những quyết định sáng suốt khi lập trình trên các nền tảng hỗ trợ ngôn ngữ XAML. Bài viết này giúp bạn tìm hiểu rõ lý do tại sao phải biết về nguyên lý thiết kế của MVVM và cách triển khai.

Tại sao nên cần một mô hình phát triển

Trong thời điểm hiện tại, quá trình phát triển các ứng dụng như: WPF, UWP, Xamarin Form thường được Visual Studio phân tách thành 2 thành phần chính là thiết kế giao diện người dùng bằng ngôn ngữ XAML và phần code điều khiển các hoạt động phía sau (code behind) bằng 1 ngôn ngữ được hỗ trợ trên .Net. Đối với các ứng dụng có cấu trúc nhỏ, nhẹ phương thức tiếp cận mặc định này không gây ra các vấn đề lớn trong quá trình bảo trì và nâng cấp tính năng. Tuy nhiên, khi ứng dụng được sửa đổi, và phát triển về kích thước và phạm vi, và ngày càng nhiều tính năng được thêm vào thì cách phát triển trên sẽ gây ra hàng loạt các vấn đề về sau như:

  • Sự phụ thuộc quá nhiều giữa codebehind đối với phần giao diện khiến việc thêm bớt một hay 1 số các thành phần sẽ làm vỡ cấu trúc sẵn có trên phạm vi toàn dự án. Việc thêm 1 button hay 1 element nào đó trên frontend nhiều khi phải fix hàng loạt các file mã nguồn liên quan.
  • Sự chồng chéo các mã nguồn phần logic trong toàn bộ các ứng dụng khiến cho kiến trúc dự án không nhất quán, gây khó khăn cho việc phát triển tiếp và cập nhật. Điều này dẫn đến cũng một tính năng phía Logic nhưng lại được viết ở nhiều nơi với nhiều phiên bản khác nhau về tính năng theo thời gian.
  • Không có sự tách bạch rõ ràng giữa phần giao diện sử dụng và phần bussiness logic khiến cho chi phí kiểm thử tăng nhiều.

Mô hình MVVM trên các dự án DotNet

Mô hình MVVM (View - ViewModel - Model) là cách tổ chức mã nguồn, và giải quyết các vấn đề tách bạch giữa phần thiết kế giao diện (UI) và phần xử lý logic (Bussiness Logic) trong các dự án sử dụng XAML được Microsoft khuyên dùng. Với cách tiếp cận mô hình MVVM khi phát triển phần mềm, sẽ giúp phân tách mối liên hệ và phụ thuộc giữa phần thiết kế và code xử lý triệt để, giúp cho ứng dụng dễ dàng kiểm thử, phát triển và nâng cấp. Ngoài ra một trong những ưu điểm hấp dẫn là bạn có thể đóng gói các phần mã xử lý thành các thư viện mã nguồn và có thể tái xử dụng trên các thành phần giao diện người dùng cho ứng dụng khác sau này.

Tìm hiểu về mô hình MVVM

Ba thành phần cốt lõi trong MVVM là:

  1. View: Phần định nghĩa giao diện người dùng.
  2. ViewModel: Phần xử lý logic của ứng dụng.
  3. Model: Phần định nghĩa data.

Mỗi thành phần trong mô hình MVVM đều có chức năng và nhiệm vụ riêng biệt, hình phía dưới mô tả mối quan hệ giữa 3 thành phần này. Ý tưởng cốt lõi của mô hình này là View(giao diện) sẽ tương tác với ViewModel(logic xử lý), ViewModel tương tác với Model(dữ liệu). Hai thành phần View và Model sẽ bị cô lập và chặt dứt các liên hệ phụ thuộc với nhau, cả 2 thành phần này chỉ giao tiếp qua thành phần trung gian là ViewModel.

Lợi ích của MVVM đem lại cho các nhà phát triển khả năng

  • Nếu phần mã dữ liệu và mã logic được tổ chức chung với nhau sẽ khiến sự phụ thuộc chồng chéo lên nhau giữa logic và tổ chức dữ liệu. Tách bạch 2 phần trên thành ViewModel và Model sẽ giúp các nhà phát triển dễ dàng nâng cấp và phát triển các yêu cầu tính năng logic mà không phải thực hiện sửa đổi lớn trong phần mã Model.
  • Dễ dàng kiểm thử ViewModel, Model mà khộng cần phải sử dụng View. 
  • Dễ dàng thiết kế lại các thành phần giao diện với code ViewModel hiện tại mà không phải can thiệp sửa đổi trong mã nguồn ViewModel.
  • Các team thiết kế giao diện và phát triển, kiểm thử có thể làm việc độc lập và đồng thời lẫn nhau không gặp trường hợp phải hoàn thành hết tất cả các thành phần mới có thể tương tác. Tách bạch quá trình thiết kế và phát triển sẽ giúp nâng cao năng xuất làm việc và giảm chi phí phát triển.