Een kleine React applicatie bouwen met een backend is niet moeilijk. Maar wat als de applicatie groter en complexer wordt? Dan wordt het een ander verhaal. En al helemaal als het een publiek toegankelijke applicatie is. Plotseling blijkt dat allerlei vaak gedane aannames niet meer kloppen. Je krijgt te maken met netwerkstoringen en schaalbaarheid. Verschillende teams die onafhankelijk van elkaar aan de front- en backend werken. Runtime fouten die optreden omdat sommige browsers toch net even anders blijken te werken dan je verwacht. In deze sessie gaat Maurice de Beijer zijn ervaringen delen over hoe je dit aan kan pakken.

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

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

3. Opinions
Ahead 
© ABL - The Problem Solver 3

4. Swiss
Cheese
Model
© ABL - The Problem Solver 4

5.  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

6. The React
Newsletter
© ABL - The Problem Solver 6

7. JavaScript versusTypeScript
© ABL - The Problem Solver 7

8. TypeScript
© ABL - The Problem Solver 8

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

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

11. 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

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

13. React and
import default
© ABL - The Problem Solver 13

14. ESBuild
© ABL - The Problem Solver 14

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

16. Vite
© ABL - The Problem Solver 16

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

18. Azure Blob
Storage
© ABL - The Problem Solver 18

19. AzureCDN
© ABL - The Problem Solver 19

20. Routing Rules
© ABL - The Problem Solver 20

21. Deploy
From
GitHub
© ABL - The Problem Solver 21

22. Test-Driven Development
© ABL - The Problem Solver 22

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

24. Both windows
are fine
Source

25. A sturdy latch
Source

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

27. Cypress
© ABL - The Problem Solver 27

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

29. Intercepting
AJAX
Requests
© ABL - The Problem Solver 29

30. APITypes andUpdates
© ABL - The Problem Solver 30

31. OpenAPI
© ABL - The Problem Solver 31

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

33. NSwag
Generates
TypeScript
Interfaces
© ABL - The Problem Solver 33

34. APIVersion
© ABL - The Problem Solver 34

35. Required
ValueTypes
© ABL - The Problem Solver 35

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

37. Type Mapping
© ABL - The Problem Solver 37

38. 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

39. Checking the
version
© ABL - The Problem Solver 39

40. 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

41. Retry Policy
© ABL - The Problem Solver 41

42. Workflow
© ABL - The Problem Solver 42

43. 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

44. 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

45. Feature Flags
© ABL - The Problem Solver 45

46. 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

47. Azure
Configuration
Function
© ABL - The Problem Solver 47

48. React
Configuration
Provider
© ABL - The Problem Solver 48

49. Conditional
Rendering
© ABL - The Problem Solver 49

50. Runtime errors
© ABL - The Problem Solver 50

51. 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

52. Runtime errors
© ABL - The Problem Solver 52

53. Application
Insights
© ABL - The Problem Solver 53

54. Application
Insights
© ABL - The Problem Solver 54

55. 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

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