It is recommended that you have some knowledge of .NET before you start, as this book is aimed at .NET developers who want to utilize their skills to make interactive web applications. However, it’s more than possible that you will pick up a few .NET tricks along the way if you are new to the world of .NET.

Not that long ago, I got asked by a random person on Facebook if I was working with Blazor.

I said: Yes, yes I do.

He then continued with a long remark telling me that Blazor would never beat Angular, React, or Vue.

I see these kinds of remarks quite often, and it’s essential to understand that beating other SPA frameworks has never been the goal. This is not Highlander, and there can be more than one.

Learning web development has previously been pretty tough. Not only do we need to know ASP.NET for the server, but we also need to learn a SPA framework like React, Angular, or VUE.

But it doesn’t end there. We also need to learn NPM, Bower, and Parcel, as well as JavaScript or TypeScript.

We need to understand transpiling and build that into our development pipeline. This is, of course, just the tip of the iceberg; depending on technology, we need to explore other rabbit holes.

Blazor is an excellent choice for .NET developers to...

You probably didn’t get this book to read about JavaScript, but it helps to remember that we are coming from a pre-Blazor time. I recall that time – the dark times. Many of the concepts used in Blazor are not that far from those used in many JavaScript frameworks, so I will start with a brief overview of our challenges.

As developers, we have many different platforms we can develop for, including desktop, mobile, games, the cloud (or server-side), AI, and even IoT. All these platforms have a lot of different languages to choose from, but there is, of course, one more platform: the apps that run inside the browser.

I have been a web developer for a long time, and I’ve seen code move from the server to run within the browser. It has changed the way we develop our apps. Frameworks such as Angular, React, Aurelia, and Vue have changed the web from reloading the whole page to updating small parts on the fly. This new on-the-fly update method...

In this section, we will look at how WebAssembly works. One way of running Blazor is by using WebAssembly, but for now, let’s focus on what WebAssembly is.

WebAssembly is a binary instruction format that is compiled and, therefore, smaller. It is designed for native speeds, which means that when it comes to speed, it is closer to C++ than it is to JavaScript. When loading JavaScript, the JavaScript files (or inline) are downloaded, parsed, optimized, and JIT-compiled; most of those steps are not needed for WebAssembly.

WebAssembly has a very strict security model that protects users from buggy or malicious code. It runs within a sandbox and cannot escape that sandbox without going through the appropriate APIs. Suppose you want to communicate outside WebAssembly, for example, by changing the Document Object Model (DOM) or downloading a file from the web. In that case, you will need to do that with JavaScript interop (more on that later, and don...

The .NET team has been working hard on tightening everything up for us developers for years. They have been making everything simpler, smaller, cross-platform, and open source – not to mention easier to utilize your existing knowledge of .NET development.

.NET core was a step toward a more unified .NET. It allowed Microsoft to reenvision the whole .NET platform and build it in a completely new way.

There are three different types of .NET runtimes:

• .NET Framework (full .NET)
• .NET Core
• Mono/Xamarin

Different runtimes had different capabilities and performances. This also meant that creating a .NET core app (for example) had different tooling and frameworks that needed to be installed.

.NET 5 is the start of our journey toward one single .NET. With this unified toolchain, the experience to create, run, and so on will be the same across all the different project types. .NET 5 is still modular in a similar way that we...

Blazor is an open-source web UI SPA framework. That’s a lot of buzzwords in the same sentence, but simply put, it means that you can create interactive SPA web applications using HTML, CSS, and C# with full support for bindings, events, forms and validation, dependency injection, debugging, and much more. We will take a look at these in this book.

In 2017, Steve Sanderson (well-known for creating the Knockout JavaScript framework and who works for the ASP.NET team at Microsoft) was about to do a session called Web Apps can’t really do *that*, can they? at the developer conference NDC Oslo.

But Steve wanted to show a cool demo, so he thought, would it be possible to run C# in WebAssembly? He found an old inactive project on GitHub called Dot Net Anywhere, which was written in C and used tools (similar to what we just did) to compile the C code into WebAssembly.

He got a simple console app running inside the browser. This would have been...

In this chapter, you were provided with an overview of the different technologies you can use with Blazor, such as server-side (Blazor Server), client-side (WebAssembly), desktop, and mobile. This overview should have helped you decide what technology to choose for your next project.

We then discussed how Blazor was created and its underlying technologies, such as SignalR and WebAssembly. You also learned about the render tree and how the DOM gets updated to give you an understanding of how Blazor works under the hood.

In the upcoming chapters, I will walk you through various scenarios to equip you with the knowledge to handle everything from upgrading an old/existing site, and creating a new server-side site, to creating a new WebAssembly site.

We’ll get our hands dirty in the next chapter by configuring our development environment and creating and examining our first Blazor App.

As a .NET developer, you might be interested in the Uno Platform (https://platform.uno/), which makes it possible to create a UI in XAML and deploy it to many different platforms, including WebAssembly.

If you want to see how the ZX Spectrum emulator is built, you can download the source code here: https://github.com/EngstromJimmy/ZXSpectrum.

Join our community on Discord 

Join our community’s Discord space for discussions with the author and other readers: 

https://packt.link/WebDevBlazor2e