Blazor eller Angular för affärsapplikationer: vad passar ett .NET-företag?

I företag med en .NET-backend har Angular länge varit standardvalet för frontend. Det är strukturerat, typat och byggt för stora applikationer, precis vad affärssystem behöver. Sedan frågar någon: varför inte Blazor, om hela teamet ändå skriver C#?

Det korta svaret: Angular och Blazor liknar varandra mer än det ser ut. Båda är byggda kring komponenter, dependency injection, formulär och stark typning. Den verkliga skillnaden ligger inte i arkitekturen, utan i hur många språk och tekniker ditt företag förvaltar, och vem som bygger vyerna.

Samma vy i båda

En lista över öppna order med en knapp för att uppdatera. I Angular är vyn en TypeScript-komponent som hämtar data från backend via ett API:

type Order = { number: string; customer: string; total: number };

@Component({
  selector: 'app-open-orders',
  template: `
    <h2>Open orders: {{ orders().length }}</h2>
    <button (click)="load()">Refresh</button>
  `,
})
export class OpenOrders {
  private http = inject(HttpClient);
  orders = signal<Order[]>([]);

  constructor() {
    this.load();
  }

  load() {
    this.http.get<Order[]>('/api/orders/open').subscribe((result) => this.orders.set(result));
  }
}

Bakom den behöver .NET-backend en endpoint, skyddad och förvaltad som vilket annat API som helst. I Blazor med serverrendering är samma vy en enda C#-komponent som anropar den befintliga tjänsten direkt:

@inject OrderService Orders

<h2>Open orders: @openOrders.Count</h2>

<button @onclick="LoadAsync">Refresh</button>

@code {
    private List<Order> openOrders = [];

    protected override Task OnInitializedAsync() => LoadAsync();

    private async Task LoadAsync() => openOrders = await Orders.GetOpenAsync();
}

Titta på strukturen: en komponent, en injicerad tjänst, en lista, en händelse. Den som kan Angular läser Blazor-versionen utan hjälp. Det som saknas i Blazor är API-lagret mellan vyn och tjänsten, och den andra kopian av Order i TypeScript.

Jämfört efter det som spelar roll för verksamheten

	Blazor	Angular
Språk	C#, samma som backend	TypeScript, bredvid C# i backend
Vem som bygger vyerna	.NET-utvecklarna som också bygger backend	En frontendutvecklare, eller fullstackutvecklare som arbetar i två språk
Delad kod med backend	Modeller, validering och regler är samma klasser	Typer och validering skrivs två gånger och hålls i synk
Struktur	Komponenter, dependency injection, formulär, routing	Komponenter, dependency injection, formulär, routing
Uppgraderingar	En .NET-version per år, varje LTS-version med support i tre år	Sedan v22 en huvudversion av Angular per år, var och en med support i 24 månader, plus npm-paketen runt omkring
Rekrytering	Ur poolen av .NET-utvecklare	Ur en större pool av frontendutvecklare, många med Angular från storföretag
Färdiga komponenter	Tillräckligt för affärsappar: tabeller, formulär, diagram	Ett stort ekosystem, från Angular Material till kommersiella paket
Tekniker att förvalta	En	Två: Node, npm och Angular, plus .NET

Raden om uppgraderingar är den som oftast underskattas. Angular släpper nu en huvudversion varje år, och var och en har support i 24 månader, så en Angular-applikation måste uppgraderas minst vartannat år. Det går att hantera, men det är en andra uppgraderingscykel bredvid den för .NET, med egna brytande ändringar och egna paket. Med Blazor uppgraderas frontend tillsammans med backend.

När Angular är det bättre valet

• Du har ett frontendteam som arbetar i Angular och gör det bra. Att lära om dem till Blazor kostar mer än det ger.
• Det finns redan en stor Angular-applikation som fungerar. Att skriva om den bara för att byta ramverk lönar sig sällan.
• Produkten är publik, lever på trafik från Google och måste öppnas på en sekund i en mobil.
• Mycket rik interaktion i webbläsaren, med mycket tillstånd på klienten och arbete offline, där JavaScript-ekosystemet har fler färdiga svar.

Angular i frontend med .NET i backend är en sund arkitektur som många företag kör. .NET-backend är densamma i båda fallen.

När Blazor är det bättre valet

• Teamet skriver C#. Samma personer bygger backend och vyer, utan ett API-lager bara för frontend.
• Applikationen är intern eller bakom inloggning: formulär, tabeller, rapporter, arbetsflöden.
• Affärslogiken finns redan i .NET, och du vill skriva valideringen en gång.
• Du har inga frontendspecialister och planerar inte att anställa några.

Vilket Blazor-renderingsläge som passar vilken typ av vy går vi igenom i artikeln om Blazor Server eller WebAssembly.

Fortfarande på AngularJS?

AngularJS, den ursprungliga versionen 1.x, förlorade supporten i januari 2022. Applikationer på den fungerar fortfarande, men får inga säkerhetsuppdateringar längre, och för varje år blir det svårare att hitta folk som vill arbeta med dem.

Att gå från AngularJS till modern Angular betyder i praktiken att skriva om varje vy. Om du ändå skriver om och teamet bakom skriver C#, är det läget då Blazor förtjänar en ordentlig titt. Precis som vid Web Forms till Blazor är den säkra vägen vy för vy, med den gamla och den nya applikationen sida vid sida.

Fem frågor innan du bestämmer dig

1. Vem ska bygga och förvalta vyerna om två år: C#-utvecklare eller frontendutvecklare?
2. Hur mycket av affärslogiken finns redan i .NET?
3. Är applikationen intern eller bakom inloggning, eller publik?
4. Har du redan en fungerande Angular-applikation, eller börjar du om eller skriver om?
5. Hur många tekniker kan teamet realistiskt hålla uppdaterade?

Pekar svaren mot ett C#-team, inloggning och logik i .NET, välj Blazor. Pekar de mot ett befintligt Angular-team eller en befintlig applikation, stanna kvar på Angular med en .NET-backend. Hur Blazor står sig mot det andra stora alternativet läser du i Blazor eller React, och om Blazor är ett säkert val de kommande åren i Har Blazor en framtid?

Så arbetar vi

ProCoding är en .NET-studio från Split i Kroatien. Vi har levererat Blazor i produktion sedan 2020 och bygger också .NET-backends för Angular- och React-frontends, så vi har ingen anledning att driva det ena eller det andra. Vi hjälper dig att välja, bygger nya Blazor-applikationer och flyttar äldre applikationer vy för vy. Första steget: Boka ett kostnadsfritt samtal på 30 minuter.

Källor

• Versioning and releases, Angular
• AngularJS end of support, AngularJS
• .NET and .NET Core support policy, Microsoft
• ASP.NET Core Blazor, Microsoft Learn