What is JavaScript?
JavaScript is one of the most commonly used languages for front-end programming. It is a lightweight, interpreted, and object-oriented language and has some really interesting and helpful functions. It is best established as a web page scripting language. However, it is used in many non-browser environments such as node.js and Apache couch DB.
JavaScript has been the most widely accepted and extensively used language for Single Page Applications for many years. However, Microsoft recently released Blazor, a new framework that allows developers to build browser-based applications using C#.
What is Blazor?
Blazor stands for Browser and Razor. It is a new web development framework. It was introduced by Microsoft and allows users to develop browser-based applications using C# and Razor syntax.
Blazor makes use of WebAssembly, which has been directed with significant browser engines, such as Internet Explorer, Chrome, Safari, and Firefox, so users don’t need to install any third-party extensions or add-ons to run the code in their browsers. So, with Blazor, you can use C# to build both the client and server sides, making your task much simpler by sharing libraries and code.
Why Should You Use Blazor Instead of the Javascript Framework?
Blazor rapidly climbed to the top of the charts. People have begun to equate it to well-known javascript frameworks. There have been numerous debates and juxtaposition about the prospects of client-side web growth, and these debates and differentiations have increased their popularity. So, let’s take a look at what makes Blazor so idiosyncratic.
1. Blazor gives you the option of using one or more applications.
Unlike Blazor, a JavaScript framework necessitates the development of a separate application whenever server-side functionality is required. However, Blazor currently comes with two hosting models.
First, the Blazor Server. Blazor Server facilitates server-side execution of the program. A SignalR link is used for layout updates, event handling, and JavaScript calls.
The other one is the Blazor WebAssembly. Blazor WebAssembly enables you to run your program on the client-side using WebAssembly. If you need to add server-side features, you can use a separate API framework or run it alongside Blazor Server.
Following is a sample code snippet of running Blazor WebAssembly through a separate API application. When the code is executed and the page is initialized, the code will display a list of technologies. The code will load this list of technologies through the API that is being used. Along with it, there is also a text box and a button. When you enter some text in the given text box and click on the button, The “ITechnologyService” will send the entered text to the API. Furthermore, the API will then return an updated list of technologies.
@page "/"
@inject HttpClient httpClient
@using Newtonsoft.Json
<h1>Here is a list of .NET technologies</h1>
@if (Technologies != null && Technologies.Any())
{
<ul>
@foreach (var technology in Technologies)
{
<li>@technology</li>
}
</ul>
}
<input @bind="MessageInput" @bind:event="oninput" />
<button @onclick="MessageInputClick">Add Technology</button>
@code {
public string MessageInput { get; set; }
public List<string> Technologies { get; set; }
protected override async Task OnInitializedAsync()
{
Technologies = await httpClient.GetJsonAsync<List<string>>("https://localhost:44378/api/technology/getall");
}
public async Task MessageInputClick()
{
var postRequest = new Dictionary<string, string>();
postRequest.Add("technology", MessageInput);
var requestMessage = new HttpRequestMessage()
{
Method = new HttpMethod("POST"),
RequestUri = new Uri("https://localhost:44378/api/technology/add"),
Content = new StringContent(JsonConvert.SerializeObject(postRequest))
};
requestMessage.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/json");
var response = await httpClient.SendAsync(requestMessage);
var responseText = await response.Content.ReadAsStringAsync();
Technologies = JsonConvert.DeserializeObject<List<string>>(responseText);
MessageInput = string.Empty;
}
}
2. Blazor means sharing the code for both client and the server-side.
Blazor permits you to share the codes between the client-side and server-side mutually. It means that methods that share both hosting models – Blazor Server and Blazor WebAssembly, only need to be written once. Thus reducing the load and the human effort that is required.
Not only that, but if you want to change the code, you only have to do it once, and the changes will be mirrored in both hosting models.
The below-mentioned code snippet depicts that. The “ITechnologyService” is inherited by “TechnologyService.” The “ITechnologyService” is inserted into the page when the Blazor program is loaded, and it shows a list of all the technologies contained in the “TechnologyService.” As mentioned before, when you enter some text in the text box and press the button, that text will be sent via the “Add” method and updated in the list of technologies.
Suppose you need to use the “TechnologyService” both client and server-side with JavaScript frameworks. In that case, you’ll need to write the service in both JavaScript and the appropriate server-side coding language.
using System.Collections.Generic;
namespace BlazorShare.Data
{
public partial class TechnologyService : ITechnologyService
{
protected virtual List<string> Technologies { get; }
public TechnologyService()
{
Technologies = new List<string>();
Technologies.Add("Blazor");
Technologies.Add("MVC");
}
public virtual void AddTechnology(string technology)
{
Technologies.Add(technology);
}
public virtual List<string> GetAll()
{
return Technologies;
}
}
public partial interface ITechnologyService
{
void AddTechnology(string technology);
List<string> GetAll();
}
}
@page "/"
@using BlazorShare.Data
@inject ITechnologyService technologyService
<h1>Here is a list of .NET technologies</h1>
@if (Technologies?.Any() ?? false)
{
<ul>
@foreach (var technology in Technologies)
{
<li>@technology</li>
}
</ul>
}
<input @bind="MessageInput" @bind:event="oninput" />
<button @onclick="MessageInputClick">Add Technology</button>
@code {
public string MessageInput { get; set; }
public List<string> Technologies { get; set; }
protected override void OnInitialized()
{
Technologies = technologyService.GetAll();
}
public void MessageInputClick()
{
technologyService.AddTechnology(MessageInput);
MessageInput = string.Empty;
}
}
3. Blazor allows you to code in one language.
As mentioned before, Blazor WebAssembly gives you the comfort of writing client-side code in C#, which means that any developer who is working on an application will only need to know one language.
It has a lot of advantages. Not only does this ease the work, but learning to code in a single language also means being aware, updated, and proficient in the skills that you want in a team member. It will also make administering tasks to team members simpler, eliminating the code language barrier.
Following is a sample code, written entirely in C#. The code displays the current time when executed. When you press the button, the time will be updated to the current time.
To use a JavaScript library for this, you’ll need to create and integrate an API request to get the current server time. After that, you’ll need to create a method for updating the time using the JavaScript framework language. Of course, you might get the time from the client’s computer using JavaScript, but if the time on their machine is inaccurate, it will be shown incorrectly.
@page "/time"
<h3>Time</h3>
<p>The time is @CurrentTime.ToString("HH:mm:ss")</p>
<button @onclick="GetCurrentTime">Get Current Time</button>
@code {
public virtual DateTime CurrentTime { get; set; }
protected override void OnInitialized()
{
CurrentTime = DateTime.Now;
base.OnInitialized();
}
public virtual void GetCurrentTime()
{
CurrentTime = DateTime.Now;
}
}
4. Blazor provides Server-Side Rendering.
If you’re creating software that needs to be explored by a search engine, server-side rendering is valuable. With the help of server-side rendering, a bot can scan your app and read its details without having to run any JavaScript.
Server-side rendering is implemented as usual if your program uses Blazor WebAssembly and Blazor Server. However, this is not the case with JavaScript.
You can need to implement complex software to provide server-side rendering in a JavaScript application. It may not be easy because you will need your hosting company to install the program, which they may not be inclined to do.
Conclusion
Blazor undoubtedly is an enhancement of JavaScript. It’s worth mentioning that in the foreseeable future, WebAssembly languages like Blazor WebAssembly are more likely to complement instead of substitute JavaScript. Some of Blazor’s features are driven by JavaScript. The SignalR communication between the client and the server, for example, is driven by JavaScript.
We assume it is too early to make any conclusive claims on whether Blazor is superior to JavaScript. Blazor WebAssembly is only in prototype at the moment. However, when it’s completely released, it’ll likely offer the famous JavaScript frameworks a run for their money, posing an intriguing conundrum for developers on which framework to learn and use.
