Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
© ABL - The Problem Solver 1
Building large and
scalable mission critical
applications with React
Maurice de Beijer - @mauricedb
Topics
 JavaScript versusTypeScript
 Hosting
 Test-driven development
 API types and updates
 GitWorkflow
 Feature F...
Opinions
Ahead 
© ABL - The Problem Solver 4
Swiss
Cheese
Model
© ABL - The Problem Solver 5
 Maurice de Beijer
 The Problem Solver
 Microsoft MVP
 Freelance lead/developer/instructor
 Twitter: @mauricedb
 Web...
The React
Newsletter
© ABL - The Problem Solver 7
JavaScript versusTypeScript
© ABL - The Problem Solver 8
TypeScript
© ABL - The Problem Solver 9
Language
features
 Type Unions
 Tuples
 OptionalChaining
 Nullish Coalescing operator
© ABL - The Problem Solver 10
JS Doc  Annotate your JavaScript with JS Doc types
 If you made the mistake of not starting withTypeScript 
© ABL - The...
MappedTypes
 type RT = Readonly<T>
 type PT = Partial<T>
 type MyProps = React.ComponentProps<typeof MyComponent>
 typ...
ES Modules  Named imports instead of import default
 Better with tooling and discoverability
© ABL - The Problem Solver ...
React and
import default
© ABL - The Problem Solver 14
ESBuild
© ABL - The Problem Solver 15
Hosting the front-end
During development
© ABL - The Problem Solver 16
Vite
© ABL - The Problem Solver 17
Hosting the front-end
In production
© ABL - The Problem Solver 18
Azure Blob
Storage
© ABL - The Problem Solver 19
AzureCDN
© ABL - The Problem Solver 20
Routing Rules
© ABL - The Problem Solver 21
Deploy
From
GitHub
© ABL - The Problem Solver 22
Test-Driven Development
© ABL - The Problem Solver 23
The traditional
testing
pyramid
Manual
End to End
Integration testing
Unit testing
Both windows
are fine
Source
A sturdy latch
Source
A better
testing
pyramid for
the web
Manual
End to End
Integration testing
Unit testing
Cypress
© ABL - The Problem Solver 28
Testing
Front & Back
End
© ABL - The Problem Solver 29
Intercepting
AJAX
Requests
© ABL - The Problem Solver 30
APITypes andUpdates
© ABL - The Problem Solver 31
OpenAPI
© ABL - The Problem Solver 32
Swashbuckle
for the
Azure Function
© ABL - The Problem Solver 33
NSwag
Generates
TypeScript
Interfaces
© ABL - The Problem Solver 34
APIVersion
© ABL - The Problem Solver 35
Required
ValueTypes
© ABL - The Problem Solver 36
ValidateAPI
 Validate all data that crosses an external boundary
 User input
 Data from an API
© ABL - The Problem Solv...
Type Mapping
© ABL - The Problem Solver 38
Long living
clients
 Some users never close their browser
 The same old version of the SPA can remain active
 Even when...
Checking the
version
© ABL - The Problem Solver 40
AJAX requests
 The public internet is unreliable
 Some requests will fail for random reasons
 Use a retry policy to han...
Retry Policy
© ABL - The Problem Solver 42
Workflow
© ABL - The Problem Solver 43
Workflow
 Use short-lived Git feature branches
 A few hours at most
 Hide new or risky code behind a feature flag
 Ini...
Release
Strategy
 Release new features to a subset of users first
 Fast Ring with user opt in
 Percentage of users
 On...
Feature Flags
© ABL - The Problem Solver 46
Feature Flags
 A simple feature flag system is not hard
 But can become quite elaborate
 Consider using a service like ...
Azure
Configuration
Function
© ABL - The Problem Solver 48
React
Configuration
Provider
© ABL - The Problem Solver 49
Conditional
Rendering
© ABL - The Problem Solver 50
Runtime errors
© ABL - The Problem Solver 51
Runtime errors
 Runtime errors need to be tracked
 There is no code without bugs 
 Features like LocalStorage will be ...
Runtime errors
© ABL - The Problem Solver 53
Application
Insights
© ABL - The Problem Solver 54
Application
Insights
© ABL - The Problem Solver 55
Conclusion
 TypeScript is a must have
 For any serious development
 Use BLOB storage & CDN
 Easy, fast and cheap hosti...
Maurice de Beijer
@mauricedb
maurice.de.beijer
@gmail.com
© ABL - The Problem Solver 57
Upcoming SlideShare
Loading in …5
×

