Recap of ASP.NET

From the first release of .NET Framework back in 2001 , ASP.NET or the web framework has been one of its most important parts. ASP.NET, a prominent framework for building web applications, has evolved significantly over the years, offering various approaches to cater to diverse development needs. Here's a quick overview of the most popular ways ASP.NET has been used so far:

1. ASP.NET Web Forms: Pioneering the drag-and-drop, event-driven model, Web Forms made it easy for developers transitioning from Windows Forms. It was great at the time but the main problem with it was slow and didnot scale very well. There was his magical tag called "ViewState" that carried information kept on server from page to page and you can imagine why it was not a good architecture for a lot of users.

2. ASP.NET MVC: Introducing the Model-View-Controller pattern, it provided a more structured way of building web applications, emphasizing separation of concerns. Great breakthrough but had a steep learning curve. The other issue with it was that it was not straight forward how to reuse components.

3. ASP.NET Web API: Focused on creating RESTful services, it's widely used for building APIs that can be consumed by various clients including web and mobile apps. Still to this date, it is one of the most popular ways to create back-end for front-end (BFF) for SPA frameworks. Specially, with modern advancements like minimal APIs (that was inspired from node express) this is one of the best and quickest ways to create APIs

4. ASP.NET Core: .NET becoming OpenSource and cross-platform was inevitable. A significant leap forward, it is a cross-platform, high-performance, open-source framework for building modern, cloud-based, internet-connected applications.

What else happened in the world of web development?

Meanwhile, in the web development community as computers and smartphones became more and more powerful, server-side frameworks like asp.net, php and Java kept losing their popularity and client-side frameworks like angular and then react were taking their place as they were much snappier, they could scale very well as they didn't need as many servers. React that was originally developed by Facebook (Meta) employees back in 2013 and quickly became the most popular client-side SPA framework for developing new applications as it was intuitive, it truly embraced the concept of components efficiently and it had incredible performance, documentation and community.

So What was wrong with React or other SPA frameworks

So far SPA frameworks specifically React seemed a perfect choice, right? well hardly! for many reasons, most notable one was that there were instances that we needed client-side app to process information in the back channel (server-side) for security and other reasons but SPA apps relied on API calls which doesn't have good way for important things like authentication for instance despite modern techniques like OIDC Authorization Code Grant with PKCE for instance. but thats a whole topic for another time... The main issue that I want to discuss here is SEO. it turns out one of the most important aspects for any website is SEO or Search Engine Optimization and React and other SPA frameworks were terrible at it and it is well documented. Despite google trying its best to modify crawlers code to support these frameworks, it was a real issue specially since search engines moved away from relying on html metadata. Not getting into non-technical reasons of why your website not showing up in google search first few pages, main technical reason for angular or react apps was that since they were client side technologies, requested page would have initially come blank from server and those frameworks using javascript and other client side technologies were asynchronously filling pages with contents which was the whole reason these frameworks were faster at first place but there were one big issue, google's crawlers didn't have JavaScript support and even after they added support for these frameworks, it can't be perfect since they would have needed exponentially higher number of servers to support indexing SPA pages. They tried so hard to implement work-arounds for this issue but the result were never perfect which was why so many people complained in recent years about their website not showing up in google search for even exact phrase searches

Rise of full-stack javascript frameworks

To really tackle the issue, we needed to understand the problem which was the need for static site-generation or server side static rendering. Next.JS which was one of the first full-stack SPA frameworks did just that. Next.JS is an open-source web development framework built on top of Node.js enabling React-based web applications functionalities such as server-side rendering and generating static websites and surprise it is great for SEO. The problem with it is that it requires good knowledge of both React, Node as well as other languages like Typescript for instance.

Blazor

Blazor was the answer to the popularity of React. Being part of ASP.NET Core, Blazor is a free and open-source web framework developed by Microsoft. It enables developers to build interactive web user interfaces (UIs) using C# instead of JavaScript. This is particularly appealing for developers who are already familiar with the .NET ecosystem. The key features and aspects of Blazor include:

