Pattern Oriented Software Architecture MVC & PAC Značí, že k danému tématu se ještě v přednásce vrátíme Značí, že by se o dané věci dalo ještě mluvit, ale rozebírat už to v přednášce nebudeme 1

MVC – Motivace Chci spoustu různých zobrazení jedněch dat Chci mít možnost co nejjednodušeji přidávat nové možnosti zobrazení Chci, aby uživatelé mohli s takovým zobrazením interagovat Chci co nejvíc „portable“ kód a návrh skrz co nejvíce systémů Mohu chtít i možnost dostávat upozornění, že se změnila data Nepoužívá se na webových stránkách 2

Model – View – Controller (MVC) Architektonický vzor Návrh struktury aplikace nebo sub-systému v aplikaci Předurčuje implementaci, chování a návrh všech svých sub-systémů NV řeší strukturu tříd a jejich vztahy, AV řeší komponenty / moduly Není automaticky framework (MVC ale může být) Framework je ještě o jednu úroveň abstrakce výš Interaktivní architektonický vzor Human-Computer interaction Web GUI 3

Zdroj obrázku: Wikipedia Model – View – Controller (MVC) – Co to je? MVC je návod, jak navrhnout software s uživatelským rozhraním, který má vnitřně rozdělené zpracovaní dat od vstupu a výstupu Skládá se ze tří propojených částí Model View Controller Toto rozdělení pomáhá k Efektivní znovupoužití kódu Nezávislost podkomponent (konkrétních views) Když se rozbije jeden view, neznamená to, že zbytek systému nefunguje Kolaborativní vývoj Každý může pracovat na různých částech MVC a nemusí o sobě vědět Toto rozdělení přináší i spoustu nevýhod Zdroj obrázku: Wikipedia Definice v POSA 4

Zdroj obrázku: https://www.tutorialsteacher.com/mvc/mvc-architecture Model – View – Controller (MVC) – Co to je? Model Společná komponenta pro všechny views Data, logika a pravidla aplikace View Pohled prezentovaný uživateli Controller Přijímá vstupy uživatele Převání je commandy do view nebo do modelu Zdroj obrázku: https://www.tutorialsteacher.com/mvc/mvc-architecture 5

Model Model je funkční jádro aplikace (back-end) Návrh struktury aplikace nebo sub-systému v aplikaci Model obsahuje data a reprezentuje stav systému Zároveň ale umožňuje přístup View komponetě Model nabízí své API, které je volané Controllerem + Views Tak umožňuje změnu stavu systému a jeho dat Pomocí AV change-propagation si udržuje „link“ ke všem závislým částem (Views & Controllers) To mu umožňuje jakoukoliv svou změnu propagovat těmto závislým komponentám 6

View View zobrazuje informace uživateli Data pro zobrazované informace bere z modelu V našem návrhu MVC bude pravděpodobně víc Views Každý View může zobrazovat informace jiným způsobem Při inicializaci aplikace zaregistruji všechny views do modelu a ke každému modelu přidám Controller Každý View má svůj právě jeden Controller Pokud bereme Model jako back-end, View je front-end 7

Controller Přímá vstup uživatele Pro zjednodušení, přijímá tento vstup v podobě událostí (events) Vstup, který přijme, potom odevzdá jako command pro View nebo pro Model Příklad pro view, kdy se nedotkne modelu: scrolling Controller může být zodpovědný za validaci vstupu Pokud bereme Model jak back-end, Controller je front-end Zmatení – propagace událostí WWW vs GUI aplikace – Na webové stránce vrací nový View na každou akci – Click == refresh 8

MVC – návrh 9

MVC – obsluha události NV publisher-subscriber change-propagation mechanism např. aktivace checkboxu při akceptování User Agreement – zprovozní některé funkce Třeba možnost pokračovat dál při registraci 10

MVC – inicializace 11

Chybí info o front-endu Jak naimplementovat MVC – Část 1 Oddělíme data a funkcionalitu od human-computer interaction Vytvoříme model Chybí info o front-endu 12

Jak naimplementovat MVC – Část 2 Zajistíme mechanismus „change-propagation“ Vytvoříme Observer interface, který později použijeme v našem modelu Sdílený google doc mezi hodně lidí? Není problém MVC ale spíš change-prop 13

Jak naimplementovat MVC – Část 3 Vytvoříme Views 14

Jak naimplementovat MVC – Část 3 Vytvoříme Views Realita je spíš: 15

Jak naimplementovat MVC – Část 4 Vytvoříme Controllers Realita: 16

