Comparison Between Blazor vs Angular

Javascript has been one of the most popular Programming languages for Single Page applications in recent years. As per Stack Overflow Report 2019, 67 percent of developers widely use javascript as a programming language, Angular, React and Vue being at the top of the list. However, with the advent of Blazor, Microsoft has changed the light of web app development. Developers now have the liberty to opt for developing browser-based applications using C#. Angular is one of the most popular frameworks that is written using Javascript. Let's have a look at how Blazor, a Microsoft-bred framework, works compared to Angular. 

Blazor vs Angular: Introduction

Angular is a JavaScript framework that enables you to create native (mobile) and desktop apps while you run client web applications in the browser. Angular was previously known as AngularJS until 2016. It was developed for frontend developers to interact with both frontend and backend at the same time. Angular helped backend developers with maintaining languages, like C# or Java that were earlier maintained by other developers. Deploy target by reuse your code and abilities for building applications with Angular.

The advent of SPAs made Angular web app development even more strong and gave rise to a new framework like Blazor from Microsoft. Blazor is a new web development framework introduced by Microsoft that allows you to write single-page web applications with. NET. Develop browser-based applications with blazor utilizing C# and Razor syntax with HTML and CSS. 

Users can build interactive and reusable web UI for client-side applications with Blazor, since it is written in .NET and implemented under WebAssembly. Blazor holds the capacity to bring you all the power of Microsoft’s framework, both in the client-side and the server-side. Blazor allows you to share code and libraries that provide a platform for the development of vibrant and contemporary single-page application (SPA) platforms while using .NET end-to-end. 

Now that we have been a bit familiar with the concept of Blazor vs Angular, let's dive deep into the comparison between Blazor vs Angular. 

Comparison Between Blazor vs Angular

Angular also offers several options when it comes to component libraries. In this link, you can find the list of the official Angular supported tooling, including IDEs, UI components, and data libraries, among others.  

Maturity

Angular has been around for quite a while, in contrast to Blazor. It is a production-ready framework that fully supports MVC/MVVM applications and has been one of the most widely used frameworks that is utilized by numerous huge organizations. On the other hand, Blazor web development has been constantly changing and has not yet accomplished enough development to debate with Angular, regardless of being promising. Angular is well ahead of when it comes to tooling. Angular supports VS code or development that blazor just started implementing until recently.  

As to libraries, Angular Material, for instance, is perhaps the most well known, particularly on the grounds that it accepted Google's Material Design, a design language extremely normal in Google products. Aside from that, there are other significant design libraries you can set up easily, like Bootstrap, through the NG Bootstrap library, or PrimeNG, for instance. 

Additionally, Angular offers a few choices with regards to component libraries. Blazor, on the other hand, has been dealing with its very own unique variant Material Design library however, it will push to accomplish such development levels. 

Community

Angular is extremely popular with 63.7k stars and 17.2k forks in its GitHub repository. This counts to be the most important and beloved framework in the frontend community. Blazor is a part of the ASP.NET project and it has been hard to analyze its popularity ever since it was moved to the ASP.NET Core repo. Before the repo was moved, Blazor had 9.2k stars and 700 forks. We're not going to consider the ASP.NET Core details, since they include a ton of different factors other than Blazor itself. 

Another great examination is Stack Overflow. Recently, Angular alone has gathered a sum of 224.3k questions while Blazor just has 2.9k questions. 

When you compare Angular vs Blazor in Google Trends, the gap turns out to be significantly more clear. Angular has been able to grow a more extensive community by existing for way longer than Blazor. There's more substance, courses, books, online journals, and materials about Angular than you'll discover for Blazor. 

PWA Support

Progressive web apps have a huge fan base. Both Google and Angular are big fans of PWAs. 

Its use can be added to your Angular applications by basically running:

ng add @angular/pwa

You can figure that for other Google projects, similar to the popular Workbox, for instance.

