Building large and scalable mission critical applications with React
•Télécharger en tant que PPTX, PDF•
0 j'aime•197 vues
![Maurice De Beijer [MVP]](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1696317804)
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/
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Building large and scalable mission critical applications with React
Similaire à Building large and scalable mission critical applications with React (20)
Plus de Maurice De Beijer [MVP]
Plus de Maurice De Beijer [MVP] (20)
Dernier
Dernier (20)
Building large and scalable mission critical applications with React
- 1. © ABL - The Problem Solver 1
- 2. Building large and scalable mission critical applications with React Maurice de Beijer - @mauricedb
- 3. Topics JavaScript versusTypeScript Hosting Test-driven development API types and updates GitWorkflow Feature Flags Runtime errors © ABL - The Problem Solver 3
- 4. Opinions Ahead © ABL - The Problem Solver 4
- 5. Swiss Cheese Model © ABL - The Problem Solver 5
- 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. The React Newsletter © ABL - The Problem Solver 7
- 8. JavaScript versusTypeScript © ABL - The Problem Solver 8
- 9. TypeScript © ABL - The Problem Solver 9
- 10. Language features Type Unions Tuples OptionalChaining Nullish Coalescing operator © ABL - The Problem Solver 10
- 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. 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. ES Modules Named imports instead of import default Better with tooling and discoverability © ABL - The Problem Solver 13
- 14. React and import default © ABL - The Problem Solver 14
- 15. ESBuild © ABL - The Problem Solver 15
- 16. Hosting the front-end During development © ABL - The Problem Solver 16
- 17. Vite © ABL - The Problem Solver 17
- 18. Hosting the front-end In production © ABL - The Problem Solver 18
- 19. Azure Blob Storage © ABL - The Problem Solver 19
- 20. AzureCDN © ABL - The Problem Solver 20
- 21. Routing Rules © ABL - The Problem Solver 21
- 22. Deploy From GitHub © ABL - The Problem Solver 22
- 23. Test-Driven Development © ABL - The Problem Solver 23
- 24. The traditional testing pyramid Manual End to End Integration testing Unit testing
- 27. A better testing pyramid for the web Manual End to End Integration testing Unit testing
- 28. Cypress © ABL - The Problem Solver 28
- 29. Testing Front & Back End © ABL - The Problem Solver 29
- 30. Intercepting AJAX Requests © ABL - The Problem Solver 30
- 31. APITypes andUpdates © ABL - The Problem Solver 31
- 32. OpenAPI © ABL - The Problem Solver 32
- 33. Swashbuckle for the Azure Function © ABL - The Problem Solver 33
- 34. NSwag Generates TypeScript Interfaces © ABL - The Problem Solver 34
- 35. APIVersion © ABL - The Problem Solver 35
- 36. Required ValueTypes © ABL - The Problem Solver 36
- 37. ValidateAPI Validate all data that crosses an external boundary User input Data from an API © ABL - The Problem Solver 37
- 38. Type Mapping © ABL - The Problem Solver 38
- 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. Checking the version © ABL - The Problem Solver 40
- 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. Retry Policy © ABL - The Problem Solver 42
- 43. Workflow © ABL - The Problem Solver 43
- 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. 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. Feature Flags © ABL - The Problem Solver 46
- 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. Azure Configuration Function © ABL - The Problem Solver 48
- 49. React Configuration Provider © ABL - The Problem Solver 49
- 50. Conditional Rendering © ABL - The Problem Solver 50
- 51. Runtime errors © ABL - The Problem Solver 51
- 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. Runtime errors © ABL - The Problem Solver 53
- 54. Application Insights © ABL - The Problem Solver 54
- 55. Application Insights © ABL - The Problem Solver 55
- 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. Maurice de Beijer @mauricedb maurice.de.beijer @gmail.com © ABL - The Problem Solver 57
Notes de l'éditeur
- Repository: http://bit.ly/pro-hooks-2021 Slides: http://theproblemsolver.nl/pro-hooks-2021.pdf