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

Vitajte v krátkom kurze, v ktorom sa zoznámime s technológiou Single Page Application čiže SPA. Jedná sa o pomerne nový počin v oblasti webového vývoja na platforme .NET, ktorý nadväzuje na technológii ASP.NET MVC. Vo frameworku ju nájdeme od verzie 4 beta.

Single Page Application

Klasické webové aplikácie sú síce zatiaľ najlepšou voľbou pre mnoho projektov, avšak prinášajú so sebou určité nevýhody a to hlavne v oblasti použiteľnosti. Jedná sa najmä o nutnosť pripojenia k internetu, zhoršenie užívateľského pôžitku z aplikácie z dôvodu přenačítání stránok, čo má za následok aj vyššiu záťaž pre server.

SPA si kladie za cieľ tieto problémy vyriešiť a je technológia pre tvorbu aplikácií novej generácie.

Klient

Single Page Application minimalizuje server a kladie dôraz na klientskú časť. Je to vlastne aplikácie napísaná v JavaScripte, ktorá so serverom komunikuje pomocou Web API.

Celú aplikáciu predstavuje jediná stránka (od toho názov technológie), ktorá sa stiahne zo servera a v tej chvíli je u klienta prítomná kompletné aplikácie a už nikdy nemusí prejsť na inú stránku. Sú v nej prítomné všetky podstránky, ktoré JavaScript skrýva a zobrazuje ako sa užívateľ po stránke naviguje.

Samotná dáta aplikácie sú ukladané lokálne, aby bola práca s aplikáciou čo najrýchlejší a najpohodlnejší. Užívateľská prívetivosť sa tým blíži aplikáciám desktopovým. Zmeny v dátach aplikácie sa synchronizujú so serverom a to buď v reálnom čase Ajaxu alebo skrátka keď si to klient želá.

V predvolenom projektu Visual Studia je v šablóne pre ASP.NET SPA pripravený javascriptový framework knockout.js, ktorý vďaka bindingům veľmi zjednoduší vkladanie a vypisovanie dát do / z HTML. Okrem knockout.js môžeme použiť napr. Aj AngularJS, backbone.js a ďalšie. Väčšinu času teda u SPA strávite v klientskom JavaScriptu, čo môže byť u ASP.NET nezvyk

Server

Server je predstavovaný technológiou ASP.NET MVC. Kontrolery predstavujú Web API, cez ktoré komunikuje JavaScriptová časť aplikácie. Na server sa teda posiela buď XML alebo JSON a to isté zo servera odchádza. Šablóny sú upravené tak, aby sa do layoutu vygenerovali všetky podstránky a JS je potom skryl a zobrazoval len tú na ktorej sa užívateľ aktuálne nachádza.

Výhody

Hoci sme už nejaké výhody technológie spomenuli, uveďme si ucelený zoznam tých najdôležitejších:

• SPA kombinuje dohromady to najlepšie z desktopu a webu
• Pretože je GUI u klienta, aplikácie môžu byť bohatší
• Aplikácia okamžite reagujú
• Aplikácie sú multiplatformový a zároveň pôsobí natívnym dojmom
• Aplikácie môžu fungovať offline
• Vďaka tlustému klientovi sa šetrí čas servera a traffic
• Aplikácia jednoducho distribuujeme, napr. Nahráme do AppStore pomocou PhoneGap

Nevýhodou je zesložitění aplikácie, do ktorej okrem serverových kontrolerov, modelov a šablón pribudne ešte ďalšie JavaScriptová vrstva, v ktorej v podstate programujeme to isté znova (modely a dáta). A ako tiež vieme, JavaScript nie je úplne najprívetivejšie jazyk Ale to už tak býva, že komfort užívateľa predstavuje vyššie nároky na programátora.

Prvej aplikácie

My si vytvoríme jednoduchú SPA aplikáciu. Bude sa jednať o evidenciu osôb a vyskúšame si na nej základné princípy tejto technológie.

