Alan grabbed a whiteboard marker.
"Because the architecture is boring," Alan said. "Boring is stable. Stable ships." alan alickovic react application architecture for production
Alan sat up in bed. "No more," he whispered. At 8:00 AM, he walked into the "war room." The team was exhausted. Juniors were frantically adding console.log statements. The product manager was asking, "Can we just wrap it in a try/catch ?" Alan grabbed a whiteboard marker
He introduced a . Plain TypeScript classes: CartService , UserSession , AnalyticsTracker . These had zero React imports. They were tested with Jest in 12ms. They could run on a server, a worker, or a toaster. Stable ships
Alan pointed to the whiteboard. The three circles were still there, now annotated with team notes.
// BEFORE: The God Component function ProductCard({ product }) { const [isLoading, setIsLoading] = useState(false); const { user, updateCart, trackEvent, theme } = useAppContext(); // ... 200 lines of logic } // AFTER: Alan's Rule function ProductCard({ product, onAddToCart }) { // Only render logic. No data fetching. No side effects. // If it needs data, the PARENT provides it via a query. // If it needs to change data, it calls a prop callback. return <Card onClick={() => onAddToCart(product.id)} />; }
The pager went off at 3:14 AM. Again.
