Univerzita Hradec Králové Fakulta informatiky a managementu Katedra informačních technologií

Transkript

1 Univerzita Hradec Králové Fakulta informatiky a managementu Katedra informačních technologií Vývoj moderních webových aplikací na platformě.net Bakalářská práce Autor: Tomáš Falta Studijní obor: Aplikovaná informatika Vedoucí práce: Ing. Jiří Štěpánek Hradec Králové duben 2017

2 Prohlášení: literatury. Prohlašuji, že jsem bakalářskou práci zpracoval samostatně a s použitím uvedené V Hradci Králové dne Tomáš Falta

3 Poděkování: Rád bych poděkoval vedoucímu bakalářské práce Ing. Jiřímu Štěpánkovi za vedení práce a odborné rady. Mé poděkování zároveň patří přítelkyni a rodině za jejich podporu.

4 Anotace Cílem práce je prozkoumat platformu.net a seznámit čtenáře s technologiemi, které jsou nejčastěji používané při vývoji moderních webových aplikací. Na této platformě existuje více způsobů vývoje webových aplikací. První část práce se věnuje popisu dvou nejpoužívanějších, nicméně velmi odlišných architektur webových aplikací, které jsou vzájemně porovnány. V další kapitole jsou představeny nástroje pro přístup k datům. Dále teoretická část práce obsahuje popis technologií používaných k vývoji moderního a optimalizovaného uživatelského prostředí webových aplikací a vývojové nástroje pro platformu.net. Součástí práce je znovupoužitelná ukázková webová aplikace, ve které jsou implementovány vybrané technologie popsané v teoretické části práce. Tato aplikace je nakonec v praktické části popsána několika příklady. Annotation Title: The Development of Modern Web Application on the.net Framework The aim of this bachelor thesis is to explore the.net platform and inform the readers about technologies that are most often used in development of modern web applications. This platform facilitates multiple approches towards developing web-based applications. The first part of this thesis introduces the two most popular, yet still very different, application architectures and compares them with each other. The second chapter introduces tools used to access data. The theoretical part further introduces technologies used in the development of optimized user interface of web-based applications and the development tools for the.net platform. The thesis also includes a reusable web-based application, in which selected technologies introduced in the theoretical part are implemented. This application is then described in the practical part of the thesis with several examples.

5 Obsah 1 Úvod Cíl práce Technologie Microsoft ASP.NET Platforma.NET ASP.NET Historie ASP.NET Core Současnost ASP.NET WebForms Životní cyklus stránky Výhody a nevýhody ASP.NET MVC Struktura aplikace Výhody a nevýhody ASP.NET Web API Použití Inversion of Control a Dependency Injection Autofac Přístup k datům ADO.NET Entity Framework Entity Framework Core Základní komponenty NHibernate Klientská funkcionalita... 26

6 6.1 SignalR Ukázka použití CSS Frameworky Twitter Bootstrap Další CSS frameworky JavaScriptové frameworky TypeScript DotVVM Bundling a minifikace souborů UI komponenty třetích stran Komponenty Syncfusion Vývojové nástroje Visual Studio Visual Studio Code NuGet Package Manager Užitečné doplňky a rozšíření Resharper Web Essentials Praktické použití Aplikační vrstva přístup k datům ADO.NET Entity Framework NHibernate Prezentační vrstva ASP.NET WebForms ASP.NET MVC... 54

7 9 Porovnání použitých technologií Nástroje pro přístup k datům Prezentační vrstva Závěr Seznam použité literatury... 61

8 Seznam obrázků Obrázek 1 - Architektura.NET Frameworku [1]... 3 Obrázek 2 - Hierarchie ASP.NET 4 a ASP.NET Core [6]... 6 Obrázek 3 - Životní cyklus WebForms stránky [8] Obrázek 4 - Interakce mezi MVC komponentami [10] Obrázek 5 - Struktura ASP.NET MVC projektu [Zdroj: autor] Obrázek 6 - Schéma ASP.NET WebAPI [12] Obrázek 7 - Šablona administrace AdminLTE [26] Obrázek 8 - Ukázka webové aplikace sestavené pomocí komponent DevExpress pro ASP.NET WebForms [32] Obrázek 9 - Komponenta Grid z balíku komponent Syncfusion [34] Obrázek 10 - Ukázka prostředí IDE Visual Studio [35] Obrázek 11 Ukázka prostředí Visual Studio Code [36] Obrázek 12 - Ukázka rozšíření Web Essentials [40] Obrázek 13 - Struktura ukázkové aplikace [Zdroj: autor] Obrázek 14 - Struktura projektu nástroje Entity Framework [Zdroj: autor]... 44

9 Seznam tabulek Tabulka 1 Seznam verzí a změn v.net Frameworku a ASP.NET důležitých pro webové aplikace [3]... 5

10 1 Úvod Webové aplikace prošly za poslední dvě dekády velmi rozsáhlým vývojem. Setkáváme se s nimi denně při procházení Internetu a staly se součástí našich životů. S neustálým rozvojem cloudových technologií stále více společností přenáší své stávající aplikace na webové technologie. Jedná se o logický krok, který je výhodný jak pro uživatele, tak vývojáře aplikací. Pro uživatele je přístup do webové aplikace mnohem snazší než stahování a instalace klientského programu. Zároveň odpadá starost s aktualizacemi a aplikace je dostupná z jakéhokoli zařízení, které má přístup k Internetu. Webové rozhraní sice v některých směrech omezuje možnosti a funkce klienta, nicméně tato omezení se velmi rychlým vývojem technologií postupně překonávají. I přesto, že se technologie pro vytváření obsahu Internetu neustále velkou rychlostí vyvíjejí, zůstává Internet překvapivě téměř neměnný. Způsob přenosu informací ze serveru na klienta stále používá velmi jednoduchý protokol, který se od začátku Internetu téměř nezměnil. Jednou ze společností, která velmi intenzivně vyvíjí nové technologie webových aplikací je Microsoft. Díky tomu, že nabízí profesionální a prověřené vývojářské nástroje, dlouhodobou podporu i kvalitně zpracovanou dokumentaci, jsou tyto technologie oblíbené u samostatných vývojářů na volné noze i velkých softwarových společností. 1

11 2 Cíl práce Cílem této práce je prozkoumat a popsat technologie pro vývoj webových aplikací společnosti Microsoft. Základním pilířem zde bude.net Framework a technologie, které jej využívají. Budou popsány frameworky pro tvorbu webových aplikací a nástroje pro přístup k datům uložených v relační databázi. Zároveň budou představeny moderní technologie pro tvorbu dynamického uživatelského rozhraní i jeho optimalizaci. V další částí budou popsány vývojové nástroje, které lze pro tvorbu aplikací na této platformě využít a užitečné doplňky do těchto nástrojů. V praktické části bude vytvořena znovupoužitelná ukázková aplikace, ve které budou použity vybrané technologie popisované v teoretické části. Zejména se bude jednat o ty, které jsou založené na.net Frameworku pro tvorbu uživatelského rozhraní a technologie pro přístup k datům v relační databázi. Cílem této aplikace je představit rozdíly jednotlivých technologií. Každá z nich bude obsahovat vlastní projekt, který bude snadné využít pro tvorbu vlastní aplikace. 2

12 3 Technologie Microsoft ASP.NET 3.1 Platforma.NET.NET (dot net) je platforma, kterou vyvinula společnost Microsoft. Jejím cílem je zjednodušit tvorbu aplikací a současně zpřehlednit jejich zdrojové kódy. V neposlední řadě pak také zjednodušit správu softwarových instalací na konkrétním počítači. Architektura platformy je rozdělná do několika vrstev, které jsou naznačeny v Obrázek 1. Obrázek 1 - Architektura.NET Frameworku [1] Na nejnižší úrovni platformy.net se nachází operační systém. Nad ním je Common Language Runtime neboli CLR. Ten zajišťuje základní infrastrukturu, na které je framework postaven. Zdrojové kódy aplikace v libovolném programovacím jazyce podporujícím CLR nejsou kompilovány přímo do nativního kódu, ale do kódu jazyka CIL (Common Intermediate Language, dříve označený jako MSIL Microsoft Intermediate Language). Smyslem tohoto jazyka je zjednodušit přenášení kódu mezi různými platformami. Tento kód se poté pomocí Just-In-Time kompilátoru přeloží do strojového (nativního) kódu dané platformy. 3

13 Nad CLR je poté dále implementováno několik hierarchicky umístěných knihoven. První z nich je Base Class Library (BCL). BCL je rozsáhlá knihovna tříd, které poskytují rozhraní pro řízení aplikace. Dělí se na více než sto jmenných prostorů a obsahuje velké množství běžných funkcí pro čtení a zápis souborů, ošetřování výjimek, globalizaci aplikací, síťovou komunikaci, práci s vlákny, reflexi a mnoho dalších. Následující vrstva obsahuje knihovnu ADO.NET & XML. Ta se využívá pro přístup k datům v relačních databázích nebo datových zdrojích ve formátu XML nebo jiných formátech. Nad těmito knihovnami leží vrstvy ASP.NET a Windows Forms. Pro vývoj aplikací v.net Frameworku lze využít libovolný jazyk kompatibilní s CLR. Patří mezi ně např. C#, VB.NET, L#, C#Prolog, F#, JScript.NET a další [2]. 3.2 ASP.NET ASP.NET je rychle se rozvíjející platforma společnosti Microsoft, která nabízí několik přístupů k vývoji dynamických webových aplikací. Jedná se o součást.net Frameworku, ve kterém získává oporu pro většinu své funkcionality Historie Jedná se o jeden z prvních frameworků pro webové aplikace. Název vychází z technologie ASP ( Active Server Pages ), což byla první skriptovací platforma společnosti Microsoft, která zpracovávala data na straně serveru a vytvářela HTML stránky. Původní ASP, nyní pojmenované jako Classic ASP, dovolovalo vývojářům používat VBScript jako skriptovací jazyk v HTML stránce. Nicméně oba jazyky se prolínaly v jednom souboru, což vedlo k velice nepřehlednému a složitému kódu. První verze ASP.NET 1.0 byla vydána počátkem roku 2002 jako komponenta nově představeného.net Frameworku. Byl považován jako důležité vylepšení, protože oproti ostatním dostupným frameworkům dovoloval mnohem čistší oddělení kódu vykonávajícího aplikační logiku od značkovacího jazyka. Součástí vydání bylo také vývojové prostředí Visual Studio.NET. S každým novým vydáním.net Frameworku přibývají zároveň do ASP.NET nové funkce a vylepšení. 4

14 Datum Verze Funkce Verze Visual Studia Leden První verze ASP.NET, vydána společně s první verzí.net Frameworku Visual Studio.NET Duben Ovládací prvky pro mobilní zařízení 2003 Listopad 2005 Listopad 2006 Listopad 2007 Automatická validace vstupů 2.0 Nové komponenty (GridView, FormView) Nová technika pro přístup k datům (SqlDataSource, ObjectDataSource) Master pages, témata, přihlašovací komponenty Podpora pro 64-bitové procesory 3.0 WPF, WCF, WF, CardSpace Nové komponenty (ListView, DataPager) ASP.NET AJAX LINQ Dynamic data Duben Rozšíření base class libraries MEF, DLR, code contracts Srpen Podpora HTML5 formulářů Unobtrusive JavaScript validace Asynchronní moduly a handlery Říjen Web API 2 MVC 5 Entity Framework 6 Signal R OWIN Květen Nové možnosti k naplánování asynchronních úkolů na pozadí Vyšší spolehlivost metod upravujících HTTP hlavičky Květen Podpora HTTP/2 ve Windows 10 Rozšíření asynchronních metod v API 2015 Tabulka 1 Seznam verzí a změn v.net Frameworku a ASP.NET důležitých pro webové aplikace [3] - V roce 2008 Microsoft představil nový framework, který podporuje rozdílný přístup pro vytváření webových aplikací: ASP.NET MVC. MVC je zkratkou architektonického vzoru Model-View-Controller, který nabízí lepší rozdělení mezi uživatelským rozhraním a aplikační logikou a ASP.NET MVC je jeho implementací. Původní framework se stal známý jako WebForms [4] ASP.NET Core ASP.NET Core je přelomovou novinkou v dosavadní historii platformy. Jedná se o nový open-source multiplatformní framework pro vytváření moderních 5

15 cloudových aplikací připojených k Internetu, jako jsou webové aplikace, IoT aplikace a backend pro mobilní aplikace. Novinka souvisí s představením nového.net Core. Po více než 15 letech vývoje.net Frameworku byla změněna celá filosofie. Jedná se o úplně novou implementaci frameworku, který je modulární a umožňuje běh na různých platformách. Veškeré zdrojové kódy jsou veřejně přístupné na GitHubu a každý uživatel se může aktivně zapojit do jeho vývoje. Zároveň je k dispozici velmi rozsáhlá a kvalitně zpracovaná dokumentace. Aplikace postavené na ASP.NET Core mohou používat jak původní plnohodnotný.net Framework, tak nový.net Core. Během vývoje došlo k několika přejmenování, první veřejný název byl ASP.NET vnext, dále ASP.NET 5 až došlo k finálnímu pojmenování ASP.NET Core [5]. Mezi hlavní přínosy nového frameworku patří nový koncept a změna architektury. Byl navržen jako optimalizovaný framework pro aplikace, které jsou nasazovány do cloudu nebo běží ve vlastním prostředí. Skládá se z modulárních komponent s minimální režií, vývoj aplikace je tedy velmi flexibilní. ASP.NET Core je zároveň multiplatformní, aplikace lze vyvíjet a spouštět na Windows, Mac a Linuxu. Obrázek 2 - Hierarchie ASP.NET 4 a ASP.NET Core [6] 6