For quite a while, Blazor was distinguished as a framework not fit for doing PWA. They've recently reported that they do support PWA, along with numerous similar things with Blazor, that are working in progress. Other than being steady, a few developers complain about the underlying download application size being excessively huge, though small bundle sizes are viewed as crucial for SPAs.

However, the community remains optimistic about the evolving PWA support in Blazor. 

Scoped Styles

Angular, as numerous other web systems and libraries, permits the use of Scoped styles, in which you can apply a CSS style explicitly for a connected segment, for instance:

@Component({
  selector: 'app-root',
  template: `
    <h1>Title H1</h1>
    <app-test-main [title]="title"></app-test-main>
  `,
  styles: ['h1 { font-weight: normal; color: red; text-transform:
 uppercase; }']
})
export class AppComponent {
  ...
}

However, Blazor lacks this interesting functionality, whereas there are people trying out some alternatives.

Build / Coding Time

In comparison between Angular vs Blazor, Blazor is quick as far as build and troubleshooting. it takes advantage of the visual studio and the entire experience accumulates among its devices and modules. hence, the turn of events and troubleshooting can be super quick (depending, obviously, on your degree of involvement and knowledge of them).

Blazor additionally brings the prominent live reloading feature during the improvement that you can set up quickly:

// Add NuGet package:
dotnet add package RazorComponentsPreview
// Add to the StartUp class:
services.AddRazorComponentsRuntimeCompilation();
app.UseRazorComponentsRuntimeCompilation();

This feature relies upon the assemblage and builds time. The performance comparison between Angular vs Blazor of the same functionality depends on the fact that the latter is multiple times quicker incorporating builds running in CI/CD pipelines.

As far as coding is concerned, Angular is known for its standards. With Blazor, you're now in the back-end, which implies that you can compose methods on services that can be straightforwardly called from the upper layers, as opposed to experiencing an entire API structure call as you'd need to do in Angular.

Async Nature

While Angular utilizes the underlying async nature acquired from JavaScript, it also supports the ground-breaking RxJS to deal with the async tasks. C# has advanced itself to support it out of the box in a convenient and clean manner. In some cases, you can even feel that a few executions are fundamentally the same between both techs.

For instance, envision two customer applications made with Angular and Blazor, individually, consume from a similar API endpoint. Indeed, they work the same in Blazor vs Angular.

Due to their async qualities, we would have the accompanying code for the two calls:

// Angular
async getUserData() {
   return await this.httpClient.get<User>("api/users").toPromise();
}

// Blazor
public async Task GetUserData()
{ 
   return await Http.GetFromJsonAsync<User[]>("api/users");
}

Building Your UI with Angular

Angular entails a component approach while UI building. It leans quite heavily on the typescript, which at that point gets accumulated to normal JavaScript to run in the program. There is a blend of standard HTML and Angular sentence structure to deal with DOM occasions and display data. Angular UI consists of one or more components. It is typically written using special Angular directives. Angular UI runs on the browser's JavaScript engine. 

Blazor, on the other hand, embraces a fundamentally same way to deal with Angular in that you construct your UI utilizing components, yet you will utilize Razor and C# (rather than Angular directives and JavaScript) to compose your markup and UI logic.

Read More: Flutter vs React Native: A Developer's Perspective

Creating a New App

Angular has its own CLI for making projects and producing application code.

Install it by utilizing Yarn or npm
npm install -g @angular/cli

The CLI gives you a couple of alternatives now, specifically finding out if you need to incorporate Angular Routing and which template design you need (CSS, SCSS and so forth)

Post that, you can run your app by using this command.

ng serve

For Blazor, you can utilize Visual Studio or the .NET Core CLI (which is incorporated with the .NET Core SDK) 

PowerShell

dotnet new blazorwasm
cd blazorwasm
dotnet run

