Skip to content
  • Services
    Our Approach
    Personalized, in-depth technical guidance on a global scale that helps organizations achieve their digital transformation goals.
    Learn more
    • Our Approach
    • Artificial Intelligence
    • Development
    • Design
    • Digital Experience Platform
    • Data & Analytics
    • Cloud & DevOps
    • Security & Compliance
    • Support
  • Industries
    Our Work
    Through our expertise in strategy, design, and engineering, we help clients deliver digital transformation at scale.
    Learn more
    • Our Work
    • Healthcare
    • Financial Services
    • Manufacturing
    • Agriculture
    • Education
  • About
    About us
    For over 20 years, we’ve partnered with companies of all sizes and industries to solve their most complex business problems.
    Learn more
    • About us
    • Locations
    • Events
    • News
  • Careers
    Join our Team
    Take your career to the next level. We offer exciting opportunities across every stage of the software development life cycle.
    Learn more
    • Join our Team
    • Open Positions
    • Application Process
    • Benefits
    • Learning & Development
  • Insights
    Our Insights
    Read our latest blogs, watch our recent videos, and browse our library of e-books — all full of insights from our experts.
    Learn more
    • Our Insights
    • Blogs
    • Videos
    • Downloads
  • Contact
Menu
January 11, 2019

Blazor, WebAssembly, and the Future of the Browser

Blazor is an HTML framework in the same vein as Angular, React, and Vue. It’s used for rendering .NET on the client-side and runs under WebAssembly.

Antonii Georgiev

As a .NET Developer, I have always wanted to have the ability to write C# on the client-side. Now, with the addition of Blazor to Microsoft’s ever-growing tech-stack, I can do just that.

What exactly is Blazor?

Blazor is an HTML framework in the same vein as Angular, React, and Vue. It’s used for rendering .NET on the client side and runs under WebAssembly. It offers all the benefits of a modern front-end framework while working entirely in C#.

 
Benefits of Using Blazor
  • Runs in a memory safe sandboxed environment and nearly faster as native applications.
  • All the necessary SPA features are supported by Blazor such as components, routing, dependency injection for an up to date developer experience.
  • Blazor applications can be deployed on machines having no .NET, just as static files.
  • Rich IntelliSense and tooling for lesser development time.
  • Supported by all mainstream browsers(Chrome, Edge, Firefox, Opera, Safari) including the ability to run on older (non-WebAssembly) ones via asm.js.
Why Does WebAssembly Matter?

You can easily compile C/C++/C# or many other back-end languages into WebAssembly. WebAssembly code allows access to the full functionality of the browser via JavaScript interop. Since it’s a compact bytecode format, it’s optimized for minimum download sizes and maximum execution speed making it much faster and more efficient. WebAssembly has support from all mainstream browsers, including mobile devices. At the same time, WebAssembly code runs in the same trusted sandbox as JavaScript to prevent malicious actions on the client machine. Additionally, WebAssembly lets you choose your desired coding language and runs in a sandboxed environment separate from the host runtime.

The one drawback of WebAssembly is that it loads and gets compiled using JavaScript, which means you’re still tied up working with JavaScript. JavaScript is there to bootstrap WebAssembly, but it doesn’t stop there. Accessing platform APIs require JavaScript it as well.

Blazor Templates

Let’s take a look at some of what the Blazor templates have to offer. To start, install the following:

  • .NET Core 2.1 SDK (2.1.500 or later).
  • Visual Studio 2017 (15.9 or later) with the ASP.NET and web development workload selected.
  • The latest Blazor Language Services extension from the Visual Studio Marketplace.
  • The Blazor templates on the command-line:
    dotnet new -i Microsoft.AspNetCore.Blazor.Templates

In our Pages/Index.cshtml, the Blazor client-side router uses route parameters to populate the corresponding component parameters with the same name.

The @page directive in the first line represents the routing and is mapped to the home index root. Then the next 2 lines are just normal HTML markups. The last line may look different from what you’re used to seeing. This is called a component in Blazor. Note that the component name is the same as the component page name.

Moving on, to our Shared/SurveryPromt.cshtml

The Blazor function at the end of the component makes it possible to pass a value from the parent, Index page in this case to the component with the help of [Parameter] annotation.

Also like we said Blazor supports dependency injection as demonstrated in our Pages/FetchData.cshtml working with http requests you can inject HttpClient into a certain page for handling requests.

Final Thoughts

Blazor’s learning curve is smooth and easy. It has all the must-have features of a modern day SPA-Framework at your disposal while still keeping things simple. Regardless, Blazor is still in its alpha stage so it’s expected that some of the features are either lacking functionality or are in development.

While Blazor and WebAssembly don’t have the ability to directly access the Browser’s DOM API the JavaScript interop provides a means of filling the gap. The interop makes it possible to migrate existing JavaScript libraries to Blazor.

As Blazor gains in popularity, it’s reasonable to assume that an ecosystem of interop libraries will emerge. As more interop libraries become available, Blazor developers will likely spend less time writing JavaScript and more time in C#.

Further Reading:

  • https://blazor.net/docs/index.html
  • http://blog.stevensanderson.com/

Image Source: Christopher Gower on Unsplash

Tags
  • Development
  • Web
Share
  • Share on Facebook
  • Share on LinkedIn

Dawn of the Progressive Web Apps

What is a Progressive Web App, and what new options do they provide smart businesses?
Download
Share
  • Share on Facebook
  • Share on LinkedIn
Sign up for our monthly newsletter.
Sign up for our monthly newsletter.

Read what's next.

Blog

Secure Your Future with Post-quantum Cryptography

Blog

Including Strategy and Value in Enterprise Architecture

  • LinkedIn
  • Instagram
  • Facebook
United States
MentorMate1350 Lagoon Ave, Suite 800
Minneapolis
, MN 55408

+1 612 823 4000
Bulgaria
67 Prof. Tsvetan Lazarov Blvd.
Sofia 1592, Bulgaria,
+359 2 862 2632
Sweden
Gustav III:s Boulevard 130
P.O.Box 3069
SE-16903 Solna

+46 10 481 00 00
Paraguay
Carlos M. Gimenez 4855
Asunción, Paraguay

+595 21 327 9463

Copyright © 2025 MentorMate, LLC

  • Cookies
  • Privacy
  • Terms
  • Continuity Policy
This site is registered on wpml.org as a development site. Switch to a production site key to remove this banner.