16 3.2.3 Současnost Samotný.NET Framework je aktuálně v přelomovém období. Microsoft stále vedle nového.net Core pracuje i na původním.net Frameworku. Je tedy možné aplikace vyvíjet jak ve stávající verzi 4.6.2, tak na novém.net Core. Ten však stále provází problémy nové platformy. Mezi ně patří především malá uživatelská základna a slabá podpora z projektů třetích stran. Další z problémů je menší podpora ze strany provozovatelů hostingových služeb. Nicméně toto období bude brzy překlenuto a díky úsilí, které Microsoft do.net Core vkládá, se brzy stane plnohodnotným nástupcem.net Frameworku. 3.3 ASP.NET WebForms Jak již z názvu vyplývá, jedná se o technologii zaměřenou především na tvorbu webových formulářů. Cílem bylo přiblížit vývoj webových aplikací vývojářům zvyklým na rozdílné technologie desktopových aplikací (WinForms). Výsledkem je svým způsobem unikátní přístup k vývoji webových aplikací. Zdrojový kód stránek je zde rozdělen na dvě části vzhled aplikace a aplikační logiku. První částí stránky je mark-up (.aspx) soubor, který obsahuje HTML kód společně s ovládacími prvky aplikace nazývanými web controls. Ovládací prvek musí být doplněný o jedinečný identifikátor (ID) a atribut runat= server. Tímto atributem může být označen běžný HTML tag a každý takto označený prvek je poté dostupný jako instance příslušné třídy. Code-behind soubor je třída obsahující aplikační logiku stránky. V závislosti na použitém programovacím jazyce má koncovku.cs pro C# nebo.vb pro VB.NET. Code-behind je partial třída, která je rozdělena na dva soubory. První z nich se nazývá designer a obsahuje vlastnosti příslušných datových typů všech webcontrols obsažených v mark-up souboru. Tento soubor je automaticky vygenerován při změně v mark-up souboru. Druhý ze souborů již obsahuje veškerou aplikační logiku. Například struktura stránky s názvem Detail je: Detail.aspx, Detail.aspx.cs a Detail.aspx.designer.cs. Díky tomu, že code-behind je partial třída, lze ve vlastním kódu stránky pracovat s ovládacími prvky aplikace, naplňovat je daty, nastavovat atributy, ošetřovat události nebo prvky dynamicky generovat plně objektovým modelem. 7

17 Zásadní funkcí je zde PostBack. Jedná se o událost vyvolanou v ovládacím prvku aplikace. Například při kliknutí na tlačítko (událost OnClick) nebo změně stavu checkboxu (událost OnCheckedChanged) se zavolá speciální JavaScriptový kód, který na pozadí odešle POST požadavek na tuto stránku. K požadavku zároveň připojí i informace o ovládacím prvku a jeho stavu (např. na checkboxu s identifikátorem ShowDetail byla vyvolána událost OnCheckedChanged). Serverová část následně zpracuje požadavek a v code-behind třídě vyvolá příslušnou událost, kterou již lze obsloužit. Důležité je, že i při PostBacku jsou dostupné veškeré ovládací prvky na stránce a jejich vlastnosti. Tudíž lze například při obsluze události ShowDetail_OnCheckedChanged zjistit či nastavit aktuální stav tohoto checkboxu a dle jeho stavu přizpůsobit další logiku aplikace. ASP.NET poté zajistí odeslání odpovědi zpět na klientské zařízení a zařídí překreslení celé stránky nebo jen její části bez toho, aby tuto změnu uživatel zaznamenal. Tato funkcionalita by se neobešla bez jedné další zásadní techniky, kterou je ViewState. Ten pomocí skrytých formulářových polí umožňuje přenášet stav jednotlivých web controls na stránce společně s jejich hodnotami. Tyto informace jsou ve ViewState uchovávány napříč requesty mezi klientem a serverem. Spojením těchto dvou technik tak Microsoft do značné míry zajistil odstínění webové aplikace od principu request-reply i bezstavovosti protokolu HTTP a vývoj velmi přiblížil desktopovým aplikacím Životní cyklus stránky K vytvoření stránky se podobně jako u WinForms aplikací používá posloupnost událostí potřebná pro běh webového formuláře a řízení jeho stavu. Z Obrázek 3 je patrné, že cyklus událostí je velice komplikovaný. Během jednotlivých událostí mohou být volané další metody. V závislosti na druhu události jsou dostupné pouze některé možnosti a vlastnosti. Pro vývojáře je nejpodstatnějších několik událostí vyvolávaných na stránce a v ovládacích prvcích. 8

18 1. První událostí je Init, která stránku nastaví do stavu popsaného v mark-up souboru. Zároveň zde proběhne kontrola dat ve ViewState. Událost Page_Init poté umožňuje upravit stav stránky. 2. Další událostí je Load. Ta umožňuje kontrolu, jestli se jedná o první načtení stránky nebo byla odeslána sama sebou (PostBack). V případě PostBacku zároveň zjišťuje, jaký ovládací prvek tuto událost vyvolal. V metodě Page_Load se provádí většina aplikační logiky stránek, jako je načítání datových zdrojů nebo nastavování vlastností komponent. 3. Pokud byla stránka načtena pomocí PostBacku, vyvolá se příslušná událost prvku. Může se jednat například o klik na tlačítko či událost CheckedChanged při změně stavu check boxu. Dojde k zaznamenání změn a stránka se zobrazí znovu v již aktualizované podobě. 4. Následuje samotné vykreslení stránky. Stavové hodnoty ViewState jsou zahrnuty do stránky jako skrytá pole. ASP.NET je při dalším zavolání může zpracovat a tím obnovit stránku do předchozího stavu. 5. Poslední vyvolanou událostí je Page_Unload. Po vykreslení stránky je tato událost obvykle používaná pro ukončení kódu a logování. Následně se provede Dispose třídy reprezentující stránku, která je zároveň vymazána z paměti serveru [7]. 9

19 Obrázek 3 - Životní cyklus WebForms stránky [8] Výhody a nevýhody Stáří této technologie a částečné zastínění základních principů webových technik však s sebou přineslo několik výhod i nevýhod. 10

20 Mezi výhody lze zařadit: Komponenty technologie WebForms obsahuje množství pokročilých znovupoužitelných Drag&Drop komponent, které velmi zrychlují vývoj aplikace. Jedná se například o GridView (tabulku), u které je již implementováno stránkování, řazení sloupců, formátování textu či editace řádků. Mezi další komponenty se řadí Repeater, ListBox, CheckBoxList a další. Stavovost odstínění webového prostředí je obecně pokládáno za výhodu i nevýhodu. Vývojář nepotřebuje znát detailní mechanismus stránek, technologie se sama stará o vykreslování a překreslování stránek i vyvolávání serverových událostí. Dospělost technologie je dostupná od roku 2002, existuje nepřeberné množství informací, návodů, vyřešených problémů, ale i komponent třetích stran. Avšak WebForms obsahují několik zásadních nevýhod: Velikost ViewState při velkém počtu ovládacích prvků na stránce mohou data ve skrytém poli ViewState nabývat i stovek kilobajtů dat, které se při každém požadavku odesílají na server a zpět, což velmi zpomaluje rychlost reakce na požadavek a zatěžuje provoz. Pouze částečná kontrola nad vygenerovaným HTML komponenty samy generují HTML kód, který pro danou situaci nemusí být vhodný a vývojář do něj nemůže zasáhnout. Životní cyklus stránek posloupnost událostí generujících stránku může být velmi komplikovaná a je náchylná na chyby. Omezená možnost testování při návrhu technologie nebylo počítáno s automatizovaným testováním stránek, proto je testování komplikované. Oddělení prezentační a aplikační logiky není dokonalé a v některých případech je nutné přidávat aplikační logiku i do mark-upu stránky. Budoucnost vzhledem k tomu, že nový ASP.NET Core nebude technologii WebForms podporovat se vývoj stává neperspektivní. 11

21 3.4 ASP.NET MVC Model-View-Controller, zkráceně MVC, je velmi populární architektonický vzor používaný při návrhu softwaru, zejména webových aplikací. Výraz MVC se používá přibližně od roku 1970, kde byl ve společnosti Xerox PARC navržený jako způsob organizace prvních GUI komponent. Tento koncept se v aplikacích používá dodnes. Interakce s MVC aplikací kopírují přirozený cyklus uživatelských akcí. Uživatel vykoná nějakou akci, aplikace při odpovědi změní datový model a vrátí aktualizovanou obrazovku uživateli. Tento cyklus se stále opakuje, což přesně zapadá do principu webových aplikací, které jsou přenášeny a doručovány pomocí řady HTTP požadavků a odpovědí. Webové aplikace vyžadují kombinaci různých technologií (HTML, aplikační kód, databáze atd.) a obvykle jsou rozdělené do různých částí. Kombinace těchto částí lze přirozeně přenést na koncept MVC. ASP.NET MVC je open-source implementací tohoto architektonického vzoru. Microsoft jej představil na přelomu roku 2007 a 2008 jako alternativu k technologii WebForms. Framework nabízí snadnou rozšiřitelnost, pokročilé možnosti testování, důslednou kontrolu nad vygenerovaným HTML kódem i HTTP komunikací, výkonný routovací systém nebo moderní API. Zároveň využívá nové funkcionality.net Frameworku, jako je podpora asynchronních metod, anonymních a dynamických datových typů nebo jazyka LINQ. Framework je implementován jako řada nezávislých komponent, mezi které patří routovací systém, View engine nebo Controller factory. Umožňuje jednoduše nahradit tyto základní komponenty vlastní implementací. V MVC frameworku lze zvolit tři různé možnosti pro každou komponentu. Lze ponechat výchozí implementaci komponenty, která dostačuje pro většinu aplikací, nebo lze původní třídu přetížit a vylepšit požadované metody. Třetí variantou je výchozí třídu nahradit vlastní implementací rozhraní nebo abstraktní třídy [9] Struktura aplikace MVC aplikace je složena ze tří různých částí. 12

22 Model, který obsahuje nebo reprezentuje data, se kterými uživatel pracuje. Může se jednat o jednoduchý View Model reprezentující pouze data přenášená mezi View a Controller nebo o doménový model aplikace. View, jež se používá k vykreslení některé části Modelu jako uživatelského rozhraní. Controller, který zpracovává příchozí požadavky, provádí operace na Modelu a vybírá View, které se vykreslí uživateli. V ASP.NET MVC je Controller třída poděděná z třídy System.Web.Mvc.Controller. Každá veřejná metoda v Controlleru se nazývá Action method a je asociována s URL definovanou v routovacím systému ASP.NET. Při zaslání požadavku na server je URL požadavku přirazena k Action method v Controlleru. Vybraná metoda je následně vykoná operace s Modelem a vybere View, které se vykresli uživateli. Interakce mezi Controllerem, Modelem a View jsou znázorněny na Obrázek 4. Obrázek 4 - Interakce mezi MVC komponentami [10] Framework ASP.NET MVC používá View engine. Jedná se o komponentu odpovědnou za vykreslení View a jeho odeslání prohlížeči. Ve výchozím nastavení aplikace využívá View engine Razor, případně je možné využít View engine třetích stran nebo implementovat vlastní. Soubor View má koncovku.cshtml, jedná se o soubor HTML rozšířený o syntaxi jazyka Razor. Model je běžná nebo doménová třída aplikace obsahující požadované vlastnosti, které jsou potřebné k vykreslení View. 13

23 Obrázek 5 - Struktura ASP.NET MVC projektu [Zdroj: autor] Výhody a nevýhody Architektonický vzor MVC i samotný framework ASP.NET MVC obsahují množství výhod, které je nutné pochopit. Každá část MVC architektury je přesně definovaná a nezávislá, využívá se principu oddělení zodpovědností (Separation of Concerns SoC). Data, se kterými se pracuje jsou uložena pouze v Modelu, logika pro zobrazování dat je umístěna pouze ve View a kód, který zpracovává uživatelské požadavky a vstupy je obsažen pouze v Controlleru. Toto rozdělení je základní výhodou celého MVC vzoru. První výhodou je škálování ve smyslu rozšiřování komplexnosti aplikace a flexibilita. Změny nebo rozšiřování částí aplikace jsou díky rozdělení jednotlivých komponent velmi rychlé a jednoduché i v rozsáhlých aplikacích. Zároveň je velmi snadné se přizpůsobovat požadavkům v průběhu vývoje a úprav aplikace. Další výhodou je jednotkové testování. Moduly MVC frameworku je velmi jednoduché automaticky testovat za pomocí nástrojů obsažených ve Visual Studiu nebo nástrojů třetích stran. Pro začátečníky bývá složitější pochopit základní principy MVC a oddělení jeho komponent. Při nesprávném použití jsou aplikace velmi složité a porušují základní 14

