Lekce 18 - MVVM architektura a navigace

V minulé lekci, Aplikace Počasí - Uložení dat a konektivita, jsme dokončili aplikaci na počasí.

V následujícím tutoriálu vývoje multiplatformních mobilních aplikací v React Native si představíme architekturu MVVM a ukážeme si další možnosti navigace. Nově nabyté vědomosti využijeme při tvorbě nové aplikace.

Architektura Model-View-ViewModel

Architektura MVVM je v podstatě rozšířením architektury MVC (Model, View, Controller), kterou jsme si představili v lekci Aplikace ToDo - Využití AsyncStorage. Architektura MVVM je oproti MVC rozšířena ještě o tzv. ViewModel, který drží data pro pohled.

ViewModel

ViewModel je speciální případ modelu určený pro pohled (v React Native nejčastěji pro stránku). Jednoduše řečeno je to třída (v našem případě i funkce), která drží data a vlastnosti např. pro nějaký formulář.

Důvod existence ViewModelu je prostý – políčka formulářů typicky neodpovídají úplně zcela entitě, na kterou se pak data zapíšou. Proto formulářová pole nemůžeme bindovat přímo na modelové entity. Některá pole jsou zde navíc a některá třeba chybí. Takovým klasickým příkladem je formulář pro filtrování produktů, který nemůžeme navázat na žádnou entitu v modelech. Získáme zde totiž od uživatele jen pomocná data, jako cenové rozmezí, vyhledávací frázi, způsob řazení a podobně. Až na základě těchto dat pak vyhledáme skutečné entity Product, které jsou v aplikaci zastoupeny nějakou modelovou třídou.

ViewModel na pohled navážeme prostřednictvím bindingu tak, že se jakákoli změna prvku okamžitě projeví změnou příslušné vlastnosti ve ViewModelu a naopak.

Důležité je si uvědomit, že model vůbec nemá vědět, že nějaký ViewModel existuje, a stejně tak ViewModel nemá vědět o pohledech. To znamená, že ve ViewModelu by se neměla objevit například instance ovládacího prvku.

...konec náhledu článku...
Pokračuj dál