What is Blazor WebAssembly?<\/h2>\n\n\n\n
Blazor WebAssembly, also known as WASM, is a standard developed by the W3C<\/a> (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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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).<\/p>\n\n\n\n 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.<\/p>\n\n\n\n <\/p>\n\n\n\n Blazor Server apps are fast to load and simple to implement. Support for Blazor Server is available with .NET Core 3.1 LTS.<\/p>\n\n\n\n Blazor WebAssembly allows the browser to download the Blazor application.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n <\/p>\n\n\n\n However, because it’s solely a client-side application, you can’t directly integrate any server-side functionality into the Blazor application.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n Like with Blazor Server, we can create client-side pages using Razor components or Razor pages.<\/p>\n\n\n\n Similar to JavaScript, Blazor WebAssembly apps run securely on the user\u2019s device from within the browser\u2019s 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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\u2019s also a better choice if you prefer to work offline.<\/p>\n\n\n\n On the other hand, if you\u2019re looking to build client-facing applications that rank well in Google, Blazor Server is a better choice.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n For a more in-depth look at the comparison, check out the Blazor vs Angular Comparison in 2022 blog.<\/a><\/p>\n\n\n\n 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> a sample application that compares current and historical data and identifies data trends.<\/p>\n\n\n\n <\/p>\n\n\n\n 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.<\/p>\n\n\n\n Ignite UI for Blazor<\/a> 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<\/a> \u2014 stock charts, financial charts, geospatial maps, multi-column combo box \u2014 and more. <\/p>\n\n\n\n We built our full-featured, lightweight Blazor Data Grid <\/a>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<\/a>.<\/p>\n\n\n\n And here is something else exciting for Blazor devs. We have released App Builder<\/a> for Blazor! What does this mean for your app development process?<\/p>\n\n\n\n Find out more about our blazing fast Blazor Data Grid and see a Blazor Grid example here<\/a>.<\/p>\n\n\n\n If you are considering Blazor and have any questions, shoot me an email jasonb@infragistics.com<\/a>!<\/p>\n\n\n\n And if curious, you can read our comparison articles on Blazor vs Angular<\/a> and Blazor vs React<\/a>.<\/p>\n\n\n\n Happy Coding!<\/p>\n","protected":false},"excerpt":{"rendered":" Find out what is Blazor Webassembly, and how does it compare to the Blazor server. This article takes a closer look at Blazor WebAssembly and why it\u2019s got a lot of buzz.<\/p>\n","protected":false},"author":81,"featured_media":1321,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-278","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blazor"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=278"}],"version-history":[{"count":6,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/278\/revisions"}],"predecessor-version":[{"id":1923,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/278\/revisions\/1923"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/1321"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Blazor Blazor Server vs Blazor WebAssembly<\/h2>\n\n\n\n
Blazor Server<\/h3>\n\n\n\n
![\"Blazor](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/03\/12\/blazor-server-signalr-example.png\" "\\"Blazor")
<\/figure>\n\n\n\nBlazor WebAssembly<\/h3>\n\n\n\n
![\"Blazor](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/03\/12\/web-assembly-diagram.png\" "\\"Blazor")
<\/figure>\n\n\n\nFull Line of Blazor Features<\/h2>\n\n\n\n
\n
What is SignalR?<\/h2>\n\n\n\n
Blazor Server vs Blazor WebAssembly \u2013 When to Use?<\/h2>\n\n\n\n
Blazor WebAssembly vs Angular<\/h2>\n\n\n\n
US Presidential Election Dashboard Built in Blazor WebAssembly<\/h2>\n\n\n\n
![\"Blazor](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/03\/12\/Blazor-WebAssembly-Example-Sample.gif\")
<\/figure>\n\n\n\nBlazor WebAssembly Components<\/h2>\n\n\n\n
\n
![\"Blazor](\"https:\/\/static.infragistics.com\/marketing\/Blog-in-content-ads\/Ignite-UI-Blazor\/ignite-ui-blazor-you-get-ad.gif\")
<\/a><\/figure>\n\n\n\n