There are other options as well, similar to the capacity to incorporate a framework for confirming clients, and whether to have your Blazor application in an ASP.NET web application, however, the command above is the least complex choice to get started. 

Passing Data Around

We've just seen one approach to deal with the state in Angular components, by putting it in a field. However, another regular methodology is to pass  values into a component, for instance,

<app-hi world headline="Welcome, it's extraordinary to see you"></application hi world>

Angular can change our component to acknowledge a headline by adding an @Input to the current HelloWorldComponent class.

export class HelloWorldComponent implements OnInit {
@Input() headline: string;
    // existing code
}

We would now be able to pass a value or feature into our component, however it isn't rendered anyplace yet. To settle that, we can utilize Angular's interpolation syntax {{ }}  to show the value of headline any place we need.

In contrast to Angular vs Blazor, the latter has the same two primary options for managing state. You can store information in the actual component utilizing properties or take information in by means of boundaries.

<h2>@Headline</h2>
<label>What's your name?</label>
<input type="text" @bind-value="Name" @bind-value:event="oninput"
 placeholder="Bob"/>
<span>Hello @Name</span>

@code {
        [Parameter]
    public string Headline { get; set; }
    public string Name { get; set; }

}

Here a Headline parameter has been declared in the @code section of our component.

Routing

In many applications, you'll need to have the option to deal with routes.

Along these lines, for instance, if somebody gets to "/about" they may see you're about "page".

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {HelloWorldComponent} from "./hello-world/hello-world.component";
const routes: Routes = [
  { path: 'greetMe', component: HelloWorldComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

When compared to Blazor vs Angular, Blazor and leans on ASP.NET's existing routing engine and ships routing "out of the box"  while Angular handles routes by means of @angular/switch and naturally it searches for routes characterized in an array in application routing.module.ts.

You can undoubtedly make any Blazor component "routable" by adding a @page revelation at the highest point of your component.

@page "/GreetMe"

<h1>
    Welcome!
</h1>

HTML

Now any request to http://<your-web-site-here>/GreetMe will be delivered in this component.

One can also pass data in via the route with this command:

@page "/GreetMe/{Name}"

<h1>
    Welcome @Name!
</h1>
@code {
    [Parameter]
    public string Name { get; set; }
}

HTMLThis will render a more personalized greeting of any request to http://<your-web-site-here>/GreetMe/Jon

Fetching data from an API

Angular supporters utilizing services to get or save information in your components.

The idea is that the actual component ought to be unconscious of the particular subtleties of how information is brought or saved.

By using the Angular CLI you can generate a service:

ng create administration ticket

PowerShell

You can use the following support tickets for fetching a service.

ticket.service.ts
import {Injectable} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";

@Injectable({
  providedIn: 'root'
})
export class TicketService {

  constructor(private http: HttpClient) {
  }
  getTickets(): Observable<Ticket[]> {
    return this.http.get<Ticket[]>('api/Tickets');
  }
}

class Ticket {
  id: number;
  name: string;
  summary: string;
}

Blazor on the other hand leans on .NET's HttpClient for fetching data.

In the engine, this concedes to the native fetch API however, you can generally just ignore that and utilize the abstraction.

For example:

@using System.Net.Http
@inject HttpClient Http

@foreach(var ticket in _tickets){
    <div>        @ticket.Title    </div> 
 }

@code {
    private Tickets[] _tickets;
    protected override async Task OnInitializedAsync(){
        _tickets = await Http.GetFromJsonAsync<TicketSummary>
("api/Tickets");
    }
}

This could be easily moved with Angular to a separate service and inject that into your component (to avoid directly calling HttpClient).

@inject TicketService Tickets 

Blazor has a useful trick at its disposal compared to Angular, or any other existing frontend framework with regards to the interaction between your UI and API. 

Since you're composing your web application in C#, you can utilize similar information models in your frontend and backend (API) code.

Read More: Comparison Between Blazor Vs Angular Vs React Vs Vue