Search icon
Subscription
0
Cart icon
Close icon
You have no products in your basket yet
Save more on your purchases!
Savings automatically calculated. No voucher code required
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
$9.99 | ALL EBOOKS & VIDEOS
Over 7,000 tech titles at $9.99 each with AI-powered learning assistants on new releases
Web Development with Blazor - Third Edition
Web Development with Blazor - Third Edition

Web Development with Blazor: A practical guide to building interactive UIs with C# 12 and .NET 8, Third Edition

By Jimmy Engström
$43.99 $9.99
Full star icon Full star icon Full star icon Full star icon Full star icon 5 (1 Ratings)
Book Apr 2024 366 pages 3rd Edition
eBook
$43.99 $9.99
Print
$54.99
Subscription
$15.99 Monthly
eBook
$43.99 $9.99
Print
$54.99
Subscription
$15.99 Monthly

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon AI Assistant (beta) to help accelerate your learning
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now
Table of content icon View table of contents Preview book icon Preview Book

Web Development with Blazor - Third Edition

Hello Blazor

Thank you for picking up your copy of Web Development with Blazor. This book intends to get you started as quickly and smoothly 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 begin your journey with Blazor and will also dive into a few more advanced scenarios later on. This book aims to show you what Blazor is – Blazor Server, Blazor WebAssembly, Blazor Hybrid, and on top of that, the new Server-Side Rendering (SSR) – and how it all works practically to help you avoid traps.

This is the book’s third edition; much has happened since the first edition. .NET 6 and .NET 7 were released, and for the second edition, I updated the content to reflect the changes and the new functionality we got.

This edition has been updated to include all the new things in .NET 8, and let me tell you, that is a lot.

I do Blazor presentations all over the world, and there are common questions that I get asked a lot. Without going into too much detail, they are often related to download size or time when it comes to Blazor WebAssembly and continuous connection to Blazor Server. In .NET 8, we can leverage a new mode, SSR, that solves all of these problems in one swift blow. Okay, maybe not all problems, but we are well on our way to solving them. 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 Blazor WebAssembly, Blazor Server, Blazor Hybrid, and SSR. There are a few differences between the different ways of running Blazor; I will point them 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 (Blazor WebAssembly, Blazor Server, or Blazor Hybrid) is best for you.

In this chapter, we will cover the following topics:

  • Why Blazor?
  • Preceding Blazor
  • Introducing WebAssembly
  • Introducing .NET 8
  • 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 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 if you are new to the world of .NET.

Why Blazor?

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

I said, “Yes, yes I do”.

