1. Azure Community Conference 2021
India’s largest Azure Conference
#AzConfDev

2. #AzConfDev
Maurice de Beijer
The Problem Solver
Freelance lead/developer/instructor

3. #AzConfDev
Building Reliable Applications Using React,
.NET & Azure
Maurice de Beijer - @mauricedb

4. #AzConfDev
Topics
• JavaScript versus TypeScript
• Hosting
• Test-driven development
• API types and updates
• Git Workflow
• Feature Flags
• Runtime errors

5. #AzConfDev
Opinions Ahead 

6. #AzConfDev
Cheese

7. #AzConfDev
Swiss Cheese Model

8. #AzConfDev
JavaScript versus TypeScript

9. #AzConfDev
TypeScript

10. #AzConfDev
Language features
• Type Unions
• Tuples
• Optional Chaining
• Nullish Coalescing operator

11. #AzConfDev
JS Doc
• Annotate your JavaScript with JS Doc types
• If you made the mistake of not starting with TypeScript 

12. #AzConfDev
Mapped Types

13. #AzConfDev
Opaque Types

14. #AzConfDev
ES Modules
Named imports instead of import default
Better with tooling and discoverability

15. #AzConfDev
React and import default

16. #AzConfDev
ESBuild

17. #AzConfDev
Hosting the front-end

18. #AzConfDev
Vite - During development
Next Generation Frontend Tooling

19. #AzConfDev
Azure Blob Storage – At runtime

20. #AzConfDev
Azure CDN

21. #AzConfDev
Routing Rules

22. #AzConfDev
Deploy From GitHub

23. #AzConfDev
Test-Driven Development

24. #AzConfDev
The traditional testing pyramid
Manual
End to End
Integration testing
Unit testing

25. #AzConfDev
Both windows are fine

26. #AzConfDev
A sturdy latch

27. #AzConfDev
A better testing pyramid for the web
Manual
End to End
Integration testing
Unit testing

28. #AzConfDev
Cypress.io

29. #AzConfDev
Cypress.io course 

30. #AzConfDev
Testing Front & Back End

31. #AzConfDev
Intercepting AJAX Requests

32. #AzConfDev
API Types and Updates

33. #AzConfDev
Open API

34. #AzConfDev
Swashbuckle for Azure Function

35. #AzConfDev
Nswag Generates TypeScript/C# Interfaces

36. #AzConfDev
API Version

37. #AzConfDev
Required ValueTypes

38. #AzConfDev
Validate API
Validate all data that crosses an external boundary
User input
Data from an API

39. #AzConfDev
Type Mapping

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

41. #AzConfDev
Checking the version

42. #AzConfDev
AJAX requests
The public internet is unreliable
Some requests will fail for random reasons
Use a retry policy to handle network errors

43. #AzConfDev
Retry Policy

44. #AzConfDev
Workflow

45. #AzConfDev
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

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

47. #AzConfDev
Feature Flags

48. #AzConfDev
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

49. #AzConfDev
Azure Configuration Function

50. #AzConfDev
React Configuration Provider

51. #AzConfDev
Conditional Rendering

52. #AzConfDev
Runtime errors

53. #AzConfDev
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

54. #AzConfDev
Runtime errors

55. #AzConfDev
Application Insights

56. #AzConfDev
Application Insights

57. #AzConfDev
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

58. #AzConfDev
Title Sponsors
Community Partner

59. #AzConfDev
Learning Partners
Security Partner

60. #AzConfDev
Communities

61. #AzConfDev
Q & A

62. #AzConfDev
Feedback

63. #AzConfDev
THANK YOU!
Building Reliable Applications Using React, .NET & Azure
Maurice de Beijer
@mauricedb