Przykład aplikacji ToDo z użyciem wzorca architektonicznego MV*

Implementowanie aplikacji z użyciem nowoczesnego i sprawdzonego wzorca architektonicznego MVC (ang. model-view-controller), MVP (ang.model-view-presenter) czy MVVM (ang. model-view-viewmodel) umożliwia oddzielenie danych (modelu) od informacji prezentowanych użytkownikowi (widoku) i przeniesienie logiki do dedykowanych obiektów (kontrolerów czy prezenterów w zależności od wybranego wzorca architektonicznego). Dla uproszczenia czasem zamiast rozróżniać poszczególne wzorce używa się skrótu MV*, co zastosuje również w poniższym artykule.

W świecie aplikacji webowych liczba bibliotek i framework’ów jest duża, jednak istnieje ciekawe źródło todomvc.com, gdzie w sposób praktycznych przedstawiono jak zbudować aplikację ToDo w różnych bibliotekach wg wzorca MV*. Gotowe przykłady w popularnych framework’ach takich jak Backbone.js, AngularJS czy Ember.js nie tylko pozwalają zobaczyć jak tą samą aplikację można wykonać w różnych bibliotekach, ale również zapoznać się z praktycznym zastosowaniem wzorca MV*.

AngularJS

W przykładowym kodzie AngularJS dla wersji 1.4.3 zastosowano:

  • szablon HTML, w którym wykorzystywane są metody kontrolera oraz 2 dyrektywy,
  • kontroler, który dane pobiera i zapisuje za pomocą dedykowanego serwisu,
  • prostą konfigurację routingu.

Backbone.js

W przykładowym kodzie Backbone.js dla wersji 1.2.2 zastosowano:

  • szablon HTML z wstawkami w Underscore.js,
  • 2 widoki wykorzystane w szablonie HTML
  • 1 kolekcję wykorzystującą 1 model,
  • prostą konfigurację routingu.

Ember.js

W przykładowym kodzie Ember.js zastosowano:

  • szablony Handlebars.js,
  • 1 serwis przechowujący dane,
  • 2 komponenty (tj. widoki).

 

MVC vs. MVP vs. MVVM

Wzorce MV* są do siebie podobne, jednak warto wspomnieć o kilku elementach, którymi różnią się między sobą. Interakcja użytkownika z aplikacją jest realizowana poprzez widok w każdym z wzorców. W MVC widok przekazuje żądania do kontrolera, który z kolei manipuluje danymi w modelu. Prezenter w MVP pełni podobną rolę do kontrolera w MVC, jednak to prezenter modyfikuje widok, a nie odwrotnie. MVVM jest implementacją wzorca projektowego „Obserwator„, w którym każda zmiana w modelu powoduje zmianę w widoku poprzez ViewModel i odwrotnie – każda zmiana w widoku może powodować modyfikację danych w modelu. W przeciwieństwie do MVC i MVP powiązanie we wzorcu MVVM jest dwukierunkowe.

 

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.

Time limit is exhausted. Please reload CAPTCHA.