Web Development with Blazor E-Book

Jimmy Engstrom

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 300

Veröffentlichungsjahr: 2021

Beschreibung

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.

Leseprobe

Web Development with Blazor

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

Jimmy Engström

BIRMINGHAM—MUMBAI

Web Development with Blazor

Copyright © 2021 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Ashwin Nair

Publishing Product Manager: Ashwin Nair

Senior Editor: Hayden Edwards

Content Development Editor: Abhishek Jadhav

Technical Editor: Saurabh Kadave

Copy Editor: Safis Editing

Language Support Editor: Safis Editing

Project Coordinator: Manthan Patel

Proofreader: Safis Editing

Indexer: Rekha Nair

Production Designer: Roshan Kawale

First published: June 2021

Production reference: 1180621

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80020-872-8

www.packt.com

I dedicate this book to my mom and dad, who got me my first computer, which got me started with programming.

To my brother, who took the time to teach me how to code, and to my sister, who helped me with my English homework growing up.

This would never have been possible without you all!

I would also like to dedicate the book to my wife, Jessica, who has helped me along the way by both reviewing the book and picking up my slack.

Love you!

A huge thanks to the reviewers, who have done a tremendous job reviewing the book.

– Jimmy Engström

Foreword

It's been about 6 years since I first met Jimmy at an event in Stockholm, where I quickly noticed his passion for technology, user experience, and pop culture. We spent the better part of an hour debating Marvel versus DC comic characters and storylines, and I knew this was a person who studied for both his craft and his hobbies. His presentations regarding Blazor, HoloLens, and delivering better applications for our users are always cutting edge and always lead the audience to the best practices for each technology.

The author has been a Microsoft MVP and community leader for almost a decade. The Swedish developer community has grown under his leadership and benefitted from his insights to build better applications and services. The Blazm components library that he wrote and made available is a prime example of helping other developers in his local community and across the world.

This book has been written for the practical Blazor developer. Clear definitions of why you need to consider each feature of the framework are followed by examples and clear solutions that will make you immediately successful. You'll learn by following along with the very relatable example project of a blog engine. From user interface topics through API design and security considerations, the blog engine you will build with Blazor and ASP.NET Core in this book will run in production and can easily serve your blog. The final chapter of this book is an awesome reference for new and seasoned developers, with answers to the typical problems that will surface during the lifetime of your application, and it should be kept as a desktop reference for years to come.

Jeff Fritz

Principal Program Manager at Microsoft and Leader in Live Video Technical Community Engagement

Contributors

About the author

Jimmy Engström has been developing ever since he was 7 years old and got his first computer. He loves to be on the cutting edge of technology, trying new things. When he got wind of Blazor, he immediately realized the potential and adopted it already when it was in beta. He has been running Blazor in production since it was launched by Microsoft.

His passion for the .NET industry and community has taken him around the world, speaking about development. Microsoft has recognized this passion by awarding him the Microsoft Most Valuable Professional award 8 years in a row.

About the reviewers

Jessica Engström is a CEO, teacher, and international speaker who has traveled the world sharing knowledge about her passions.

She is a Microsoft MVP and has been part of the developer community for many years. She organizes conferences, events, and hackathons, and runs multiple user groups. Adapting technology to humans is something that she thinks is important and that is why UX and presentation skills are her main focus.

Jessica is the co-host of Coding After Work, a podcast and a stream on Twitch.

Bozhi Qian has been a developer and architect for more than 20 years, focusing on .NET application development, security, and hosting across a variety of Microsoft platforms, including ASP.NET and Azure.

He is passionate about cloud technologies and holds some Microsoft certifications, including MCSD and Azure Architecture Specialist.

He lives in Melbourne, Australia, with his wife and children.

Jürgen Gutsch is a .NET-addicted web developer. He has worked with .NET and ASP.NET since the early versions in 2002. Before that, he wrote server-side web applications using classic ASP. He is also an active part of the .NET developer community. Jürgen writes for the dotnetpro magazine, one of the most popular German-speaking developer magazines. He also publishes articles in English on his blog ASP.NET Hacker and contributes to several open source projects. Jürgen has been a Microsoft MVP since 2015.

