Vítejte u třetího dílu seriálu, který se věnuje vývoji enterprise aplikací na platformě .NET. Zatímco v minulých dílech jsme se věnovali porovnání ASP MVC s jinými frameworky, nyní si již připravíme kompletní prostředí pro vývoj webové aplikace. Jmenovitě půjde o tyto součásti:
Nejedná se pouze o části nutné, ale i tak se jim budeme věnovat, protože vám vývoj zpříjemní a často ušetří hodně práce. ReSharper je označený hvězdičkou z důvodu nutného zakoupení licence. V tomto seriálu ho ale budeme používat, abych vám předvedl co všechno umí a pokud se vám zalíbí, můžete si ho případně zakoupit. Lze samozřejmě také využít 30ti denní trial verze pro potřeby tohoto seriálu.
Visual Studio 2013 with Update 5
Visual Studio 2013 volím oproti 2015 zcela záměrně, jelikož podle mého názoru, je Visual Studio 2015 pro nás zbytečné a navíc se v něm některé věci dělají složitěji. Visual Studio 2015 se přiblížilo Linuxovému světu a tak je mnohem více provázané s NPM, Bower, JS Task Runnery atp.
Visual studio 2013 Community lze zdarma stáhnout na této adrese:
https://www.visualstudio.com/en-us/news/vs2013-community-vs.aspx
Nebudu vás zde provázet celým postupem instalace, co je ale důležité, je při instalaci – u volby součástí co se mají nainstalovat, zatrhnout vše co budeme potřebovat, tedy:
IDE zkusíme spustit a můžeme pokračovat dál tím, že ho opět vypnete, jelikož k instalaci dalších věcí je nutné mít Visual Studio vypnuté. Implicitní barva prostředí je bílá, pokud ale tíhnete k temné straně síly, nebo jen chcete šetřit oči, samozřejmě si lze VS přepnout do Dark módu.
Web Essentials
Pokud to myslíte s vývojem webových aplikací (nebo hybridních mobilních) ve Visual Studiu opravdu vážně, tak Web Essentials je opravdu MUST HAVE rozšíření do VS. Web Essentials toho nabízí opravdu hodně, na pár velmi zajímavých věcí se podíváme. Nejdříve ale instalace. Web Essentials naleznete na adrese níže:
http://vswebessentials.com/
Pro naše Visual Studio samozřejmě budeme potřebovat verzi 2013. Po instalaci je Web Essentials ihned připravený k použití. Co tedy umí? Vloží vám do vaší stránky lištičku:
Inspect / Design Mode
Design / Inspect mode vám dovoluje přímo ve stránce kliknout na libovolný prvek. Je to tedy velmi podobné například funkci Inspect v Chrome. V okamžiku, kdy kliknete na nějaký prvek ve stránce, se vám ve Visual Studio automaticky otevře soubor a prvek se vám označí ve zdrojovém kódu. Pokud navíc vyberete namísto funkce inspect, funkci design – můžete prvek přímo ve stránce jednoduše editovat, tedy jeho textovou část. Tyto změny se vám rovnou propíší i do Visual Studia.
Tyto funkce WebEssentials mají velké výkonostní problémy s Bundles, bude vám dokonce vytuhávat celé Visual Studio. Doporučuji tedy pro vývoj obecně Bundles nepoužívat a zapnout je až v okamžiku Release modu,
To samé platí i pro CSS stylování přes vývojářskou konzoli prohlížeče.
Práce se Stylesheety
WebEssentials vám přidá pro vaše stylesheety Intellisense – a opravdu pěkný! To, že vám nabídne jednotlivé vlastnosti je už taková klasika, kromě toho vám ale i například je schopný poradit s URL, zobrazit náhledy souborů, fontů, zoptimalizovat vaše CSS, upozornit na kompatibilitu v jednotlivých browserech a další.
Práce s JavaScriptem
Folding / Unfolding, regiony a navigování Go to definition / Find All references. Věřte, nebo ne, ale taková primitivní věc, jako je folding / unfolding JavaScriptových funkcí a CallBack Hellu, vám dokáže vyčarovat úsměv na tváři.
Práce s HTML
ZenCoding. Zde se nejedná o žádnou velkou novinku. Možná někteří znáte například ze Sublime Text. Jde o generování složitého XML based kódu (HTML, XAML, XML,..) pomocí velmi jednoduchého zápisu. Dejme tomu, že by jste chtěli vygenerovat klasický Bootstrap grid.
<div class="container">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
Pomocí ZenCode do visual studia zapíšete pouze:
div.container>div.row*5>div.col-md-6+div.col-md-6
A za posledním znakem zmáčknete tabulátor. Zen Coding ve Web Essentials, vám automaticky zbytek vygeneruje.
Zen Coding je velmi jednoduchý: > pro child element, * pro násobení elementů, . pro class a # pro ID.
Lorem Pixel
Často potřebujete při návrhu webu vložit nějaký obrázek, který bude pokud možno v daném rozlišení a ideálně ještě k tématu stránek, aby nepůsobil jako pěst na oko. V takovém případě můžete využít tzv. Lorem Pixel, kdy si opravdu v HTML povíte, co potřebujete, zmáčknete opět tabulátor a Web Essentials zařídí zbytek. Syntaxe je opět velmi jednoduchá:
pix-[sirka]x[vyska](-pripadnetema)
Tedy pokud napíši do Visual Studia například:
A zmáčknu tabulátor:
Vygeneruje se mi link vedoucí přesně na to, co potřebuji. Náhodný obrázek o daném rozlišení a k tématu. Zároveň mi Web Essentials ukáže i náhled (to ale dělá u každého odkazu automaticky při najetí myši)
Regiony
Někdo je miluje, jiný nenávidí. U velkého kódu vám ale regiony mohou velmi pomoci v navigaci v kódu. Obzvláště u jazyku JavaScript. Navíc regiony jdou velmi jednoduše otevřít / zavřít.
PRO VÍCE INFORMACÍ O WEB ESSENTIALS, PŘEJDĚTE NA HOMEPAGE
Visual studio online
Používáte nějaký verzovací systém, např. Subversion či GIT? Potřebujete server pro Continuous integration, případně agilní management vašeho projektu? Potřebujete load testy? Visual Studio Online je tedy nástroj přímo pro vás.
Visual studio online je online verze Team Foundaiton Serveru, který lze také do určité míry provozovat onpremise přímo u vás. Visual studio online lze založit zde:
Visual studio online
Můžete ho využívat zcela zdarma pro menší tým do 5ti lidí (+ neomezeně stake holderů). Za každého dalšího zaplatíte pak menší měsíční poplatek.
Během zakládání budete vyzvání k zadání názvu projektu, vybrání způsobu vedení projektu (scrum, agile, cmmi) a verzovacího systému (Team foundaton version control, git). Ve visual studio online se scrum a agile příliš neliší, přesto vám doporučuji pro začátek navolit agile a team foundation version control.
Co Visual Studio Online / Team foundation server umí
Visual studio online není spojené pouze s Microsoftem a .NET, podporuje obrovské množství jazyků a lze integrovat pluginy do nejrůznějších editorů jako je Visual Studio, Eclipse, Atom, Visual Studio Code.
Nástroje pro agilní vývoj
Visual studio online již v základu obsahuje velmi užitečné nástroje pro agilní vývoj, jako je správa úkolů, agile table (kanbanové tabule), plánování sprintů, alokace zdrojů, backlog, vytváření prognóz a sledování práce jednotlivých členů týmu. Můžete vytvářet vlastní grafy a další věci.
Přitom když už mluvíme o správě úkolů, tak tím je myšlenko opravdu na nejvyšší úrovni, takže na nějaký pofidérní Redmin a podobné, rovnou zapomeňte.
Pro více informací o agilních nástrojích:
Visual Studio Online - agile tools
Version control
Kromě toho, že zde najdete vše na co jste zvyklí z jiných verzovacích systémů, zde najdete navíc například komentování kódu, diskuzi s následujícím schvalovacím procesem requestu, podmíněné větvení a další funkce. Samozřejmostí je neomezené úložiště pro vaše repozitáře zdarma.
Visual Studio Online - verison control
Continous integration server – sestavit, ověřit testy, nasadit
Continous integration už je dnes standardní součástí vývojového cyklu softwaru. Visual studio online je tedy opět připraveno usnadnit vám proces deploye vašeho softwaru do koncového prostředí. Nebudu zde nijak seznamovat s tím, co je continuous integration, ve zkratce pro neznalé:
Představte si, že například každou půlnoc, případně po každém commitu, Visual Studio server automaticky zbuildí váš projekt, spustí nad ním všechny testy a pokud vše v pořádku dopadlo, nasadí tuto verzi na testovací prostředí. Pokud ne, upozorní na to vývojáře, který commitnul nefunkční úpravy. Pokud došlo k nasazení na testovací prostředí, můžete si definovat, kdo stanoví, že je build skutečně v pořádku. Tato osoba pak ve webovém prohlížeči může dát pokyn, aby server nasadil tuto verzi na testovací servery zákazníka. Poté zákazník opět může potvrdit, že je verze v pořádku a server ji automaticky nasadí na ostré servery.
Toto je pouze jeden z příkladů. Vše lze nastavit a upravit podle vašeho nejlepšího svědomí a vědomí.
Samozřejmostí je také nasazování aplikací do cloudu.
Zátěžové testy
Poslouží vám dobře v situaci, kdy potřebujete otestovat, jak obstojí vaše aplikace vysokému vytížení. Opět lze vše nastavit, tak jak potřebujete a odměnou pro vás bude podrobná statistika. Testy lze spouštět z různých data-center po celém světě.
Visual Studio Online - load testing
Integrace do IDE
Všechny důležité funkce pro vývojáře jsou již implicitně integrované ve Visual Studio 2013 Community, do jiných IDE je lze doinstalovat.
GhostDoc
Ghostdoc je skvělý nástroj pro automatické generování dokumentace. Tím nemám na mysli to, že napíšete /// a po zmáčknutí tabulátoru vám vygeneruje “masku” do které si musíte ručně doplnit popis metody, co znamenají jednotlivé parametry metody atp. Mám tím na mysli to, že pokud pojmenováváte alespoň trošku rozumně vaše metody, parametry a návratové hodnoty, tak vám automaticky vygeneruje opravdu pochopitelnou dokumentaci, která bude skutečně založená na pravdě.
Jak to potom tedy vypadá? Mějme jednoduchou metodu:
S kurzorem uvnitř zmáčkneme Ctrl+Shift+D
A máme zdokumentovanou metodu, takto lze samozřejmě zdokumentovat hromadně celé soubory, nebo třeba celý solution. Toto je však podmíněno zakoupením komerční verze. která vás vyjde na 25 dolarů. Za tuto cenu pro vás GhostDoc bude umět vygenerovat i kompletní Help file dokumentaci, jejíž generování lze navíc i pěkně ovlivňovat.
IntelliSense na toto samozřejmě ihned reaguje:
GhostDoc můžete stáhnout na této adrese:
GhostDoc free download
StyleCop
Stylecop je jedna z věcí, která může vývoji v týmu velmi pomoci, ale všichni ji budou nenávidět. StyleCop hlídá naprosto všechny doporučené pravidla pro psaní C# kódu a naprosto nic vám neodpustí.
Pokud tedy spustíte kontrolu StyleCopem na váš zdrojový kód, který vypadá takto:
StyleCop si o tom bude myslet svoje:
A jak tedy vypadá takový kód upravený podle StyleCopu? Není to zase tak hrozné:
Jedno je ale jisté.. Zatímco jako autoři určité části kódu nebudete mít StyleCop rádi, váš kolega při čtení vašeho kódu ho velmi ocení.
Best practice ohledně C# kódu a samotný StyleCop lze získat z CodePlex repozitáře na adrese:
StyleCop Codeplex
TypeScript
Google byl dlouhá léta považován za někoho, kdo vede vývoj webových technologií. Toto už není delší dobu pravda. Mezi přední firmy, které posouvají webový vývoj někam dále patří kupodivu Microsoft a né-kupodivu Facebook. Microsoft se svým TypeScriptem, WinJS a Reactive Extensions (i pro JS). Facebook se svým Reactem a Fluxem.
Jak jste si jistě už všimnuli, nemám rád JavaScript, považuji ho společně s PHP za největší zla, které vznikly v IT světě (předhání je snad jen Flash). Z toho důvodu se pokusíme největším nešvarům JavaScriptu vyhnout a proto budeme používat TypeScript a později AngularJS pro frontend. Angular budeme používat ze začátku v jeho čisté formě, vzápětí si však ukážeme jak ho celý postavit na TypeScriptu a ve finále dokonce i to, jak si velkou část kódu nechat vygenerovat na základě C# kódu pomocí T4 template.
Co nám přinese TypeScript?
Typescript je superset JavaScriptu, lze v něm tedy psát čistý JavaScript. Pouze blázen by ale používal standardní prototypovou dědičnost, když může používat Objektově Orientovaný Přístup – tedy má k dispozici standardní třídy, dědění, interface a implementaci interfaceu. Zároveň má k dispozici silné typování čehokoliv. Toto je výhoda především z toho důvodu, že dynamicky typovaný jazyk je naprosto nadčasový v jednom ohledu. Bylo to zlo, je to zlo a zlo to i vždy bude. Ušetří pár minut času a přinese hodiny a hodiny debugování a studování dokumentace společně s miliardou střelení se do paty.
TypeScript se v rámci VisualStudio 2013 compiluje automaticky při uložení a to buďto do současného ES5 JavaScriptu, nebo do ES6, který zatím je otázkou budoucnosti.
Typescript má pěknou syntaxi a jako .NETář / JavaScripter se jeho syntaxi naučíte za hodinu na této adrese:
TypeScript Handbook
TypeScript nainstalujete do Visual Studia z odkazu výše kliknutím na Download->VS2013.
Po instalaci bude potřeba ještě nastavit některé věci, aby vám TypeScript fungoval tak, jak potřebujete.
Při přidání prvního .ts souboru do solutionu ho Visual Studio detekuje a nabídne vám stáhnutí tzv. typing souborů. Tyto soubory slouží k přidání “typovosti” ke standardním JavaScript knihovnám. Zvolte ano.
Vyskočí vám Nuget manager o kterém si povíme později. Později tedy NuGetu využijeme ke stáhnutí definicí k Angularu, jQuery atp.
Prozatím můžete toto okno zavřít.
Pokud uložíte TypeScript soubor s nějakým TypeScript kódem, vygeneruje se vám automaticky .js soubor. Tento soubor není implicitně vidět, je nutné zobrazit soubory, které nejsou součástí solution:
Pokud vám VisualStudio automaticky negeneruje tyto soubory, budete muset zajít do nastavení (Tools->Options) a některé věci donastavit.
Pokud máte nainstalované Web Essentials, může se vám hodit ještě náhled vygenerovaných souborů:
Pokud máte nainstalované WebEssentials, můžete rovněž přetáhnout soubor .ts ze Solution Manageru do html a vloží se vám automaticky link na .js soubor.
NUGET
Jedná se o balíčkovací systém pro Visual Studio. Jedná se tedy o alternativu pro Bower, NPM a podobné balíčkovací systémy. Pomocí NUGETu můžete do vašeho projektu importnout jakoukoliv dostupnou knihovnu, nezáleží zda jde o knihovnu pro backend, nebo frontend vaší aplikace. Nuget spustíte nejlépe pomocí pravého menu na projektu:
Jednotlivé knihovny lze poté instalovat i pomocí NuGet package console.
Přes consoli lze také dělat i další věci, například povolovat migrace, updatovat balíčky, kontrolovat závislosti a další operace.
ReSharper
O ReSharperu by šel napsat celý článek, nebo spíše celý seriál. Přesto že se jedná o placený produkt a nepatří mezi nejlevnější, silně vám doporučuji použít trial verzi a tak si ho celý vyzkoušet. Mohu dát ruku do ohně za to, že si ho zamilujete.
Nebudu zde tedy popisovat co vše ReSharper umí, ale budu ho často používat, budete si tedy moci udělat představu, k čemu všemu je dobrý. Tímto bych chtěl oznámit, že častou součástí tohoto seriálu budou videozáznamy.
Pro více informací o ReSharperu vás tedy prozatím odkáži na oficiální stránky, kde si můžete stáhnout i trial verzi:
ReSharper homepage
S dovolením autora přikládám záznam skvělé prezentace o ReSharper z letošního MS Festu:
PostSharp
Aspektově orientované programování (AOP). K čemu je to dobré? Dám vám jednoduchý příklad, na kterém si to již budete umět představit. Dejme tomu, že může u některých z vašich metod nastat nějaká výjimka. Například u takovéhoto kódu:
public void StoreName(string path)
{
File.WriteAllText( path, string.Format( “{0} {1}”, this.FirstName, this.LastName ) );
}
Pokud budete chtít tento kód ošetřit, obalíte volání File.WriteAllText() Try…catchem a v catch{} tuto situaci například logovat do konzole. Todle jistě není problém, ale budete psát toto u každé z metod, ve které může dojít k výjimce? Zde přichází na pomoct AOP.
Pomocí PostSharpu si napíšeme jednoduchý attribute:
[Serializable]
public class PrintExceptionAttribute : OnExceptionAspect
{
public override void OnException(MethodExecutionArgs args)
{
Console.WriteLine(args.Exception.Message);
}
}
A jakoukoliv naši metodu, kde budeme chtít odchytávat Exception a logovat ji, odekorujeme naším atributem:
[PrintException]
public void StoreName(string path)
{
File.WriteAllText( path, string.Format( “{0} {1}”, this.FirstName, this.LastName ) );
}
Toto je pouze malá ukázka. Pomocí AOP si můžete ušetřit opravdu extrémní množství kódu, což pocítí především programátoři ve WPF, kde se pomocí PostSharpu ochudí o neustálé ruční psaní (nebo generování balastního přebytečného kódu) volání metody OnPropertyChanged(). K postsharpu se ještě dostaneme. Prozatím si nainstalujeme jeho EXPRESS verzi z odkazu:
PostSharp download
Video shrnutí, založení solutionu, popis