Blazor Framework using C#

My dream come true as a C# developer

        As a C# developer I always jealous by looking towards Nodejs developers. Because the Nodejs developers have an advantage over C# developer is that one client side language(Javascript) enough to write code for server side and client side. The developers world aware of that how easy to learn Javascript over C#. Languages like C# and Java are very difficult to learn, as per my experience, I learned java in my academics and migrated to C# in my carrier. Such a difficult to learn Java and C#, after learning we need to learn again Javascript/Jquery to execute complete website. 

        Some part of my carrier spent in Asp.net which is little easy to create and run real world web applications but after Javascript got popularity with client side rendering my Asp.net knowledge is no more useful to me. After that Asp.net MVC came into picture but it won't did any effect much on Javascript/Jquery popularity so that MVC developers also have to learn Javascript/Jquery.

        Now lot of developers are familiar with one of server side technology with complete Javascript/Jquery(Angular and React) to full fill the requirements of real world applications. How ever some developers are frustrated towards learning Javascript/Jquery because now a days industry needs Full-Stack development, which means C#/Java,  Javascript/Jquery(Angular and React) and Sql. Even though a developer good at C# and Sql but he can not fill real world requirements without javascript.

After long time I have seen a framework which can convert C# statements into browser understandably language like javascript. Javascript is useful to write client side coding and server side coding in the same manner C# also can be useful for write code for client side and server side. Did you not believing me, please find below paragraphs.

Blazor Framework

Blazor is a Microsoft technology that is used make real world web applications with C# without using JavaScript/Jquery. C#, HTML5 and CSS knowledge is enough to create an interactive web application  without Javascript, Jquery, Angular, React and Vuejs. The below is the comparison between Blazor framework and React Framework. Tow get full overview I am comparing Blazor with most popular front end language Reactjs.

React:

React is a powerful javascript library which helps us to build responsive, interactive user interfaces for real world or intractive web-based applications. React is purely on the component based framework of web app and doesn't tackle other concerns.If we need to fetch data from a database, you can make API requests from your application to a server.

Blazor Framework with C#:

Blazor is a framework which also useful to build client-side web applications that run in the browser, but using C# instead of JavaScript. Here we can build web application as a series of components, using the Razor, with UI logic written in C#.  Blazor app can be published as simple as any other .NET web application.

When a user accesses your Blazor Wasm application, a Blazor JavaScript file takes over which downloads the .NET runtime, your application and its dependencies, before running your app using WebAssembly. Blazor then takes care of updating the DOM, rendering elements and forwarding events (such as button clicks) to your application code.

Commands for creating  React App Blazor apps are similar:

React:
npx create-react-app my-app          
cd my-app
npm start

Blazor:
dotnet new blazorwasm
cd blazorwasm
dotnet run

The below is the sample client side code which proves writing a web application is similar in ReactJs and Blazor.

React Function Component:

function FuncComponent(){

const [name, setName] = useState();
const [address, setAddress] = useState();

function handleNameChange(event){
    setName(event.target.value);
}

function handleCommentsChange(event){
    setAddress(event.target.value);
}

function handleFormSubmit(event){
    // submit data to your server
    alert(`${name}: ${comments}`)
    event.preventDefault();
}  

}

return (
    <form onSubmit={handleFormSubmit}>
        <label>
            Name:
            <input type="text" value={name} onChange={handleNameChange} />
        </label>
        <label>
           Address:
            <input type="text" value={address} onChange={handleAddressChange} />
        </label>
        <input type="submit" value="Submit"/>
    </form>
) 

Blazor Companent:

@inject HttpClient Http
@using System.ComponentModel.DataAnnotations

<AddForm Model="FormModel" OnValidSubmit="HandleValidSubmit">
    <DataAnnotationsValidator />
    <label for="name">
        Name:
        <InputText id="name" @bind-Value="FormModel.Name"/>
    </label>
    <label for="slug">
        Thoughts?:
        <InputText id="address" @bind-Value="FormModel.Address"/>
    </label>
    <input type="submit" value="Submit"/>
    <ValidationSummary />
</AddForm>

@code {
    protected ContactUsModel FormModel { get; set; } = new ContactUsModel();

    async Task HandleValidSubmit()
    { 
		await Http.PostAsJsonAsync("api/AddPerson", FormModel);
        // post to your API
        
    }

    protected class ContactUsModel
    {
        [Required]
        public string Name { get; set; }
        public string Address { get; set; }
    }
}

Like the above code almost every thing is similar and easy to implement to write client side code in C#.

Microsoft Visual studio 2019 was provided a pleasant UI template to work with Blazor framework:

Conclusion:

Blazor offers a few advantages, especially if you're coming from a .NET background. You can bring your existing C# skills, experience and knowledge to the modern web application party. You can stick to the ecosystem you already know (NuGet, the dotnet tooling, Visual Studio or VS Code and IIS on Windows).

Shared view models between client and backend API. This is a big deal and makes it much easier to implement any web application. Routing, form handling and validations can be possible with one framework.

Note : Learning one language is enough to achive this, no need to learn javascript and C# at a time.