A subjective comparison between Angular and Blazor

senalexandru

{ Sen Alexandru }

Posted on July 20, 2020

A subjective comparison between Angular and Blazor

First things first! My name is Alex and I joined a Romanian company almost four years ago to work as a full stack developer. I’ve worked with quite a few programming languages and frameworks in the past years in both professional and personal purposes, being part of Windows, web and mobile app projects.
With this article I want to share a personal opinion over Angular and Blazor. Spoiler alert – this will not be a good guy / bad guy talk but rather a highlight over differences between these two amazing frameworks which I personally love and enjoy working with (no one paid me to say that, it’s all by heart).

Disclaimer: Please consider this more like a lazy afternoon read instead of a technical one. There are tons of articles written by core team members that explain what happens under the hood, bundle sizes, performance benchmarks and so on. If you want, I’ll give you a short insight: both Angular and Blazor are highly efficient on all aspects.
This will be a casual comparison from a friendly perspective. That being said, let’s introduce the players:

In the left corner: Angular!

Currently at version 10, a mature Javascript framework that needs no introduction, gathering a large and friendly community, it has been around for quite a while.
Angular is being supported by Google and has been constantly improving throughout the years. Needless to say it has been used by everyone, including major companies like Google, Amazon, Samsung etc. to create single page applications and it’s now one of the three most used frameworks in this regard (Angular, React, Vue – to avoid a fight I’ll put them in alphabetic order).
One key aspect that I like in particular is the fact that Angular is unitary, homogeneous. It’s a complete and unique ecosystem that satisfies your key necessities. What do I mean by that?
First of all, it’s very well documented. Whatever you need can be found in the official docs. If you miss it or want the short version, there are also blogs, articles, videos and other community materials that will help you.
Secondly, all the key modules are maintained by the core team, behave really well and undergo a world war of testing before major releases.
You need state management? NgRx got you covered. Simple and powerful, well documented, complain about something and we won’t be friends anymore.
A very very important aspect for me is the UI cause I’ve struggled a lot between paid and free yet buggy or unsatisfactory libraries in the past. I dreamed of a UI library that would go hand in hand or be designed specifically for the client-side framework and luckily I got to see that before getting old.
For many of us, Angular Material is a big plus. A whole bucket of components made specifically for Angular, following the Google Material design system and evolving under a single flag. Buttons, modals, pop-ups, tables, cards, icons, you name it. Trust me, it covers all your essential needs, for free.

Conclusion: I really enjoy working with Angular and it has no serious downsides from a humble mortal’s point of view. I truly hope the Google team developing it keeps this ascending trend. Fingers crossed.

In the right corner: Blazor!

A new framework that took a totally new and different approach.
This young lad backed by Microsoft made its official entry in May 2020 and allows us to build interactive web UIs using C# instead of JavaScript.
For that it actually gives us two possible ways of building apps: Blazor Server and Blazor WebAssembly. To better describe them I’ll quote the official docs:

“With the Blazor Server hosting model, the app is executed on the server from within an ASP.NET Core app. UI updates, event handling, and JavaScript calls are handled over a SignalR connection.”

Whereas the description for Blazor WebAssembly is:

“The principal hosting model for Blazor is running client-side in the browser on WebAssembly. The Blazor app, its dependencies, and the .NET runtime are downloaded to the browser. The app is executed directly on the browser UI thread. UI updates and event handling occur within the same process. The app's assets are deployed as static files to a web server or service capable of serving static content to clients.”

So, Blazor generates WebAssembly code that runs in the browser. In case you didn’t knew, WebAssembly is supported by all major browsers since 2017.
Now, besides speed, you might ask yourselves what are the advantages. I found the following:
One of the coolest things is using the C# language and the .NET ecosystem. They come with an entire history, bringing stability and order to deserted lands.
As a company you don’t need a .NET, Java, Ruby, PHP etc backend developer and a JavaScript / TypeScript frontend developer. You will have the entire app in a single solution, using the same programming language, sharing whatever projects/libraries you want (the models for example will be shared by default), and also, you will be able to do an end-to-end debugging in no time.
With Blazor you can set breakpoints in both client and backend projects hence being able to track what’s doing what using once Visual Studio instance.
The only thing that I really miss and I have to point out is the UI library. Currently there are quite a few paid and free available libraries for the job. In my project I didn’t want to spend any money so went on the path of greediness. One library didn’t have what I needed, other had a bug on a component I wanted to use and some ping-pong took place until everything was settled (with me being the ball).
It’s important to say that things are just starting to move and it’s rude for me to complain about something I get for free, buuut, in my opinion, a UI library like Angular Material is the missing piece of this wall-sized puzzle.
I can summarize everything in a few words: Angular and Blazor are definitely awesome and fun to work with. The person saying that one is good and the other is bad should clearly be left without the semi-colon button on his keyboard as it all comes down to each individual’s preferences.
As a last note, in case you haven’t tried them, forget everything I’ve said. Set them up and get your hands dirty. Write a “Hello World!” or a “ToDo List”. I bet at least one of them will win your heart.
Happy coding!

💖 💪 🙅 🚩
senalexandru
{ Sen Alexandru }

Posted on July 20, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related