24 logiku architektonického vzoru. Technologie zároveň není vhodná pro menší aplikace. Několik nevýhod má ASP.NET MVC v porovnání se starší technologií WebForms. WebForms obsahují Drag&Drop elementy s živým náhledem vzhledu stránek, čímž hlavně začátečníkům zjednodušují práci a přehled ve stránce. Další z nevýhod je absence komplexnějších uživatelských komponent. Framework, respektive jeho View engine Razor, obsahuje pouze základní HTML helpery (metody, které vygenerují požadovanou HTML syntaxi) pro vytvoření základních formulářových polí, jako je TextBox nebo Button. Nicméně nenabízí nástroje pro vytvoření komplexnějších formulářů nebo komponent. Pro asynchronní komunikaci mezi prohlížečem a serverem je nutné využít nástroje a knihovny třetích stran, např. knihovnu jquery, případně front-endové frameworky jako Angular, React nebo Knockout. Další alternativou je použití již existujících komponent jiných autorů. Microsoft sice zveřejnil knihovnu MicrosoftMvcAjax pro zjednodušení práce s asynchronními požadavky, nicméně od jejího zveřejnění v roce 2013 nebyla aktualizována a obsahuje pouze část funkcionality potřebné pro vytvoření asynchronních dotazů [9]. 3.5 ASP.NET Web API ASP.NET Web API (Application Programming Interface) je framework určený pro snadné vytvoření aplikačního rozhraní, které je přístupné pomocí HTTP metod. Web API může být přístupné pro množství HTTP klientů, mezi které patří prohlížeče, mobilní zařízení nebo zařízení internetu věcí. Zároveň využívá výhod webové infrastruktury, mezi které patří cachování dat nebo komprese dat. Následuje takzvané RESTful (Representational state transfer) schéma a využívá HTTP metod GET, POST, PUT a DELETE. Framework je velmi inspirován konceptem technologie ASP.NET MVC. Byl postaven s podobnou úrovní abstrakce, s MVC zároveň sdílí velkou část infrastruktury a funckionality. Vývojáři pracující s ASP.NET MVC rozeznají mnoho podobných implementací komponent, jako jsou controllery, akce, filtry apod. Framework ASP.NET Web API může být integrován do MVC aplikace nebo implementován jako samostatná aplikace. Dvě základní komponenty jsou Model a Controller. Controller je poděděn z třídy ApiController, jednotlivé metody implementované 15

25 v Controlleru navrací konkrétní datový typ. Model je jednoduchá třída, která odpovídá struktuře přenášených dat. ASP.NET se na pozadí sám stará o serializaci a deserializaci dat do komunikačního formátu. Primárním formátem pro přenos dat je JSON, ale je možné použít XML, BSON nebo jiné formáty. Framework dále přidává snadnou možnost práce s autentizací, autorizací nebo routováním požadavků. Schéma aplikace je patrné z Obrázek 6. Klient pošle HTTP požadavek webové aplikaci. Routovací systém frameworku vybere požadovaný Controller a podle názvu a definované HTTP metody zavolá akci v Controlleru. V této akci se obvykle provede čtení nebo zápis do datové vrstvy aplikace a požadované operace s Modelem. Model se dále serializuje do požadovaného formátu a odešle HTTP odpovědí na klientské zařízení [11] Použití Obrázek 6 - Schéma ASP.NET WebAPI [12] Následující část kódu představuje dvě třídy (modely) Employee, Department a API controller DepartmentsController. Tento controller obsahuje metodu Get, která navrací instanci třídy Department. public class Employee public string Name get; set; 16

26 public class Department public string Name get; set; public Employee Manager get; set; public class DepartmentsController : ApiController public Department Get(int id) Department sales = new Department() Name = "Sales" ; Employee alice = new Employee() Name = "Alice" ; sales.manager = alice; return sales; URI (Uniform Resource Identifier jednotný identifikátor zdroje ) je definován REST schématem /Departments/Get/id. Po spuštění aplikace a zavolání metody server ve výchozím nastavení vrátí následující data serializovaná do formátu JSON: "Name":"Sales","Manager":"Name":"Alice" [13]. 17

27 4 Inversion of Control a Dependency Injection Inversion of Control (zkráceně IoC), je návrhový vzor objektově orientovaného programování umožňující uvolnění vazeb mezi svázanými komponentami. Při běžné implementaci se vytváření třídy, které pak využívají další třídy. Touto implementací jsou však třídy pevně svázány a jakákoli změna závislé třídy znamená úpravy kódu. Inversion of Control umožňuje uvolnění těchto vazeb. Aplikace při použití tohoto návrhového vzoru není monolitická, ale je sadou komponent, které implementují požadované rozhraní. Každá komponenta je nezávislá na svém okolí a lze ji jednoduše upravit nebo vyměnit. Základem návrhového vzoru je práce s rozhraním, v kódu by se téměř nemělo vyskytovat vytváření instancí tříd. Tyto instance jsou dodávány mimo kód třídy. Vytváření instancí je delegováno na takzvaný IoC kontejner, ve kterém jsou definovány implementace jednotlivých rozhraní. Dependency Injection (DI), v českém překladu vkládání závislostí, je konkrétní technika využití návrhového vzoru Inversion of Control. Dependency Injection pak obsahuje několik způsobů, jak do třídy dodávat instance vnějších tříd. Nejčastěji se využívá tzv. Constructor Injection. Tento způsob spočívá v tom, že třídy, do nichž se vkládají instance vnějších tříd mají vytvořený paremetrický konstruktor. IoC kontejner zjistí parametry konstruktoru a jejich datové typy, podle definice vytvoří instance těchto tříd a vytvoří instanci požadované třídy s instancemi vnějších tříd. Dalším způsobem vkládání tříd je Setter Injection nebo Interface Injection. Inversion of Control má několik zásadních výhod. Menší závislosti zdrojového kódu umožňuje jednodušší tvorbu i údržbu jednotlivých komponent. Explicitně definované závislosti dále zjednodušují orientaci v těchto závislostech. Definice IoC kontejneru se ve většině případů konfiguruje mimo hlavní zdrojový kód, komponenty lze tedy nejen snadno vyměnit, ale i použít v jiných programech. S výhodami však přináší i několik nevýhod. IoC je nevhodný pro malé a jednoduché aplikace, do který přináší zbytečnou komplikaci zdrojového kódu. Pro vývojáře, kteří tento návrhový vzor neznají, je velmi těžké se ve zdrojovém kódu orientovat. Pro.NET Framework a ASP.NET je k dispozici škála IoC kontejnerů. Mezi nejznámější a nejpoužívanější se řadí Castle Windsor, Ninject, Unity 18

28 nebo Autofac. Jednotlivé nástroje se liší v rozsáhlosti, rychlosti i způsobu použití. Zajímavostí je, že nový ASP.NET Core již v základní implementaci obsahuje IoC kontejner, pro základní použití této techniky tedy nebude nutné instalovat projekty třetích stran [14]. 4.1 Autofac V následující ukázce je představen IoC kontejner Autofac. Jedná se o pokročilý nástroj, který lze použít nejen na samotném.net Frameworku, ale i na novém.net Core nebo ve Universal Windows apps. Zároveň podporuje webové technologie ASP.NET WebForms, MVC i ASP.NET Core. Navíc obsahuje množství rozšiřujících modulů, například moduly pro integraci do ASP.NET WebApi nebo SignalR. Nástroj zároveň nabízí velmi dobrou dokumentaci i silnou komunitu. Obsahuje také mnoho pokročilých možností pro definování životnosti instancí, hromadnou registraci tříd nebo integraci logovacích frameworků. Je dostupný pomocí NuGet Package Manageru. Poslední stabilní verze byla vydána 5. dubna Autofac je open source pod MIT licencí, lze jej tedy využít zdarma i pro komerční aplikace. Konfigurace se provádí při startu aplikace v souboru global.asax v metodě Application_Start(). Pro konfiguraci se používá takzvaná Fluent syntaxe jazyka C#. Definice jednotlivých tříd probíhá pomocí metod třídy ContainerBuilder. Následující zdrojový kód představuje konfiguraci IoC kontejneru pro ASP.NET MVC aplikaci. Na prvním řádku se provede vytvoření instance třídy ContainerBuilder, dále se zaregistrují Controllery aplikace. Následuje zaregistrování třídy PdfService jako implementace rozhraní IPdfService. Zároveň se nastaví životnost instance InstancePerLifetimeScope, kdy je instance vytvořena po dobu požadavku na server. Posledním krokem je sestavení kontejneru. protected void Application_Start() var builder = new ContainerBuilder(); builder.registercontrollers(typeof(mvcapplication).assembly); builder.registertype<pdfservice>().as<ipdfservice>().instanceperlifetimescope (); var container = builder.build(); 19

29 DependencyResolver.SetResolver(new AutofacDependencyResolver(container)); V konstruktoru Controlleru je definován parametr pdfservice. AutoFac při vytvoření instance toho Controlleru automaticky předá vytvořenou instanci třídy PdfService definovanou v konfiguraci [15]. private readonly IPdfService _pdfservice; public CustomersController(IPdfService pdfservice) _pdfservice = pdfservice; 20

30 5 Přístup k datům Při vývoji webové aplikace s použitím objektově orientovaného programovacího jazyka se běžně využívají relační databáze. Nicméně obě technologie jsou založeny na úplně jiném konceptu práce s daty a pro jejich propojení je potřeba implementovat vrstvu, která zajistí převod dat z datových typů aplikace do relační databáze. Tuto vrstvu může vývojář aplikace implementovat ručně nebo lze využít již existujících nástrojů objektově-relačního mapování. ORM nástroje zajistí komunikaci a přenos dat s databázovým systémem, čímž odstíní vývojáře od nutnosti používat relační model a při implementaci aplikace může využít čistě objektově orientovaný přístup. V prostředí Microsoft.NET existují desítky ORM nástrojů, některé z nich jsou již neaktivní. Mezi největší ORM nástroje v.net patří Entity Framework a NHibernate. 5.1 ADO.NET Knihovna ADO.NET je jedna ze základních komponent.net Frameworku, která obsahuje technologie pro přístup k datům. Společně s databázemi nabízí technologie pro přístup k datům uloženým ve formátu XML a dalším hierarchicky uloženým datům. K připojení knihovna využívá poskytovatele dat (Data providers), kteří umožňují vykonání příkazů a získání výsledků nad různými databázemi. Mezi primárně podporovanou databázi patří Microsoft SQL Server. Dále je možné doinstalovat poskytovatele třetích stran používající připojení pomocí ODBC nebo OLE DB, například pro databázi MySQL, Oracle, DB2 a mnoho dalších. Pro uložení dat do paměti aplikace používá objekt DataSet, který je složený z tabulek (DataTable). Tabulka obsahuje řádky (DataRow) a sloupce (DataColumn) odpovídající struktuře dotázané databáze. Z tohoto způsobu uložení dat vyplývá nevýhoda knihovny ADO.NET, kterou je plochý pohled na data uložená v řádcích a sloupcích, stejně jako v relační databázi [16]. 21

31 5.2 Entity Framework ADO.NET Entity Framework je open-source ORM nástroj vyvíjený jako rozšíření knihovny ADO.NET společností Microsoft. Jeho první verze byla vydána v srpnu 2008 a vývojáři byla ostře kritizována. Od této doby vývoj Entity Frameworku však velmi pokročil a aktuálně je nejrozšířenějším nástrojem objektově-relačního mapování pro.net Framework, který Microsoft doporučuje pro všechny moderní aplikace komunikující s relační databází. Díky velmi kvalitní oficiální dokumentaci na MSDN, množství návodů a specializovaných webů je jeho naučení snadné i pro začátečníky. K dispozici je Entity Frameworku ve verzi 6.1.3, která vyšla 10. března Jedná se o stabilní, prověřenou verzi. V následujících kapitolách i v praktické části práce je popsána a použita právě tato verze. Instalace do projektu je možná pomocí NuGet Package Manageru, kde je po dlouhou dobu zároveň nejstahovanějším balíčkem [17] Entity Framework Core Novinkou představenou společně s ASP.NET Core je Entity Framework Core. Tento nástroj je vyvíjen se stejnou filosofií jako celý framework.net Core. Je taktéž multiplatformní a snadno rozšiřitelný. Jeho zdrojové kódy jsou přístupné na GitHubu a každý se může zapojit do jeho vývoje. V porovnání s původním Entity Frameworkem 6.x přináší mnoho vylepšení a nových funkcí. Nicméně implementace nástroje je nová, takže jej Microsoft označuje spíše jako první verzi nového produktu. Entity Framework Core využívá zkušenosti z předchozí verze a zůstala v něm zachována většina důležitých API metod, tudíž vývojáři přecházející z předchozích verzí budou mít přechod usnadněný. I přesto je EF Core postaven na kompletně nové sadě komponent. To znamená, že automaticky nepřenáší veškerou funkcionalitu z Entity Frameworku 6. Některé funkce, jako je lazy loading nebo connection resiliency, ještě nejsou v nástroji implementovány, ale budou doplněny v budoucích verzích. Méně využívané funkce v EF Core implementovány nebudou. Nové, snadno rozšiřitelné jádro navíc dovoluje přidat některé nové funkce, například alternativní klíče nebo smíšené provádění dotazů pomocí LINQ mezi klientem a databází. 22

32 EF Core bude zároveň v nejbližší době možné použít i pro Universal Windows Apps, bude možné jej tedy používat i v aplikacích distribuovaných přes Windows Store pro všechny platformy. Spolu s tím přinese podporu nerelačních databází jako Azure Table Storage a Redis [18] Základní komponenty Pro interakci vývojáře s Entity Frameworkem je základním prvkem třída DbContext. Slouží pro načítání a ukládání objektů z/do databáze uložených v kolekcích DbSet, zajišťuje informace o připojených objektech a zároveň poskytuje rozhraní pro práci s databází. Prostřednictvím kontextu lze načítat, přidávat, upravovat a mazat konkrétní business objekty. Entity Framework se následně postará o konverzi příkazu do databáze. Entity Framework nabízí čtyři různé způsoby tvorby: Model First: Vytvoří prázdný konceptuální model a podle něho je vytvořena databáze a zároveň je vygenerován zdrojový kód tříd. Database First: Podle existující databáze je vygenerován konceptuální model, který je možné následně upravovat. Zdrojový kód tříd je vygenerován podle modelu. Code First: Vytvoří prázdný Code First model a po vytvoření POCO (Plain Old CLR Object) tříd lze podle modelu vygenerovat databázi. Code First From Database: Vytvoří Code First model založený na existující databázi a vygeneruje POCO třídy. K dotazování využívá populární rozšíření LINQ, který je také součástí.net Frameworku od verze 3.5 a umožňuje jednodušší způsob dotazování, tvorbu, třídění, propojování a vyhledávání jakýchkoli dat. Výsledky dotazu implementují rozhraní IEnumerable<T>. Pro načítání dat z databáze lze využít Eager Loading (horlivé načítání), Lazy Loading (líné načítání), explicitní načtení z DbContext nebo vlastní SQL dotaz. Eager Loading při tvorbě dotazu načítá připojené entity jako součást jednoho dotazu. Využívá metodu Include implementovanou rozhraním IQueryable. Lazy Loading je jedna z důležitých funkcí Entity Frameworku. Nenačítá připojené entity ihned 23