He then continued with a long remark telling me 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 Single-Page Application (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 an 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 the technology, we need to explore other rabbit holes.

Blazor is an excellent choice for .NET developers to write interactive web applications without needing to learn (or keep up with) everything we just mentioned. We can leverage our existing C# knowledge and the packages we use and share code between the server and client.

I usually say, “Blazor removes all the things I hate about web development.” I guess the saying should be, “Blazor can remove all the things I hate about web development.” With Blazor, it is still possible to do JavaScript interop and use JavaScript frameworks or other SPA frameworks from within Blazor, but we don’t have to.

Blazor has opened a door where I can feel productive and confident I am creating a great user experience for my users, with my existing C# knowledge.

Preceding Blazor

You probably didn’t get this book to read about JavaScript, but it helps to remember that we came 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 where we came from.

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 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 – that is, switching between a server (most likely C#, if you are reading this book) to a frontend 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 more minor, which has rendered jQuery obsolete in many cases.

JavaScript differs slightly from other languages since it is not object-oriented or typed, for example. In 2010, Anders Hejlsberg (known for being C#, Delphi, and Turbo Pascal’s original language designer) started working on TypeScript. This object-oriented language 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 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 primary focus will be on developing interactive web applications mainly using C#.

Now, we know a bit about the history of 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 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 JavaScript) 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; don’t worry – Blazor will solve this for us).

Let’s look at some code to get a bit more familiar with WebAssembly.

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 but it requires the installation of some tooling so we will not do this all the way. The point here is just to give us a feeling of how WebAssembly works under the hood. Consider this code:

int main() {
  return 1+2;
}

The result of this will be the number 3.

WebAssembly is a stack machine language, which means that it uses a stack to perform its operations.

Consider this code:

1+2

Most compilers will optimize the code and 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. Even though we never need to go to this level to understand WebAssembly (Blazor handles all of that for us), we will use C code and other libraries compiled into WebAssembly later in the book (Chapter 16, Going Deeper into WebAssembly).

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 adopted 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:

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

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

To write Blazor apps, we can leverage the power of .NET 8, which we’ll look at next.

Introducing .NET 8

.NET is a platform developed by Microsoft for building different types of applications, including web, mobile, and desktop applications. 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 re-envision the whole .NET platform, build it in a completely new way, and make it run on even more platforms.

There were 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 was the start of our journey toward one single .NET. With this unified toolchain, the experience of creating, running, and so on became the same across all the different project types. “Framework” and “Core” were dropped from the name. .NET 5 is still modular in a similar way to what 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.

Blazor has been around for a while now. In .NET Core 3, the first version of Blazor Server was released, and at Microsoft Build in 2020, Microsoft released Blazor WebAssembly.

In .NET 5, we got a lot of new components for Blazor – pre-rendering and CSS isolation to name a couple of things. Don’t worry; we will go through all these things throughout the book.

In .NET 6, we got even more functionality, like Hot Reload, co-located JavaScript, new components, and much more, all of which we will explore throughout the book.

In .NET 7, we got even more enhancements for Blazor developers. We got performance improvements and get/set/after modifiers, among other things.

In November 2023, Microsoft released .NET 8, and with that, everything changed. During development, this new way of developing Blazor apps was called “Blazor United,” which is a name they now have updated to simply Blazor. This is the new way of creating Blazor applications and it is an awesome way. But let’s save something for later chapters as well.

.NET 8 brought us performance improvements, native Define, better source generators, and so much more. It is also an LTS (Long-Term Support) version.

Looking at the enhancements and number of features, I can only conclude that Microsoft believes in Blazor, and so do I.

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 framework. That’s a lot of buzzwords in the same sentence, but simply put, it means that you can create interactive web applications using HTML, CSS, and C# with full support for bindings, events, forms and validation, dependency injection, debugging, and much more, with Blazor. 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 in the browser. This would have been a fantastic demo for most people, but Steve wanted to take it further. He thought, Is it possible to create a simple web framework on top of this?, and went on to see if he could also get the tooling working.

When it was time for his session, he had a working sample to create a new project, create a to-do list with great tooling support, and run the project in the browser.

Damian Edwards (the .NET team) and David Fowler (the .NET team) were also at the NDC conference. 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 few different flavors of Blazor, including Blazor Server, Blazor WebAssembly, Blazor Hybrid (using .NET MAUI), and Server-Side Rendering.

The different versions have some pros and cons, 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.1: 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 selects the best transport protocol 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, it will gracefully fall back to another protocol.

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

The components are rendered into a render tree, a binary representation of the DOM containing 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.

JavaScript will receive the changes on the client side 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 whole page.

There are advantages to Blazor Server:

  • It contains just enough code to establish that the connection is downloaded to the client, so the site has a small footprint, which makes the site startup really fast.
  • Since everything is rendered on the server, Blazor Server is more SEO-friendly.
  • Since we are running on the server, the app can fully utilize 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.

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

  • 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 okay).
  • There is no offline/PWA (Progressive Web App) 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 changed data. I have not experienced any slow response times personally.
  • 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 to handle the constant connections and let your server concentrate on delivering content.
  • Each connection stores the information in the server’s memory, increasing memory use and making load balancing more difficult.
  • To be able to run Blazor Server, you have to host it on an ASP.NET Core-enabled server.

At my workplace, we already had a large site, so we decided to use Blazor Server for our projects. We had a customer portal and an internal CRM tool, and 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 continue to use ASP.NET MVC and add functionality. 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 found that Blazor introduced a new problem: the pages became too fast. Our users didn’t understand whether 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 of Blazor.

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.