Building large and scalable mission critical applications with React

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, distributed and mission critical application with React is another matter. Add occasional poor mobile connectivity and things become really challenging. That doesn't mean that it is impossible, it is just harder to architect and develop. 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://www.meetup.com/nl-NL/tilburg-tech-tuesdays/events/277150883/

  • Be the first to comment

  • Be the first to like this

Building large and scalable mission critical applications with React

  1. 1. © ABL - The Problem Solver 1
  2. 2. Building large and scalable mission critical applications with React Maurice de Beijer - @mauricedb
  3. 3. Topics  JavaScript versusTypeScript  Hosting  Test-driven development  API types and updates  GitWorkflow  Feature Flags  Runtime errors © ABL - The Problem Solver 3
  4. 4. Opinions Ahead  © ABL - The Problem Solver 4
  5. 5. Swiss Cheese Model © ABL - The Problem Solver 5
  6. 6.  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 6 © ABL - The Problem Solver
  7. 7. The React Newsletter © ABL - The Problem Solver 7
  8. 8. JavaScript versusTypeScript © ABL - The Problem Solver 8
  9. 9. TypeScript © ABL - The Problem Solver 9
  10. 10. Language features  Type Unions  Tuples  OptionalChaining  Nullish Coalescing operator © ABL - The Problem Solver 10
  11. 11. JS Doc  Annotate your JavaScript with JS Doc types  If you made the mistake of not starting withTypeScript  © ABL - The Problem Solver 11
  12. 12. 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 12
  13. 13. ES Modules  Named imports instead of import default  Better with tooling and discoverability © ABL - The Problem Solver 13
  14. 14. React and import default © ABL - The Problem Solver 14
  15. 15. ESBuild © ABL - The Problem Solver 15
  16. 16. Hosting the front-end During development © ABL - The Problem Solver 16
  17. 17. Vite © ABL - The Problem Solver 17
  18. 18. Hosting the front-end In production © ABL - The Problem Solver 18
  19. 19. Azure Blob Storage © ABL - The Problem Solver 19
  20. 20. AzureCDN © ABL - The Problem Solver 20
  21. 21. Routing Rules © ABL - The Problem Solver 21
  22. 22. Deploy From GitHub © ABL - The Problem Solver 22
  23. 23. Test-Driven Development © ABL - The Problem Solver 23
  24. 24. The traditional testing pyramid Manual End to End Integration testing Unit testing
  25. 25. Both windows are fine Source
  26. 26. A sturdy latch Source
  27. 27. A better testing pyramid for the web Manual End to End Integration testing Unit testing
  28. 28. Cypress © ABL - The Problem Solver 28
  29. 29. Testing Front & Back End © ABL - The Problem Solver 29
  30. 30. Intercepting AJAX Requests © ABL - The Problem Solver 30
  31. 31. APITypes andUpdates © ABL - The Problem Solver 31
  32. 32. OpenAPI © ABL - The Problem Solver 32
  33. 33. Swashbuckle for the Azure Function © ABL - The Problem Solver 33
  34. 34. NSwag Generates TypeScript Interfaces © ABL - The Problem Solver 34
  35. 35. APIVersion © ABL - The Problem Solver 35
  36. 36. Required ValueTypes © ABL - The Problem Solver 36
  37. 37. ValidateAPI  Validate all data that crosses an external boundary  User input  Data from an API © ABL - The Problem Solver 37
  38. 38. Type Mapping © ABL - The Problem Solver 38
  39. 39. 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 39
  40. 40. Checking the version © ABL - The Problem Solver 40
  41. 41. 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 41
  42. 42. Retry Policy © ABL - The Problem Solver 42
  43. 43. Workflow © ABL - The Problem Solver 43
  44. 44. 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 44
  45. 45. 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 45
  46. 46. Feature Flags © ABL - The Problem Solver 46
  47. 47. 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 47
  48. 48. Azure Configuration Function © ABL - The Problem Solver 48
  49. 49. React Configuration Provider © ABL - The Problem Solver 49
  50. 50. Conditional Rendering © ABL - The Problem Solver 50
  51. 51. Runtime errors © ABL - The Problem Solver 51
  52. 52. 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 or Sentry.io works well  Tracks unhandled exceptions  Add an Error Boundary and track component errors © ABL - The Problem Solver 52
  53. 53. Runtime errors © ABL - The Problem Solver 53
  54. 54. Application Insights © ABL - The Problem Solver 54
  55. 55. Application Insights © ABL - The Problem Solver 55
  56. 56. 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 56
  57. 57. Maurice de Beijer @mauricedb maurice.de.beijer @gmail.com © ABL - The Problem Solver 57

×