33 při prvním dotazu, ale až po jejich vyžádání, čímž v některých případech může výrazně vylepšit výkon aplikace. Explicitní načítání lze využít jako ruční ekvivalent vypnutého Lazy Loadingu. Na instanci připojené entity je možné zavolat metodu Load, která provede dotaz do databáze [17]. Nástroj je podrobněji použit a popsán v praktické části práce. 5.3 NHibernate NHibernate je open-source ORM nástroj pro platformu Microsoft.NET. Vznikl portací projektu Hibernate ORM vyvinutého v Javě, který byl zveřejněn v roce Několik let oba projekty spravovala společnost JBOSS, Inc. (nyní část společnosti Red Hat), nicméně od roku 2006 je NHibernate spravovaný aktivní komunitou, díky které se NHibernate stal velmi dospělým projektem a stále se vyvíjí. O nástroji bylo napsáno množství knih a díky velké podpoře vývojářů existuje i několik Google Groups a webových stránek. Aktuálně je dostupná verze 4.1.1, která byla vydána 2. února Primární databází je Microsoft SQL Server, dále je možné použití databáze Microsoft Access, Oracle, DB2, SQLite a další. Ve výchozí instalaci neobsahuje nástroj pro vytvoření mapování podle existující databáze. Pro menší projekty není problém implementovat mapování ručně, pro větší projekty s množstvím tabulek se doporučuje použít programy třetích stran. Při ručním mapování tabulek na třídy je nutné vytvořit mapovací soubory ve formátu XML s koncovkou.hbm.xml. S rostoucím počtem entit a mapovacích souborů se však projekt stává velmi nepřehledný. Mapování v XML souborech se neověřuje při kompilaci, je tedy při úpravách velmi náchylné na chyby a překlepy ze strany vývojáře. Alternativou je využití open-source doplňku Fluent NHibernate, ve kterém lze mapování implementovat přímo ve zdrojovém kódu. Zároveň umožňuje ze zdrojového kódu konfigurovat i samotný NHibernate. Tento doplněk je použit v ukázkové aplikaci. Nástroj umožňuje na základě konfigurace a mapování entit spustit příkazy pro vytvoření nebo aktualizaci databázového schématu. K tomuto účelu se používá třída SchemaUpdate ve jmenném prostoru NHibernate.Tool. 24

34 Pro interakci vývojáře s NHibernate se využívá objekt Session, který udržuje kolekci objektů a zároveň nabízí metody pro práci s databází. Pro dotazování lze využít jazyk HQL (Hibernate Query Language) za použití rozhraní IQuery, který je podobný jazyku SQL a umožňuje použít funkce jako spojování tabulek, agregační funkce, vyhledávání v řetězcích, řazení, volání procedur. HQL umožňuje načíst jen vybrané vlastnosti entity, čímž urychlí dotazy. Zároveň má ve výchozím nastavení zapnutý Lazy Loading, čímž urychlí načítání entit z databáze. Alternativně lze pro dotazování zvolit sestavování dotazu podle kritérií (skládání pomocí různých metod) rozhraním ICriteria. Od verze 3 je k dispozici poskytovatel k dotazování pomocí jazyka LINQ, který podporuje většinu operací. V porovnání funkčnosti s Entity Frameworkem však nepředstavuje ideální formu dotazování. Další alternativou je vytvoření vlastního SQL dotazu. Pro NHibernate existuje množství doplňků a rozšíření. Je k dispozici např. rozšíření Entity Developer ORM Designer for NHibernate. To umožňuje vytvořit NHibernate model pomocí grafického uživatelského rozhraní a následně podle něj vytvořit nebo aktualizovat databázi. Zároveň nabízí i zpětné vytvoření nebo aktualizaci modelu z databáze [19]. Nástroj je podrobněji použit a popsán v praktické části práce. 25

35 6 Klientská funkcionalita 6.1 SignalR ASP.NET SignalR je knihovna pro ASP.NET vývojáře, která zjednodušuje vývoj webové funkcionality komunikující v reálném čase. SignalR umožňuje obousměrnou komunikaci mezi serverem a klientem. Server může okamžitě odesílat obsah na všechny připojené klienty, jakmile se stanou dostupní. SignalR podporuje technologii Web Sockets a obsahuje zpětně kompatibilní techniky pro starší prohlížeče [20]. SignalR byl původně vlastní projekt dvou členů týmu pracujícího na ASP.NET, ale nyní je to oficiálně integrovaný produkt mezi webové technologie společnosti Microsoft. Jako mnoho podobných technologií je kompletně open-source zpřístupněný pod Apache 2.0 licencí. Zároveň využívá plné podpory ze strany Microsoftu. Zdrojové kódy frameworku a příbuzné projekty jsou přístupné na GitHubu. Základní myšlenkou frameworku je izolace vývojáře od nízko úrovňových detailů síťové komunikace. Toto odstínění vytváří dojem trvale otevřeného spojení. Pro dosažení tohoto cíle SignalR využívá komponenty specifické pro oba konce komunikace, které mezi nimi zajistí zasílání a příjem zpráv v reálném čase. SignalR je odpovědný za výběr nejvíce efektivní techniky dostupné na klientském zařízení i serveru (Long Polling, Forever Frame, Websockets, ) a tyto techniky využívá pro vytvoření a nepřetržité udržení spojení. Zároveň v případě potřeby automaticky řídí odpojení nebo obnovu spojení. Vývojář vidí pouze permanentně otevřené spojení a SignalR zajistí, že vše na pozadí funguje správně. V tomto frameworku se toto spojení často nazývá virtuální trvalé spojení. Rozhodnutí, jaká technika se pro komunikaci použije, se provádí v počáteční fázi komunikace mezi klientem a serverem, která se nazývá negotiation (vyjednávání). Zároveň je možné vynutit použití specifické přenosové technologie za použití klientských knihoven. SignalR zároveň obsahuje messaging bus, sběrnici zpráv, která umožňuje řídit přenos dat. To znamená, že server je schopný sledovat klienty a detekovat jejich připojování a odpojování. Zároveň obsahuje mechanismy pro jednoduché odeslání zpráv všem nebo části klientů, automaticky řešit problémy týkající se komunikace 26

36 (např. rozdílné rychlosti, latence, chyby, ) a zajištění doručení zpráv. Navíc obsahuje knihovny na klientské straně, které dovolují číst data ze služeb různých aplikací, řídit konec virtuálního spojení a asynchronně přijímat nebo odesílat data [21] Ukázka použití Nejsnazší instalace SignalR do projektu je pomocí NuGet Package Manageru. Aktuálně je dostupná verze vydaná dne 18. července 2016, která je zároveň popsána v této práci. Při instalaci se do projektu připojí potřebné knihovny, nakopíruje se knihovna jquery a JavaScriptové soubory pro klientskou část komunikace. Následující ukázka zdrojového kódu představuje jednoduchou chatovací aplikaci na principu hubu, kde klient odešle zprávu na server, server ji zpracuje a odešle na všechny připojené klienty. V prvním kroku je nutné vytvořit třídu Startup s metodou Configuration(IAppBuilder app). Tato metoda se volá při startu aplikace, provede se v ní inicializace SignalR voláním metody app.mapsignalr(). Druhým, a zároveň posledním krokem v serverové části aplikace je vytvoření třídy ChatHub. Tato třída, poděděná z třídy Hub, reaguje na zavolání metody Send(string sname, string smessage), přijatá data v parametrech zpracuje a metodou Clients.All.broadcastMessage(sName, smessage) je odešle všem připojeným klientům. V serverové části se nachází dvě třídy: Startup.cs: using Microsoft.Owin; using Owin; [assembly: OwinStartup(typeof(SignalRTest.Startup))] namespace SignalRTest public class Startup public void Configuration(IAppBuilder app) app.mapsignalr(); ChatHub.cs: using System; using System.Web; using Microsoft.AspNet.SignalR; 27

37 namespace SignalRChat public class ChatHub : Hub public void Send(string sname, string smessage) Clients.All.broadcastMessage(sName, smessage); V klientské části aplikace se nachází jednoduchá HTML stránka. Do ní je nutné připojit tři JavaScriptové soubory knihovny jquery a SignalR v závislosti na používaných verzích. Třetí soubor na adrese "signalr/hubs" je automaticky generovaný serverovou částí aplikace, obsahuje informace o serverových třídách (v tomto případě o třídě ChatHub a její metodě Send) a umožňuje jejich volání. <script src="scripts/jquery min.js" ></script> <script src="scripts/jquery.signalr min.js"></script> <script src="signalr/hubs"></script> Ve stránce je dále vložený jednoduchý JavaScript, který zajišťuje odeslání a přijímání zpráv: <script type="text/javascript"> $(function () var chat = $.connection.chathub; chat.client.broadcastmessage = function (name, message) $('#list').append('<li>' + name + ':' + message + '</li>'); ; $.connection.hub.start().done(function () $('#sendmessage').click(function () chat.server.send('testovací jméno', 'testovací zpráva'); ); ); ); </script> První řádek JavaScriptu deklaruje proměnnou chat a naplní ji referencí na třídu chathub v serverové části aplikace. V další části kódu je vytvořena funkce, kterou volá server v případě odeslání zprávy klientům. Script zpracuje přijatá data a naformátované je připojí do HTML seznamu s identifikátorem list. Třetí a poslední část kódu je funkce, která se zavolá při odeslání zprávy na server. Odeslání se provádí při kliku na tlačítko s identifikátorem sendmessage. V této ukázce se odesílají pouze data testovací jméno a testovací zpráva [22]. 28

38 6.2 CSS Frameworky S rozvojem webových aplikací a jazyka HTML se zároveň masivně vyvíjí i kaskádové styly. Rozšířily se v rozsahu, hloubce i složitosti. Sledování veškerých novinek v CSS je velmi těžké, a když se vezmou v úvahu rozlišné chování prohlížečů v počítačích, mobilních zařízeních, operačních systémech, IoT zařízeních, je prakticky nemožné držet krok s probíhajícími změnami. Použití CSS frameworku může velmi urychlit vývoj nového designu. Kvalitní framework pomůže zlepšit celkovou funkčnost a výkon celého webu či aplikace. Zároveň může být přínosem pro celkovou user experience aplikace nebo webové stránky [23] Twitter Bootstrap Twitter Bootstrap, známý pod zkráceným názvem Bootstrap, je jeden z nejpopulárnějších open source CSS frameworků. Krátce po zveřejnění se stal nejpopulárnějším projektem na GitHubu a postupem času se stal natolik populární, že Microsoft oznámil jeho integraci do šablon webových aplikací ve Visual Studiu Jedním z hlavních důvodů, proč se CSS frameworky společně s Bootstrapem staly natolik populární je ten, že dovoluje vývojářům vytvořit hezky vypadající stránky s relativně malým množstvím námahy. Bootstrap zároveň nabízí bohatý ekosystém šablon, komponent třetích stran nástrojů a velmi aktivní komunitu. Použití Bootstrapu v ASP.NET projektu je praktický krok, stará se o typografii, vzhled formulářů, komponenty uživatelského prostředí a dovoluje vývojářům soustředit se na podstatné věci. Z tohoto pohledu se jedná o neocenitelný nástroj nejen pro menší vývojářské týmy, které tím pádem nepotřebují vlastního grafika. Bootstrap je aktuálně dostupný ve verzi vydané 25. července V této verzi představil přístup Mobile-first, díky kterému jsou všechny stránky automaticky responzivní a optimalizované pro zařízení s menší obrazovkou [24]. Pro instalaci do ASP.NET projektu je doporučována instalace pomocí NuGet Package Manager, který zároveň kontroluje nové verze balíčků a umožňuje velmi jednoduchou aktualizaci nebo odinstalaci z projektu. Zároveň řeší závislosti na dalších balíčcích, v tomto případě závislost na knihovně jquery. Na platformě 29

