DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Languages
  4. Blazor: Running C# in the Browser Using Web Assembly

Blazor: Running C# in the Browser Using Web Assembly

C# is usually thought of as a backend, server-side language. But with the Blazor-Web Assembly combo, developers can use it for client-side as well.

Mangesh Gaherwar user avatar by
Mangesh Gaherwar
CORE ·
Jul. 16, 18 · Tutorial
Like (2)
Save
Tweet
Share
34.53K Views

Join the DZone community and get the full member experience.

Join For Free

Blazor: Running C# on Browser Using Web Assembly

Being a web developer and coming from the .NET stack we often use C# for backend programming and writing services, and then we use an excellent client-side framework like Angular or React for developing the UI part. Being a C# guy, I always find this difficult to go between C# and JavaScript. Considering these facts, Microsoft announced a new web UI framework called Blazor based on C#, Razor, and HTML, which runs in the browser using Web Assembly.

Web Assembly: A Game Changer

When we look at client-side development, JavaScript always has the upper hand. No doubt there are new client-side frameworks like Agular and React, but, at the end of the day, they turn your code into JavaScript. But, with Web Assembly, this is no longer the case.

What Is Web Assembly?

Web Assembly is a low-level assembly language with a compact binary format that provides a way to run code written in different high-level languages in the browser with native speed.

Why C# for Client-Side Programming?

JavaScript is a great, powerful language but it comes with some disadvantages. A big problem for new developers trying to tackle JavaScript is the learning curve and the complex syntax it has. A lot of these issues have been corrected with Typescript but using C# is exciting because it is shipped with features like:

  1. Robust and feature-rich language.

  2. Code reusability.

  3. With .NET Core maturing and quickly becoming one of the main frameworks for the server-side programming, it is a good idea to use the same stack for the development and using C# for front-end development is added advantage.

Running C# Inside the Browser

To build this framework we need something which will run our beloved C# code in the browser; how we can do this? Thanks to the game changer, Web Assembly, we can use C# code without using any plugins. Web Assembly is being supported in all mainstream browsers, including the latest mobile browsers. We have Web Assembly, but how does it allow us to run .NET code in the browser? The answer is MONO. Many of us have heard about MONO, which is the official runtime for client platforms (Android/iOS), which is used for the running .NET into the browser

Let’s look at normal, bootstrapped Blazor application. Whenever the application gets started, it first loads Blazor.js along with Mono.js (present in the first diagram). We also include Bootstrap in the Mono Runtime ( i.e. Mono.Wasm) which is Mono's Web Assembly framework.

Image title

Image title

After Mono.wasm loads, the .dll application (which, here, is Blazor.dll) and the .NET runtime .dll (like mscorlib.dll) and System.net are loaded.

Razor Engine

If you're a .NET developer, you're probably familiar with Razor Engine, which combines C# with HTML to generate dynamic content. We all know Razor runs on the server-side, but, with Blazor, Razor runs on the client-side where Razor Engine generates C# code during compilation.

HTML Output

So far, we have seen how Razor Engine generates C# code, but can C# code access the DOM directly? The answer is a big NO. to access the DOM, C# must go through JavaScript. Let’s see how this conversion happens.

Image title

  1. The C# part of Blazor creates the render tree which is a tree of UI items.

  2. Web Assembly passes this render tree to the rendering part of Blazor's JavaScript, which executes the corresponding DOM changes.

  3. Whenever an event occurs, the JavaScript part of Blazor sends the event to the C# part through Web Assembly.

  4. This event may be button click which is processed by c# part.

  5. If the DOM Changes Occurs then the Render Batch with UI tree difference is sent from c# which is Given to the JavaScript Blazor and DOM changes Occurs.

In this overall process, we can see that no plugin is initiating things, unlike in Flash or Silverlight where some plugins are needed to initiate the process.

Blazor is inspired by today's popular SPA frameworks like Angular, React, and Vue, so it provides all the features which we will see below.

This was all about the Blazor and how it loads and runs in the browser but to make Blazor a true Single-Page Application framework, we will have to use features like components, routing, state management, unit testing, and build optimization techniques.

1. Components

Every SPA framework is built up based on components, which can be a single pop up box, a user registration form, etc. In Blazor, components are classes which we can write in C# or the normal cshtml we use in Razor. With this approach, we can apply various patterns to the components.

2. Infrastructure

When a new Blazor app is created, it adds some core features that every app needs, such as layouts, rendering, routing, DI, and unit testing.

3. Deployment

One of the most important aspects of any programming framework is the deployment of the application. For deployment, one .NET Core middleware is provided which will help to deploy your Blazor UI application.

4. Code Sharing and .NET Standard

We can make use of our existing class libraries with the Blazor which allows us to reuse code which is well used and tested already.

5. Javascript/Typescript Interop

Although we are developing things in C#, we might need to refer to a third-party library so we can use them. Using Typescript type definitions, we can register JavaScript functions using the register function method in C#.

This was all about the Blazor and how it works. I hope it helps! 

Note: As Blazor been in an experimental phase until recently, it is not recommended to use the Blazor for any production app until the final release is available from Microsoft.

References

http://blog.stevensanderson.com/2018/02/06/blazor-intro/

http://learn-blazor.com/getting-started/what-is-blazor/

Happy coding!

Blazor Web Service Assembly (CLI) csharp .NET

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Using the PostgreSQL Pager With MariaDB Xpand
  • Web Application Architecture: The Latest Guide
  • The Future of Cloud Engineering Evolves
  • Java Development Trends 2023

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: