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.