1. díl - Úvod do Single Page Application v ASP.NET

C# .NET ASP.NET Single Page Application Úvod do Single Page Application v ASP.NET

Vítejte v krátkém seriálu, 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.

Diagram technologie Single Page Application pro ASP.NET

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.

Projekt se Single Page Application ve Visual Studio

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

Projekt se Single Page Application ve Visual Studio

Spuštění projektu

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

Přihlášení do Single Page Application v ASP.NET MVC

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á.

Registrace do Single Page Application v ASP.NET

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

Single Page Application v ASP.NET

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.

Struktura projektu Single Page Application v ASP.NET
  • 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, příště si aplikaci rozšíříme o další podstránky.


 

  Aktivity (1)

Článek pro vás napsal David Čápka
Avatar
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se ti líbí článek?
Celkem (6 hlasů) :
55555


 



 

 

Komentáře

Avatar
Libor Šimo (libcosenior):

Táto technológia vyzerá veľmi sľubne.
Ďakujem za seriál.

Odpovědět  +1 29. března 14:03
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Libor Šimo (libcosenior):

Keď som dal registráciu, vypísalo:

Server Error in '/' Application.

A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance name is correct and that SQL Server is configured to allow remote connections. (provider: SQL Network Interfaces, error: 50 - Local Database Runtime error occurred. The specified LocalDB instance does not exist.
)

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Data.SqlCli­ent.SqlExcepti­on: A network-related or instance-specific error occurred while establishing a connection to SQL Server. The server was not found or was not accessible. Verify that the instance name is correct and that SQL Server is configured to allow remote connections. (provider: SQL Network Interfaces, error: 50 - Local Database Runtime error occurred. The specified LocalDB instance does not exist.

Znamená to, že musím nainštalovať a spustit xampp? To asi nie. Píše sa tam o local db.

Mám visual studio community 2015.

Editováno 30. března 17:59
Odpovědět 30. března 17:57
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Libor Šimo (libcosenior):

Zabudol som to adresovať autorovi. ;-)
David Čápka

Odpovědět 31. března 10:33
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Odpovídá na Libor Šimo (libcosenior)
Michal Štěpánek:

Mrkni se, jestli máš nainstalovaný SQL a pokud ano, tak jestli se nejmenuje nějak jinak, než máš v ConnectionStringu

Editováno 31. března 12:20
Odpovědět 31. března 12:20
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
Odpovídá na Libor Šimo (libcosenior)
Michal Štěpánek:

Mě to běhá normálně, ve web.config mám toto

<connectionStrings>
    <add name="DefaultConnection" connectionString="Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\aspnet-OsobySPA-20160331122254.mdf;Initial Catalog=aspnet-OsobySPA-20160331122254;Integrated Security=True"
      providerName="System.Data.SqlClient" />
  </connectionStrings>
Odpovědět 31. března 12:28
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
Odpovědět 31. března 14:02
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.