Building reliable applications with React, C#, and Azure
Download as PPTX, PDF•0 likes•215 views
![Maurice De Beijer [MVP], profile picture](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1750747544)
This document discusses several topics related to frontend development including TypeScript, hosting, testing, APIs, and runtime errors. It provides information on using TypeScript for type safety and features like mapped types and ES modules. For hosting, it recommends Azure Blob storage and CDN for production and Vite for development. It also discusses test-driven development including using Cypress for end-to-end tests. Managing API types and updates using OpenAPI and NSwag is described as well as handling runtime errors with Application Insights.
Building reliable applications with React, C#, and Azure
- 1. © ABL - The Problem Solver 1
- 2. Topics JavaScript versusTypeScript Hosting Test-driven development API types and updates 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: [email protected] 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
- 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. Runtime errors © ABL - The Problem Solver 42
- 43. Runtime errors Runtime errors need to be tracked There is no code without bugs Features like LocalStorage will be disabled for some users Services like Azure Application Insights works well Tracks unhandled exceptions Add an Error Boundary and track component errors © ABL - The Problem Solver 43
- 44. Runtime errors © ABL - The Problem Solver 44
- 45. Application Insights © ABL - The Problem Solver 45
- 46. Application Insights © ABL - The Problem Solver 46
- 47. 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 Runtime errors will happen Make sure you track them © ABL - The Problem Solver 47
- 48. Maurice de Beijer @mauricedb maurice.de.beijer @gmail.com © ABL - The Problem Solver 48