Book Image

Blazor WebAssembly by Example, 2e - Second Edition

By : Toi B. Wright

5 (1)

Book Image

Blazor WebAssembly by Example, 2e - Second Edition

5 (1)

By: Toi B. Wright

Overview of this book

Blazor WebAssembly helps developers build web applications without the need for JavaScript, plugins, or add-ons. With its continued growth in popularity, getting started with Blazor now can open doors to new career paths and exciting projects – and Blazor WebAssembly by Example will make your first steps easier. This is a project-based guide that will teach you how to build single-page web applications with Blazor, focusing heavily on the practical over the theoretical by providing detailed step-by-step instructions for each project. The author also includes a video for each project showing her following the step-by-step instructions, so readers can use them if they're unsure about any particular step. In this updated edition, you'll start by building simple standalone web applications and gradually progress to developing more advanced hosted web applications with SQL Server backends. Each project will cover a different aspect of the Blazor WebAssembly ecosystem, such as Razor components, JavaScript interop, security, event handling, debugging on the client, application state, and dependency injection. The book’s projects get more challenging as you progress, but you don’t have to complete them in order, which makes this book a valuable resource for beginners as well as those who just want to dip into specific topics. By the end of this book, you will have experience and lots of know-how on how to build a wide variety of single-page web applications with .NET, Blazor WebAssembly, and C#.

Preface

Who this book is for

What this book covers

To get the most out of this book

Free Chapter

Introduction to Blazor WebAssembly

Introduction to Blazor WebAssembly

Benefits of using the Blazor framework

What is WebAssembly?

Setting up your PC

Further reading

Building Your First Blazor WebAssembly Application

Building Your First Blazor WebAssembly Application

Creating the Demo Blazor WebAssembly Project Technical Requirements

Razor components

Creating the Demo Blazor WebAssembly project

Further reading

Debugging and Deploying a Blazor WebAssembly App

Debugging and Deploying a Blazor WebAssembly App

Technical requirements

Debugging a Blazor WebAssembly.app

Debugging in Visual Studio

Understanding logging

Handling exceptions

Using ahead-of-time (AOT) compilation

Deploying a Blazor WebAssembly app to Microsoft Azure

Creating the “guess the number” project

Further reading

Building a Modal Dialog Using Templated Components

Building a Modal Dialog Using Templated Components

Technical requirements

Using RenderFragment parameters

Using EventCallback parameters

Understanding CSS isolation

Creating the modal dialog project

Further reading

Building a Local Storage Service Using JavaScript Interoperability (JS Interop)

Building a Local Storage Service Using JavaScript Interoperability (JS Interop)

Technical requirements

Why use JavaScript?

Exploring JS interop

Using local storage

Creating the local storage service

Further reading

Building a Weather App as a Progressive Web App (PWA)

Building a Weather App as a Progressive Web App (PWA)

Technical requirements

Understanding PWAs

Working with manifest files

Working with service workers

Using the CacheStorage API

Using the Geolocation API

Using the OpenWeather One Call API

Further reading

Building a Shopping Cart Using Application State

Building a Shopping Cart Using Application State

Technical requirements

Introducing the application state

Understanding DI

Creating the shopping cart project

Further reading

Building a Kanban Board Using Events

Building a Kanban Board Using Events

Technical requirements

Attribute splatting

Arbitrary parameters

Creating the Kanban board project

Further reading

Uploading and Reading an Excel File

Uploading and Reading an Excel File

Technical requirements

Uploading files

Using virtualization

Reading Excel files

Creating the Excel reader project

Further reading

Using Azure Active Directory to Secure a Blazor WebAssembly Application

Using Azure Active Directory to Secure a Blazor WebAssembly Application

Technical requirements

Understanding the difference between authentication and authorization

Working with authentication

Controlling the user interface using authorization

Creating the claims viewer project

Further reading

Building a Task Manager Using ASP.NET Web API

Building a Task Manager Using ASP.NET Web API

Technical requirements

Understanding hosted applications

Using the HttpClient service

Using JSON helper methods

Creating the TaskManager project

Further reading

Building an Expense Tracker Using the EditForm Component

Building an Expense Tracker Using the EditForm Component

Technical requirements

Creating a data entry form

Using the built-in input components

Using the validation components

Locking navigation

Creating the expense tracker project

Further reading

Other Books You May Enjoy

Other Books You May Enjoy

Index

Customer Reviews

5 (1)

5 star

100%

4 star

0

3 star

0

2 star

0

1 star

0

What is WebAssembly?

WebAssembly is a binary instruction format that allows code written in high-level languages, such as C#, to run on the browser at near-native speed. To run .NET binaries in a web browser, it uses a version of the .NET runtime that has been compiled to WebAssembly. You can think of it as executing natively compiled code in a browser.

WebAssembly is an open standard developed by a W3C Community Group. It was originally announced in 2015, and the first browser that supported it was released in 2017.

WebAssembly goals

When WebAssembly was originally being developed, there were four main design goals for the project. This is a list of the original goals for WebAssembly:

Fast and efficient
Safe
Open
Don’t break the web

WebAssembly is fast and efficient. It is designed to allow developers to write code in any language that can then be compiled to run in the browser. Since the code is compiled, it is fast and performs at near-native speed.

WebAssembly is safe. It does not allow direct interaction with the browser’s DOM. Instead, it runs in its own memory-safe, sandboxed execution environment. You must use JavaScript interop to interact with the DOM. The project in Chapter 5, Building a Local Storage Service Using JavaScript Interoperability (JS interop), will teach you how to use JavaScript interop.

WebAssembly is open. Although it is a low-level assembly language, it can be edited and debugged by hand.

WebAssembly didn’t break the web. It is a web standard that is designed to work with other web technologies. Also, WebAssembly modules can access the same Web APIs that are accessible from JavaScript.

Overall, WebAssembly was able to meet all of the original goals and rapidly gained support from all of the modern browsers.

WebAssembly support

As mentioned earlier, WebAssembly runs on all modern browsers, including mobile browsers. As you can see from the following table, all current versions of the most popular browsers are compatible with WebAssembly:

Browser	Version
Microsoft Edge	Current
Mozilla Firefox, including Android	Current
Google Chrome, including Android	Current
Safari, including iOS	Current
Opera, including Android	Current
Microsoft Internet Explorer	Not Supported

Table 1.2: WebAssembly browser compatibility

IMPORTANT NOTE

Microsoft Internet Explorer is no longer supported by Microsoft as of June 15, 2022. It does not support WebAssembly and will never support WebAssembly.

WebAssembly is a web standard that allows developers to run code written in any language in the browser. It is supported by all modern browsers.

Now that we have discussed the benefits of using the Blazor framework and compared the various hosting models, it’s time to start developing using the Blazor WebAssembly framework. However, before we can get started, you need to set up your PC.