1. C# and .NET in the Browser: Blazor allows developers to use C# for both client-side and server-side development. This means that developers can write rich web UIs using C# instead of JavaScript, leveraging existing .NET libraries and tools.

2. WebAssembly: Blazor WebAssembly (WASM) is a subset of Blazor. It allows C# code to run directly in the browser via WebAssembly. This means that the application runs on the client side, providing a more responsive and interactive experience.

3. Server-Side Blazor: Also known as Blazor Server, this model runs the application on the server, and interactions with the UI are handled over a SignalR connection. This approach reduces the size of the application load on the client side but requires a persistent connection to the server.

4. Component-Based Architecture: Blazor applications are built using a component-based architecture, similar to other modern JavaScript frameworks like React and Angular. Components are reusable, self-contained units of UI that can be nested, managed, and reused easily.

5. Integration with Existing ASP.NET Core Features: Blazor is seamlessly integrated with existing ASP.NET Core features, such as dependency injection, logging, and Entity Framework Core, making it easy to create full-stack web applications.

6. JavaScript Interoperability: Despite its focus on C#, Blazor also provides interop features that allow you to run JavaScript from C# and vice versa. This is useful for leveraging existing JavaScript libraries or when certain tasks are more efficient in JavaScript.

7. Rich Tooling: Blazor benefits from the mature tooling of the .NET ecosystem, including Visual Studio, Visual Studio Code, and powerful debugging and testing tools.

8. Community and Ecosystem: Being a part of the .NET ecosystem, Blazor benefits from a strong community and a growing ecosystem of libraries and tools.

Blazor's unique proposition of enabling C# in the browser, along with its integration with .NET, makes it an attractive option for .NET developers looking to build modern web applications without stepping outside the familiar .NET ecosystem.

Blazor United App in .NET 8: A New Era

Blazor United in .NET 8 marks a significant advancement in both Blazor and ASP.NET ecosystem. It is really an alternative for Full-Stack frameworks like Next.JS.

If you can spare time there is an hour long video from Daniel Roth, PM at Microsoft and Steve Sanderson, Blazor Author explaining in detail why the new Blazor App is a game changer:

It is the best of what Blazor had offered before and new stuff which if we summarize, Here's why it stands out:

Component-Based Architecture

Like React, Blazor adopts a component-based architecture. However, it uniquely enables running C# in the browser alongside JavaScript, offering a more seamless integration with the .NET ecosystem. This means:

• Less Context Switching: Developers can use C# across the board, from front-end to back-end.
• Rich Tooling: Leverage the robust tooling and IDE support available for .NET.

Comparison with React

While React is a JavaScript library for building user interfaces, Blazor provides a full-stack development experience. Key differences include:

• Language: React uses JavaScript or TypeScript, whereas Blazor uses C#.
• State Management: Blazor offers a more integrated state management system, reducing the need for additional libraries.

Blazor United vs. Next.js: Embracing SSR and SEO

Next.js in the JavaScript ecosystem took a step back from client-side-only rendering to embrace Server-Side Rendering (SSR) and Static Site Generation (SSG), primarily for SEO benefits and performance. Blazor United aligns with this philosophy by offering:

• Enhanced SEO: With server-side rendering, Blazor United apps are more SEO-friendly, as the content is readily available for search engine crawlers.
• Improved Performance: Initial load times are faster, enhancing the user experience.

Full-Stack Development

Unlike frameworks that focus solely on the client-side (e.g., React), or the server-side (e.g., traditional ASP.NET MVC), Blazor United offers a comprehensive full-stack solution. This simplifies development workflows and reduces the need for integrating multiple disparate technologies.

Conclusion

Blazor United in .NET 8 represents a significant leap in web application development. By marrying the component-based approach with full-stack capabilities and enhanced server-side rendering, it stands as a compelling alternative to existing frameworks like React and Next.js. For developers entrenched in the .NET ecosystem, Blazor United offers an efficient, powerful, and streamlined path to building modern web applications.

---

Note: This post provides a high-level overview and is intended for informational purposes. For detailed technical guidance and best practices, refer to the official .NET documentation.