Javascript has been the most well known Programming languages for Single Page applications in recent years. As per the report, 67% developers use javascript programming language. But, Microsoft has changed the light of web application development with the advent of Blazor. Developers have the freedom to decide on developing browser-based applications using C#. Angular is most popular framework written in Javascript. Blazor is a new web development framework introduced by Microsoft to write a single-page web app with .NET. Most of you might get confused to choose the best between Blazor vs Angular. If you are also one of them, then let’s have a look at the comparison of Blazor vs Angular. But before digging into the comparison, let us see each framework in detail.
Developed by Google, Angular is a popular web and mobile SPA framework based on TypeScript. Typescript is like C# because it is maintained by microsoft and Typescript is statically typed. In the next versions, Angular supports server-side rendering of code like Blazor. It also allows developer to use HTML DOM for UI components with data binding.
Know the amazing new features of Angular 11 at- What’s New In Angular 11?
Blazor is a SPA framework based on .net architecture used for mobile and web app development. HTML DOM (Document Object Model) and CSS has been used for the styling and Process UI component of the application. C# is used by Blazor instead of Javascript, and so it provides a feature platform independent means developer can share code across the platform. Blazor writes Razor script HTML Scripts. It provides light syntax of HTML with data binding, iterations and variable definition. Blazor is most useful technologies that allows developers to build their desktop and mobile apps into bundle Blazor UI. In Blazor, Electron provides an environment to develop desktop applications with the help of HTML and CSS. Electron.Net is a bridge between developers and Blazor that allows developers to work on it.
Angular is a popular and beloved framework in the frontend community. It has more than 63.7k stars and 17.2 k forks in its GitHub repository. Blazor is a part of ASP.NET project and it is hard to analyze its popularity since it was moved to the ASP.NET Core repo. Before the repo was moved, Blazor had 9.2k stars and 700 forks. Here we’re not going to consider the ASP.NET Core stats, as they include various factors other than Blazor itself. Angular alone has accumulated a total of 224.3k questions on stack overflow while Blazor has only 2.9k questions. Due to such community strength, angular was able to grow a more extensive community than Blazor did. There are lots of courses, content, books, blogs and materials available for angular than Blazor.
Angular is an old framework as compared to Blazor. It fully supports MVC/MVVM applications and a widely used framework that is used by various large scale organizations. Whereas, Blazor web development ahs been continuously evolving and has not yet completed enough development to debate with Angular. When it comes to tooling, Angular is ahead. Angular framework supports VS code or development that blazor just started implementing. In case of libraries, Angular material is more popular because it accepted Google’s material design, a design language that is extremely normal in Google products. Apart from this, there are some other important design libraries that you can set up easily, for instance, like Bootstrap, through NG Bootstrap library, or PrimeNG.
Also, angular offers some choices with respect to component libraries. Whereas, Blazor has been dealing with its own unique variant Material Design library but it will push to accomplish such development levels.
Google and Angular both are fan of Progressive web app. One can add its usage to angular apps by just running:
ng add @angular/pwa
For quite a while, Blazor was categorized as a framework not capable for doing PWA. They’ve announced that they do support PWA, but with may things with Blazor, that’s a work in progress. Other than being stable, some developers complain about the initial download application size being too huge, though small bundle sizes are considered important for SPAs. However, the community stays optimistic about the PWA support. It’s not ideal yet, but rather it’s continually developing.
Angular has various web systems and libraries, allows the use of Scoped styles, where you can apply CSS style for connected segment. For example,
@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 { ... }
But, blazor doesn’t have this interesting feature.
While Angular uses the async nature obtained from JavaScript, also it supports RxJS to manage the async tasks. C# has advanced itself to support it out of the box in an advantageous and clean way. In some of the cases, you can even feel that a couple of executions are essentially the same between both techs. For instance, two customer apps made with Angular and Blazor, individually consume from a similar API endpoint.
For sure, they work the same in Blazor vs Angular. Because of their async qualities, we would have the code for 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"); }
Angular involves a component approach while UI building. It leans quite on the typescript, which by then gets collected to typical JavaScript to run in the program. There is a combination of standard HTML and Angular sentence structure to manage with DOM occasions and display data. Angular UI includes one or more components written using special Angular directives. Angular UI runs on browser’s JavaScript engine.
Whereas, Blazor, accepts a fundamentally same approach to manage Angular in that you build your UI using components, yet you will use Razor and C# (instead of Angular directives and JavaScript) to compose your markup and UI logic.
Angular comes with its own CLI to create project and produce app code.
Install it by utilizing Yarn or npm
npm install -g @angular/cli
CLI provides some alternatives, especially searching if you need to include Angular Routing and which template design you need.
You can run your app using command-
ng serve
For blazor, you can use Visual Studio or .NET Core CLI.
PowerShell
dotnet new blazorwasm cd blazorwasm dotnet run
Also, There are different choices, like the ability to incorporate a framework for confirming clients, and whether to have your Blazor application in an ASP.NET web application, in any case, the command above is the most complex choice to begin.
Angular supporters using services to get or save data in your components. The idea is that the actual component should be unconscious to the specific subtleties of how data is brought or saved.
Using the Angular CLI you can generate a service:
ng create administration ticket
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 leans on .NET’s HttpClient to fetch data. In the engine, this concedes to the native fetch API but you can ignore that and use 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"); } }
It can be moved with Angular to separate service and inject that into component.
@inject TicketService Tickets
Blazor has a valuable trick at its disposal compared with Angular, or some other existing frontend framework concerning the interaction between your UI and API. Since you’re composing your web application in C#, you can use comparative information models in your frontend and backend (API) code.
Both technologies have some great advantages to build apps, but have some limitations too. So before choosing the development framework, analyze your project requirements and select the one accordingly.