Building Reliable
ApplicationsUsing
React, .NET &Azure
Maurice de Beijer - @mauricedb

Topics
 JavaScript versusTypeScript
 Hosting
 Test-driven development
 API types and updates
 GitWorkflow
 Feature Flags
 Runtime errors
© ABL - The Problem Solver 2

Opinions
Ahead 
© ABL - The Problem Solver 3

Swiss
Cheese
Model
© ABL - The Problem Solver 4

 Maurice de Beijer
 The Problem Solver
 Microsoft MVP
 Freelance lead/developer/instructor
 Twitter: @mauricedb
 Web: http://www.TheProblemSolver.nl
 E-mail: maurice.de.beijer@gmail.com
5
© ABL - The Problem Solver

The React
Newsletter
© ABL - The Problem Solver 6

JavaScript versusTypeScript
© ABL - The Problem Solver 7

TypeScript
© ABL - The Problem Solver 8

Language
features
 Type Unions
 Tuples
 OptionalChaining
 Nullish Coalescing operator
© ABL - The Problem Solver 9

JS Doc  Annotate your JavaScript with JS Doc types
 If you made the mistake of not starting withTypeScript 
© ABL - The Problem Solver 10

MappedTypes
 type RT = Readonly<T>
 type PT = Partial<T>
 type MyProps = React.ComponentProps<typeof MyComponent>
 type Returns = ReturnType<typeof someFunction>;
 type Args = Parameters<typeof someFunction>
© ABL - The Problem Solver 11

ES Modules  Named imports instead of import default
 Better with tooling and discoverability
© ABL - The Problem Solver 12

React and
import default
© ABL - The Problem Solver 13

ESBuild
© ABL - The Problem Solver 14

Hosting the front-end
During development
© ABL - The Problem Solver 15

Vite
© ABL - The Problem Solver 16

Hosting the front-end
In production
© ABL - The Problem Solver 17

Azure Blob
Storage
© ABL - The Problem Solver 18

AzureCDN
© ABL - The Problem Solver 19

Routing Rules
© ABL - The Problem Solver 20

Deploy
From
GitHub
© ABL - The Problem Solver 21

Test-Driven Development
© ABL - The Problem Solver 22

The traditional
testing
pyramid
Manual
End to End
Integration testing
Unit testing

Both windows
are fine
Source

A sturdy latch
Source

A better
testing
pyramid for
the web
Manual
End to End
Integration testing
Unit testing

Cypress
© ABL - The Problem Solver 27

Testing
Front & Back
End
© ABL - The Problem Solver 28

Intercepting
AJAX
Requests
© ABL - The Problem Solver 29

APITypes andUpdates
© ABL - The Problem Solver 30

OpenAPI
© ABL - The Problem Solver 31

Swashbuckle
for the
Azure Function
© ABL - The Problem Solver 32

NSwag
Generates
TypeScript
Interfaces
© ABL - The Problem Solver 33

APIVersion
© ABL - The Problem Solver 34

Required
ValueTypes
© ABL - The Problem Solver 35

ValidateAPI
 Validate all data that crosses an external boundary
 User input
 Data from an API
© ABL - The Problem Solver 36

Type Mapping
© ABL - The Problem Solver 37

Long living
clients
 Some users never close their browser
 The same old version of the SPA can remain active
 Even when a newer version is available on the server
 Send the client version the server with each AJAX request
© ABL - The Problem Solver 38

Checking the
version
© ABL - The Problem Solver 39

AJAX requests
 The public internet is unreliable
 Some requests will fail for random reasons
 Use a retry policy to handle network errors
© ABL - The Problem Solver 40

Retry Policy
© ABL - The Problem Solver 41

Workflow
© ABL - The Problem Solver 42

Workflow
 Use short-lived Git feature branches
 A few hours at most
 Hide new or risky code behind a feature flag
 Initially only available for developers/testers
© ABL - The Problem Solver 43

Release
Strategy
 Release new features to a subset of users first
 Fast Ring with user opt in
 Percentage of users
 One or more companies
 One or more regions/countries
© ABL - The Problem Solver 44

Feature Flags
© ABL - The Problem Solver 45

Feature Flags
 A simple feature flag system is not hard
 But can become quite elaborate
 Consider using a service like Azure App Configuration
 Or a service like LaunchDarkly
© ABL - The Problem Solver 46

Azure
Configuration
Function
© ABL - The Problem Solver 47

React
Configuration
Provider
© ABL - The Problem Solver 48

Conditional
Rendering
© ABL - The Problem Solver 49

Runtime errors
© ABL - The Problem Solver 50

Runtime errors
 Runtime errors need to be tracked
 There is no code without bugs 
 Features like LocalStorage will be disabled for some users
 Azure Application Insights works well
 Tracks unhandled exceptions
 Add an Error Boundary and track component errors
© ABL - The Problem Solver 51

Runtime errors
© ABL - The Problem Solver 52

Application
Insights
© ABL - The Problem Solver 53

Application
Insights
© ABL - The Problem Solver 54

Conclusion
 TypeScript is a must have
 For any serious development
 Use BLOB storage & CDN
 Easy, fast and cheap hosting
 Test-driven development prevents bugs
 Use an End to End tool like Cypress
 API types and updates
 Automate the client types
 Always validate the incoming data
 Workflow
 Use small and very short lived branches
 Use feature flags to hide new code in production
 Runtime errors will happen
 Make sure you track them
© ABL - The Problem Solver 55

Maurice de Beijer
@mauricedb
maurice.de.beijer
@gmail.com
© ABL - The Problem Solver 56