Building web applications: Blazor vs. Angular

Has the moment arrived for us to relegate Angular to the past and unanimously transition to Blazor? Or perhaps, could it be that Blazor, as the successor to Razor, is afflicted from the same issues as its predecessor? In light of the recent opportunity that arose within our company to initiate a project from the ground up, utilizing Blazor, this article aims to explore the insights gained during this process

Furthermore, an attempt will be made to capture the present state of this framework and compare its advantages and flaws to already mentioned Angular.Could it be that the moment has arrived to contemplate a shift in our company's primary front-end framework? And, perhaps, even in yours?

Unmasking the mysterious Blazor: Why should you dive in? 

Blazor is an innovative and powerful web framework that has been making waves in the world of web development. But what exactly is it, and why should you be interested in it?

Blazor is a framework developed by Microsoft that allows you to build interactive and dynamic web applications using C# and .NET instead of traditional web technologies like JavaScript. What sets Blazor apart is its ability to run C# code directly in the browser using WebAssembly or on the server, giving you the flexibility to choose the hosting model that best suits your project.

So, why should you consider diving into Blazor?

• Familiarity: If you're already a .NET developer, Blazor allows you to leverage your existing skills and knowledge. You can use C# for both server-side and client-side code, reducing the need to learn multiple programming languages.
• Productivity: Blazor's component-based architecture simplifies development by breaking down your application into reusable components. This modularity enhances productivity and maintainability.
• Full Stack with C#: With Blazor, you can be a full-stack developer using C# for both the frontend and backend. This reduces context-switching and streamlines your workflow.
• Community and Support: Blazor has gained a rapidly growing community and has strong support from Microsoft. You can find a wealth of resources, libraries, and tools to aid in your development journey.
• Performance: Blazor's WebAssembly option delivers impressive client-side performance. Your web applications can be as fast and responsive as those built with JavaScript.
• Versatility: Blazor is versatile, suitable for building a wide range of applications, from single-page apps (SPAs) to progressive web apps (PWAs) to enterprise-level applications.‍
• Cross-Platform: Blazor is cross-platform, meaning you can build web applications that run on various devices and browsers seamlessly.

In essence, Blazor is a game-changer in web development, offering a fresh perspective on how we build web applications. Whether you're a seasoned .NET developer or looking to expand your skill set, exploring Blazor is a worthwhile endeavor that can open up exciting possibilities in your web development journey.

First date with Blazor

Before diving into the world of Blazor, let me give you a glimpse of my background and experience. I approach it as a full-stack developer with a primary focus on .NET and past experience with Angular, along with a brief encounter with Razor.

My initial encounter with this technology began with searching for and taking an appropriate course on the Pluralsight platform. This allowed me to get a preliminary understanding of the basics and the concept of writing frontend code within this framework, without delving deep into dry documentation.

It quickly became apparent that Blazor and Angular had quite a bit in common, which greatly facilitated my journey into working on my first project using this technology. The plan was straightforward: create a foundational web service project with standard features like registration, login, translations, and more.

The intention behind this project was to learn the basics while creating something that could in the future serve as a foundation for more personalized and complex endeavors. This way, I could build upon the groundwork laid by this initial project to develop more customized and intricate applications down the line.
So, it was time to start laying down the architecture. The first crucial decision I had to make was how I wanted to host my application since Blazor offers three different methods: Server, WebAssembly, and Hybrid. Each approach comes with its own set of advantages and disadvantages, making it crucial to choose the one that aligns with your project's specific requirements.

‍Server Hosting:

Advantages:

• Real-time Communication: Server hosting allows for real-time communication between the client and server using SignalR, making it an excellent choice for applications that require live updates.
• Lower Initial Load Time: Initial load times tend to be faster as the server handles rendering and sends the HTML to the client.
  
  

Disadvantages:

• Scalability Challenges: Scalability can be a concern as server resources are shared among clients, potentially impacting performance under heavy loads.
• Latency Dependency: Performance may suffer if there's significant latency between the server and clients.

WebAssembly Hosting:

Advantages:

• Client-Side Execution: WebAssembly enables the execution of C# code directly in the browser, reducing the need for frequent server requests and offering high responsiveness.
• Offline Capabilities: WebAssembly allows for building progressive web apps (PWAs) that can work offline and provide a native app-like experience.
  
  

Disadvantages:

• Larger Initial Load Time: The initial download of the WebAssembly runtime and application files can lead to longer load times compared to server hosting.
• Limited to Modern Browsers: WebAssembly support is limited to modern browsers, which may exclude some users.

Hybrid Hosting:

Advantages:

• Combines Benefits: Hybrid hosting combines elements of both server and WebAssembly hosting, offering the advantages of real-time communication and client-side execution.
• Flexibility: You can choose the hosting model that suits specific parts of your application, providing flexibility in architecture.
  
  

Disadvantages:

• Complexity: Managing both server and client-side components can introduce complexity, making it necessary to strike a balance between the two.

In summary, the choice of hosting for your Blazor application should be guided by your project's needs. Server hosting excels in real-time communication but may face scalability challenges. WebAssembly hosting offers client-side execution and offline capabilities but may have a larger initial load time. Hybrid hosting provides flexibility but requires careful architecture planning. Understanding the trade-offs and aligning your choice with your project's goals is key to a successful Blazor application deployment.

