Blazor of Angular voor bedrijfsapplicaties: wat past bij een .NET-bedrijf?

In bedrijven met een .NET-backend was Angular lang de standaardkeuze voor de frontend. Het is gestructureerd, getypeerd en gebouwd voor grote applicaties, precies wat bedrijfssoftware nodig heeft. Dan vraagt iemand: waarom geen Blazor, als het hele team toch al C# schrijft?

Het korte antwoord: Angular en Blazor lijken meer op elkaar dan het lijkt. Beide zijn gebouwd rond componenten, dependency injection, formulieren en sterke typering. Het echte verschil zit niet in de architectuur, maar in hoeveel talen en technologieën uw bedrijf onderhoudt, en wie de schermen bouwt.

Hetzelfde scherm in beide

Een lijst met openstaande orders en een knop om te verversen. In Angular is het scherm een TypeScript-component die de gegevens via een API bij de backend ophaalt:

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));
  }
}

Daarachter heeft de .NET-backend een endpoint nodig, beveiligd en onderhouden zoals elke andere API. In Blazor met server-rendering is hetzelfde scherm één C#-component die de bestaande service direct aanroept:

@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();
}

Kijk naar de structuur: een component, een geïnjecteerde service, een lijst, een event. Wie Angular kent, leest de Blazor-versie zonder hulp. In Blazor ontbreekt alleen de API-laag tussen scherm en service, en de tweede kopie van Order in TypeScript.

Vergeleken op wat telt voor het bedrijf

	Blazor	Angular
Taal	C#, dezelfde als de backend	TypeScript, naast C# in de backend
Wie de schermen bouwt	De .NET-developers die ook de backend bouwen	Een frontend-developer, of full-stack developers in twee talen
Gedeelde code met de backend	Modellen, validatie en regels zijn dezelfde klassen	Types en validatie worden twee keer geschreven en gelijk gehouden
Structuur	Componenten, dependency injection, formulieren, routing	Componenten, dependency injection, formulieren, routing
Upgrades	Eén .NET-versie per jaar, elke LTS-versie drie jaar ondersteund	Sinds v22 één Angular-hoofdversie per jaar, elk 24 maanden ondersteund, plus de npm-pakketten eromheen
Werving	Uit de pool van .NET-developers	Uit een grotere pool van frontend-developers, velen met Angular uit grote organisaties
Kant-en-klare componenten	Genoeg voor bedrijfsapps: tabellen, formulieren, grafieken	Een groot ecosysteem, van Angular Material tot commerciële suites
Te onderhouden technologieën	Eén	Twee: Node, npm en Angular, plus .NET

De rij over upgrades wordt het vaakst onderschat. Angular brengt nu elk jaar een hoofdversie uit, en elke versie wordt 24 maanden ondersteund. Een Angular-applicatie moet dus minstens elke twee jaar mee. Dat is te doen, maar het is een tweede upgradecyclus naast die van .NET, met eigen breaking changes en eigen pakketten. Met Blazor gaat de frontend mee met de backend.

Wanneer Angular de betere keuze is

• U hebt een frontend-team dat met Angular werkt, en dat goed doet. Omscholen naar Blazor kost meer dan het oplevert.
• Er bestaat al een grote Angular-applicatie die werkt. Die herschrijven alleen om van framework te wisselen loont zelden.
• Het product is publiek, leeft van Google-verkeer en moet op een telefoon binnen een seconde open zijn.
• Zeer rijke interactie in de browser, met veel status op de client en offline werken, waar het JavaScript-ecosysteem meer kant-en-klare antwoorden heeft.

Angular in de frontend met .NET in de backend is een degelijke architectuur die veel bedrijven draaien. De .NET-backend is in beide gevallen dezelfde.

Wanneer Blazor de betere keuze is

• Het team schrijft C#. Dezelfde mensen bouwen backend en schermen, zonder API-laag alleen voor de frontend.
• De applicatie is intern of achter een login: formulieren, tabellen, rapporten, workflows.
• De bedrijfslogica zit al in .NET, en u wilt de validatie één keer schrijven.
• U hebt geen frontend-specialisten en bent niet van plan ze aan te nemen.

Welke Blazor-rendermodus bij welk soort scherm past, leest u in ons artikel over Blazor Server of WebAssembly.

Nog op AngularJS?

AngularJS, de oorspronkelijke versie 1.x, verloor in januari 2022 de ondersteuning. Applicaties erop draaien nog, maar krijgen geen beveiligingsupdates meer, en elk jaar is het moeilijker om mensen te vinden die eraan willen werken.

Van AngularJS naar modern Angular gaan betekent in de praktijk elk scherm herschrijven. Als u toch herschrijft en het team erachter C# schrijft, is dat het moment waarop Blazor een serieuze blik verdient. Net als bij Web Forms naar Blazor is de veilige route scherm voor scherm, met de oude en de nieuwe applicatie naast elkaar.

Vijf vragen voor u beslist

1. Wie bouwt en onderhoudt de schermen over twee jaar: C#-developers of frontend-developers?
2. Hoeveel van uw bedrijfslogica zit al in .NET?
3. Is de applicatie intern of achter een login, of publiek?
4. Hebt u al een werkende Angular-applicatie, of begint u opnieuw of herschrijft u?
5. Hoeveel technologieën kan uw team realistisch bijhouden?

Wijzen de antwoorden naar een C#-team, een login en logica in .NET, kies dan Blazor. Wijzen ze naar een bestaand Angular-team of een bestaande applicatie, blijf dan bij Angular met een .NET-backend. Hoe Blazor zich verhoudt tot de andere grote optie, leest u in Blazor of React, en of Blazor de komende jaren een veilige keuze is in Heeft Blazor toekomst?

Hoe wij werken

ProCoding is een .NET-studio uit Split, Kroatië. We brengen Blazor sinds 2020 in productie en bouwen ook .NET-backends voor Angular- en React-frontends, dus we hebben geen reden om het een of het ander te pushen. We helpen u kiezen, bouwen nieuwe Blazor-applicaties en zetten oudere applicaties scherm voor scherm over. De eerste stap is een gratis gesprek van 30 minuten.

Bronnen

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