The Mono runtime is a tool that lets you run programs made with C# and other .NET languages on various operating systems, not just Windows.

Microsoft has taken the Mono runtime (which is written in C) and compiled that into WebAssembly.

The WebAssembly version of Blazor works very similarly 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.2: Overview of Blazor WebAssembly

A render tree is still created, and instead of running the Razor pages on the server, they are now running inside our web browser. Instead of SignalR, since WebAssembly doesn’t have direct DOM access, Blazor updates the DOM with direct JavaScript interop.

The Mono runtime that’s compiled into WebAssembly is called dotnet.wasm. The page contains a small piece of JavaScript that will make sure to load dotnet.wasm. Then, it will download blazor.boot.json, a JSON file containing all the files the application needs to run, as well as the application’s entry point.

If we look at the default sample site that is created when we start a new Blazor project in Visual Studio, the Blazor.boot.json file contains 63 dependencies that need to be downloaded. All the dependencies get downloaded and the app boots up.

As we mentioned previously, dotnet.wasm is the mono runtime that’s compiled into WebAssembly. It runs .NET DLLs – the ones you have written and the ones from .NET Framework (which is needed to run your app) – in your browser.

When I first heard of this, I got a bit of a bad taste. It’s running the whole .NET runtime in my browser?! But then, after a while, I realized how amazing that is. You can run any .NET Standard DLLs in your web browser.

In the next chapter, we will look at exactly what happens and in what order code gets executed when a WebAssembly app boots up.

There are, of course, some advantages of Blazor WebAssembly:

  • Since the code runs in the browser, creating a PWA is easy.
  • It does not require a connection to the server. Blazor WebAssembly will work offline.
  • Since we’re not running anything on the server, we can use any backend server or file share (no need for a .NET-compatible server in the backend).
  • No round trips mean that you can update the screen faster (that is why there are game engines that use WebAssembly).

There are some disadvantages to Blazor WebAssembly as well:

  • Even if we compare it to other large sites, the footprint of Blazor WebAssembly is large and there are a large number of files to download.
  • To access any on-site resources, you will need to create a Web API to access them. You cannot access the database directly.
  • The code runs in the browser, meaning it can be decompiled. All app developers are used to this, but it is perhaps not as common for web developers.

I wanted to put WebAssembly to the test! When I was seven years old, I got my first computer, a Sinclair ZX Spectrum. I remember that I sat down and wrote the following:

10 PRINT "Jimmy"
20 GOTO 10

That was my code; I made the computer write my name on the screen over and over!

That was when I decided that I wanted to become a developer to make computers do stuff.

After becoming a developer, I wanted to revisit my childhood and decided I wanted to build a ZX Spectrum emulator. In many ways, the emulator has become my test project instead of a simple Hello World when I encounter new technology. I’ve had it running on a Gadgeteer, Xbox One, and even a HoloLens (to name a few platforms/devices).

But is it possible to run my emulator in Blazor?

It took me only a couple of hours to get the emulator working with Blazor WebAssembly by leveraging my already built .NET Standard DLL; I only had to write the code specific to this implementation, such as the keyboard and graphics. This is one of the reasons Blazor (both Server and WebAssembly) is so powerful: it can run libraries that have already been made. Not only can you leverage your knowledge of C# but you can also take advantage of the large ecosystem and .NET community.

You can find the emulator here: http://zxbox.com. This is one of my favorite projects to work on, as I keep finding ways to optimize and improve the emulator.

Building interactive web applications used to only be possible with JavaScript. Now, we know we can use Blazor WebAssembly and Blazor Server, but which one of these new options is the best?

Blazor WebAssembly versus Blazor Server

Which one should we choose? The answer is, as always, it depends. You have seen the advantages and disadvantages of both.

If you have a current site that you want to port over to Blazor, I recommend going for the server side; once you have ported it, you can make a new decision as to whether you want to go for WebAssembly as well. This way, it is easy to port parts of the site, and the debugging experience is better with Blazor Server.

