top

Blazor- Building A Faster Web Application Using WebAssembly

Today we are going to look at a new WebAssembly project called Blazor!What it let’s you do is to build a website in C#, compile that into WebAssembly and then have the WebAssembly render your page on the website!What’s the big deal about it? you work with C# only! bye bye JavaScript!Don’t attack me yet folks, I am a fan of JavaScript myself and I don’t think it is going to go anywhere anytime soon.                                                                        (image from: https://gph.is/2GLQPhk) What’s this WebAssembly?Here is the definition from https://webassembly.org/"WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.”Do browsers support this yet?Yes, most major browsers support WASM 1.0 at the moment.                                                                                           WebAssembly 1.0 has shipped in 4 major browser engines. (That Icon is Edge btw ;))  What does WebAssembly mean for Web Platform?In short, this is HUGE!                                                                            WebAssembly has “HUGE” implications for the web platform (image from: https://gph.is/1URUQiq) WebAssembly has huge implications for the web platform. It gives us the possibility to run the code of multiple languages on the web, with Native Speed!As of now, WebAssembly is not intending to be a JavaScript competition, and it is designed to be a complement and run side by side with JavaScript using WebAssembly API’s that provide access to JavaScript APIs.What’s this Blazer framework?Blazor is basically an SPA framework, but not a typical one like Angular or React that uses JavaScript or TypeScript. This one is built on .Net that runs in the browser!                                                                   You can now run .Net in the browser! (image from: https://gph.is/1brOPam) How to run a .Net in the browser?We can run a .Net in the browser using WebAssembly. Basically, we use a .Net runtime called Mono that most of you might have heard. We compile it to WebAssembly, and then run the compiled binary in the browser!Getting started with the projectAlright enough with the into, now let’s get to it.To create your first Blazor project you need to install the following tools and SDKs first:Download and install .NET Core 2.1 SDK (install the latest version).Download and install Visual Studio 2017 (install the latest version) and make sure that you select the web development stuff while going through the installation wizard.Download and install the Blazor Language Services extension from the Visual Studio Marketplace.                                                                              ASP.NET Core Blazor Language Services After installing all that, you can open Visual Studio and go to File > New Project and select Asp.Net Core Web Applicant.Then in the next dialog, you should be able to see “Blazor” along with other web projects. Select Blazor here. This will create your first Blazor WebAssembly project. So select that one!                                                                               Select “Blazor” as your Web Application project type That’s it. this should create your first Blazor WebAssembly project.If you look at your solution explorer you should see something like the following. Now just press F5 and you should be able to see the project running in your browser like the following:                                                                            Running the Blazor project in the browser! A quick look into the codeIf you click around in this basic scaffolding project, you will see that it does a couple of basic things. It has a Counter page that simply just adds to a counter value and displays it and the other page is rendering a grid on the page. Now, let’s look at what is on the Counter page.The Counter page:If you open the Counter page, you will see how this project is doing the same thing JavaScript used to do with C#:@page "/counter" <h1>Counter</h1> <p>Current count: @currentCount</p> <button class="btn btn-primary" onclick="@IncrementCount">Click me</button> @functions {     int currentCount = 0;     void IncrementCount()     {         currentCount++;     } }The front end for this Counter component is just regular Html stuff. Also, the logic is added using the good old Razor syntax. All this Html and the C# stuff will be converted into a component class when we build the project. When we build the project, the name of the generated .Net class will be the same as the name of the .cshtml file.All the members of this “Counter” component class present in the @functions block, component state (properties, fields) and methods can be specified for event handling or for defining other component logic.How does Routing Work?If you look at the top of the “Counter.cshtml” you can see the @page directive that specifies that this component is a page to which requests can be routed. That means any requests that are sent to “/Counter” will be handled by this “Counter” component. If you don’t have this “page” directive at the top of the component, that component will not handle any requests at all on its own but that component can be used by other components as a subcomponent.A good example of components without routes would be the components under the “shared” folder in this project.How do I add a new component?It is super easy…It is very simple. Under the pages folder, create a new .cshtml file and add the route you like at the top of the page like the following:@page "/test" <h1>test page</h1>This means that our route for the new component is “/test”Then under the “shared” folder, just open the NavMenu.cshtml to add a new menu item for this new component like the following:<div class="top-row pl-4 navbar navbar-dark">     <a class="navbar-brand" href="">WebAssemblySample</a>     <button class="navbar-toggler" onclick=@ToggleNavMenu>         <span class="navbar-toggler-icon"></span>     </button> </div> <div class=@(collapseNavMenu ? "collapse" : null) onclick=@ToggleNavMenu>     <ul class="nav flex-column">         <li class="nav-item px-3">             <NavLink class="nav-link" href="" Match=NavLinkMatch.All>                 <span class="oi oi-home" aria-hidden="true"></span> Home             </NavLink>         </li>         <li class="nav-item px-3">             <NavLink class="nav-link" href="counter">                 <span class="oi oi-plus" aria-hidden="true"></span> Counter             </NavLink>         </li>         <li class="nav-item px-3">             <NavLink class="nav-link" href="fetchdata">                 <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data             </NavLink>         </li>         <li class="nav-item px-3">             <NavLink class="nav-link" href="test">                 <span class="oi oi-list-rich" aria-hidden="true"></span> test             </NavLink>         </li>     </ul> </div> @functions {     bool collapseNavMenu = true;     void ToggleNavMenu()     {         collapseNavMenu = !collapseNavMenu;     } }That’s it! Now, if you press Ctrl + F5, you should be able to see the new Menu and navigate to the new component you created:                                                                                                                                      Adding a new Component in Blazor How do I deploy this Application?Deployment for this application is similar to the deployment of regular Asp.Net Core application. Just right-click on the project, select “Publish” and follow the wizard to deploy your application to Azure.                                                            Deploying Blazor WebAssembly application to Azure  And there we have our first Blazor WebAssembly project built and deployed to Azure.Project Source Code:You can find the source code of this project on the following GitHub repository if you want to clone and play around: https://github.com/aramkoukia/blazor-webassembly-sample
Rated 4.5/5 based on 12 customer reviews
Normal Mode Dark Mode