Vytvorte si nový projekt, ASP.NET Web Application, ktorý pomenujte OsobySPA.

Ako šablónu vyberieme Single Page Application a potvrdíme. (Mimochodom, vidíme, že je zaškrtnuté MVC a Web API).

Spustenie projektu

Po chvíli generovanie sa nám vytvorí predvolené projekt. Môžete si ho skúsiť spustiť:

Celá aplikácia je navrhnutá tak, že sa do nej musíme najprv prihlásiť. Zaregistrujte si teda nový účet pomocou odkazu Register. Prvá registrácia chvíľku trvá, pretože je to prvá práca s databázou a EntityFramework ju ešte len zakladá.

Po registrácii sme prihlásení a presmerovaný do aplikácie. Tá veľmi pripomína východzí ASP.NET MVC projekt.

Skúste sa však z úvodnej stránky presunú na stránku s vaším profilom (kliknite na vašu prezývku vpravo). A hľa, nič sa nenačíta, stránka sa okamžite prepne. To je presne princíp Single Page Application.

Pozn .: Záložka API vyvolá presmerovanie, pretože nie je súčasťou aplikácie, ale slúži pre nás, vývojárov, aby sme v nej mohli skúšať Web API, s ktorým cez JavaScript pracujeme.

Štruktúra projektu

Záver dnešného tutoriálu venujme štruktúre projektu. Keďže ASP.NET SPA je zatiaľ to najpokročilejšie, čo v .NET na weby máme, je aj projekt pomerne komplikovaný.

Zamerajme sa na adresárovú štruktúru a popíšme si tie najdôležitejšie zložky.

• App_Data obsahuje najmä databázové súbory .mdf.
• App_Start obsahuje niekoľko konfiguračných tried, ktoré zaisťujú štart aplikácie. Pre nás bude dôležitý najmä BundleConfig.cs, kde definujeme ktoré súbory sú súčasťou ktorých balíčkov. Do balíčkov vkladáme najmä javascriptové súbory a CSS súbory. V RouteConfig.cs môžeme upraviť routovanie, aj keď ho väčšinou neupravujeme a ak áno, ide to jednoduchšie pomocou atribútov v riadiacej jednotke. Startup.Auth.cs obsahuje nastavenia autentifikácie, môžeme tu zapnúť napr. Prihlasovanie cez Facebook alebo Twitter.
• Areas slúži na rozdelenie väčšej aplikácie do niekoľkých "podaplikáciu". Pri väčších projektoch totiž rozdelenie MVC nestačí a potrebujeme kontrolery, modely a pohľady nejako logicky zoskupovať. Všimnite si, že v Areas sa nachádza časť aplikácie s nápovedou, aby neprekážala. Má vlastné zložky na kontrolery, modely, pohľady a nastavenia.
• Content slúži najmä pre CSS súbory, ale už podľa názvu by nebolo chybou ukladať sem nejaké ďalšie súbory, ako napr. Obrázky.
• Zložky ako Controllers, Models a Views určite nie je potrebné vysvetľovať a ak áno, tak si najprv prečítajte Úvod do MVC architektúry v ASP.NET.
• Fonts obsahuje už podľa názvu fonty.
• Providers obsahuje providerov autentizácia, môžeme sem dodať svoje vlastné implementácie.
• Scripts pre nás bude úplne kľúčová zložka. Obsahuje javascriptové súbory. Vnútri zložky sa nachádzajú najmä javascriptové frameworky, všimnite si jQuery a knockout.js. V podpriečinku App sa nachádza naše javascriptové súbory, ktoré tvoria hrubého klienta aplikácie. Tejto zložke sa budeme pracovať nabudúce.

Zo súborov v koreňovom priečinku je najdôležitejšie Web.config, kde nájdeme dôležité nastavenia aplikácie ako je napr. Databázový Connection string. To by bolo ako úvod všetko, v budúcej lekcii, Single Page Application v ASP.NET - Podstránky a Web API , aplikáciu rozšírime o ďalšie podstránky.