Suppose your site runs on a mobile browser or another unreliable internet connection. In that case, you might consider going for an offline-capable (PWA) scenario with Blazor WebAssembly since Blazor Server needs a constant connection.

The startup time for WebAssembly is a bit slow, but there are ways to combine the two hosting models to have the best of both worlds. We will cover this in Chapter 16, Going Deeper into WebAssembly.

There is no silver bullet when it comes to this question, but read up on the advantages and disadvantages and see how they affect your project and use cases.

With .NET 8, we have more opportunities to mix and match the different technologies, so the question becomes less relevant since we can choose to have one specific component running Blazor Server and another running Blazor WebAssembly (more on that later in this chapter).

We can run Blazor server-side and on the client, but what about desktop and mobile apps?

Blazor Hybrid/.NET MAUI

.NET MAUI is a cross-platform application framework. The name comes from .NET Multi-platform App UI and is the next version of Xamarin. We can use traditional XAML code to create our cross-platform application just as with Xamarin. However, .NET MAUI also targets desktop operating systems that will enable running our Blazor app on Windows and even macOS.

.NET MAUI has its own template that enables us to run Blazor inside of a .NET MAUI application using a Blazor WebView. This is called Blazor Hybrid. Blazor Hybrid works in a similar way to the other hosting models (Blazor Server and Blazor WebAssembly). It has a render tree and updates the Blazor WebView, which is a browser component in .NET MAUI. This is a bit oversimplified perhaps but we have a whole chapter on Blazor Hybrid (Chapter 18, Visiting .NET MAUI). Using Blazor Hybrid, we also get access to native APIs (not only Web APIs), making it possible to take our application to another level.

We will take a look at .NET MAUI in Chapter 18, Visiting .NET MAUI.

Sometimes we don’t need interactive components, we just need to render some content and be done. In .NET 8, we have a new way of doing that.

Server-Side Rendering (SSR)

Server-side rendering is the new kid on the Blazor block. It makes it possible to use the Razor syntax to build web pages that are rendered server-side just like MVC or Razor Pages. This is called Static Server-side Rendering. It has some additional features that will keep scrolling in the previous position even though the whole page is reloaded, which is called enhanced form navigation. This will only render static pages, with no interactivity (with a few exceptions). There is also something called streaming rendering that will load the page even faster. This mode is called streaming server-side rendering. During long-running tasks, streaming rendering will first send the HTML it has and then update the DOM once the long-running task is complete, giving it a more interactive feeling.

But sometimes we want interactivity, and choosing between Blazor Server or Blazor WebAssembly can be a bit hard. But what if I told you we don’t have to choose anymore? We can mix it up.

The feature formerly known as Blazor United

This next feature was called “Blazor United” when Microsoft first spoke of it but is now simply part of Blazor, not an extra feature. I still want to mention the name because the community still uses it, and chances are you might have heard it and are wondering why I am not mentioning it.

It is a really cool feature: we can pick and choose what components will run using SSR and what components will use Blazor Server, Blazor WebAssembly, or (hope you are sitting down for this) a mix of the two. Previously, we had to choose one of the two (Blazor Server or Blazor WebAssembly), but now we can combine the technologies to get the best of both worlds. We can now tell each component how we want it to render and we can mix and match throughout the site. The new “auto” feature means the first time our users visit the site, they will run Blazor Server. This is to get a quick connection and get data to the user as quickly as possible. In the background, the WebAssembly version is downloaded and cached so the next time they visit the site, it will use the cached Blazor WebAssembly version. If the WebAssembly version can be downloaded and started within 100 milliseconds, it will load only the WebAssembly version. If it takes longer, it will start up Blazor Server and download in the background. This is one of the ways we can speed up the download speed of our Blazor site. We can combine all of these technologies, pre-render the content on the server using Static Server-side Rendering, make the site interactive using Blazor Server (using SignalR), and then switch over to Blazor WebAssembly without the “long” download time.

Summary

In this chapter, we 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.

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

We talked about why Blazor is a good choice for .NET developers.

We looked at SSR and (according to me) the most exciting feature in .NET 8 for Blazor, what was known as Blazor United.

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.