The best way to contact him is using Twitter.

He works as a developer, consultant, and trainer for the digital agency YOO Inc., located in Basel, Switzerland. YOO Inc. serves national as well as international clients and specializes in creating custom digital solutions for distinct business needs.

Table of Contents

Preface

Section 1:The Basics

Chapter 1: Hello Blazor

Technical requirements

Preceding Blazor

Introducing WebAssembly

Introducing .NET 5

Introducing Blazor

Blazor Server

Blazor WebAssembly

Blazor WebAssembly versus Blazor Server

WebWindow

Blazor Mobile Bindings

Summary

Further reading

Chapter 2: Creating Your First Blazor App

Technical requirements

Setting up your development environment

Windows

macOS

Linux (or macOS or Windows)

Creating our first Blazor application

Creating a Blazor Server application

Creating a WebAssembly application

Using the command line

Creating a Blazor Server project using the command line

Figuring out the project structure

Program.cs

Startup

Index/_host

App

MainLayout

Bootstrap

Summary

Section 2:Building an Application with Blazor

Chapter 3: Introducing Entity Framework Core

Technical requirements

Creating a data project

Creating a new project

Adding NuGet packages

Creating data classes

Creating the Database Context

Creating a migration

Creating an interface

Implementing the interface

Adding the DbContext to Blazor

Summary

Chapter 4: Understanding Basic Blazor Components

Technical requirements

Exploring components

counter

FetchData

Learning Razor syntax

Razor code blocks

Implicit Razor expressions

Explicit Razor expressions

Expression encoding

Directives

Understanding dependency injection

Figuring out where to put the code

Lifecycle events

Parameters

Cascading parameters

Writing our first component

Summary

Chapter 5: Creating Advanced Blazor Components

Technical requirements

Exploring binding

One-way binding

Two-way binding

Adding Actions and EventCallback

Using RenderFragment

ChildContent

Default value

Building an alert component

Exploring the new built-in component

Setting the focus of the UI

Influencing HTML head

Component virtualization

Summary

Chapter 6: Building Forms with Validation

Technical requirements

Exploring form elements

EditForm

InputBase<>

InputCheckbox

InputDate<TValue>

InputNumber<TValue>

InputSelect<TValue>

InputText

InputTextArea

InputRadio

InputRadioGroup

Adding validation

ValidationMessage

ValidationSummary

Custom validation class attributes

Building an admin interface

Listing and editing categories

Listing and editing tags

Listing and editing blog posts

Summary

Chapter 7: Creating an API

Technical requirements

Creating the service

Adding database access

Adding the API controller

Creating the client

Summary

Chapter 8: Authentication and Authorization

Technical requirements

Implementing authentication

Adding tables to the database

Configuring the Blazor Server project

Configuring the Blazor WebAssembly project

Adding authorization

Adding roles from the server

Adding roles to the client

Adding a role to the database

Summary

Chapter 9: Sharing Code and Resources

Technical requirements

Cleaning up the project

Setting up the API

Moving the components

Cleaning up the shared files

Adding the API

Adding static files

CSS versus LESS versus SASS

Preparing CSS/SASS

Adding CSS to MyBlogServerSide

Adding CSS to MyBlogWebAssembly.Client

Making the admin interface more useable

Making the menu more useful

Making the blog look like a blog

Sharing problems

CSS isolation

Summary

Chapter 10: JavaScript Interop

Technical requirements

Why do we need JavaScript?

.NET to JavaScript

Global JavaScript (the old way)

JavaScript Isolation

JavaScript to .NET

Static .NET method call

Instance method call

Implementing an existing JavaScript library

Summary

Chapter 11: Managing State

Technical requirements

Storing data on the server side

Storing data in the URL

Route constraints

Using a query string

Scenarios that are not that common

Implementing browser storage

Creating an interface

Implementing Blazor Server

Implementing WebAssembly

Implementing the shared

Using an in-memory state container service

Implementing real-time updates on Blazor Server

Implementing real-time updates on Blazor WebAssembly

Summary

Section 3:Debug, Test, and Deploy

Chapter 12: Debugging

Technical requirements

