Successfully reported this slideshow.
Your SlideShare is downloading. ×

Building Reliable Applications Using React, .NET & Azure

Building Reliable Applications Using React, .NET & Azure

Download to read offline

Building a small to medium size business application with React isn't terribly hard. It has been done lots of times and there is plenty of information about what works and what doesn't. However building a large, complex and mission critical application with React is another matter. How to configure reliable hosting on Azure for the front and back-end? How to track runtime errors that happen in the browser. And how to create an efficient workflow between front and back-end teams. In this session Maurice de Beijer will share his experiences in building a globally deployed application that is used by thousands of people who depend on the availability and proper functioning of the application for a safe work environment.

https://azconf.dev/

Building a small to medium size business application with React isn't terribly hard. It has been done lots of times and there is plenty of information about what works and what doesn't. However building a large, complex and mission critical application with React is another matter. How to configure reliable hosting on Azure for the front and back-end? How to track runtime errors that happen in the browser. And how to create an efficient workflow between front and back-end teams. In this session Maurice de Beijer will share his experiences in building a globally deployed application that is used by thousands of people who depend on the availability and proper functioning of the application for a safe work environment.

https://azconf.dev/

More Related Content

Related Books

Free with a 30 day trial from Scribd

See all

Building Reliable Applications Using React, .NET & Azure

  1. 1. Azure Community Conference 2021 India’s largest Azure Conference #AzConfDev
  2. 2. #AzConfDev Maurice de Beijer The Problem Solver Freelance lead/developer/instructor
  3. 3. #AzConfDev Building Reliable Applications Using React, .NET & Azure Maurice de Beijer - @mauricedb
  4. 4. #AzConfDev Topics • JavaScript versus TypeScript • Hosting • Test-driven development • API types and updates • Git Workflow • Feature Flags • Runtime errors
  5. 5. #AzConfDev Opinions Ahead 
  6. 6. #AzConfDev Cheese
  7. 7. #AzConfDev Swiss Cheese Model
  8. 8. #AzConfDev JavaScript versus TypeScript
  9. 9. #AzConfDev TypeScript
  10. 10. #AzConfDev Language features • Type Unions • Tuples • Optional Chaining • Nullish Coalescing operator
  11. 11. #AzConfDev JS Doc • Annotate your JavaScript with JS Doc types • If you made the mistake of not starting with TypeScript 
  12. 12. #AzConfDev Mapped Types
  13. 13. #AzConfDev Opaque Types
  14. 14. #AzConfDev ES Modules Named imports instead of import default Better with tooling and discoverability
  15. 15. #AzConfDev React and import default
  16. 16. #AzConfDev ESBuild
  17. 17. #AzConfDev Hosting the front-end
  18. 18. #AzConfDev Vite - During development Next Generation Frontend Tooling
  19. 19. #AzConfDev Azure Blob Storage – At runtime
  20. 20. #AzConfDev Azure CDN
  21. 21. #AzConfDev Routing Rules
  22. 22. #AzConfDev Deploy From GitHub
  23. 23. #AzConfDev Test-Driven Development
  24. 24. #AzConfDev The traditional testing pyramid Manual End to End Integration testing Unit testing
  25. 25. #AzConfDev Both windows are fine
  26. 26. #AzConfDev A sturdy latch
  27. 27. #AzConfDev A better testing pyramid for the web Manual End to End Integration testing Unit testing
  28. 28. #AzConfDev Cypress.io
  29. 29. #AzConfDev Cypress.io course 
  30. 30. #AzConfDev Testing Front & Back End
  31. 31. #AzConfDev Intercepting AJAX Requests
  32. 32. #AzConfDev API Types and Updates
  33. 33. #AzConfDev Open API
  34. 34. #AzConfDev Swashbuckle for Azure Function
  35. 35. #AzConfDev Nswag Generates TypeScript/C# Interfaces
  36. 36. #AzConfDev API Version
  37. 37. #AzConfDev Required ValueTypes
  38. 38. #AzConfDev Validate API Validate all data that crosses an external boundary User input Data from an API
  39. 39. #AzConfDev Type Mapping
  40. 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. 41. #AzConfDev Checking the version
  42. 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. 43. #AzConfDev Retry Policy
  44. 44. #AzConfDev Workflow
  45. 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. 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. 47. #AzConfDev Feature Flags
  48. 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. 49. #AzConfDev Azure Configuration Function
  50. 50. #AzConfDev React Configuration Provider
  51. 51. #AzConfDev Conditional Rendering
  52. 52. #AzConfDev Runtime errors
  53. 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. 54. #AzConfDev Runtime errors
  55. 55. #AzConfDev Application Insights
  56. 56. #AzConfDev Application Insights
  57. 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. 58. #AzConfDev Title Sponsors Community Partner
  59. 59. #AzConfDev Learning Partners Security Partner
  60. 60. #AzConfDev Communities
  61. 61. #AzConfDev Q & A
  62. 62. #AzConfDev Feedback
  63. 63. #AzConfDev THANK YOU! Building Reliable Applications Using React, .NET & Azure Maurice de Beijer @mauricedb

×