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/
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
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