Making things break

Debugging Blazor Server

Debugging Blazor WebAssembly

Debugging Blazor WebAssembly in the web browser

Hot reload (almost the real thing)

Summary

Chapter 13: Testing

Technical requirements

What is bUnit?

Setting up a test project

Mocking the API

Writing tests

Authentication

Testing JavaScript

Summary

Chapter 14: Deploy to Production

Technical requirements

Continuous delivery options

Deploying the database

Hosting options

Hosting Blazor Server

Hosting Blazor WebAssembly

Hosting on IIS

Summary

Chapter 15: Where to Go from Here

Technical requirements

Learnings from running Blazor in production

Solving memory problems

Solving concurrency problems

Solving errors

Old browsers

Next steps

The community

The components

Summary

Why subscribe?

Other Books You May Enjoy

Preface

Until now, creating interactive web pages meant using JavaScript. But with Blazor, Microsoft's new way to create .NET web applications, developers can easily build interactive and rich web applications using C#. This book will guide you through the most commonly encountered scenarios when starting your journey with Blazor.

Firstly, you'll discover how to leverage the power of Blazor and learn what you can do with both the server side and WebAssembly. By showing you how all the elements work together practically, the book will help you solve some of the common roadblocks that developers face. As you advance, you'll learn how to create server-side Blazor and Blazor WebAssembly projects, how Razor syntax works, and how to validate forms and create your own components. The book then introduces you to the key concepts involved in web development with Blazor, which you will be able to put into practice straight away.

By the end of this Blazor book, you'll have gained the confidence to create and deploy production-ready Blazor applications.

Who this book is for

The book is for web developers and software developers who want to explore Blazor to learn how to build dynamic web UIs. This book assumes familiarity with C# programming and web development concepts.

What this book covers

Chapter 1, Hello Blazor, will teach you about the difference between server-side and client-side Blazor. You will get an overview of how the technology works and a brief history of where Blazor comes from. Knowing the structure and differences between the hosting models is essential for understanding the technology.

Chapter 2, Creating Your First Blazor App, helps you understand how to install and set up your development environment. You will create your first Blazor app (both server-side and client-side) and learn about the structure of the project template.

Chapter 3, Introducing Entity Framework Core, teaches you how to create your database where you will store your data (blog posts, categories, and tags). You will be using the dotnet tool to create a new project to get a feel for the tool.

Chapter 4, Understanding Basic Blazor Components, digs deeper into components, life cycle events, adding parameters, and sharing parameters between components. You will also create reusable components in this chapter.

Chapter 5, Creating Advanced Blazor Components, digs even deeper into components, adding functionality such as child components, cascading parameters, and values, and covering how to use actions and callbacks.

Chapter 6, Building Forms with Validation, takes a look at forms, how to validate forms, and how to build your own validation mechanism. This chapter will cover the most common use cases when it comes to handling forms, such as file upload, text, numbers, and triggering code when checking a checkbox.

Chapter 7, Creating an API, looks at creating an API. When using Blazor WebAssembly, we need an API to get data.

Chapter 8, Authentication and Authorization, looks at adding authentication and authorization to Blazor and making sure navigation such as redirecting to a login page works as expected.

Chapter 9, Sharing Code and Resources, teaches you how it is possible to share code between client-side and server-side Blazor projects by adding all the things you need into a shared library. In this chapter, you will build a shared library that can be packaged as a NuGet package and shared with others.

Chapter 10, JavaScript Interop, explores how you can leverage JavaScript libraries when using Blazor and make calls from C# to JavaScript. You will also take a look at how JavaScript is able to call C# functions in our Blazor app.

Chapter 11, Managing State, looks into the different ways of managing state (persisting data), such as using LocalStorage or just keeping data in memory by using dependency injection. You will not only cover persisting data in a database, but you will also cover how dependency injection works on the different project types.

Chapter 12, Debugging, teaches you how to debug your applications and add extended logging to figure out what's wrong in your application. You will not only look at traditional debugging but also at debugging C# code directly from within the web browser.

Chapter 13, Testing, looks at automated testing so that you can make sure your components work as they should (and continue to do so). There is no built-in method to test Blazor applications but there is a really good community project called bUnit.