Following some brief consultations, I made the decision to host the Blazor (server) frontend within the .NetCore API. This choice came with several distinct advantages, as outlined earlier, and it streamlined project management by consolidating everything into a single solution hosted on a single Azure App Service.

The architecture creation phase went smoothly. I quickly assembled the frontend using a user-friendly wizard, and setting up the connection between the frontend and the API to ensure it displayed seamlessly upon launching the API project was a breeze, requiring just a few additional lines of code here and there.

This effortless integration exemplified the ease and efficiency of working with this architecture, setting the stage for the next phases of development with confidence and excitement. 

With a functional project in place, it's time to delve into the Blazor approach to defining views. In my opinion, this approach strikes a balance between Razor and Angular. We have the HTML portion (.razor) where we define the page's appearance, either using plain HTML or, as in my case, utilizing an external component library (Radzen). This part also allows for writing logic, but, in my view, it might not be the most convenient or readable approach. An alternative is to extract the logic into a separate file (.radzen.cs), where we can comfortably write C# code so that is what I did.

Although I had never written in Blazor before, I quickly found my way around this framework. Two simple inputs, a button, and an injected service for API requests, and the front-end part of the login was complete. This is what I like most about this technology. Having an idea of how to do something in Angular, it's very easy to do it here as well.

Things went smoothly from there – I quickly set up a responsive menu for easy navigation between pages, implemented user registration with policy handling (using Microsoft.AspNetCore.Authorization), and of course, token management with JWT (JSON Web Tokens). I found great help in the built-in ILocalStorageService (Blazored.LocalStorage), which functions very similarly to Angular's local storage.

The only major challenge I encountered was implementing multilingual support for the interface. I wanted it to be dynamic and editable within the application itself, which meant that standard solutions based on resource files in the API didn't quite meet my requirements. Here, unfortunately, I faced the main drawback of Blazor – it's a relatively new technology. When you want to do something unconventional, there's a good chance there aren't thousands of Stack Overflow questions about exactly what you want to achieve, and you have to figure it out on your own. In this regard, Angular's maturity and extensive community support do work in its favor.

Ultimately, I had to build multilingual functionality from scratch, similar to Angular's ngx-translate, by dynamically creating JSON files for translations from a database.

Setting aside smaller functionalities like user,language and translation management, that's where my journey with Blazor came to an end.

What are my conclusions? Well, Blazor is certainly an intriguing technology, and with time and an increasing user base, it will become more accessible, especially if you already have experience with Angular or Razor.

Blazor vs. Angular: A battle of pros and cons

Here, I'd like to present to you a few advantages and disadvantages of both technologies.

Blazor:

Advantages:

• Familiarity for .NET Developers: If you're already well-versed in the world of .NET, Blazor is a natural choice. It allows you to leverage your existing skills in C# and .NET, reducing the learning curve.

• Full Stack with C#: Blazor empowers you to be a full-stack developer using C# for both frontend and backend development. This streamlines development and fosters code reusability.

• Component-Based Architecture: Blazor's component-based structure simplifies development by breaking applications into modular components, making it easier to manage and maintain complex projects.

• Cross-Platform: Blazor is cross-platform, enabling you to create web applications that work seamlessly on various browsers and devices.

‍

Disadvantages:

• Relative Newcomer: While Blazor is gaining momentum, it's still considered a newcomer compared to more established frameworks like Angular. This may impact the availability of resources and third-party libraries.

• Server-Side Limitations: In server-side Blazor, performance can be affected by the server's load and latency, which might not be ideal for highly responsive applications.

‍

Angular:

‍

Advantages:

• Mature Ecosystem: Angular has been around for a while, resulting in a mature ecosystem with extensive documentation, a robust community, and a wide range of libraries and tools.

• Powerful and Feature-Rich: Angular offers a comprehensive set of features out of the box, including powerful tools for routing, forms, and dependency injection.

• Strong TypeScript Support: TypeScript, a superset of JavaScript, is the default language for Angular development. It enforces strong typing and helps catch errors early in the development process.

• Optimized for Large Applications: Angular's architecture is designed to handle large-scale applications with complex requirements.

‍

Disadvantages:

• Learning Curve: Angular has a steeper learning curve, especially for developers new to the framework. Its extensive feature set can be overwhelming at first.

• Boilerplate Code: Angular often requires writing more boilerplate code compared to some other frameworks, which can slow down development.

• Less Familiarity for .NET Developers: If you're primarily a .NET developer, transitioning to Angular might require learning a new language (TypeScript) and a different set of tools.

‍

In conclusion, both Blazor and Angular have their own strengths and weaknesses. The choice between them depends on your project's specific requirements, your team's skillset, and your development preferences.

Summing it up: Is it time to lay Angular to rest?

In conclusion, Blazor and Angular are two powerful web development frameworks, each with its own set of advantages and disadvantages. Blazor, with its .NET integration, offers familiarity to .NET developers, component-based architecture, and the flexibility of running code either on the server or in the browser. On the other hand, Angular boasts a mature ecosystem, robust features, strong TypeScript support, and scalability for large applications.

The choice between Blazor and Angular ultimately depends on your project's specific requirements and your team's familiarity with the technologies. Whether you opt for the innovation of Blazor or the established capabilities of Angular, both frameworks have the potential to help you create exceptional web applications.

As the web development landscape continues to evolve, staying informed about these frameworks is essential for making informed decisions that will shape the future of your projects.