Angular ontwikkeling met Visual Studio Code

Angular is een framework om single page applications op te zetten waarin testbaarheid en separation of concern als basis voor de ontwikkeling zijn genomen. Met de komst van Angular 2 (en de daaropvolgende major releases) heeft het Angular team een volwassen en goed performant platform neergezet, en ik moet zeggen dat de gekozen eenvoud zich inmiddels in onze front-end projecten keer op keer bewijst.

Een nieuwe angular app maken
Om een angular app te ontwikkelen kan gekozen worden voor Visual Studio (2017) of voor Angular CLI in combinatie met Visual Studio code. Onze ervaring is dat deze laatste combinatie veel prettiger werkt en dat er ook meer ondersteuning te vinden is vanuit de community. In deze blog heb ik de angular app opgezet op een virtual machine met Ubuntu (met een paar schermen vanuit een eerder project in Visual Studio).

Zorg dat je, voordat je angular cli probeert te installeren, de laatste versie van nodejs en npm beschikbaar hebt en installeer visual studio code.
Installeer vervolgens angular CLI:

Nu kun je de nieuwe angular app gaan opzetten op basis van het template van het angular team, waarbij in dit voorbeeld “DemoAngular” de naam is van de nieuw te genereren Angular2 applicatie:

De angular cli heeft na het uitvoeren van bovenstaand commando een subfolder met de naam “DemoAngular” aangemaakt, met daarin de nieuwe applicatie. Deze folder kunnen we nu openen in Visual Studio Code:

De structuur in Angular
Een Angular app kent feitelijk drie cruciale onderdelen: de module, het component en de service. De module maakt het mogelijk om de app te verdelen in kleinere onderdelen met ieder hun eigen verantwoordelijkheid. De componenten binnen de module vormen de schakel tussen de UI-elementen (template) en de communicatie met de backend via services. De services als laatste fungeren als I/O naar de backend van het systeem. De eenvoud van deze systematiek is de kracht van Angular en alleen met zwaarwegende reden adviseer ik om extra complexiteit in je angular app te introduceren. In de praktijk zijn er twee typen objecten die ik vaak toevoeg: model objecten om json om te zetten naar strongly typed objecten, en store objecten om data caching en offline storage mogelijk te maken.

De lifecycle van objecten
Om effectief te werken met Angular, is het belangrijk om goed te begrijpen op welke manier Angular de lifecycle van objecten managed. Objecten kunnen als global geïnitialiseerd worden, maar dit mag je alleen toepassen als het object ook bewust een globale scope moet hebben. In alle andere gevallen hangt de lifecycle van een object af van de plek in de boomstructuur van modules en componenten waar het object geïnitialiseerd wordt. Dit is vooral belangrijk wanneer je met in memory caching van objecten wilt werken en de instantie van een object dus belangrijk wordt.

De opbouw van modules

In een module vertel je het systeem hoe de onderdelen van je applicatie samen moeten werken. Hier geef je aan welke componenten de module gebruikt, welke afhankelijke modules er nodig zijn en welke services (providers) in de module gebruikt worden.

De opbouw van componenten

Componenten in Angular vormen de lijm die je applicatie bij elkaar houdt. Een component legt een referentie naar de html die getoond moet worden: de template(url), de stijl die gebruikt moet worden: style(urls) en de data en taken die vanuit de UI gebruikt kunnen worden. Dit maakt het component een ViewModel++ (zie ook MVVM architectuur)

Het gebruik van services
In de module declareer je welke services (en andere objecten) vanuit de module gebruikt worden als provider. Een service is verantwoordelijk voor input/output naar de backend. Vanuit dit principe is het belangrijk om de service geen extra verantwoordelijkheden (zoals caching) te geven.
Doe dit in aparte objecten zodat de werking van de service eenduidig blijft.

Het gebruik van model classes
Ofschoon het niet verplicht is, is het wel aan te raden om data die vanuit de backend als json objecten binnenkomt, direct om te zetten naar strongly typed objecten. Voorkom een wildgroei van model objecten door niet voor iedere behoefte van de UI nieuwe modellen te definiëren, maar heldere contracten te hebben die te herbruiken zijn op zoveel mogelijk plekken. Dit kan als class of als interface waarbij die laatste de voorkeur heeft.

Het gebruik van stores
Wanneer je data lokaal wilt cachen, maak ik zelf vaak gebruik van store objecten, dit zijn in Angular terminologie feitelijk ook providers alleen dan geen service die met de backend communiceert, maar een object dat data in het geheugen /of in de localstorage vasthoudt. Overigens is mijn advies om caching alleen toe te passen waar het echt meerwaarde biedt voor de performance. Wanneer je een app wilt maken die echte offline storage mogelijkheden biedt is het beter om eens naar Redux/Flux architectuur te kijken.

Test driven development
Angular wordt standaard geleverd met een architectuur die werkt met dependency injection en dat maakt het relatief eenvoudig om je applicatie test driven op te zetten. Standaard wordt hiervoor de karma testrunner en Chrome gebruikt (maar hiervan kun je afwijken).

Testen schrijven
De testen in Angular gebruiken het jasmine test framework. Op de angular site vind je een vrij uitgebreide tutorial om je op weg te helpen om je testen te maken. Standaard heeft ieder component zijn bijbehorende testklasse. Deze testklasse maakt gebruik van een TestBed waarin je app in feite geïsoleerd wordt opgestart (alsof een eindgebruiker de app zou gebruiken). In dat TestBed kun je vervolgens in plaats van de echte services, dummy services introduceren om te valideren dat je component functioneert zoals bedoeld.

Testen uitvoeren

Om de test suite uit te voeren kun je gebruik maken van “ng test”, in dat geval blijft de testrunner draaien en krijg je bij iedere wijziging in je code feedback van de testrunner of je testen slagen of falen. Als je de testsuite eenmalig wilt draaien, kun je gebruik maken van “ng test –watch=false”. Je kunt de testen starten vanuit de terminal in visual studio code, of vanuit een losse terminal.

De testrunner start automatisch een browsersessie waarin je de testresultaten ziet en waarin je de applicatie kunt debuggen.

Je angular app builden en debuggen
Vanuit Visual studio code heb je run en debug commando’s tot je beschikking, maar ook vanuit de cli kun je de applicatie starten door gebruik te maken van “ng serve”.

Met visual studio code kun je vervolgens de code debuggen (met breakpoints) zoals je al gewend was. Daarnaast kun je je code inchecken in Git/TFS en zijn er packaging en deployment tools om je angular app naar bijvoorbeeld Azure te publiceren.