Blazor ili Angular za poslovne aplikacije: što odgovara firmi koja radi u .NET-u?

U firmama s .NET backendom Angular je dugo bio podrazumijevani izbor za frontend. Strukturiran je, tipiziran i napravljen za velike aplikacije, a upravo to treba poslovnom softveru. Onda netko pita: zašto ne Blazor, kad cijeli tim ionako piše C#?

Kratki odgovor: Angular i Blazor sličniji su nego što izgledaju. Oba su izgrađena oko komponenti, dependency injectiona, formi i strogih tipova. Prava razlika nije u arhitekturi, nego u tome koliko jezika i tehnologija vaša firma održava i tko radi ekrane.

Isti ekran u oba

Popis otvorenih narudžbi s gumbom za osvježavanje. U Angularu je ekran komponenta u TypeScriptu koja podatke dohvaća s backenda preko API-ja:

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

Iza toga .NET backend treba endpoint, zaštićen i održavan kao svaki drugi API. U Blazoru sa server renderiranjem isti je ekran jedna C# komponenta koja izravno poziva postojeći servis:

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

Pogledajte strukturu: komponenta, injektirani servis, popis, događaj. Developer koji zna Angular pročita Blazor verziju bez pomoći. U Blazoru nedostaje samo API sloj između ekrana i servisa, i druga kopija klase Order u TypeScriptu.

Usporedba po onome što je važno poslovanju

	Blazor	Angular
Jezik	C#, isti kao backend	TypeScript, uz C# na backendu
Tko radi ekrane	.NET developeri koji rade i backend	Frontend developer ili full-stack developeri koji rade u dva jezika
Zajednički kod s backendom	Modeli, validacija i pravila su iste klase	Tipovi i validacija pišu se dvaput i usklađuju
Struktura	Komponente, dependency injection, forme, routing	Komponente, dependency injection, forme, routing
Nadogradnje	Jedna verzija .NET-a godišnje, svaka LTS verzija podržana tri godine	Jedna velika verzija Angulara godišnje od v22, svaka podržana 24 mjeseca, plus npm paketi oko nje
Zapošljavanje	Iz bazena .NET developera	Iz većeg bazena frontend developera, mnogi s Angularom iz korporativnih projekata
Gotove komponente	Dovoljno za poslovne aplikacije: tablice, forme, grafovi	Velik ekosustav, od Angular Materiala do komercijalnih paketa
Tehnologije za održavanje	Jedna	Dvije: Node, npm i Angular, plus .NET

Redak o nadogradnjama ljudi najčešće podcijene. Angular sad izdaje veliku verziju svake godine, a svaka je podržana 24 mjeseca, pa se Angular aplikacija mora nadograditi barem svake dvije godine. To je izvedivo, ali je drugi ciklus nadogradnji uz onaj za .NET, sa svojim promjenama koje lome kod i svojim paketima. U Blazoru se frontend nadograđuje zajedno s backendom.

Kada je Angular bolji izbor

• Imate frontend tim koji radi u Angularu i radi to dobro. Prekvalificirati ga na Blazor košta više nego što donosi.
• Velika Angular aplikacija već postoji i radi. Prepisivati je samo radi promjene frameworka rijetko se isplati.
• Proizvod je javan, ovisi o prometu s Googlea i mora se otvoriti u sekundi na mobitelu.
• Jako bogata interakcija u pregledniku, s puno stanja na klijentu i radom bez interneta, gdje JavaScript ekosustav ima više gotovih rješenja.

Angular na frontendu s .NET-om na backendu ispravna je arhitektura koju koriste mnoge firme. .NET backend je isti u oba slučaja.

Kada je Blazor bolji izbor

• Tim piše C#. Isti ljudi rade backend i ekrane, bez API sloja samo za frontend.
• Aplikacija je interna ili iza prijave: forme, tablice, izvještaji, procesi.
• Poslovna logika već živi u .NET-u, a validaciju želite napisati jednom.
• Nemate frontend stručnjake i ne planirate ih zapošljavati.

Koji Blazor render mode odgovara kojoj vrsti ekrana, pišemo u članku Blazor Server ili WebAssembly.

Još ste na AngularJS-u?

AngularJS, originalna verzija 1.x, ostao je bez podrške u siječnju 2022. Aplikacije na njemu i dalje rade, ali više ne dobivaju sigurnosne zakrpe, a svake je godine teže naći ljude koji na njima žele raditi.

Prelazak s AngularJS-a na moderni Angular u praksi znači prepisati svaki ekran. Ako ionako prepisujete, a tim iza aplikacije piše C#, to je trenutak kad Blazor zaslužuje ozbiljan pogled. Kao i kod migracije s Web Formsa na Blazor, siguran put je ekran po ekran, uz staru i novu aplikaciju koje rade jedna uz drugu.

Pet pitanja prije odluke

1. Tko će za dvije godine raditi i održavati ekrane: C# developeri ili frontend developeri?
2. Koliko vaše poslovne logike već živi u .NET-u?
3. Je li aplikacija interna ili iza prijave, ili je javna?
4. Imate li već Angular aplikaciju koja radi, ili krećete od nule ili prepisujete?
5. Koliko tehnologija vaš tim realno može držati ažurnima?

Ako odgovori upućuju na C# tim, prijavu i logiku u .NET-u, izaberite Blazor. Ako upućuju na postojeći Angular tim ili aplikaciju, ostanite na Angularu s .NET backendom. Kako se Blazor uspoređuje s drugom velikom opcijom, pišemo u članku Blazor ili React, a je li Blazor sigurna oklada za iduće godine u članku Je li Blazor još relevantan?

Kako mi radimo

ProCoding je .NET studio iz Splita. Blazor isporučujemo u produkciju od 2020., a radimo i .NET backendove za Angular i React frontendove, pa nemamo razloga gurati jedno ili drugo. Pomažemo vam odabrati, gradimo nove Blazor aplikacije i starije aplikacije prebacujemo ekran po ekran. Prvi korak je besplatan razgovor od 30 minuta.

Izvori

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