Blazor WASM Introduction
Table of Contents
- How Blazor idea was born?
- How Web Applications work?
- Running any code in browser
- Why use Blazor?
- What is Blazor?
- Ways to develop Blazor application
- What is Blazor Web Assembly?
- Benefits and Drawbacks of Blazor Web Assembly
How Blazor idea was born?
How Web Applications work?
Usually we have a business logics built with .NET, JAVA or Node JS running on server to serve the user interaction and needs in browser using client side technologies like Angular, React or Vue. This works well but there is a disconnect between server and client that you cannot reuse server side code with client side code that you use to buld UI. You cannot reuse your skillset and mastering UI framework need a steep learning curve. But nowadays the good news is that you can run any code in browser using Web Assembly.
Running any code in browser
Why use Blazor?
Why should we still go for blazor? that's because,
- WA is part of all major browsers including mobile browsers.
- We can resue Nuget libraries as long as they are part of .NET standard.
- Performance is near native and over and above for image processing, browser based games and graphics/video editing.
- We have an unmatched tooling (Visual Studio / Visual Studio Code) support backed by Microsoft.
What is Blazor?
Blazor application consists of razor components from ASP.NET which contains HTML, CSS and C# to make a website up and run. You can see Dialog.razor component which contains a button and on click of it OnYes event will be invoked. We can also nest component like how we have Dialog.razor component inside Index.razor component.
When Blazor application is built, it produces .NET standard assemblies (.dlls) which will be converted to Web Assembly byte having .wasm extension by the .NET runtime. This will have all the necessary dependencies and .dlls like System.dll, Microsoft.AspNet.dll and ofcourse your blazor app .dll to run blazor app in browser.
Ways to develop Blazor application
The most common ways to develop blazor apps is by using,
- Visual Studio
- Visual Studio Code
- .NET CLI
- Jetbrains Rider
What is Blazor Web Assembly?
Blazor Web Assembly is one of the architecture that you can use to build your blazor web application. Blazor Web Assembly is a kind of blazor that runs in client in browser. When the blazor app loads, it downloads everything needed to run inside browser. This includes HTML, CSS, images and sometimes JS files along with all .NET .dll's and complete .NET runtime that is converted into Web Assembly byte code. It consists of all static assets and no server connection is needed to run the app. This means it can be server from,
- CDN as static content
- Azure Static Storage Website
- GitHub Pages
Benefits and Drawbacks of Blazor Web Assembly
The benefits are,
- Near native performance or exceptional performance for browser based games, image processing or video editing.
- Can work offline.
- No server neede. A technology to serve static file is enough.
- Makes completed use of client side resources.
- Runs in all modern browsers.
The drawbacks are,
- Restricted to capabilities of browser.
- Browser does all the work.
- Longer load time when there is more to download.
- Not able to maintain client side secrets.
- Web Assembly is required.