Home Web Development Building Blazor WebAssembly Applications with gRPC

Building Blazor WebAssembly Applications with gRPC

By Václav Pekárek
books-svg-icon Book
eBook $24.99 $16.99
Print $30.99
Subscription $15.99 $10 p/m for three months
$10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
BUY NOW $10 p/m for first 3 months. $15.99 p/m after that. Cancel Anytime!
eBook $24.99 $16.99
Print $30.99
Subscription $15.99 $10 p/m for three months
What do you get with a Packt Subscription?
This book & 7000+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook + Subscription?
Download this book in EPUB and PDF formats, plus a monthly download credit
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with a Packt Subscription?
This book & 6500+ ebooks & video courses on 1000+ technologies
60+ curated reading lists for various learning paths
50+ new titles added every month on new and emerging tech
Early Access to eBooks as they are being written
Personalised content suggestions
Customised display settings for better reading experience
50+ new titles added every month on new and emerging tech
Playlists, Notes and Bookmarks to easily manage your learning
Mobile App with offline access
What do you get with eBook?
Download this book in EPUB and PDF formats
Access this title in our online reader
DRM FREE - Read whenever, wherever and however you want
Online reader with customised display settings for better reading experience
What do you get with video?
Download this video in MP4 format
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with video?
Stream this video
Access this title in our online reader
DRM FREE - Watch whenever, wherever and however you want
Online reader with customised display settings for better learning experience
What do you get with Audiobook?
Download a zip folder consisting of audio files (in MP3 Format) along with supplementary PDF
What do you get with Exam Trainer?
Flashcards, Mock exams, Exam Tips, Practice Questions
Access these resources with our interactive certification platform
Mobile compatible-Practice whenever, wherever, however you want
  1. Free Chapter
    Chapter 2: Creating a Blazor WebAssembly Application
About this book
Building Blazor WebAssembly Applications with gRPC will take you to the next level in your web development career. After working through all the essentials of gRPC, Blazor, and source generators, you will be far from a beginner C# developer and would qualify as a developer with intermediate knowledge of the Blazor ecosystem. After a quick primer on the basics of Blazor technology, REST, gRPC, and source generators, you’ll dive straight into building Blazor WASM applications. You’ll learn about everything from two-way bindings and Razor syntax to project setup. The practical emphasis continues throughout the book as you steam through creating data repositories, working with REST, and building and registering gRPC services. The chapters also cover how to manage source generators, C# and debugging best practices, and more. There is no shorter path than this book to solidify your gRPC-enabled web development knowledge. By the end of this book, your knowledge of building Blazor applications with one of the most modern and powerful frameworks around will equip you with a highly sought-after skill set that you can leverage in the best way possible.
Publication date:
November 2022
Publisher
Packt
Pages
196
ISBN
9781804610558

 

Introducing Blazor, gRPC, and Source Generators

Let us start our journey in this book by first getting to know our three main technological co-travelers: Blazor, gRPC, and source generators.

The Blazor framework is an open source web framework developed by Microsoft. It is a free-to-use, single-page application (SPA) framework that enables a smooth development process while writing both the server and client parts of the application in .NET and C#. It can be used for dynamic websites but can also generate static websites without the need for expensive website hosting.

On the other hand, Google Remote Procedure Call (gRPC) is a multi-environment open source Remote Procedure Call (RPC) framework. It uses HTTP/2 for connecting services between data centers, but also for connecting mobile applications and browsers to backend services. gRPC includes optional features for authentication, bidirectional streaming, health checks, and more, along with support for cross-platform client...

 

Technical requirements

All projects in this book will use Windows 11. If you are using an older version of Windows, you can expect some differences.

All of the projects are built using Microsoft Visual Studio 2022 Community Edition version 17.1.1. If you need to install Visual Studio 2022, select Free Download under Community at https://visualstudio.microsoft.com/downloads/. Run the installer. When prompted, select the option for ASP.NET and web development.

Once the installation process completes, the welcome window of Visual Studio will open. You can click the Continue without code link on the right side of the window to open the Visual Studio IDE without any solution.

Tip