39 ASP.NET je pro Bootstrap k dispozici velké množství knihoven a doplňků třetích stran, které velmi zjednodušují tvorbu uživatelského rozhraní. Patří mezi ně například knihovny TwitterBootstrapMVC nebo FluentBootstrap, které za pomocí Fluent metod umožňují jednoduše vytvořit Bootstrap komponenty bez znalosti CSS tříd frameworku. Následující část kódu View technologie ASP.NET MVC demonstruje vytvoření jednoduchého přihlašovacího formuláře s použitím knihovny TwitterBootstrapMVC (var f = Html.Bootstrap().Begin(new => => => Nezávisle na používané technologii je k dispozici velké množství připravených uživatelských rozhraní, ať už placených nebo dostupných zdarma. Příkladem je šablona administrace AdminLTE od Almsaeed Studio, která používá Bootstrap a je dostupná v NuGet Package Manageru. Obrázek 7 - Šablona administrace AdminLTE [26] 30

40 6.2.2 Další CSS frameworky Bootstrap není jediným zástupcem CSS frameworků. K dispozici jsou desítky dalších a velmi rozdílných frameworků. Liší se v rozsáhlosti, velikosti zdrojového kódu, uživatelské podpoře i účelu. Mezi zajímavé CSS frameworky patří Pure.css, který je rozložen do několika modulů. Jeho nespornou výhodou je velikost minifikovaného kódu, která je v aktuální verzi pouze 3,8 KB. I přesto nabízí plnou podporu pro vytvoření responzivní šablony webových stránek a jejich menu, tabulek, formulářů či tlačítek. Dalším zástupcem frameworků je Semantic UI. Jedná se o rozsáhlejší nástroj pro tvorbu složitějšího uživatelského rozhraní. Jak je z názvu patrné, jeho hlavním cílem je zápis formátovacích tříd v přirozenějším jazyce. Zároveň nabízí i pokročilé moduly jako dropdown, checkboxy nebo modální okna s intuitivním JavaScriptovým API. Dalšími CSS frameworky jsou například Foundation, který nabízí zároveň podporu pro tvorbu responzivních ů, Kube, Titan a mnoho dalších [27]. 6.3 JavaScriptové frameworky Při tvorbě moderních webových aplikací se klade velký důraz na uživatelské rozhraní. Cílem je co nejvíce uživateli zpříjemnit používání aplikace, proto se velmi často používají dynamicky načítané komponenty za pomoci JavaScriptu. Mezi prohlížeči však existují drobné nekompatibility nebo rozdíly v podporovaných příkazech tohoto jazyka a jejich ošetřování je velmi pracné. Zároveň programování v samotném JavaScriptu je v běžných úkolech zbytečně zdlouhavé a složité. JavaScriptové frameworky slouží k ulehčení práce a programování v JavaScriptu. Eliminují problémy JavaScriptu a zároveň nabízí vyšší míru abstrakce, díky které je snadné se orientovat v rozsáhlém kódu. Mezi nejznámější a nejpoužívanější patří knihovna jquery. Velmi usnadňuje obsluhu událostí, animace, asynchronní dotazování nebo manipulaci s objektovým modelem dokumentu. Mezi populární JavaScriptové frameworky patří Angular, React, Knockout nebo Node.JS. Microsoft pro platformu ASP.NET aktuálně nenabízí technologie pro vytvoření dynamického uživatelského prostředí, pro tyto účely je nutné využít technologie třetích stran. 31

41 6.3.1 TypeScript V souvislosti s jazykem JavaScript a dynamickým uživatelským rozhraním webových aplikací nabízí Microsoft open-source programovací jazyk TypeScript. Jedná se o nadstavbu jazyka JavaScript, kód jazyka TypeScript se kompiluje do JavaScriptu. Rozšiřuje JavaScript o podporu statického typování a další vlastnosti objektově orientovaného programování, např. třídy, rozhraní, výčtové typy, generika, výchozí hodnoty parametrů a mnoho dalších. Je navržený pro vývoj rozsáhlých aplikací, často se používá pro zjednodušení a zpřehlednění kódu v kombinaci s JavaScriptovými knihovnami a frameworky. Samotný jazyk je nezávislý na používané technologii, k dispozici jsou doplňky do velkého počtu používaných vývojových nástrojů, mezi které patří nejen Visual Studio a Visual Studio Code, ale i IntelliJ IDEA, Eclipse, NetBeans a mnoho dalších. Následující zdrojový kód obsahuje definici třídy User s textovou vlastností name, konstruktorem a vytvoření instance této třídy pomocí TypeScriptu [28]. class User name: string; constructor(username: string) this.name = username; let user = new User("Petr"); 6.4 DotVVM DotVVM je nový open-source framework pro webové aplikace vytvořený českou společností Riganti. První verze byla představena v roce 2015, zdrojové kódy jsou veřejně přístupné na GitHubu. Slouží pro jednoduchou a rychlou tvorbu moderního uživatelského prostředí na platformě ASP.NET MVC. Microsoftem doporučovaná varianta při tvorbě nové webové aplikace na platformě.net je použití ASP.NET MVC nebo ASP.NET WebAPI v kombinaci s klientským frameworkem, jako je React, Angular nebo Knockout. Každý z těchto frameworků je nicméně velmi rozdílný a pro kombinaci s ASP.NET neexistuje mnoho hotových řešení. Zároveň se celý vývojářský tým musí učit nové technologie a v případě vývoje rozsáhlého informačního systému je nutné vytvářet i vlastní infrastrukturu. DotVVM zajišťuje komunikaci mezi klientským zařízením a serverem, validace, 32

42 formátování data a času a nabízí množství již vytvořených komponent. Pro jeho použití není nutné znát různé JavaScriptové knihovny, frameworky nebo nástroje. Většinu klientské části aplikace lze vytvořit pouze pomocí C#, HTML a CSS. Jedná se o částečnou náhradu technologie ASP.NET WebForms pro moderní webové aplikace. Na pozadí využívá knihovnu Knockout a jeho návrhový vzor MVVM. Obsahuje méně než 50 kb JavaScriptového kódu. Zároveň podporuje původní.net Framework 4.5 i nový.net Core. K frameworku je zároveň pro usnadnění práce k dispozici doplněk do Visual Studia a placené rozšíření s komponentami pro CSS framework Bootstrap. Použití frameworku je velmi jednoduché a intuitivní, což je patrné i z následující ukázky zdrojového kontaktního formuláře. První část je ViewModel, jednoduchá třída v jazyce C# s dvěma vlastnostmi a metodou Submit: public class ContactFormViewModel public string Name get; set; public string get; set; public string Submit () ContactService.Submit(Name, ); Druhou částí je View v jazyce HTML, které obsahuje DotVVM komponenty TextBox a Button. Toto View se pak nazývá Dotvvm.ContactFormViewModel, Dotvvm <div class="form-control"> <dot:textbox Text="value: Name" /> </div> <div class="form-control"> <dot:textbox Text="value: " /> </div> <div class="button-bar"> <dot:button Text="Submit" Click="command: Submit()" /> </div> DotVVM automaticky přeloží <dot: komponenty na odpovídající značky jazyka HTML a hodnoty nebo příkazy přeloží do výrazů knihovny KnockoutJS. Knihovna je poté sama naplní požadovanými vlastnostmi. Příkazy command: jsou přeloženy do JavaScriptu, který volá interní funkce dotvvm.postback. Tato interní funkce poté automaticky zavolá serverovou metodu ve ViewModelu. DotVVM dále 33

43 nabízí rozsáhlou funkcionalitu pro globalizaci a lokalizaci, klientské validace, autorizaci nebo zabezpečení aplikace [29]. 6.5 Bundling a minifikace souborů Bundling neboli balíčkování je funkcionalita přímo podporována platfomou ASP.NET. Dovoluje významně snížit čas potřebný pro načtení stránky redukováním počtu dotazů na server. Používá se pro rychlejší načítání CSS a JavaScriptových souborů. Princip spočívá v slučování drobných souborů do jednoho souboru bundle. Snížením počtu dotazů je stránka načtena rychleji. Použití bundlingu je velmi jednoduché. Následující část kódu ukazuje vytvoření bundle CSS frameworku Bootstrap a tématu. Definice balíčků se provádí při startu aplikace v metodě Application_Start v souboru Global.asax. void Application_Start(object sender, EventArgs e) BundleConfig.RegisterBundles(BundleTable.Bundles); public class BundleConfig public static void RegisterBundles(BundleCollection bundles) bundles.add(new StyleBundle("~/Content/bootstrap").Include( "~/Content/bootstrap.min.css", "~/Content/bootstrap-theme.min.css")); Takto vytvořený bundle lze poté jednoduše použít v klientské části aplikace v závislosti na použitém frameworku. První příklad ukazuje syntaxi jazyka Razor v MVC aplikaci, druhý syntaxi používanou ve WebForms <%: Styles.Render("~/Content/bootstrap") %> Pro vytváření JavaScriptových balíčků se místo objektu StyleBundle používá ScriptBundle a pro vypsání balíčků metoda Scripts.Render(). Při vytváření balíčků je možné použít soubory uložené v síti CDN. Minifikace je proces, při kterém se z HTML, CSS a JavaScriptových souborů odstraňují přebytečná data, která nejsou potřebná pro strojové zpracování. Jedná se o mezery, nové řádky, komentáře a někdy i oddělovače příkazů. Tyto znaky jsou 34

44 potřebné pouze pro snadné čtení kódu, ale nejsou potřebné pro běh aplikace. Odstraněním těchto dat se zmenší velikost souborů, které je potřebné posílat na klientské zařízení. Minifikaci lze nastavit společně s nastavením balíčků vlastností BundleTable.EnableOptimizations = true; [30]. 6.6 UI komponenty třetích stran Při vývoji větších aplikací a informačních systémů je v některých případech praktickým a logickým krokem použití již existujících komponent třetích stran. S jejich dobrou znalostí rapidně snižují čas potřebný pro implementaci stále se opakujících součástí aplikací. Na trhu existuje velká škála tvůrců komponent, kteří je nabízí zdarma, pod open-source licencí nebo v placené variantě. Mezi největší a nejznámější společnosti, které nabízí placené komponenty s kvalitní podporou, se řadí Telerik, DevExpress, SyncFusion a další. Společnosti většinou nabízí velké balíky komponent určené pro různé technologie, jako jsou ASP.NET WebForms, ASP.NET MVC, WinForms a SinglePage aplikace. V oblasti ASP.NET patří mezi nejpoužívanější komponenty v první řadě Grid (tabulka), který je hlavně v oblasti informačních systémů velmi využívaný, a tudíž je tu snaha o co největší znovupoužitelnost. Gridy velmi často bývají rozšířené o filtrování, řazení, změnu pozice a viditelnosti sloupců, responzivitu, stránkování, editaci, seskupování či export dat. Velmi často jsou zároveň optimalizované pro práci s velkým množstvím dat. Mezi další komponenty se pak řadí rich text editory, kontingenční tabulky, modální okna, navigační menu a spousta dalších. Součástí komponent mohou být i technologie pro tvorbu a generování reportů. Může se jednat o grafy, exporty dat do různých formátů (pdf, doc, xls) či tiskové šablony [31]. 35

45 Obrázek 8 - Ukázka webové aplikace sestavené pomocí komponent DevExpress pro ASP.NET WebForms [32] Komponenty Syncfusion Syncfusion je jedna ze společností, která nabízí komplexní sadu komponent pro.net a JavaScript. Po vzoru Community licence pro IDE Visual Studio poskytované společnosti Microsoft uvolnil Syncfusion své komponenty zdarma pro vývojáře na volné noze nebo až pro pět vývojářů ve společnosti s menším ročním výnosem než 1 milion dolarů. Jejich použití je možné i pro komerční účely. Balík mimo jiné obsahuje komponenty určené pro webové aplikace na platformě.net. Podporují technologie ASP.NET WebForms i ASP.NET MVC. Navíc již nabízí podporu nového.net Core. Komponenty pro obě technologie jsou ve většině případů ekvivalentní. V balíku jsou zároveň obsaženy komponenty využívající pouze HTML5 a JavaScript, které lze použít nezávisle na technologii. Instalace do projektu je možná pomocí NuGet Package Manageru, Syncfusion pro NuGet nabízí vlastní zdroj balíčků [33]. Z následující ukázky zdrojového kódu Gridu (tabulky) pro technologii ASP.NET MVC je patrné, že použití komponent je velmi jednoduché. První částí je Controller, který načte data z datového zdroje a připojí je k dynamické vlastnosti ViewBag. public class GridController : Controller public ActionResult Default() 36

46 var DataSource = new NorthwindDataContext().OrdersViews.ToList(); ViewBag.datasource = DataSource; return View(); Druhou částí ukázky je View, ve které je pomocí Fluent syntaxe definovaný Grid. V Gridu se definuje datový zdroj načtený z dynamické vlastnosti ViewBag, stránkování, počet stránek a jednotlivé => page.pagecount(7); ).Columns(col => col.field("orderid").headertext("order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).Add(); col.field("customerid").headertext("customer ID").Width(90).Add(); col.field("freight").headertext("freight").textalign(textalign.right).width(7 5). Format("0:C").Add(); col.field("orderdate").headertext("order Date").TextAlign(TextAlign.Right).Width(80).Format("0:MM/dd/yyyy").Add(); ) ) Při vykreslení stránky se pomocí JavaScriptu vytvoří následující tabulka s podporou stránkování a požadovanými sloupci. Obrázek 9 - Komponenta Grid z balíku komponent Syncfusion [34] Komponenty obsahují velké množství nastavení a přizpůsobení. U Gridu se jedná například o již zmíněné stránkování, filtrování, vytváření sumářů, export dat do různých formátů, úpravy vzhledu a mnoho dalších vlastností. Syncfusion nabízí 37

47 rozsáhlou a přehlednou dokumentaci s živými ukázkami. K dispozici je zároveň nástroj Theme Editor pro vytvoření vlastních barevných témat komponent [34]. 7 Vývojové nástroje Jedním z kritérií vývojářů při výběru nové platformy jsou vývojové nástroje, se kterými lze na dané platformě pracovat. Microsoft vývojářům nabízí nástroje pro vývoj aplikací, které lze rozdělit do dvou kategorií. První z nich jsou komplexní vývojová prostředí (Integrated Development Enviroment, zkráceně IDE). Druhou kategorií jsou méně komplexní editory. Rozdíly mezi prostředími jsou v závislosti na cílové skupině uživatelů ve výkonu, ceně i systémových požadavcích. Výběr prostředí zároveň závisí na vyvíjené aplikaci. 7.1 Visual Studio Mezi zástupce první kategorie patří Visual Studio. Jedná se o komplexní a velmi pokročilé IDE, ve kterém je možné vyvíjet aplikace pro různé platformy. Nemusí se jednat pouze o aplikace úzce spojené s.net Frameworkem. Mimo již zmíněné webové aplikace lze vyvíjet konzolové aplikace, WPF a WinForms aplikace, ale i aplikace pro Android, Apple ios či cloudové služby. Okolo Visual Studia zároveň existuje velice rozsáhlý systém doplňků a rozšíření, díky kterým lze IDE neomezeně přizpůsobit. Jsou tak dostupné nástroje například pro vývoj moderních Node.JS či ReactJS aplikací. Microsoft poprvé vydal Visual Studio v roce Aktuálně je dostupná verze Visual Studio 2015 ve třech edicích. První je edice Community, která je zdarma dostupná pro jednotlivé vývojáře, malé vývojářské týmy do pěti členů nebo open source projekty. Nabízí všechny potřebné komponenty pro vývoj rozsáhlých aplikací. Druhou edicí je pak Professional, která je určená pro komerční použití větších týmů a funkcionalitou je téměř shodná s edicí Community. Třetí je Enterprise, která nabízí podnikové řešení s pokročilými možnostmi pro týmy pracující na projektech jakékoli velikosti nebo složitosti, včetně pokročilého testování, vývoje a provozu. Mezi největší nevýhody Visual Studia donedávna patřila jeho vysoká cena spojená s nedostupností. Od verze Visual Studia 2005 byla sice dostupná edice Express, 38

48 nicméně její funkcionalita byla velmi omezená. Tuto situaci Microsoft v roce 2014 vyřešil uvolněním již zmíněné edice Visual Studio Community [35]. 7.2 Visual Studio Code Obrázek 10 - Ukázka prostředí IDE Visual Studio [35] Microsoft Visual Studio Code je nový open-source editor zdrojového kódu, který byl představen v roce Jedná se o druhou kategorii vývojových nástrojů. I přes to, že mimo názvu nemá nic společného s pokročilým Visual Studiem, nabízí několik stejných funkcí, jako třeba našeptávač Intellisense či snadnou rozšiřitelnost. Editor je multiplatformní, dostupný na Windows, Linux a OS X a velikost instalátoru aktuální verze ze září 2016 nepřekračuje 50 MB. Barevné značení syntaxe, zvýrazňování a kontrola závorek dělají z Code skvělý editor pro všechny vaše programátorské úkoly. Visual Studio Code podporuje JavaScript, C#, C++, PHP, Javu, HTML, R, CSS, SQL, Markdown, TypeScript, LESS, SASS, JSON, XML a Python, stejně jako spoustu dalších běžných formátů souborů [36]. 39

49 Obrázek 11 Ukázka prostředí Visual Studio Code [36] 7.3 NuGet Package Manager NuGet Package Manager, zkráceně NuGet, je open-source správce balíčků navržený pro platformu Microsoft. Od představení v roce 2010 se rozrostl do velkého ekosystému nástrojů a knihoven. Aktuálně se v NuGetu nachází více než unikátních balíčků. Ve výchozím nastavení je nainstalován jako rozšíření do Visual Studia, kde nabízí jednoduché a přehledné uživatelské prostředí i integraci do kontextových menu. Zároveň může být ovládán pomocí příkazové řádky Package Manager Console, případně lze vytvořit automatizované scripty. Instalace balíčku do projektu je oproti ruční instalaci velmi jednoduchá. NuGet při instalaci balíčku automaticky nakopíruje veškeré potřebné soubory do solution a aktualizuje projekt, ve kterém přidá reference, změní konfigurační soubor atd. Zároveň vyhledá a případně nainstaluje nebo aktualizuje veškeré závislé balíčky ve správných verzích. Při odebrání balíčku odstraní nepotřebné soubory a navrátí veškeré provedené změny v projektu. Velmi jednoduché je zároveň vytváření a publikování vlastních balíčků [37]. 40

50 7.4 Užitečné doplňky a rozšíření Během dvacetileté historie Visual Studia se okolo tohoto nástroje vytvořila také velmi početná komunita vývojářů, zabývající se jeho rozšířeními. Visual Studio nabízí téměř neomezené možnosti rozšíření, ať už se jedná o formátování dokumentů, usnadnění práce, ale i přidávání nových programovacích jazyků, technologií a mnoho dalších funkcí. V roce 2008 Microsoft vytvořil Visual Studio Gallery, centrální portál pro zveřejňování rozšíření. Komunitní i komerční vývojáři zde mohou nahrávat svá rozšíření, uživatelé je mohou hodnotit a psát recenze. S příchodem Visual Studio Code Microsoft vytvořil nový portál s názvem Visual Studio Marketplace, kde jsou zveřejňovány rozšíření pro všechny produkty z rodiny Visual Studio. Zároveň jsou do nově vytvořeného Marketplace postupně přesouvány i rozšíření z původní Visual Studio Gallery. Instalace rozšíření do nástroje probíhá velmi jednoduše pomocí nabídky Extensions and updates, některá rozšíření jsou pak instalovány vlastními instalátory [38] Resharper Resharper je velmi populární nástroj rozšiřující funkcionalitu Visual Studia. Jedná se o komerční produkt české společnosti JetBrains, která je známá i díky velmi populárnímu IDE IntelliJ IDEA pro jazyk Java. Nástroj je studentům pro studijní účely zpřístupněn zdarma. Jedním z praktických modulů pomáhající při programování aplikace je analýza kódu. Resharper obsahuje více než 2000 různých analýz a nabízí rychlé vylepšení a opravy kódu. Upozorňuje na neošetřené výjimky, zjednodušitelné nebo nedosažitelné části kódu nebo nabízí rychlou migraci kódu při přechodu na novější specifikaci programovacího jazyka. Zároveň nabízí množství akcí pro refactoring kódu. Zjednodušuje bezpečné přejmenování a přesouvání kódu, oddělování a snižování složitosti kódu nebo převod na alternativní syntaxi jazyka. Resharper zároveň zjednodušuje orientaci a vyhledávání v projektech nebo formátování a vyčištění kódu. Rozsáhlé nastavení nástroje umožňuje přizpůsobit většinu chování nástroje, které zároveň lze snadno sdílet mezi ostatními členy vývojového týmu [39]. 41

51 7.4.2 Web Essentials Dalším velmi zajímavým rozšířením Visual Studia určeným převážně pro webové vývojáře je Web Essentials. Obsahuje mnoho vylepšení pro zjednodušení práce s CSS, HTML, JavaScript, TypeScript, CoffeeScript nebo LESS soubory. Doplněk je nabízen zdarma pro Visual Studio 2010 a vyšší, jeho stažení a instalace je možná pomocí Visual Studio Marketplace. Doplňuje podporu Intellisense pro CSS soubory pro třídy, identifikátory nebo HTML elementy, navigaci při vkládání URL adres, živý náhled barev, obrázků nebo velikosti písma a mnoho dalších rozšíření. Rozšiřuje i práci s HTML soubory, kde přidává podporu živých náhledů, formátování dokumentů nebo dekódování obrázků z formátu Base64. Web Essentials zároveň obsahuje kompiler pro CSS preprocesor LESS [40]. Obrázek 12 - Ukázka rozšíření Web Essentials [40] 42

52 8 Praktické použití Součástí práce je ukázková aplikace, ve které jsou použity vybrané technologie popsané v této práci. Aplikaci byla vyvíjena pomocí Visual Studia 2015 Community s databázovým serverem Microsoft SQL Server Využívá.NET Framework ve verzi Aplikace je rozdělena na tři části. První z nich je část přístupu k datům pojmenovaná DataAccess. V ní se nachází tři projekty s použitými technologiemi pro přístup k datům: ADO.NET, Entity Framework a NHibernate. Ve složce se zároveň nachází inicializační SQL script s testovacími daty. Další částí je Presentation, kde se nachází dva projekty s prezentačními technologiemi ASP.NET WebForms a ASP.NET MVC. Mezi těmito částmi je pak ve složce Library projekt Services, který zajišťuje komunikaci mezi prezentační a datovou částí aplikace. Jednotlivé projekty lze jednoduše použít pro vlastní potřebu při tvorbě aplikací. Projekty prezentační části pouze obsahují reference na projekty z části DataAccess, které je v případě vlastního použití nutné odstranit. Schéma aplikace je znázorněno na Obrázek 13. Obrázek 13 - Struktura ukázkové aplikace [Zdroj: autor] 8.1 Aplikační vrstva přístup k datům Všechny tři projekty s představenými technologiemi pro přístup k datům mají totožnou strukturu. Základní složky jsou Domain a Services. Ve složce Domain se nachází doménové třídy, v Services pak třída zajišťující operace s databází. 43

53 Třída Service implementuje rozhraní IService, ve kterém jsou definovány metody pro operace s databází. Ve všech projektech se jedná o metody pro načtení zákazníka podle identifikátoru, načtení seznamu všech zákazníků s volitelným filtrováním dle jména zákazníka, uložení a smazání zákazníka. Projekty s nástroji objektově-relačního mapování obsahují navíc složku Mapping s třídami zajišťující mapování tříd na doménový model relační databáze, viz. Obrázek 14. Obrázek 14 - Struktura projektu nástroje Entity Framework [Zdroj: autor] V každém projektu jsou stejně vytvořeny dvě třídy: Customer a Contact, mezi kterými je vazba 1:N. U každé třídy bylo pro představení rozdílů vytvořeno více vlastností s různými datovými typy. public class Customer public int Id get; set; public string Name get; set; public bool Active get; set; public string RegNo get; set; public string VatNo get; set; public DateTime DateCreated get; set; public DateTime? DateDeactivated get; set; public decimal CurrentCredit get; set; public CustomerType CustomerType get; set; public class Contact public int Id get; set; public string Name get; set; public bool Active get; set; public string Phone get; set; 44

54 public string get; set; public int CustomerId get; set; public enum CustomerType Customer = 0, Agency = 1, Agent = ADO.NET Knihovna ADO.NET je součástí.net Frameworku, pro její použít není nutné do projektu přidávat další reference. Pro komunikaci s databází se využívají třídy SqlCommand, SqlConnection, SqlDataAdapter, SqlDataReader. V následující části bude popsána jednoduchá metoda pro načtení jména zákazníka z databáze. SQL příkazy prováděné nad databází je nutné napsat ručně pomocí proměnné datového typu string. Veškeré parametry dotazů by měly být do příkazu vkládány pomocí parametrů. string sselect = "select Id, Name from Customers c where c.id Následně je nutné vytvořit instanci třídy SqlConnection se specifikovanou vlastností Connection string a otevřít spojení s databází. SqlConnection c = new SqlConnection(CNN()); c.open(); Dalším krokem je vytvoření instance SqlCommand a předání SQL dotazu s připojením na databázi. V tomto objektu se také vytvářejí parametry SQL dotazu a jejich hodnoty. SqlCommand cmd = new SqlCommand(sSelect, c); cmd.parameters.addwithvalue("@customerid", id); Následuje vykonání příkazu a přečtení výsledků dotazu pomocí instance třídy SqlDataReader a uzavření spojení k databázi. SqlDataReader r = null; int custid; string custname; try r = cmd.executereader(); if (r.read()) custid = (int)r["id"]; custname = (string)r["name"]; else throw new Exception("Záznam nelze načíst"); 45

55 finally r.close(); c.close(); Pro načítání seznamu záznamů se využívá místo třídy SqlDataReader třída SqlDataAdapter, která metodou Fill() naplní výsledkem dotazu objekt DataSet. SqlCommand cmd = new SqlCommand(); StringBuilder sb = new StringBuilder(); sb.append(@" select Id, Name, Active, CustomerType from Customers c where 1=1 "); if (!string.isnullorempty(sfiltername)) sb.append(@" and (c.name "); cmd.parameters.addwithvalue("@name", sfiltername + '%'); sb.append(@" order by c.id "); cmd.commandtext = sb.tostring(); SqlDataAdapter da = new SqlDataAdapter(); da.selectcommand = cmd; DataSet ds = new DataSet(); SqlConnection c = new SqlConnection(CNN()); cmd.connection = c; c.open(); da.fill(ds, "data"); c.close(); return ds; Vytvoření záznamu probíhá obdobně jako jeho načtení. Pro provedení příkazu a získání nového identifikátoru záznamu lze zavolat metodu ExecuteScalar() třídy SqlCommand. Při vytváření je nutné specifikovat všechny vlastnosti vkládané třídy jako parametry a SQL příkaz s těmito parametry. SqlCommand cmd = new SqlCommand(); cmd.parameters.addwithvalue("@name", cust.name); cmd.parameters.addwithvalue("@active", cust.active); cmd.parameters.addwithvalue("@customertype", cust.customertype); SqlConnection c = new SqlConnection(CNN()); 46

56 c.open(); cmd.connection = c; try string sql into Customers (Name, Active, CustomerType) select NewID = SCOPE_IDENTITY() "; cmd.commandtext = sql.tostring(); try cust.id = (int)(decimal)cmd.executescalar(); catch (Exception exc) throw new Exception("Záznam nelze vytvořit!"); finally cmd.connection.close(); Z předchozí ukázky je patrné, že práce s databází z pohledu vývojáře je velmi komplikovaná a náchylná na chyby. Každá přidaná nebo upravená vlastnost k doménové třídě se musí definovat na několika místech. Pro každou doménovou třídu je nutné vytvářet metody pro načtení, vkládání, aktualizaci a smazání z databáze Entity Framework ORM nástroj Entity Framework lze do projektu nainstalovat pomocí NuGet Package Manageru. V ukázkovém projektu je použit Code First přístup, kdy se nejprve vytvoří doménové třídy aplikace (takzvané POCO třídy), mapování těchto tříd na databázi a třída DbContext, zajišťující interakci s vývojářem. Mapování doménových tříd je vytvořeno ve vlastních třídách. public class EfContext : DbContext public EfContext() : base("name=datamodel") protected override void OnModelCreating(DbModelBuilder modelbuilder) modelbuilder.configurations.add(new CustomerMap()); modelbuilder.configurations.add(new ContactMap()); base.onmodelcreating(modelbuilder); 47

57 public virtual DbSet<Customer> Customers get; set; public virtual DbSet<Contact> Contacts get; set; V konstruktoru třídy je pouze definovaný název vlastnosti Connection string uložené v konfiguračním souboru. V přetížené metodě OnModelCreating se definují mapovací třídy. Dále se definují vlastnosti datového typu DbSet<T> pro každou mapovanou třídu. Mapovací třídy musí být poděděné ze třídy EntityTypeConfiguration se specifikovaným datovým typem. Samotné mapování se definuje pomocí tzv. Fluent syntaxe a je velmi intuitivní. public class CustomerMap : EntityTypeConfiguration<Customer> public CustomerMap() ToTable("Customers"); HasKey(c => c.id); Property(x => x.active); Property(x => x.customertype); Property(c => c.name).isrequired().hasmaxlength(128); Veškeré operace s databází se provádí pomocí třídy DbContext. Často se používá konstrukce using(), která po provedení požadovaných operací uzavře spojení s databází a provede Dispose objektu. Následující metoda představuje načtení zákazníka podle klíče id a načtení seznamu zákazníků s volitelným filtrem podle jména. using (var ctx = new EfContext()) return ctx.customers.find(id); using (var ctx = new EfContext()) IQueryable<Customer> list = ctx.customers; if (!string.isnullorempty(sfiltername)) list = list.where(x => x.name.startswith(sfiltername)); return list.tolist(); Pro vytvoření nového záznamu stačí přidat vytvořený objekt do kolekce záznamů. Následně se při zavolání metody SaveChanges() provedené změny uloží do databáze a u ukládaného objektu se aktualizuje jeho identifikátor. using (var ctx = new EfContext()) ctx.customers.add(cust); 48

58 ctx.savechanges(); Entity Framework automaticky detekuje změny na entitách, nicméně jen v rámci existence objektu DbContext. Při načtení entity z databáze je pro jinou instanci DbContextu entita neznámá a nástroj při uložení provede místo aktualizace vytvoření nového záznamu. Vytvoření nové instance DbContextu je zároveň náročné. Tento přístup tedy není příliš vhodný pro webové aplikace, kde je nutné nad entitou provést více operací. Z tohoto důvodu se více používá přístup nazvaný per request, kde se DbContext vytvoří na začátku provádění aplikačního kódu. Případně lze použít přístup per lifetime s vytvořením DbContextu při startu aplikace NHibernate Nástroj NHibernate je možné do projektu nainstalovat pomocí NuGet Package Manageru. Pro jednodušší práci byl zároveň nainstalován i jeho doplněk FluentNHibernate, zajišťující konfiguraci nástroje pomocí tzv. Fluent syntaxe přímo v aplikačním kódu. Podobně jako v případě Entity Frameworku se nejdříve vytvoří doménové a mapovací třídy. Pro komunikaci s databází se využívá objekt Session. Základem je třída SessionFactory, jejíž instance se obvykle vytváří pro celou aplikaci. Při vytváření instance SessionFactory se provádí konfigurace nástroje. Je nutné specifikovat cílovou databázi a její Connection string a přidat mapovací třídy. private static ISessionFactory CreateSessionFactory() return Fluently.Configure().Database(MsSqlConfiguration.MsSql2012.ConnectionString(CNN())).Mappings(x => x.fluentmappings.addfromassemblyof<contactmap>()).mappings(x => x.fluentmappings.addfromassemblyof<customermap>().buildsessionfactory(); Mapovací třídy jsou poděděné z třídy ClassMap s určeným datovým typem. Pro mapování výčtového typu je nutné explicitně specifikovat tento typ metodou CustomType. public class CustomerMap : ClassMap<Customer> public CustomerMap() Table("Customers"); 49

59 Id(x => x.id); Map(x => x.name).length(128); Map(x => x.active); Map(x => x.customertype).customtype<customertype>(); HasMany(x => x.contacts).keycolumn("customerid").inverse().cascade.none(); Práce s databází se provádí pomocí třídy Session, která se vytváří metodou OpenSession na objektu SessionFactory. Následující kód představuje načtení zákazníka podle ID a načtení seznamu zákazníků s volitelným filtrem podle jména. Pro vytváření filtrů se zde používá třída Restrictions, pomocí které lze jednoduše a přehledně vytvářet podmínky dotazů. using (var session = sessionfactory.opensession()) return session.get<customer>(id); public IEnumerable<Customer> LoadCustomerList(string sfiltername) using (var session = sessionfactory.opensession()) var tmplist = session.queryover<customer>(); if (!string.isnullorempty(sfiltername)) tmplist = tmplist.where(restrictions.on<customer>(x => x.name).islike(sfiltername, MatchMode.Start)); return tmplist.list(); Pro vytvoření nového záznamu se používá metoda Save(), které se předá vkládaný objekt. Tato metoda automaticky provede příkaz na databázi a v objektu aktualizuje identifikátor. using (var session = sessionfactory.opensession()) session.save(cust); 8.2 Prezentační vrstva Prezentační vrstva aplikace obsahuje dva projekty. Uživatelské rozhraní obou projektů je postaveno na CSS frameworku Bootstrap ve verzi s použitím knihovny jquery ve verzi V projektech jsou vytvořeny dvě stránky se stejným rozložením: seznam zákazníků a formulář zákazníka. Obě stránky obsahují stejnou 50

60 funkcionalitu: zobrazení seznamu zákazníků a jeho filtrování, přidání zákazníka, úprava zákazníka a odstranění zákazníka z databáze ASP.NET WebForms Technologie WebForms nemá definovanou strukturu projektu. V ukázkovém projektu je vytvořena Master page (předloha stránky) s názvem Main.Master a dvě stránky CustomerForm.aspx, CustomerList.aspx. Master page obsahuje základní hlavičku HTML stránky a menu vytvořené z komponent Bootstrapu. Veškeré ovládací prvky musí být obalené elementem form s atributem runat="server". Důležitým prvkem je zde element ContentPlaceHolder s identifikátorem cphbody. <asp:contentplaceholder ID="cphBody" runat="server"> </asp:contentplaceholder> Do tohoto elementu se vkládá obsah stránek používající tuto Master page. Na začátku každé stránky je nutné definovat soubor MasterPage a stránka musí obsahovat element Content s identifikátorem ContentPlaceHolder v Master page. <asp:content ID="Content2" ContentPlaceHolderID="cphBody" runat="server"> Definice všech ovládacích prvků na stránce se zapisuje pomocí prefixu <asp: a musí obsahovat atribut runat="server". Následující část kódu představuje vytvoření tlačítka btnsearch. K ovládacím prvkům na stránce lze přidat různé metody. V tomto případě při kliku na tlačítko ASP.NET na serveru vyvolá událost btnsearch_onclick. <asp:button runat="server" ID="btnSearch" OnClick="btnSearch_OnClick" Text="Vyhledat" CssClass="btn btn-primary" /> V code-behind stránky se tato událost vyvolá. Z ovládacího prvku TextBox s ID tbfiltername načte jeho vlastnost Text, naplní daty prvek GridView s ID gvcustomersado a provede přenačtení dat v GridView. protected void btnsearch_onclick(object sender, EventArgs e) string sfiltername = tbfiltername.text; gvcustomersado.datasource = BPFacade.GetADOService().LoadCustomerList(sFilterName); gvcustomersado.databind(); 51

61 Následující část zdrojového kódu představuje vytvoření formuláře pro vytvoření nebo editaci záznamu zákazníka. První částí je mark-up stránky. Technologie WebForms dovoluje umístit pouze jeden element form. Ten je umístěn v MasterPage okolo všech ovládacích prvků, okolo formuláře se tedy další element form nezapisuje. Mark-up stránky obsahuje stylované prvky pomocí tříd CSS Frameworku Bootstrap. Na stránce je definováno několik ovládacích prkvů: TextBox, RequiredFieldValidator, CheckBox, DropDownList a Button. Ke každému prvku lze nastavit některé atributy. Tyto atributy prvků jsou zároveň přístupné z code-behind stránky. <div class="form-group"> <asp:label runat="server" ID="lblCustomerName" Text="Jméno" AssociatedControlID="tbCustomerName" CssClass="col-sm-2 control-label" /> <div class="col-sm-10"> <asp:textbox runat="server" ID="tbCustomerName" CssClass="formcontrol" /> <asp:requiredfieldvalidator runat="server" ID="reqCustomerName" ControlToValidate="tbCustomerName" ErrorMessage="Vyplňte jméno!" ValidationGroup="group" /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <asp:checkbox runat="server" ID="cbActive" Text="Aktivní?" /> </div> </div> </div> <div class="form-group"> <asp:label runat="server" ID="Label6" Text="Typ zákazníka" AssociatedControlID="cmbCustomerType" CssClass="col-sm-2 control-label" /> <div class="col-sm-10"> <asp:dropdownlist runat="server" ID="cmbCustomerType" CssClass="form-control" /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <asp:button runat="server" ID="btnSave" OnClick="btnSave_OnClick" Text="Uložit" ValidationGroup="group" CssClass="btn btn-primary" /> </div> </div> Součástí stránky je designer soubor. Ten obsahuje vlastnosti příslušných datových typů všech ovládacích prvků obsažených v mark-up stránky. Tento soubor je automaticky vygenerován při změně v mark-up souboru. protected global::system.web.ui.webcontrols.label lblcustomername; 52

62 protected global::system.web.ui.webcontrols.textbox tbcustomername;... Při prvním načtení stránky se vyvolá událost Page_Load. Vlastnost Page.IsPostBack má v tomto případě hodnotu na false, tudíž se provede první inicializace dat do stránky. Načte se řetězec z adresy dotazu a uloží se do skrytého pole ViewState. Dále se naplní DropDownList s identifikátorem cmbcustomertype a provede se načtení informací o entitě do ovládacích prvků stránky. protected void Page_Load(object sender, EventArgs e) if (!Page.IsPostBack) int ncustomerid = Convert.ToInt32(Request.QueryString["Id"]); ViewState["CustomerId"] = ncustomerid; cmbcustomertype.datasource = CustomerTypeList.GetCustomerTypesLocalized(); cmbcustomertype.datatextfield = "Value"; cmbcustomertype.datavaluefield = "Key"; cmbcustomertype.databind(); var cust = BPFacade.GetADOService().LoadCustomer(nCustomerId); tbcustomername.text = cust.name; cmbcustomertype.selectedvalue = ((int) cust.customertype).tostring(); cbactive.checked = cust.active; Při kliku na tlačítko btnsave se znovu vyvolá událost Page_Load, tentokrát má však vlastnost Page.IsPostBack hodnotu true. Při Page_Load se tedy neprovede žádný kód a vykonávání kódu pokračuje vyvoláním události btnsave_onclick. Zde se provede načtení hodnoty ze skrytého pole ViewState, načtení aktuální entity, která se aktualizuje hodnotami z ovládacích prvků a tyto změny se uloží do databáze. Poslední řádek kódu nakonec zajistí přesměrování na stránku s názvem CustomerList.aspx. protected void btnsave_onclick(object sender, EventArgs e) int ncustomerid = Convert.ToInt32(ViewState["CustomerId"]); var cust = BPFacade.GetADOService().LoadCustomer(nCustomerId); cust.name = tbcustomername.text; cust.customertype = (CustomerType)Convert.ToInt32(cmbCustomerType.SelectedValue); cust.active = cbactive.checked; 53

63 BPFacade.GetADOService().Save(cust); Response.Redirect("CustomerList.aspx"); ASP.NET MVC Struktura projektu technologie ASP.NET MVC je daná architektonickým vzorem MVC. Projekt obsahuje složky odpovídající MVC: Models, Views, Controllers. Model obsahuje všechny vlastnosti pro View. Tyto vlastnosti lze rozšířit o datové anotace, jako zobrazovaný název, validace, pro textové vlastnosti maximální délku nebo rozsah pro číselné vlastnosti. public class CustomerModel public int Id get; set; [Display(Name = "Jméno")] [Required(ErrorMessage = "Jméno je vyžadováno")] public string Name get; set; [Display(Name = "Typ zákazníka")] public int CustomerTypeId get; set; [Display(Name = "Aktivní?")] public bool Active get; set; public IEnumerable<SelectListItem> AvailableCustomerTypes get; set; Druhou komponentou MVC je View. V příkladu se používá syntaxe jazyka Razor. Na začátku View je definován model. Následuje vytvoření formuláře s definicí parametrů. Prvním parametrem je Action method s hodnotou CustomerForm implementovaná v Controlleru Home, definice HTTP metody a CSS třídy. Ve formuláři se dále vykreslí pole pro validace a klíč pro ochranu proti útoku Cross Site Request Forgery. Dále je vytvořeno formulářové pole pro vlastnost modelu Name a tlačítko Uložit. Razor při vykreslení View automaticky zpracuje data anotace v modelu vygeneruje požadovaný kód. Ve vygenerované stránce bude jako popisek vstupu zobrazeno Jméno a na pozadí bude vygenerován kód pro validaci požadovaného (Html.BeginForm("CustomerForm", "Home", FormMethod.Post, = "form-horizontal" 54

64 @Html.AntiForgeryToken() <div => x.name, = "col-sm-2 control-label" ) <div => x.name, = "form-control" => x.name) </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div => => x.active) </div> </div> </div> <div => x.customertypeid, = "col-sm-2 control-label" ) <div Model.AvailableCustomerTypes, "form-control" => x.customertypeid) </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <input type="submit" value="uložit" class="btn btn-primary" /> </div> </div> Poslední částí architektonického vzoru je Controller. V něm jsou implementovány dvě Action method CustomerForm. První z nich je volána pomocí HTTP metody GET s volitelným parametrem id. V metodě je vytvořena instance modelu, který je naplněn daty. Nakonec se provede vyhledání View s názvem odpovídajícím názvu metody, kterému se předají data v modelu. [HttpGet] public ActionResult CustomerForm(int? id) var model = new CustomerModel(); var cust = BPFacade.GetADOService().LoadCustomer(custId); model.name = cust.name; model.active = cust.active; model.customertypeid = (int)cust.customertype; model.availablecustomertypes = MapCustomerTypesToSelectListItems(CustomerTypeList.GetCustomerTypesLocalized( ), model.customertypeid); return View(model); 55

65 Druhá Action method je volána HTTP metodou POST, data anotace ValidateAntiForgeryToken zároveň zajistí kontrolu požadavku. ASP.NET vytvoří instanci modelu, kterou automaticky naplní daty z View a je dostupná jako parametr metody. Vlastností ModelState.IsValid lze zkontrolovat správnost zadaných údajů. V případě chyb v modelu se znovu vrátí View se zadanými údaji, jinak se provede aktualizace dat v databázi a provede se přesměrování na Action method s názvem CustomerList. [HttpPost] [ValidateAntiForgeryToken] public ActionResult CustomerForm(CustomerModel model) if (ModelState.IsValid) var cust = BPFacade.GetADOService().LoadCustomer(model.Id); cust.name = model.name; cust.active = model.active; cust.customertype = (CustomerType)model.CustomerTypeId; BPFacade.GetADOService().Save(cust); return RedirectToAction("CustomerList"); model.availablecustomertypes = MapCustomerTypesToSelectListItems(CustomerTypeList.GetCustomerTypesLocalized( ), model.customertypeid); return View(model); 56

66 9 Porovnání použitých technologií 9.1 Nástroje pro přístup k datům Všechny vybrané technologie pro přístup k datům, knihovna ADO.NET i nástroje objektově-relačního mapování Entity Framework a NHibernate, umožňují bez problémů implementovat požadovanou funkcionalitu. V ukázkové aplikaci byly implementovány běžné operace nad databází načtení, vytvoření, aktualizace a smazání záznamu společně s načtením seznamu záznamů s filtrováním. Zároveň byla vytvořena a namapována vazba 1:N mezi dvěma tabulkami. Implementace pomocí knihovny ADO.NET je nejsložitější a náchylná na chyby. Množství kódu s každou přidanou entitou rychle stoupá a případné úpravy jsou složité. Největší výhodou knihovny je její rychlost a přítomnost v.net Frameworku. Je vhodná zejména pro náročné operace, kdy je nutné zpracovávat data v reálném čase a vytváření objektů by zabralo zbytečně mnoho času. Nicméně v podobných úlohách záleží na dalších okolnostech. Dále lze použít pro drobné aplikace s velmi malým počtem databázových operací. Rozsáhlé ORM nástroje obecně přinášejí při běžných úkolech zpomalení oproti přímému přístupu k datům. Nabízí však zásadní úsporu při vývoji a následné správě aplikací. Kód aplikace je zároveň přehlednější. Při výběru nástroje je nutné věnovat čas pro nastudování dané problematiky a pochopení jeho principu. Poté je jeho použití rychlé a příjemné. Entity Framework i NHibernate nabízí pokročilé možnosti při práci s daty, ať už se jedná o Lazy loading, caching dat, správu transakcí nebo podporu různých databázových systémů. Výhodou Entity Frameworku je přímá podpora Microsoftu, zejména velmi podrobná dokumentace a implementace v ukázkových ASP.NET aplikacích. Oba ORM nástroje jsou však vyrovnanými konkurenty. Výběr tak záleží především na vývojáři a jeho zvyklostech. 9.2 Prezentační vrstva V prezentační vrstvě byly použity technologie ASP.NET WebForms a MVC, které byly popsány a porovnány v teoretické části práce. Jedná se o dospělé technologie, obě nabízí možnosti pro snadné vytvoření formulářů, ovládacích prvků aplikace 57

67 i velké možnosti přizpůsobení. Obě technologie generují validní HTML kód a lze pomocí nich implementovat moderní uživatelské rozhraní. Umožňují využít nejnovějších technologií v HTML5, CSS3 i JavaScriptu. Obě však z pohledu tvorby uživatelského rozhraní obsahují některé kompromisy. WebForms nabízí možnosti pro velmi jednoduchou tvorbu dynamického uživatelského prostředí. Vývojářům umožňují obsloužit různé události a podle nich asynchronně překreslit část nebo celou stránku bez nutnosti tuto stránku přenačítat. Na druhou stranu nabízí jen omezenou kontrolu nad generovaným kódem. MVC nenabízí žádné možnosti pro vytvoření dynamického uživatelského prostředí. Vývojář pro tento účel musí využít komponenty třetích stran. Může využít samotný JavaScript, knihovnu jquery nebo některý z JavaScriptových frameworků. Oproti tomu kód vygenerovaný pomocí syntaxe Razor je mnohem přehlednější a umožňuje mnohem snazší vyhledávání chyb. K oběma technologiím je přímo od společnosti Microsoft vytvořená podrobná dokumentace. Mimo oficiální dokumentaci existuje nepřeberné množství literatury i odborných článků. Zároveň za WebForms i MVC stojí rozsáhlá komunita vývojářů. K dispozici je velké množství komponent třetích stran, které mohou zásadním způsobem ulehčit vývoj aplikace. Dalším pozitivním aspektem obou technologií je vývojové prostředí Visual Studio, nabízející množství pokročilých funkcí při tvorbě aplikací. Zásadním bodem v neprospěch WebForms je budoucí vývoj. Do technologie již nebudou vyvíjeny nové funkce a nebude podporována ani novým ASP.NET Core. Microsoft neoznámil ukončení podpory a vzhledem k množství projektů, které tuto technologii stále využívají, bude podpora trvat ještě mnoho let. I přesto je vývoj na této technologii neperspektivní a doporučovanou cestou je ASP.NET MVC. 58

68 10 Závěr Cílem této práce bylo prozkoumat a popsat technologie pro vývoj webových aplikací na platformě Microsoft.NET. V první části byl představen.net Framework, platforma ASP.NET a dvě rozdílné architektury webových aplikací využívající tuto technologii, WebForms a MVC. V navazující části byly popsány nástroje objektově-relačního mapování Entity Framework a NHibernate společně s knihovnou ADO.NET pro přímý přístup k datům. Další částí bylo představení návrhového vzoru Inversion of Control, techniky Dependency Injection a Inversion of Control kontejneru Autofac. V následující kapitole bylo zmíněno několik vybraných nástrojů a knihoven, které umožňují vytvořit dynamické a použitelné uživatelské rozhraní. Zároveň zde byla popsána knihovna SignalR umožňující jednoduché vytvoření komunikace webových aplikací v reálném čase. Další kapitola se zabývala CSS frameworky, zejména aktuálně nejpoužívanějším frameworkem Twitter Bootstrap a jeho provázáním s aplikacemi na platformě ASP.NET. Zároveň zde byl ukázán zajímavý nástroj DotVVM určený pro snadnou tvorbu dynamického uživatelského rozhraní a dále komponenty třetích stran určených pro zkoumanou platformu. Teoretická část práce byla uzavřena představením vývojových nástrojů, které lze použít pro vývoj nejen webových aplikací na.net Frameworku. V rámci práce byla vytvořena ukázková aplikace s použitím vybraných představených technologií. Aplikace je rozdělená na část pro přístup k datům a prezentační část. Z pohledu návrhu softwaru odpovídají aplikační a prezentační vrstvě třívrstvé architektury. V aplikační vrstvě byly použity tři technologie pro přístup k datům. První implementovanou technologií byl přímý přístup k datům pomocí knihovny ADO.NET a dále nástroje objektově-relačního mapování Entity Framework a NHibernate. V prezentační vrstvě pak bylo implementováno uživatelské rozhraní pomocí technologie WebForms a ASP.NET MVC s použitím CSS frameworku Twitter Bootstrap. Aplikace byla navržena jako znovupoužitelná, každá technologie obsahuje vlastní projekt, který lze jednoduše použít ve vlastní aplikaci. Použité technologie byly v praktické části práce popsány a následně zhodnoceny. 59

69 Webové technologie se velmi rychle vyvíjí, během zpracovávání bakalářské práce bylo zveřejněno mnoho nových verzí popisovaných nástrojů a technologií. Mimo jiné byla zveřejněna první produkční verze nového frameworku.net Core a ASP.NET Core, který je zmíněn v této práci. Microsoft nový.net Core velmi intenzivně vyvíjí. Vzhledem k nové, otevřené filosofii určuje směr vývoje nejen Microsoft, ale i široká komunita vývojářů. Je tedy velmi pravděpodobné, že se po jeho ustálení stane velmi oblíbenou technologií i pro vývojáře, kteří dosud s.net Frameworkem díky jeho uzavřenosti a závislosti na systému Windows nepracovali. 60

70 11 Seznam použité literatury [1] ASP.NET Introduction. Santosh ASP.NET Tutorial [online] [cit ]. Dostupné z: [2] TROELSEN, Andrew W. Pro C# 5.0 and the.net 4.5 framework. Sixth edition. New York: Apress Media, ISBN [3].NET Framework Versions and Dependencies. Learn to Develop with Microsoft Developer Network MSDN [online] [cit ]. Dostupné z: [4] PENBERTHY, William. Beginning ASP.NET for Visual Studio Indianapolis: John Wiley, ISBN [5] Introduction to ASP.NET Core. Microsoft Docs. [online] [cit ]. Dostupné z: [6] ASP.NET 5 is dead - Introducing ASP.NET Core 1.0 and.net Core Scott Hanselman. Scott Hanselman - Coder, Blogger, Teacher, Speaker, Author [online] [cit ]. Dostupné z: 10AndNETCore10.aspx [7] Introduction to ASP.NET and Web Forms. Learn to Develop with Microsoft Developer Network MSDN [online] [cit ]. Dostupné z: [8] ASP.NET Page Life Cycle Overview. Learn to Develop with Microsoft Developer Network MSDN [online] [cit ]. Dostupné z: [9] FREEMAN, Adam. Pro ASP.NET MVC 5. Fifth edition. New York: Apress Media, Expert's voice in ASP.NET. ISBN [10] FREEMAN, Adam. Pro ASP.NET MVC 5 platform. New York: Apress Media, Expert's voice in Web development. ISBN [11] BLOCK, Glenn, Pablo CIBRARO, Pedro FE LIX, Howard DIERKING a Darrel MILLER. Designing evolvable web APIs with ASP.NET. Sebastopol: O Reilly Media, ISBN

71 [12] Build a web API with ASP.NET Core MVC and Visual Studio. Microsoft Docs. [online] [cit ]. Dostupné z: [13] JSON and XML Serialization in ASP.NET Web API. Microsoft Docs. [online] [cit ]. Dostupné z: [14] Dependency Injection in ASP.NET Core. Microsoft Docs. [online] [cit ]. Dostupné z: [15] Autofac: Home. Autofac: Home [online] [cit ]. Dostupné z: [16] ADO.NET Overview. Learn to Develop with Microsoft Developer Network MSDN [online] [cit ]. Dostupné z: [17] DRISCOLL, Brian. Entity Framework 6 recipes. Second edition. xxxiv, 511 pages. ISBN [18] Compare EF Core & EF6.x. Microsoft Docs. [online] [cit ]. Dostupné z: [19] PERKINS, B. Working with NHibernate 3.0. Indianapolis: Wiley Publishing, ISBN [20] SignalR The ASP.NET Site. ASP.NET The ASP.NET Site [online] [cit ]. Dostupné z: [21] AGUILAR, Jose M. ASP.NET SignalR Incredibly simple real-time features for your web apps. Vigo: Krasis Consulting, S. L., ISBN [22] Tutorial: Getting Started with SignalR 2. Microsoft Docs. [online] [cit ]. Dostupné z: [23] MEIERT, Jens Oliver. The Little Book of HTML/CSS Frameworks. Sebastopol: O Reilly Media, ISBN

72 [24] WESTHUIZEN, Pieter. Bootstrap for ASP.NET MVC. Birmingham: Packt Publishing, ISBN [25] TwitterBootstrapMVC. TwitterBootstrapMVC [online] [cit ]. Dostupné z: [26] AdminLTE 2 Dashboard. Free Bootstrap Admin Template [online] [cit ]. Dostupné z: [27] 10 Best CSS Frameworks for 2017 Best Reviews Best Reviews 2017 Best Products to Buy in 2017 [online] [cit ]. Dostupné z: [28] TypeScript - JavaScript that scales. TypeScript - JavaScript that scales. [online] [cit ]. Dostupné z: [29] DotVVM - Docs - Introduction. DotVVM: MVVM Framework for Modern ASP.NET Applications. Javascript Apps with No Javascript. [online] [cit ]. Dostupné z: [30] Bundling and Minification. Microsoft Docs [online] [cit ]. Dostupné z: [31] List of 3rd Party.NET UI & Reporting Components - CodeProject. CodeProject - For those who code [online] [cit ]. Dostupné z: [32] Employees - DevAV Demo. ASP.NET Controls by DevExpress [online] [cit ]. Dostupné z: [33] 800+ Free controls and frameworks for.net..net Components & Controls Enterprise Development Solutions by Syncfusion [online] [cit ]. Dostupné z: [34] Grid ASP.NET MVC Syncfusion. Syncfusion Essential Studio Resources and Documentation [online] [cit ]. Dostupné z: 63

73 [35] Visual Studio IDE. Visual Studio Developer Tools and Services Microsoft IDE [online] Microsoft [cit ]. Dostupné z: [36] Visual Studio Code - Code Editing. Redefined. Visual Studio Code - Code Editing. Redefined [online] [cit ]. Dostupné z: [37] NuGet Gallery Home. NuGet Gallery Home [online] NET Foundation [cit ]. Dostupné z: [38] Extensions for the Visual Studio family of products. Visual Studio Marketplace [online] [cit ]. Dostupné z: [39] ReSharper. JetBrains: Development Tools for Professionals and Teams [online] [cit ]. Dostupné z: [40] Web Essentials. Web Essentials for Visual Studio [online] [cit ]. Dostupné z: 64

74 Oskenované zadání práce

75