Excerpt

This article builds on the concepts of WebAssembly as an integral part of Blazor WASM and explores what Blazor WASM is, how it works, the problems it solves, its features and the kind of applications it is suited for.

Introduction

Blazor WASM (or Blazor WebAssembly) is a single-page web application framework that allows you to build single page web applications. Built as part of the .NET Core ecosystem, Blazor uses C# to generate dynamic content for rich client-experience.

How Blazor WASM Works

Traditionally, all web pages are structured with HTML, styled with CSS and use Javascript to introduce dynamic interactivity. C# as a language was not built to run natively in browsers. However, with the presence of WebAssembly, the browser can now host the dotnet runtime, which makes it possible to run and execute C# Code.

What is The Problem With Javascript in The Browser

It is true that Javascript is the native language web browsers and can run in the frontend and backend. But is it really necessary to run c# in the browser?

The following highlight the benefits of running C# in the browser.

Full Stack Enablement

The dotnet core ecosystem provides one of the most secure and most resilient server side implementations. It ranks highly among the most popular backend frameworks with its implementation of ASP.NET.

By extending the .NET runtime into the browser, Microsoft enabled a true full stack experience to allow teams to use the same knowledge and class libraries they are familiar with from the c# language on both stacks.

Easier Integration

In web development, there are developers who focus on either the client side or server side. Whilst code classes do not need to know the implementation details of other classes, developers on the client side hand need knowledge about server-side implementation, and this can sometimes prove difficult using two languages, especially when one is strongly typed and the other is not.

By using Blazor WASM, the client-side and server-side can share a common code base in the same language, which can integrate easily with each other. Client-side developers will have an understanding of server-side logic and how to seamlessly integrate and implement it.

Reduced Development Costs

Programming languages take years to learn and master. As developers do not come cheap, finding and paying developers is a strategic decision for small teams. Having a team of skilled developers who can switch between client and server side applications without losing any understanding of both sides enhances collaboration which is vital for small teams.

Click here to discover how a Blazorise Mentor can quickly help your development teams scale up rapid application development using Blazorise Components.

Enhanced Code Reuse

The DRY Principle is one of the simplest ways to prevent and reduce code smells and spaghetti code. By not having to rewrite new code, coupling is reduced and future changes do not affect other parts of the codebase.

Entire .NET libraries can be shared, and consumed in Blazor WASM. Making use of existing logic, functionality, and capabilities allows for developers to focus on innovating more as they're not required to re-invent the wheel.

Features Of Blazor WASM

Blazor WASM has a unique set of features that make it a compelling choice for client-side development.

Reusable Components

With Blazor, you can create components for use across your application. Components are building blocks for a user interface such as a forms, cards, tables, grids and many more.

These components can be defined once, and called multiple times. At the very core, components are a group of HTML elements that specify the structure of a site.

<Dropdown>
    <DropdownToggle Color="Color.Primary">
        Dropdown
    </DropdownToggle>
    <DropdownMenu>
        <DropdownItem>Action</DropdownItem>
        <DropdownDivider />
        <DropdownItem>Another Action</DropdownItem>
    </DropdownMenu>
</Dropdown>

The above is dropdown menu component with Blazorise. This makes development easier and faster and can be called anytime you want to create a dropdown menu, without having to write lots of code.

Hot Reload

Hot reload triggers the browser to refresh automatically when changes are made to the code base. This helps to improve developer productivity, as they do need to restart the application to see the effects of those changes.

Fast Performance

Blazor WASM on the first load takes a while as runtime environment and other dependancies have to be downloaded. Then onwards, Blazor WASM relies on the downloaded runtime to execute at near native speeds in the browser, making applications faster

What Can Be Built With Blazor

This section highlights some of the best use cases for Blazor

Progressive Web Application

A progressive web application is an application that can be installed and run like a native application. Building PWAs helps teams provide native desktop and mobile experiences for their applications without building specifically for those environments.

For small teams, Blazor can be a way to save up costs without sacrificing performance and delivery.

Single Page Applications

A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages

In Blazor WebAssembly, when the client makes a request, it is served up as a bit of HTML, CSS, and JavaScript — like all other web apps. The blazor.webassembly.js file bootstraps the app and starts loading .NET binaries which can be viewed coming over the wire in the browser's Network tab.

Offline Applications

Because Blazor WASM downloads the runtime and dependencies on startup, most of the rendering is done on the client side. As a result, it can function well in scenarios where there is no internet or limited connection.

Debunking Common Misconceptions

Just like all other SPA frameworks, Blazor WASM comes with its shortcomings. Here are a few to take note off

Huge Payload and Slow Initial Size

Blazor WASM applications can get big quickly due to the runtimes required to run C# in the browser. This big size can cause the initial startup to be slow, and this can take a toll on a poor internet connection. Fortunately, this only happens once therefore subsequent loads are faster and smaller as the majority of the heavy lifting has already been done.

No More Javascript

The goal of Blazor WASM is to allow C# to run in the browser, but that does not mean you will not require javascript at all. Blazor WASM cannot interact directly with the DOM or have access to Browser APIs, and as a result these need to be called using javascript, in a process called Javascript Interop. As Javascript is the native language for browsers, it will be required to access browser-based functionalities and

Conclusion

Blazor helps teams build rich UI interfaces. If your team uses Blazor, reach out to us on how we can help you speed up your development with our production-ready UI components.