ng-europe 2018 - Angular for Enterprise Applications

07 February 2018 // Martin Hesslund

Torsdag, fredag förra veckan var ng-europe 2018 i Paris. På torsdagen var jag på en workshop som hölls av Manfred Steyer, Angular for Enterprise Applications. Ett ämne som är intressant för alla som funderar på att börja använda Angular för större applikationer. Här kommer en sammanfattning av workshopen.

Workshopen började med 3 timmar genomgång av fem viktiga områden att tänka på när man utvecklar en Angular applikation.

• Arkitektur
• Cross Cutting Concerns
• Prestanda
• Login och åtkomstkontroll
• Hantera olika språk (i18n)

Arkitektur

Manfred fokuserade på olika sätt som man kan dela upp sin applikation i för att det ska bli enklare att utveckla och underhålla koden, speciellt om man är flera team som jobbar på samma produkt.

Som grund i Angular finns det modules, det är ett sett att grupper olika delar av applikationen. Varje modul ansvara för sin del av applikationen. När applikationen växer och man vill dela upp utvecklingen i flera team eller dela kod mellan applikationer så behöver man något mer.

Det man då kan ta till är npm-packet. Som javascript utvecklare är man van att ladda ner olika bibliotek som npm-paket och det går lika bra att göra det med kod som man vill dela inom ett projekt eller företag. Om man kör open-source så går det enkelt att publicera till npm officiella repo. Vill man inte göra detta går det att sätta upp en egen repository server på företaget.

Att behöva publicera och ladda ner en ny version av npm-packet så fort man gör en lite ändring inom ett projekt är tidskrävande och irriterande, men framför allt är det lätt att få problem med beroenden till olika versioner av tredjeparts bibliotek. Som tur är finns det en lösning på det och det är monorepo.

Fördelar med monorepo är:

• alla har den senaste versionen
• inga versions konflikter
• behöver inte distribuera de egna biblioteken via ett repository
• att skapa ett delat bibliotek är bara att göra en ny mapp.
• används av Google och Facebook.

Men det är inte bara grönaskogar av att använda monorepo. Att alla har den senaste versionen kan även vara en nackdel eftersom det tvingar alla att ändra i sin kod när man uppdaterar ett bibliotek. Alla delar har samma version så ska du släppa en ny version av system A så kommer även system B få en ny version.

Om du ska använda monorepo eller inte är något som man behöver fundera igenom i varje projekt.

Cross Cutting Concerns

Är en del av arkitekturen men togs upp som en egen del eftersom Angular har två typer av tjänster, Router Guards och HttpInterceptor, som var värda att nämna var för sig.

Router Guards är tjänster som berättar för Angulars router om det är okej att gå in eller lämna en specifika route. De används typiskt för åtkomstkontroll och för att varna om användaren har osparad information som kommer blir förlorad om man lämnar sidan.

HttpInterceptor fångar upp anropen mellan servern och Anuglar, vilket gör att man kan använda den till att modifiera anrop och svar till och från servern på en global nivå. Till exempel för att lägga till Authorization headern för OAuth2 eller kolla om man har fått en 401 tillbaka från servern och skicka användaren till login sidan.

Prestanda

Det viktigast att tänka på när man bygger en Angular applikation för produktion är att bygga med –prod flaggan. Då byggs applikationen med AOT, Ahead of Time, kompilatorn. Den gör bland annat Tree Shaking, det vill säga slänger bort de delar av koden som man inte använder från de olika bibliotek man har importerat.

Andra områden man kan kolla in på är Lazy loading och preloading.

Lazy loading
Bara ladda de delar av applikationen som behövs för att start och hämta resten när de behövs. Fördelen är att det går snabbare att starta applikationen, nackdelen är att användaren behöver vänta lite längre när den ska gå in på delar som behöver hämtas från servern.

Preloading
Har fördelen av lazy loading genom att bara ladda det som behövs när sidan startar och sedan hämta resten medans användaren funderar på vad den ska göra. Det gör att alla delar av sidan är redo i teorin när användaren klickar vidare.

Login och åtkomstkontroll

Kort och gott så rekommenderar Manfred alla att använda OAuth2 för sina Angular applikationer.

För Angular finns det ett bra bibliotek som hjälper till med inloggning och utloggning mot en OAuth2/ODIC server, angular-oauth2-oidc.

Hantera olika språk (i18n)

Finns två huvudspår när det gäller att hantera språk i Angular. Antingen med den inbyggda compilern eller med tredjeparts verktyg.

Fördelen med den inbyggda compilern är att sidan inte blir långsammare och det är enkelt att få ut xml-filer som innehåller alla texter som ska översättas. Största nackdelen är att man inte kan byta språk utan att ladda om hela applikationen. Det är för att man behöver bygga en version för varje språk som ska stödjas. Detta är något som de hoppas kunna lösa i framtida versioner av Angular.

Det som Manfred rekommenderade är att man använder ngx-translate. Ger ingen direkt prestanda förlust, men ökar däremot flexibiliteten avsevärt.