Blazor- Building A Faster Web Application Using WebAssembly

Aram Koukia
Blog
10th Jul, 2018
Blazor- Building A Faster Web Application Using WebAssembly

Today we are going to look at a new WebAssembly project called Blazor!

What it let’s you do is to build a website in C#, compile that into WebAssembly and then have the WebAssembly render your page on the website!

What’s the big deal about it? you work with C# only! bye bye JavaScript!

Don’t attack me yet folks, I am a fan of JavaScript myself and I don’t think it is going to go anywhere anytime soon.

                                                                        (image from: https://gph.is/2GLQPhk

What’s this WebAssembly?

Here is the definition from https://webassembly.org/

"WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.”

Do browsers support this yet?

Yes, most major browsers support WASM 1.0 at the moment.

WebAssembly 1.0 has shipped in 4 major browser engines

                                                                                           WebAssembly 1.0 has shipped in 4 major browser engines. (That Icon is Edge btw ;)) 


 What does WebAssembly mean for Web Platform?

In short, this is HUGE!

   WebAssembly has “HUGE” implications for the web platform

                                                                            WebAssembly has “HUGE” implications for the web platform (image from: https://gph.is/1URUQiq

WebAssembly has huge implications for the web platform. 


It gives us the possibility to run the code of multiple languages on the web, with Native Speed!

As of now, WebAssembly is not intending to be a JavaScript competition, and it is designed to be a complement and run side by side with JavaScript using WebAssembly API’s that provide access to JavaScript APIs.


What’s this Blazer framework?

Blazor is basically an SPA framework, but not a typical one like Angular or React that uses JavaScript or TypeScript. This one is built on .Net that runs in the browser!

Blazer framework?

                                                                   You can now run .Net in the browser! (image from: https://gph.is/1brOPam

How to run a .Net in the browser?

We can run a .Net in the browser using WebAssembly. Basically, we use a .Net runtime called Mono that most of you might have heard. We compile it to WebAssembly, and then run the compiled binary in the browser!


Getting started with the project

Alright enough with the into, now let’s get to it.

To create your first Blazor project you need to install the following tools and SDKs first:

  1. Download and install .NET Core 2.1 SDK (install the latest version).

  2. Download and install Visual Studio 2017 (install the latest version) and make sure that you select the web development stuff while going through the installation wizard.

  3. Download and install the Blazor Language Services extension from the Visual Studio Marketplace.


ASP.NET Core Blazor Language Services

                                                                              ASP.NET Core Blazor Language Services 

After installing all that, you can open Visual Studio and go to File > New Project and select Asp.Net Core Web Applicant.

Then in the next dialog, you should be able to see “Blazor” along with other web projects. Select Blazor here. This will create your first Blazor WebAssembly project. So select that one!

Select “Blazor” as your Web Application project type

                                                                               Select “Blazor” as your Web Application project type 

That’s it. this should create your first Blazor WebAssembly project.

If you look at your solution explorer you should see something like the following. Now just press F5 and you should be able to see the project running in your browser like the following:

Running the Blazor project in the browser!

                                                                            Running the Blazor project in the browser! 


A quick look into the code

If you click around in this basic scaffolding project, you will see that it does a couple of basic things. 

It has a Counter page that simply just adds to a counter value and displays it and the other page is rendering a grid on the page. Now, let’s look at what is on the Counter page.

The Counter page:

If you open the Counter page, you will see how this project is doing the same thing JavaScript used to do with C#:

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" onclick="@IncrementCount">Click me</button>

@functions {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}


The front end for this Counter component is just regular Html stuff. 

Also, the logic is added using the good old Razor syntax. All this Html and the C# stuff will be converted into a component class when we build the project. 

When we build the project, the name of the generated .Net class will be the same as the name of the .cshtml file.

All the members of this “Counter” component class present in the @functions block, component state (properties, fields) and methods can be specified for event handling or for defining other component logic.


How does Routing Work?

If you look at the top of the “Counter.cshtml” you can see the @page directive that specifies that this component is a page to which requests can be routed. 

That means any requests that are sent to “/Counter” will be handled by this “Counter” component. If you don’t have this “page” directive at the top of the component, that component will not handle any requests at all on its own but that component can be used by other components as a subcomponent.

A good example of components without routes would be the components under the “shared” folder in this project.


How do I add a new component?

It is super easy…

It is very simple. Under the pages folder, create a new .cshtml file and add the route you like at the top of the page like the following:

@page "/test"

<h1>test page</h1>


This means that our route for the new component is “/test”

Then under the “shared” folder, just open the NavMenu.cshtml to add a new menu item for this new component like the following:

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">WebAssemblySample</a>
    <button class="navbar-toggler" onclick=@ToggleNavMenu>
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class=@(collapseNavMenu ? "collapse" : null) onclick=@ToggleNavMenu>
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match=NavLinkMatch.All>
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="test">
                <span class="oi oi-list-rich" aria-hidden="true"></span> test
            </NavLink>
        </li>
    </ul>
</div>

@functions {
    bool collapseNavMenu = true;

    void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}


That’s it! Now, if you press Ctrl + F5, you should be able to see the new Menu and navigate to the new component you created:

Adding a new Component in Blazor

                                                                                                                                      Adding a new Component in Blazor 


How do I deploy this Application?

Deployment for this application is similar to the deployment of regular Asp.Net Core application. 

Just right-click on the project, select “Publish” and follow the wizard to deploy your application to Azure.

  Deploying Blazor WebAssembly application to Azure

                                                            Deploying Blazor WebAssembly application to Azure  

And there we have our first Blazor WebAssembly project built and deployed to Azure.


Project Source Code:

You can find the source code of this project on the following GitHub repository if you want to clone and play around: https://github.com/aramkoukia/blazor-webassembly-sample

Aram

Aram Koukia

Blog Author

Software Developer, Designer and Architect in the morning, Blogger at night. I have been building software since 2001. And when I am not creating software, I like hiking, playing soccer, tennis, reading and anything to do with TV shows. When I feel like writing I write some stuff here on my blog: http://koukia.ca

Leave a Reply

Your email address will not be published. Required fields are marked *

SUBSCRIBE OUR BLOG

Follow Us On

Share on

other Blogs