Log in to like this post! Blazor Server vs. Blazor WebAssembly: Just the Facts Jason Beres [Infragistics] / Tuesday, February 23, 2021 Here is a problem: How to run .NET in the browser using something different from JavaScript, without a connection to the server and no add-ons or plugins? The solution: Blazor WebAssembly Here is another problem: How to build client-facing apps that rank well in Google? The solution: Blazor Server To understand all about how these two work, differ, when they are used, and how exactly they form one of the most interesting and relatively new frameworks out there – Blazor - we’ve put together the following sections in the article: What is Blazor WebAssembly? Blazor WebAssembly vs Blazor Server Full Line of Blazor Features What is SignalR? Blazor Server vs WebAssembly – When to Use? Blazor WebAssembly vs Angular US Presidential Election Dashboard Built in Blazor WebAssembly Blazor WebAssembly Components Try Ignite UI for Blazor What is Blazor WebAssembly? Blazor WebAssembly, also known as WASM, is a standard developed by the W3C (World Wide Web Consortium) for creating software that runs in the web browser. Unlike JavaScript, Blazor WebAssembly is compiled software that runs at near-native speeds on your CPU. Blazor WebAssembly programs can be written in other languages, such as C, that can then be compiled to WebAssembly bytecode. WebAssembly is not meant to replace JavaScript, but to run alongside it for programs (or parts of programs) that need to run as fast as possible. Blazor, which is supported by Microsoft, is an open source and cross-platform web UI framework for building single-page apps using .NET and C# instead of JavaScript. Blazor offers two supported ways to host web applications: Blazor Server and Blazor WebAssembly. Blazor WebAssembly vs Blazor Server As mentioned earlier Blazor can run your client-side C# code directly in the browser, using WebAssembly. Because it is real .NET running on WebAssembly, you can re-use code and libraries from server-side parts of your application. Alternatively, Blazor can run your client logic on the server. Client UI events are sent back to the server using SignalR - a real-time messaging framework. Once execution completes, the required UI changes are sent to the client and merged into the DOM. Blazor Server Blazor Server uses a standard ASP.NET Core application. Within that application, you can integrate server-side functionality, such as integrating a SQL Server database through Entity Framework (an open-source, object-relational mapping framework that originally shipped as an integral part of the .NET Framework). The Blazor Server application communicates with the browser through a constant connection using SignalR. You can create client-side pages using Razor components or Razor pages. Blazor Server apps are fast to load and simple to implement. Support for Blazor Server is available with .NET Core 3.1 LTS. Blazor WebAssembly Blazor WebAssembly allows the browser to download the Blazor application. This means that the Blazor application runs in the web browser. No need for a constant connection with a server for the application to work. However, because it's solely a client-side application, you can't directly integrate any server-side functionality into the Blazor application. In-order to do that, you would need to hook it up with a server-side application, such as an ASP.NET Core Web API. Like with Blazor Server, we can create client-side pages using Razor components or Razor pages. Similar to JavaScript, Blazor WebAssembly apps run securely on the user’s device from within the browser’s security sandbox. These apps can be deployed as completely standalone static sites without any .NET server component at all, or they can be paired with ASP.NET Core to enable full stack web development with .NET, where code can be effortlessly shared with the client and server. Full Line of Blazor Features Blazor WebAssembly comes packed with features to keep you productive on your next web app project: Leverage the productivity of C# and strong runtime typing Build on the stable and mature .NET ecosystem Easily reuse code and existing .NET standard libraries on the client and server Shared component model with Blazor Server apps, implemented in Razor component files Deploy your app as a standalone static site, or host it with ASP.NET Core Build Progressive Web Apps (PWA) with offline capabilities and native OS integration Built-in support for authentication Integrated globalization & localization support Environment-based configuration IL trimming and build-time precompression Full stack debugging Great tooling with Visual Studio, Visual Studio for Mac, and Visual Studio Code What is SignalR? SignalR is a library for ASP.NET developers to simplify the process of adding real-time web functionality to applications. Real-time web functionality is the ability to have server code push content to connected clients instantly as it becomes available, rather than having the server wait for a client to request new data. Chat application is often used as SignalR example. Blazor Server vs WebAssembly – When to Use? The hosting model you should use will depend on the objectives and the features you want to offer in your application. If you plan to use the application where Internet connectivity is weak, you might opt for Blazor WebAssembly as it functions well without a server connection. It’s also a better choice if you prefer to work offline. On the other hand, if you’re looking to build client-facing applications that rank well in Google, Blazor Server is a better choice. Blazor WebAssembly vs Angular Angular, the successor of AngularJS, was created by Google to allow frontend developers to interact with both frontend and backend at the same time. Because Angular is JavaScript based, there are a lot of resources to work with. Angular has been around for a long time, unlike Blazor. It is a production-ready framework with full support for MVC/MVVM applications and it is being used by many large companies. Blazor, on the other hand, is continuously being changed and has not yet achieved enough maturity to contend with Angular, despite being very promising. Angular tooling is also more mature with full debugging support in IDEs like VS Code. For a more in-depth look at the comparison, check out the Blazor vs Angular Comparison in 2022 blog. US Presidential Election Dashboard Built in Blazor WebAssembly To help illustrate the kind of visualizations and analysis that can be supported in a Blazor application, our team at Infragistics created the U.S. Presidential Election Dashboard, a sample application that compares current and historical data and identifies data trends. This dashboard provides interactive visualizations of election data up to the 2020 election. Built in Blazor (WASM) using Ignite UI for Blazor, this sample application features our Blazor Data Grid, Blazor Tree Map, Blazor Map, and Blazor Data Chart components. Blazor WebAssembly Components Ignite UI for Blazor from Infragistics includes professionally designed Blazor components including full support for Blazor Server, Blazor WebAssembly, and .NET 6. You can create rich web applications using your C# skills and eliminate complex and hard to learn JavaScript. Ignite UI for Blazor controls include the fastest data grid, 60+ high-performance charts — stock charts, financial charts, geospatial maps, multi-column combo box — and more. We built our full-featured, lightweight Blazor Data Grid and Blazor Table to meet the challenge of displaying high volumes of data, while providing all the interactive features your customers expect. The Data Grid and all the Ignite UI Blazor components were designed for modern C# Blazor apps, including full support for Blazor WebAssembly, so you can deploy to any modern browser for the best possible user experience. And here is something else exciting for Blazor devs. We have released App Builder® for Blazor! What does this mean for your app development process? App Builder is a complete cloud-based WYSIWYG drag & drop tool that eliminates the complexity of UI design with a cloud-based IDE that lets you create apps and themes and add data binding in a snap! You’ll be creating your Blazor apps 10x faster! With the App Builder acting as your low-code development tool, everything that you design will result in production-ready code for Blazor. With the Code Preview, you can see your clean, testable source code being generated in real time while you build your app! Find out more about our blazing fast Blazor Data Grid and see a Blazor Grid example here. To see what we included in our latest release of Ignite UI for Blazor, read our blog, Ignite UI for Blazor — What’s New in 21.2. If you are considering Blazor and have any questions, shoot me an email jasonb@infragistics.com! And if curious, you can read our comparison articles on Blazor vs Angular and Blazor vs React. Happy Coding!