Web Development with Blazor

A hands-on guide for .NET developers to build interactive UIs with C#

Jimmy Engström Engström

• Publisher: Packt Publishing
• Year: 2021
• ISBN:
  9781800202580
• Topic: Computer Science
• Subtopic: Microsoft Programming
• Index: Computer Science

Develop modern web UIs quickly with server-side Blazor and Blazor WebAssembly

Key Features

• Create and deploy a production-ready Blazor application from start to finish
• Learn Blazor fundamentals, gain actionable insights, and discover best practices
• Find out how, when, and why to use server-side Blazor and Blazor WebAssembly

Book Description

Blazor is an essential tool if you want to build interactive web apps without JS, but it comes with its own learning curve. Web Development with Blazor will help you overcome most common challenges developers face when getting started with Blazor and teach you the best coding practices.You'll start by learning how to leverage the power of Blazor and explore the full capabilities of both Blazor Server and Blazor WebAssembly.Then you'll move on to the practical part, which is centred around a sample project – a blog engine. This is where you'll apply all your newfound knowledge about creating Blazor Server and Blazor WebAssembly projects, the inner working of Razor syntax, and validating forms, as well as creating your own components. You'll learn all the key concepts involved in web development with Blazor, which you'll also be able to put into practice straight away.By showing you how all the components work together practically, this book will help you avoid some of the common roadblocks that novice Blazor developers face and inspire you to start experimenting with Blazor on your other projects.When you reach the end of this Blazor book, you'll have gained the confidence you need to create and deploy production-ready Blazor applications.

What you will learn

• Understand the different technologies that can be used with Blazor, such as Blazor Server and Blazor WebAssembly
• Find out how to build simple and advanced Blazor components
• Explore the differences between Blazor Server and Blazor WebAssembly projects
• Discover how Entity Framework works and build a simple API
• Get up to speed with components and find out how to create basic and advanced components
• Explore existing JavaScript libraries in Blazor
• Use techniques to debug your Blazor Server and Blazor WebAssembly applications
• Test Blazor components using bUnit

Who this book is for

If you're a.NET web or software developer who wants to build web UIs using C#, then this book is for you. You'll need intermediate-level web-development skills and basic knowledge of C# before you get started; the book will guide you through the rest.

]]>

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:

1. Navigate to https://wasdk.github.io/WasmFiddle/.
2. Add the following code:
   int main() {
   return 1+2;
   }
3. 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:

1. 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.
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...