Section 1:The Basics
The goal of this section is for you to understand the project structure, learn the differences between different hosting models, and get a brief history of where Blazor comes from. Also, you will learn how to set up your development environment and create your first app.
This section includes the following chapters:
- Chapter 1, Hello, Blazor
- Chapter 2, Creating Your First Blazor App
Chapter 1: Hello Blazor
Thank you for picking up your copy of Web Development with Blazor. This book intends to get you started as quickly and pain-free as possible, chapter by chapter, without you having to read this book from cover to cover before getting your Blazor on.
This book will start by guiding you through the most common scenarios you'll come across when you start your journey with Blazor, and will also dive into a few more advanced scenarios. The goal of this book is to show you what Blazor is – both Blazor Server and Blazor WebAssembly – how it all works practically, and to help you avoid any traps along the way.
A common belief is that Blazor is WebAssembly, but WebAssembly is just one way of running Blazor. Many books, workshops, and blog posts on Blazor focus heavily on WebAssembly. This book will cover both WebAssembly and server side. There are a few differences between Blazor Server and Blazor WebAssembly, and I will point those out as we go along.
This first chapter will explore where Blazor came from, what technologies made Blazor possible, and the different ways of running Blazor. We will also touch on which type is best for you.
In this chapter, we will cover the following topics:
- Preceding Blazor
- Introducing WebAssembly
- Introducing .NET 5
- Introducing Blazor
Technical requirements
It is recommended that you have some knowledge of .NET before you start as this book is aimed at .NET developers who wants 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.
Preceding Blazor
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 the concepts used in many JavaScript frameworks, so I will start with a brief overview of the challenges we faced.
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 so that it can 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 having to reload the whole page to updating just small parts of the page on the fly. This new on-the-fly update method has enabled pages to load quicker, as the perceived load time has been lowered (not necessarily the whole page load).
But for many developers, this is an entirely new skill set to learn; that is, switching between a server (most likely C#, if you are reading this book) to a frontend that's been developed in JavaScript. Data objects are written in C# in the backend and then serialized into JSON, sent via an API, and then deserialized into another object written in JavaScript in the frontend.
JavaScript used to work differently in different browsers, which jQuery tried to solve by having a common API that was translated into something the web browser could understand. Now, the differences between different web browsers are much smaller, which has rendered jQuery obsolete in many cases.
JavaScript differs a bit from other languages, since it is not object-oriented or typed, for example. In 2010, Anders Hejlsberg (known for being the original language designer of C#, Delphi, and Turbo Pascal) started to work on TypeScript, an object-oriented language that can be compiled/transpiled into JavaScript.
You can use Typescript with Angular, React, Aurelia, and Vue, but in the end, it is JavaScript that will run the actual code. Simply put, to create interactive web applications today using JavaScript/TypeScript, you need to switch between languages, and also choose and keep up with different frameworks.
In this book, we will look at this in another way. Even though we will talk about JavaScript, our main focus will be on developing interactive web applications using mostly C#.
Now, we know a bit of history about JavaScript. JavaScript is no longer the only language that can run within a browser, thanks to WebAssembly, which we will cover in the next section.
Introducing WebAssembly
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 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 JS files (or inline) are downloaded, parsed, optimized, and JIT-compiled; most of those steps are not needed when it comes to 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. If you want to communicate outside of WebAssembly, for example, by changing the Document Object Model (DOM) or downloading a file from the web, you will need to do that with JavaScript interop (more on that later, and don't worry – Blazor will solve this for us).
To get a bit more familiar with WebAssembly, let's look at some code.
In this section, we will create an app that sums two numbers and returns the result, written in C (to be honest, this is about the level of C I'm comfortable with).
We can compile C into WebAssembly in a few easy steps:
- Navigate to https://wasdk.github.io/WasmFiddle/.
- Add the following code:
int main() {
return 1+2;
}
- Press Build and then Run.
You will see the number 3 being displayed in the output window toward the bottom of the page, as shown in the following screenshot:
Figure 1.1 – WasmFiddle
WebAssembly is a stack machine language, which means that it uses a stack to perform its operations.
Consider this code:
1+2
Most compilers (including the one we just used) are going to optimize the code and simply return 3.
But let's assume that all the instructions should be executed. This is the way WebAssembly would do things:
- It will start by pushing 1 onto the stack (instruction: i32.const 1), followed by pushing 2 onto the stack (instruction: i32.const 2). At this point, the stack contains 1 and 2.
- Then, we must execute the add-instruction (i32.add), which will pop (get) the two top values (1 and 2) from the stack, add them up, and push the new value onto the stack (3).
This demo shows that we can build WebAssembly from C code. Now, we have C code that's been compiled into WebAssembly running in our browser.
Other languages
Generally, it is only low-level languages that can be compiled into WebAssembly (such as C or Rust). However, there are a plethora of l...