Chapter 14, Deploying to Production, will take you through the different things you need to think about when it comes to running Blazor in production.

Chapter 15, Where to Go from Here, is a short chapter with a call to action, some resources you can use, and a finale.

To get the most out of this book

I recommend that you read the first few chapters to make sure that you are up to speed with the basic concepts of Blazor in general. The project we are creating is adapted for real-world use but some parts are left out, such as proper error handing. You should, however, get a good grasp of the building blocks of Blazor.

The book focuses on using Visual Studio 2019; that said, though, feel free to use whatever version you are comfortable with that supports Blazor.

If you are using the digital version of this book, we advise you to type the code yourself or access the code via the GitHub repository (link available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

I would love for you to share your progress while reading this book or in Blazor development in general. Tweet me @EngstromJimmy.

I hope you have as much fun reading this book as I had writing it.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Web-Development-with-Blazor. In case there's an update to the code, it will be updated on the existing GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://static.packt-cdn.com/downloads/9781800208728_ColorImages.pdf.

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "In this case, when the page gets downloaded, it will trigger a download of the blazor.webassembly.js file."

A block of code is set as follows:

public void ConfigureServices(IServiceCollection services)

{

    services.AddRazorPages();

    services.AddServerSideBlazor();

    services.AddSingleton<WeatherForecastService>();

}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<div class="top-row pl-4 navbar navbar-dark">

    <a class="navbar-brand" href="">MyBlogServerSide</a>

    <button class="navbar-toggler"

        @onclick="ToggleNavMenu">

Any command-line input or output is written as follows:

dotnet new blazorserver -o BlazorServerSideApp

cd MyBlog.Data

Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Select System info from the Administration panel."

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, mention the book title in the subject of your message and email us at [email protected].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.

Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you've read Web Development with Blazor, we'd love to hear your thoughts! Scan the QR code below to go straight to the Amazon review page for this book and share your feedback.

https://www.amazon.in/review/create-review/error?asin=1-800-20872-3&

Your review is important to us and the tech community and will help us make sure we're delivering excellent quality content.

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, BlazorChapter 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 BlazorIntroducing WebAssemblyIntroducing .NET 5Introducing 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 languages that can run on top of WebAssembly. Here is a great collection of some of these languages: https://github.com/appcypher/awesome-wasm-langs.

WebAssembly is super performant (near-native speeds) – so performant that game engines have already adapted this technology for that very reason. Unity, as well as Unreal Engine, can be compiled into WebAssembly.

Here are a couple of examples of games running on top of WebAssembly:

Angry Bots (Unity): https://beta.unity3d.com/jonas/AngryBots/Doom: https://wasm.continuation-labs.com/d3demo/

This is an amazing list of different WebAssembly projects: https://github.com/mbasso/awesome-wasm.

This section touched the surface of how WebAssembly works and in most cases, you won't need to know much more than that. We will dive into how Blazor uses this technology later in this chapter.

To write Blazor apps, we must leverage the power of .NET 5, which we'll look at next.

Introducing .NET 5

To build Blazor apps, we must use .NET 5. 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 of the journey 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 CoreMono/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 are used to, so we do not have to worry that merging all the different .NET versions is going to result in a bloated .NET.

Thanks to the .NET platform, you will be able to reach all the platforms we talked about at the beginning of this chapter (web, desktop, mobile, games, the cloud (or server side), AI, and even IoT) using only C# and with the same tooling.

Now that you know about some of the surrounding technologies, in the next section, it's time to introduce the main character of this book: Blazor.

Introducing Blazor

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 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 to himself, 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. For most people, this would have been an amazing demo, but Steve wanted to take it one step further. He thought, is it possible to create a simple web framework on top of this?, and went on to see if he could get the tooling working as well.

When it was time for his session, he had a working sample where he could create a new project, create a todo-list with great tooling support, and then run the project inside the browser.

Damian Edwards (the .NET team) and David Fowler (the .NET team) were at the NDC conferences as well. Steve showed them what he was about to demo, and they described the event as their heads exploded and their jaws dropped.

And that's how the prototype of Blazor came into existence.

The name Blazor comes from a combination of Browser and Razor (which is the technology used to combine code and HTML). Adding an L made the name sound better, but other than that, it has no real meaning or acronym.

There are a couple of different flavors of Blazor Server, including Blazor WebAssembly, WebWindow, and Mobile Bindings. There are some pros and cons of the different versions, all of which I will cover in the upcoming sections and chapters.

Blazor Server

Blazor Server uses SignalR to communicate between the client and the server, as shown in the following diagram:

Figure 1.2 – Overview of Blazor Server

SignalR is an open source, real-time communication library that will create a connection between the client and the server. SignalR can use many different means of transporting data and automatically select the best transport protocol for you, based on your server and client capabilities. SignalR will always try to use WebSockets, which is a transport protocol built into HTML5. If WebSockets is not enabled for any reason, it will gracefully fall back to another protocol.

Blazor is built with reusable UI elements called components (more on components in Chapter 3, Introducing Entity Framework Core). Each component contains C# code, markup, and can even include another component. You can use Razor syntax to mix markup and C# code or even do everything in C# if you wish to. The components can be updated by user interaction (pressing a button) or by triggers (such as a timer).

The components get rendered into a render tree, a binary representation of the DOM that contains object states and any properties or values. The render tree will keep track of any changes compared to the previous render tree, and then send only the things that changed over SignalR using a binary format to update the DOM.

On the client side, JavaScript will receive the changes and update the page accordingly. If we compare this to traditional ASP.NET, we only render the component itself, not the entire page, and we only send over the actual changes to the DOM, not the entire page.

There are, of course, some disadvantages to Blazor Server:

You need to always be connected to the server since the rendering is done on the server. If you have a bad internet connection, the site might not work. The big difference compared to a non-Blazor Server site is that a non-Blazor Server site can deliver a page and then disconnect until it requests another page. With Blazor, that connection (SignalR) must always be connected (minor disconnections are ok).There is no offline/PWA mode since it needs to be connected.Every click or page update must do a round trip to the server, which might result in higher latency. It is important to remember that Blazor Server will only send the data that was changed. I have not experienced any slow response times.Since we have to have a connection to the server, the load on that server increases and makes scaling difficult. To solve this problem, you can use the Azure SignalR hub, which will handle the constant connections and let your server concentrate on delivering content.To be able to run it, you have to host it on an ASP.NET Core-enabled server.

However, there are advantages to Blazor Server as well:

It contains just enough code to establish that the connection is downloaded to the client so that the site has a small footprint.Since we are running on the server, the app can take full advantage of the server's capabilities.The site will work on older web browsers that don't support WebAssembly.The code runs on the server and stays on the server; there is no way to decompile the code.Since the code is executed on your server (or in the cloud), you can make direct calls to services and databases within your organization.

At my workplace, we already had a large site in place, so we decided to use Blazor Server for our projects. We had a customer portal and an internal CRM tool. Our approach was to take one component at a time and convert it into a Blazor component.

We quickly realized that, in most cases, it was faster to remake the component in Blazor rather than continuing to use ASP.NET MVC and add functionality on top of that. The User Experience (UX) for the end user became even better as we converted.

The pages loaded faster, we could reload parts of the page as we needed instead of the whole page, and so on.

We did find that Blazor introduced a new problem, though: the pages became too fast. Our users didn't understand if data had been saved because nothing happened; things did happen, but too fast for the users to notice. Suddenly, we had to think more about UX and how to inform the user that something had changed. This is, of course, a very positive side effect from Blazor in my opinion.

Blazor Server is not the only way to run Blazor – you can also run it on the client (in the web browser) using WebAssembly.

Blazor WebAssembly

There is another option: instead of running Blazor on a server, you can run it inside your web browser using WebAssembly.

As we mentioned previously, there is currently no way to compile C# into WebAssembly. Instead, Microsoft has taken the mono runtime (which is written in C) and compiled that into WebAssembly.

The WebAssembly version of Blazor works very similar to the server version, as shown in the following diagram. We have moved everything off the server and it is now running within our web browser:

Figure 1.3 – Overview of Blazor Web Assembly

A render