Building Reliable Applications Using React, .NET & Azure
Download as PPTX, PDF0 likes259 views
![Maurice De Beijer [MVP]](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1750747544)
The Azure Community Conference 2021 covered building reliable applications using React, .NET, and Azure, focusing on topics like TypeScript vs. JavaScript, testing methodologies, API management, and feature flags. Key strategies emphasized included using test-driven development, automating API type updates, and implementing effective error tracking with tools like Azure Application Insights. The conference highlighted the importance of employing TypeScript for serious development and managing application versions efficiently.
Building Reliable Applications Using React, .NET & Azure
- 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
- 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
- 14. #AzConfDev ES Modules Named imports instead of import default Better with tooling and discoverability
- 15. #AzConfDev React and import default
- 18. #AzConfDev Vite - During development Next Generation Frontend Tooling
- 19. #AzConfDev Azure Blob Storage – At runtime
- 24. #AzConfDev The traditional testing pyramid Manual End to End Integration testing Unit testing
- 25. #AzConfDev Both windows are fine
- 27. #AzConfDev A better testing pyramid for the web Manual End to End Integration testing Unit testing
- 30. #AzConfDev Testing Front & Back End
- 32. #AzConfDev API Types and Updates
- 34. #AzConfDev Swashbuckle for Azure Function
- 35. #AzConfDev Nswag Generates TypeScript/C# Interfaces
- 38. #AzConfDev Validate API Validate all data that crosses an external boundary User input Data from an API
- 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
- 42. #AzConfDev AJAX requests The public internet is unreliable Some requests will fail for random reasons Use a retry policy to handle network errors
- 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
- 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
- 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
- 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
- 61. #AzConfDev Q & A
- 63. #AzConfDev THANK YOU! Building Reliable Applications Using React, .NET & Azure Maurice de Beijer @mauricedb