If you already have Visual Studio Professional or Enterprise edition, everything should work the same way. However, the newer version (or preview) of Visual Studio can handle some code actions differently. Rider from JetBrains can be used as well.

Our projects require .NET 6.0. If you have installed...

 

Using the Blazor framework to create websites

The Blazor framework can be used in different hosting models. Blazor Server, WebAssembly, and Hybrid hosting models are supported, and each of them has different use cases and advantages and disadvantages.

The Server hosting model uses SignalR technology to send data from the client to the server. Then the server does the work and sends back the data required to update the UI of the application.

The WebAssembly hosting model has its client part of the application downloaded to the client with all the binaries needed to run the application. The WebAssembly application then does all the work on the client’s computer. This approach is faster but requires downloading larger files to the client. Since the end of 2017, all major browsers support WebAssembly, including mobile browsers. For old browsers, WebAssembly needs to be compiled to asm.js by JavaScript polyfill.

The Blazor Hybrid model can also be used to blend the desktop...

 

Understanding the REST API as the default Blazor communication interface

REST is an architecture for distributed systems. It is an easy way to read, edit, or delete data on the server using HTTP calls from the client. Distributed architecture in this context means that multiple servers can handle different parts of the application and communicate through the network. The communication can occur between the browser and the server, but also between multiple servers, where each of them can provide different functionality, such as logging, caching, authentication, and so on.

A REST API (also called a RESTful API) uses URL calls to communicate and is stateless. Thus, every call to the resource (URL) has to have all information to be completed. Each call can be marked as cached, which can lead to performance improvement between the client and the server.

For data manipulation, REST specifies four basic operations: Create, Read, Update, and Delete (CRUD). Each operation has its own...

 

Understanding gRPC and how it is different from REST

gRPC is a way to communicate between services. You can think about it as a kind of API that sends the request to the server and expects some data to be returned. The main difference between a REST API and gRPC is the setup and the way it handles and transports data.

gRPC enables contract-based communication between the client and server. You can imagine this communication to be like a handshake between the client and server over available methods that can be used in future calls. Unlike in a REST API, in gRPC, the client and server share the same configuration, so both ends of the communication have the exact knowledge of the data structure of the transferred objects. The contracts in gRPC are called protocol buffers.

Another big difference between REST and gRPC occurs in terms of communication type. As we learned in the previous section, the REST API is used for communication with JSON or XML data serialization. gRPC, on the...

 

What are source generators and how do they work?

Can you imagine code that writes code for you? With new features started in C# 9, such code is possible. Let’s dive into source generators, which can do exactly what the name says: generate source code.

Source generators are part of the .NET Compiler Platform (Roslyn) SDK, which makes them available everywhere dotnet code can be developed, no matter what IDE you use. The generators read code that you write and can generate some additional code that will be added to the compilation and emitted in the resulting .dll.

First, let me say what source generators can’t do. They can’t modify existing code. It is in the design of source generators to be able to add additional files to the compilation, but they can’t modify or remove existing files. Whether this is good or bad is a long-running discussion.

What source generators can do is they can read a compilation object representing all code that is being...

 

Summary

After reading this chapter, you should know about the Blazor framework and the benefits of using this framework for C# developers over other SPA JavaScript frameworks, because you can use the same language for both frontend and backend development.

We also covered how gRPC is better than, and can replace, the REST API in terms of the growing popularity and platform neutrality, and also lower network usage. You should also have some idea about how source generators can ease development.

Thus, you are now ready to start developing Blazor WebAssembly SPA applications and inspecting the code that goes into the compilation process. You can read .proto files and use them for gRPC communication, for better performance compared to REST.

In the next chapter, we will cover Razor components and syntax, look at page routing, and introduce an overview of our demo project.

 

Further reading

If you want to go deeper into some of the topics of this chapter, the following resources can provide more information:

About the Author
  • Václav Pekárek

    Václav Pekárek is an experienced developer with 10 years of web development experience using .NET and C#. He is also a Microsoft Certified Professional. Václav is the owner of a small IT company in Ostrava, Czech Republic.

    Browse publications by this author
Building Blazor WebAssembly Applications with gRPC
Unlock this book and the full library FREE for 7 days
Start now