In the next chapter, we’ll get our hands dirty by configuring our development environment and creating and examining our first Blazor app.

Further reading

As a .NET developer, you might be interested in 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/WebDevBlazor3e

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Create a production-ready Blazor application from start to finish
  • Find out how, when, and why to use Blazor Server and Blazor WebAssembly, as well as Blazor Hybrid
  • Explore crucial new coverage of streaming rendering, server-side rendering (SSR), flexible hosting models, and Blazor templates

Description

Web Development with Blazor is your essential guide to building and deploying interactive web applications in C# – without relying on JavaScript. Written by an early Blazor adopter and updated for .NET 8, this book takes you through the end-to-end development of an example app, helping you to overcome common challenges along the way. You’ll pick up both Blazor Server and Blazor WebAssembly and discover cutting-edge tools to enrich your development experience. Responding to evolving needs, this edition introduces flexible hosting models, allowing you to mix and match hosting approaches to create flexible and scalable Blazor applications. It also presents the new Blazor templates, which provide ready-made solutions to simplify and expedite development. You'll learn about the game-changing server-side rendering (SSR), a hybrid hosting model blending the strengths of Blazor Server and Blazor WebAssembly, as well as streaming rendering, a new technique that boosts the performance and user experience of Blazor apps. By the end of this book, you'll have the confidence you need to create and deploy production-ready Blazor applications using best practices, along with a big-picture view of the Blazor landscape.

What you will learn

Understand how and when to use Blazor Server, Blazor WebAssembly, and Blazor Hybrid Learn how to build simple and advanced Blazor components Explore how Minimal APIs work and build your own API Discover how to use streaming rendering and server-side rendering (SSR) Mix and match different hosting models to create flexible and scalable Blazor apps Familiarise yourself with the new Blazor templates that simplify development Debug your Blazor Server and Blazor WebAssembly applications

Product Details

Country selected

Publication date : Apr 29, 2024
Length 366 pages
Edition : 3rd Edition
Language : English
ISBN-13 : 9781835465912
Category :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon AI Assistant (beta) to help accelerate your learning
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Buy Now

Product Details


Publication date : Apr 29, 2024
Length 366 pages
Edition : 3rd Edition
Language : English
ISBN-13 : 9781835465912
Category :

Table of Contents

22 Chapters
Preface Chevron down icon Chevron up icon
1. Hello Blazor Chevron down icon Chevron up icon
2. Creating Your First Blazor App Chevron down icon Chevron up icon
3. Managing State – Part 1 Chevron down icon Chevron up icon
4. Understanding Basic Blazor Components Chevron down icon Chevron up icon
5. Creating Advanced Blazor Components Chevron down icon Chevron up icon
6. Building Forms with Validation Chevron down icon Chevron up icon
7. Creating an API Chevron down icon Chevron up icon
8. Authentication and Authorization Chevron down icon Chevron up icon
9. Sharing Code and Resources Chevron down icon Chevron up icon
10. JavaScript Interop Chevron down icon Chevron up icon
11. Managing State – Part 2 Chevron down icon Chevron up icon
12. Debugging the Code Chevron down icon Chevron up icon
13. Testing Chevron down icon Chevron up icon
14. Deploying to Production Chevron down icon Chevron up icon
15. Moving from, or Combining with, an Existing Site Chevron down icon Chevron up icon
16. Going Deeper into WebAssembly Chevron down icon Chevron up icon
17. Examining Source Generators Chevron down icon Chevron up icon
18. Visiting .NET MAUI Chevron down icon Chevron up icon
19. Where to Go from Here Chevron down icon Chevron up icon
20. Other Books You May Enjoy Chevron down icon Chevron up icon
21. Index Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Full star icon Full star icon Full star icon Full star icon Full star icon 5
(1 Ratings)
5 star 100%
4 star 0%
3 star 0%
2 star 0%
1 star 0%
Filter icon Filter
Top Reviews

Filter reviews by


David Johansson Jun 16, 2024
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Good book. Good quality digital editions!
Feefo Verified review Feefo image
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.