My Take on Why Blazor WASM Beats Javascript as the Best Choice for API Integration

We have seen a quantum leap in computing behaviour in last 2 decades. We have seen the introduction of smartphone and high-speed internet, which has revolutionized the entire Information Technology paradigm. Earlier the applications used to be static and quite dull, however, we have seen a massive transition in early 90’s when we saw GUI based applications and then websites and other online portals came into the picture.

However, this entire scenario once again transformed with the introduction of Progressive Web Applications and Mobile apps. We have seen a massive improvement in the performance of native and cross-functional applications.

If we compare, then the usual web applications were quite slow because they were built by using JavaScript, and right from the very beginning, JavaScript was not developed to make highly dynamic applications.

However, due to cut-throat competition amongst the Internet browsers and the introduction of JavaScript engines such as V8, the execution speed of JavaScript-based programs were enhanced like never before. But, beating the native application as far as performance and speed of execution is concerned was still a big challenge. The primary reason behind that was the technological hinderance of JavaScript code, which must undergo several processes to fetch the machine-readable code and vice-versa.

While organizations across the world were looking for a suitable solution, the sleeping giant of the IT Industry, Microsoft introduced its mighty offering Blazor and WebAssembly (WASM), to change the rules of the game. There are many open-source technologies in the market that provides easy to use web application development and one of them is Blazor WebAssembly.

Understanding Blazor

Blazor is the web framework that offers the capability to develop web apps using .NET and C# instead of traditional JavaScript. It offers a unique component model, which is quite powerful and flexible for developing a highly interactive web user-interface (UI). Blazor UI components have a unique combination of .NET code, C#, HTML and Razor syntax. These components are capable enough to handle combine user inputs, handle user-interface events, and make effective and efficient updates in User Interface. These components offered and a couple in an efficient way that the entire web application development process becomes seamless.

Blazor Server: Here the Blazor components executed on the server by using .NET Core. It ensures that all the UI interactions and updates are handled in real-time using a connection called WebSocket with an Internet browser. This makes loading of these applications blazingly fast and the overall implementation easier for the development team. The support for Blazor Server is available with .NET Core 3.1 LTS.

Blazor Web Assembly: With the Blazor Web Assembly (WASM), we can host our Blazor components at the client-side using WASM-based .NET runtime in the internet browser. The Blazor WASM uses a native .NET runtime which is implemented in WASM. The .NET runtime can be downloaded directly with the Blazer WASM app and it does not require any sort of plugin for any additional functionality.

Blazor Web Assembly works well in both Desktop and Mobile environment with all the modern web browsers. If we talk about security, then it offers top-notch security as it could be safely used on a user’s device with a security sandbox. The deployment of WASM could be done in standalone fashion without any sort of involvement of .NET server components.

Features of Blazor Web Assembly:

• Forms and validation feature - It offers built-in Form and Input components. These are components that help us fulfilling the common task of building a form with validation.
• Dependency injection feature - It is a programming technique that makes a specific class completely independent of its dependencies. It achieves that by decoupling the usage of an object from its creation.
• Routing feature - It offers the capability of client-side routing, which helps us with navigation to develop applications with multiple views.
• Layout feature - This feature helps us to manage the layouts for a web application.

Hosting Models in Blazor Web Assembly

Blazor Web Assembly is capable enough to host both Server-side and Client-side components.

Client-side: Here the application executes directly on the web browser over a WASM based on runtime. It is quite popular and commonly called Static Blazor Web Assembly.

Server-side: This component runs on the server-side, and usually called Dynamic Blazor Web Assembly. It is quite small is sizes, which helps applications load faster and keep the sizes smaller.

Advantages of Blazor Web Assembly

Following the most important advantages that Blazor web assembly offers:

1. The ability to develop web application using C#.
2. Helps us to develop a highly interactive application.
3. Allows the application to run on the server-side.
4. Allows us to share both Client-side and Server-side code.

The Architecture of Blazor Web Assembly:

Blazor WASM is a client-side framework, that handles all sort of user interactions. The Blazor component resides in an HTML page. We can understand the basic architecture of WASM with this example:

<html>
<head> </head>
<body>
<app>//Sample Blazor Application
<div>
<app>
</div>
</body>
</html

How to Use API

1. Most of the APIs need an API key. APIs ask for identification means signing in when we assess the API.
2. One of the simpler methods for using the API is by locating the HTTP client like REST which is usually free tools that help in assessing the API with an API key.
3. If you want to pull the data from the source through API by creating a URL.

API Integration

API integration refers to the bond between two or more databases or applications or services. They exchange the information through API. If the company wants to share some data internally with the employees so through API it is available internally and the employees can access the data shared.

Most companies want to share some data with their customers or clients so with the help of API they exchange their data and do business effectively.

Why Blazor WASM is the Best Choice for API Integration

There are few reasons why Blazor Web Assembly is the best choice for API Integration:

