Lekce 1 - Úvod do Single Page Application v ASP.NET

Technologie ASP.NET MVC je již staršího data a byla překonána ASP.NET Core. Doporučujeme přejít na kurz ASP.NET Core.

Vítejte v krátkém kurzu, ve kterém se seznámíme s technologií Single Page Application neboli SPA. Jedná se o poměrně nový počin v oblasti webového vývoje na platformě .NET, který navazuje na technologii ASP.NET MVC. Ve frameworku ji nalezneme od verze 4 beta.

Single Page Application

Klasické webové aplikace jsou sice zatím nejlepší volbou pro mnoho projektů, ovšem přinášejí s sebou určité nevýhody a to hlavně v oblasti použitelnosti. Jedná se zejména o nutnost připojení k internetu, zhoršení uživatelského požitku z aplikace z důvodu přenačítání stránek, což má za následek i vyšší zátěž pro server.

SPA si klade za cíl tyto problémy vyřešit a představuje technologii pro tvorbu aplikací nové generace.

Klient

Single Page Application minimalizuje server a klade důraz na klientskou část. Je to vlastně aplikace napsaná v JavaScriptu, která se serverem komunikuje pomocí Web API.

Celou aplikaci představuje jediná stránka (od toho název technologie), která se stáhne ze serveru a v tu chvíli je u klienta přítomná kompletní aplikace a již nikdy nemusí přejít na jinou stránku. Jsou v ní přítomny všechny podstránky, které JavaScript skrývá a zobrazuje jak se uživatel po stránce naviguje.

Samotná data aplikace jsou ukládána lokálně, aby byla práce s aplikací co nejrychlejší a nejpohodlnější. Uživatelská přívětivost se tím blíží aplikacím desktopovým. Změny v datech aplikace se synchronizují se serverem a to buď v reálném čase AJAXem nebo zkrátka když si to klient přeje.

Ve výchozím projektu Visual Studia je v šabloně pro ASP.NET SPA připraven javascriptový framework knockout.js, který díky bindingům velmi zjednoduší vkládání a vypisování dat do/z HTML. Kromě knockout.js můžeme použít např. i AngularJS, backbone.js a další. Většinu času tedy u SPA strávíte v klientském JavaScriptu, což může být u ASP.NET nezvyk

Server

Server je představován technologií ASP.NET MVC. Kontrolery představují Web API, přes které komunikuje javascriptová část aplikace. Na server se tedy posílá buď XML nebo JSON a to samé ze serveru odchází. Šablony jsou upravené tak, aby se do layoutu vygenerovaly všechny podstránky a JS je poté skryl a zobrazoval jen tu na které se uživatel aktuálně nachází.

Výhody

Ačkoli jsme již nějaké výhody technologie zmínili, uveďme si ucelený seznam těch nejdůležitějších:

• SPA kombinuje dohromady to nejlepší z desktopu a webu
• Protože je GUI u klienta, aplikace mohou být bohatší
• Aplikace okamžitě reagují
• Aplikace jsou multiplatformní a zároveň působí nativním dojmem
• Aplikace mohou fungovat offline
• Díky tlustému klientovi se šetří čas serveru a traffic
• Aplikace jednoduše distribuujeme, např. nahrajeme do Appstorů pomocí PhoneGap

Nevýhodou je zesložitění aplikace, do které kromě serverových kontrolerů, modelů a šablon přibude ještě další javascriptová vrstva, ve které v podstatě programujeme to samé znovu (modely a data). A jak také víme, JavaScript není úplně nejpřívětivější jazyk Ale to už tak bývá, že komfort uživatele představuje vyšší nároky na programátora.

První aplikace

My si vytvoříme jednoduchou SPA aplikaci. Bude se jednat o evidenci osob a vyzkoušíme si na ní základní principy této technologie.

Vytvořte si nový projekt, ASP.NET Web Application, který pojmenujte OsobySPA.

Jako šablonu vybereme Single Page Application a potvrdíme. (Mimochodem, vidíme, že je zatrhnuté MVC a Web API).

Spuštění projektu

Po chvíli generování se nám vytvoří výchozí projekt. Můžete si ho zkusit spustit:

Celá aplikace je navržena tak, že se do ni musíme nejprve přihlásit. Zaregistrujte si tedy nový účet pomocí odkazu Register. První registrace chvilku trvá, protože je to první práce s databází a EntityFramework ji teprve zakládá.

Po registraci jsme přihlášeni a přesměrováni do aplikace. Ta velmi připomíná výchozí ASP.NET MVC projekt.

Zkuste se však z úvodní stránky přesunou na stránku s vaším profilem (klikněte na vaši přezdívku vpravo). A hle, nic se nenačítá, stránka se okamžitě přepne. To je přesně princip Single Page Application.

Pozn.: Záložka API vyvolá přesměrování, protože není součásti aplikace, ale slouží pro nás, vývojáře, abychom v ní mohli zkoušet Web API, se kterým přes JavaScript pracujeme.

Struktura projektu

Závěr dnešního tutoriálu věnujme struktuře projektu. Jelikož ASP.NET SPA je zatím to nejpokročilejší, co v .NETu na weby máme, je i projekt poměrně komplikovaný.

Zaměřme se na adresářovou strukturu a popišme si ty nejdůležitější složky.

• App_Data obsahuje zejména databázové soubory .mdf.
• App_Start obsahuje několik konfiguračních tříd, které zajišťují start aplikace. Pro nás bude důležitý zejména BundleConfig.cs, kde definujeme které soubory jsou součástí kterých balíčků. Do balíčků vkládáme zejména javascriptové soubory a CSS soubory. V RouteConfig.cs můžeme upravit routování, i když ho většinou neupravujeme a pokud ano, jde to jednodušeji pomocí atributů v kontrolerech. Startup.Auth.cs obsahuje nastavení autentifikace, můžeme zde zapnout např. přihlašování přes Facebook nebo Twitter.
• Areas slouží k rozdělení větší aplikace do několika "podaplikací". U větších projektů totiž rozdělení MVC nestačí a potřebujeme kontrolery, modely a pohledy nějak logicky seskupovat. Všimněte si, že v Areas se nachází část aplikace s nápovědou, aby nepřekážela. Má vlastní složky na kontrolery, modely, pohledy a nastavení.
• Content slouží zejména pro CSS soubory, ale již podle názvu by nebylo chybou ukládat sem nějaké další soubory, jako např. obrázky.
• Složky jako Controllers, Models a Views určitě není třeba vysvětlovat a pokud ano, tak si nejprve přečtěte Úvod do MVC architektury v ASP.NET.
• Fonts obsahuje již podle názvu fonty.
• Providers obsahuje providery autentizace, můžeme sem dodat své vlastní implementace.
• Scripts pro nás bude naprosto klíčová složka. Obsahuje javascriptové soubory. Uvnitř složky se nacházejí zejména javascriptové frameworky, všimněte si jQuery a knockout.js. V podsložce App se nachází naše javascriptové soubory, které tvoří tlustého klienta aplikace. Této složce se budeme pracovat příště.

Ze souborů v kořenové složce je nejdůležitější Web.config, kde nalezneme důležitá nastavení aplikace jako je např. databázový Connection string. To by bylo jako úvod vše.

V příští lekci, Single Page Application v ASP.NET - Podstránky a Web API, aplikaci rozšíříme o další podstránky.