Úplně jsme zakryli mechanizmus handlování eventů - magic Jak naimplementovat MVC – Část 5 Propojíme Views a Controllers Vyjádření POSA Úplně jsme zakryli mechanizmus handlování eventů - magic Magic v JS 17

Jak naimplementovat MVC – Část 6 Připravíme inicializaci samotného MVC vzoru 18

Jak naimplementovat MVC – Chuťovky Můžeme se mentálně připravit na „dynamic Views“ Controllers mohou být „pluggable“, tzv. přiřazeny k View, jak je zrovna potřeba – příklad amateur vs expert mode Document-View varianta Snížení nebu úplné smazání propojení mezi Views a jejich Controllers 19

Vytváříme MVC framework Slíbeno na začátku, že rozebereme Je to běžné použití Podpora hiearchie a znovupoužitelnosti Views a Controllers Tlačítka, menu, ... UI se pak skládá z kombinace existujících Views Aplikuji Composite pattern Pro delegaci eventů přes tyto Views použiju Chain of Responsibility Co nejvíc snížím platformní a systémovou závislost Pro nezávislost na platformě mohu použit NV Bridge mezi Controllers + View a platformou nebo použiju Bridge pro propojení systému s Modelem 20

MVC – použití Aplikace na počítači s GUI V podstatě jakýkoliv web Tam je naimplementován update mechanismus V podstatě jakýkoliv web Obvykle bez explicitní implementace update mechanismu Příklad StackOverflow je naimplementovaný pomocí MVC web frameworku https://stackoverflow.blog/2008/09/21/what-was-stack-overflow-built-with/ 21

MVC – výhody Možnost vytvářet různé pohledy na stejná data To bylo v motivaci a v požadavcích Možnost synchronizace Views, když dojde k updatu modelu Také v požadavcích Možnost za běhu měnit Views a Controllers Model je úplně platform-independent a tudíž portable Reimlementace Views a Controllers Možnost rozšíření na framework Teoreticky jednoduché přidat View 22

MVC – nevýhody Složitá implementace Pro jisté aplikace je to overengineering Implementace update mechanismu => Views a Controllers nebudou stíhat ten objem dat a frekvenci updatů Velmi úzké spojení View a Controlleru Úzké spojení Views + Controllers s Modelem Změna interface v Modelu může znamenat změnu v každém View a Controlleru Řešitelné za pomoci Command Processoru Neefektivita sběru dat z Modelu kvůli interface – multiple calls Při změně platformy, reimplementace View a Controllerů Hodně variací MVC, čistá forma už se málo kde používá Magic v podobě handlování eventů 23

MVC – zajímavosti na závěr .NET Core používá MVC nativně Angular JS je také nativně MVC framework Konkrétní podoba vždy specifická pro danou platformu (např. právě .NET Core) 24

Presentation-Absctraction-Control Presentation-abstraction-control Stromová hierarchie kooperujících agentů Prezentační a abstrakční části agentů zcela oddělené Abstrakční část Data a aplikační logika Prezentační část Zobrazení dat uživateli Control Komunikace s ostatními agenty Komunikace prezentační a abstrakční části Zpracování vstupů uživatele Rozdíl proti MVC Agentů je mnoho, MVC je jeden „MVC Model“ Zdroj: wikipedia „MVC View“ „MVC Controller“ 25

PAC – uspořádání agentů Top-level agents Jádro funkcionality Přístup k externím datům Globální části jako hlavní menu Intermediate-level agents Koordinace bottom-level agentů Konverze dat Bottom-level agents Komponenty, se kterými uživatel přímo pracuje Třeba přímo okénka nebo obrázky Rozdělení na agenty komunikující s uživatelem a na agenty zpracovávající data 26

PAC – příklad 27

PAC – příklad (vytvoření grafu) 28

dekompozice, rozšiřitelnost PAC - vlastnosti Dynamická tvorba hierarchie Distribuované prostředí Komplikované, paralelní víceuživatelské systémy Agent jako vlákno/proces Související NV: Proxy – komunikace se vzdálenými agenty Forwarder-Receiver, Client-Dispatcher-Server – lokální komunikace Je třeba najít kompromis mezi jemností dekompozice systému a efektivitou komunikace mezi agenty Komunikace probíhá jen s přímo propojenými agenty Ještě závažnější, pokud jsou agenti distribuovaní V praxi se používá mnohem méně než např. MVC Komplexita návrhu Příliš velká režie spojená s komunikací CMS Drupal dekompozice, rozšiřitelnost komplexita návrhu 29