1. It works in offline mode – The Blazor server works with a constant connection through signals between the client and the server. The difference between the Blazor server and Blazor WASM is that in the Blazor server if the internet connection stops or fail at some point for few seconds so the connection between the server makes your application of no use, but with Blazor WASM if the internet stops for few seconds the connection between client and server may not hamper as it does not need a constant connection.
2. It is lightweight and fast – Due to its unique architecture, it offers a blazingly fast speed for the application. Another difference is for JavaScript library the syntax to remember or search it on different search engine like google which results in wasting a lot of time. With Blazor WASM the application is downloaded in your browser and load in the Dynamic-link library (DLL’s).
3. The integration can be done via C# - For some of the JavaScript frameworks like React or Angular, API integration can be done in their coding language. In Blazor WASM API integration can be done using code in C#.

API Integration using WASM

Here we will see how to load the WASM code and execute them in the browser using the help of JavaScript Web Assembly API. Here we have some important API's, which will be used to give you a demonstration of an API integration through a WASM code:

fetch() Browser API
WebAssembly.compile 
WebAssembly.instantiate
WebAssembly.instantiateStreaming
WebAssembly.instance

Here, we will make use of WASM explorer. We must download the WASM code and use it to test the API:

fetch() Browser API
fetch() API is meant to load WASM network resource.
It will Return a promise, as mentioned below.
<script>
var result = fetch("findsquare.wasm");
console.log(result);
</script>

We can also use the XMLHttpRequest method to get the WASM network resources.

WebAssembly.compile() – This API is responsible for compiling the module details that are fetched from .wasm.

The syntax will be like below:

WebAssembly.compile(buffer);

Parameters

• Buffer − This code from .wasm must be converted to a typed array or arraybuffer, before giving as input to compile.
• Return value - It will return a promise that will have the compiled module.

In this example, we will see how output can be fetched in a compiled module using webAssembly.compile():

<script> 
fetch("findsquare.wasm") .then(bytes => bytes.arrayBuffer()) 
then(mod => {
var compiledmod = WebAssembly.compile(mod);
compiledmod.then(test=> {
console.log(test); 
})
})
</script>

Output: The console.log, when checked in the browser, will give you the compiled module details.

The module has a constructor object with imports, exports, and custom sections. Let us see the next API, to get more details of the compiled module.

WebAssembly.instance: Using the WebAssembly.instance, API will give you the executable instance of the compiled module that can be further executed to get the output.

Syntax: The syntax is as given below.

new WebAssembly.Instance(compiled module)

Return value: The return value will be an object with an array of exports function that can be executed.

Example:

<script> 
fetch("findsquare.wasm") 
.then(bytes => bytes.arrayBuffer())
.then(mod => WebAssembly.compile(mod)).then(module => {
let instance = new WebAssembly.Instance(module); 
console.log(instance); 
})
</script>

Output

The output will give us an array of exports function as shown below.

Here we can see the square function, that is inherited from the ‘C’ language code. To execute the square function, you can do the following:

<script>
fetch("findsquare.wasm") 
.then(bytes => bytes.arrayBuffer()) 
.then(mod => WebAssembly.compile(mod)) 
.then(module => { 
let instance = new WebAssembly.Instance(module);
console.log(instance.exports.square(15));
})
</script>

Here the output will be − 225.

WebAssembly.instantiate: This API helps us with compilation and initiation of the module together.

Syntax: The syntax is as follows.

WebAssembly.instantiate(arraybuffer, importObject)

Parameters:

• arraybuffer − The code from .wasm has to be converted to typed array or arraybuffer before giving as input to instantiate.
• importObject − The import object must have details of the memory, imported functions to be used inside the module. It can be an empty module object, in case, there is nothing to be shared.
• Return value - It will return a promise, that will have module and instance details.

Example:

<script type="text/javascript">
const importObj = {
module: {}
};
fetch("findsquare.wasm")
.then(bytes => bytes.arrayBuffer())
.then(module => WebAssembly.instantiate(module, importObj)) 
.then(finalcode => { 
console.log(finalcode); console.log(finalcode.instance.exports.square(25)); 
}); 
</script>

Output: When we execute this code, we will get the below output.

WebAssembly.instantiateStreaming: This API takes care of compiling as well as instantiating the WebAssembly module from the .wasm code given.

Syntax: The syntax is as given below.

WebAssembly.instantiateStreaming(wasmcode, importObject);

Conclusion

Blazor Web Assembly is certainly a blessing in disguise for the software developers looking for an alternative of JavaScript. WASM offers some unique features, that are quite helpful while developing an interactive user interface. It offers some exceptional features like availability of components, routing, forms, and validation, along with its support for both client-side applications as well as server-side application.

WebAssembly provided cutting-edge technology to software developers, which can help them to develop blazingly fast and robust custom web applications.

It has been said that WebAssembly would replace JavaScript one day. However, we believe that WebAssembly was developed and introduced to co-exist with JavaScript, rather than replacing it.

WASM is also known for its capabilities which makes it a perfect contender for API implementation. It is designed for making high performance and robust applications. It can work in offline situations, it is lightweight and offers integration code in C#, which makes it a de-facto choice for API integration.