ArchCase

Design · Practice · Interview

Loading…

Business logic inside a UI component

TSarchitect

Main had a minimal ShoppingCart — just displayed items and total. A colleague sent a huge PR adding "everything at once": promo codes, VAT, stock checks, payment fetch, order creation. All in one component. Your job as architect is to explain why this can't be merged and how to split it.

PR: lesson.tsx +79 −05 проблем

1+import { useState } from 'react'

13 interface CartItem {

24 id: string

35 name: string

46 price: number

57 quantity: number

8+ stockId: string

69 }

710

811 interface Props {

912 items: CartItem[]

13+ userId: string

1014 }

1115

12-export function ShoppingCart({ items }: Props) {

13- const total = items.reduce((sum, i) => sum + i.price * i.quantity, 0)

16+export function ShoppingCart({ items, userId }: Props) {

17+ const [promoCode, setPromoCode] = useState('')

18+ const [discount, setDiscount] = useState(0)

19+ const [isProcessing, setIsProcessing] = useState(false)

20+

21+ const subtotal = items.reduce((sum, i) => sum + i.price * i.quantity, 0)

22+ const tax = subtotal * 0.2

23+ const shipping = subtotal > 5000 ? 0 : 300

24+ const total = subtotal + tax + shipping - discount

25+

26+ const applyPromo = async () => {

27+ if (promoCode === 'SUMMER20') {

28+ setDiscount(subtotal * 0.2)

29+ } else if (promoCode === 'WELCOME10') {

30+ const isNewUser = await fetch(`/api/users/${userId}/is-new`).then((r) => r.json())

31+ if (isNewUser.result) {

32+ setDiscount(subtotal * 0.1)

33+ }

34+ } else {

35+ alert('Invalid promo code')

36+ }

37+ }

38+

39+ const checkout = async () => {

40+ setIsProcessing(true)

41+

42+ for (const item of items) {

43+ const stockRes = await fetch(`/api/stock/${item.stockId}`)

44+ const stock = await stockRes.json()

45+ if (stock.available < item.quantity) {

46+ alert(`${item.name} is out of stock`)

47+ setIsProcessing(false)

48+ return

49+ }

50+ }

51+

52+ const orderId = 'ORD-' + Date.now() + '-' + Math.random().toString(36).slice(2, 8)

53+

54+ const payRes = await fetch('/api/payments/charge', {

55+ method: 'POST',

56+ headers: { 'Content-Type': 'application/json' },

57+ body: JSON.stringify({

58+ amount: total * 100,

59+ currency: 'RUB',

60+ orderId,

61+ userId,

62+ }),

63+ })

64+

65+ if (payRes.ok) {

66+ const payment = await payRes.json()

67+ await fetch('/api/orders', {

68+ method: 'POST',

69+ body: JSON.stringify({

70+ id: orderId,

71+ userId,

72+ items,

73+ total,

74+ paymentId: payment.id,

75+ status: 'paid',

76+ }),

77+ })

78+ window.location.href = `/orders/${orderId}`

79+ } else {

80+ alert('Payment failed')

81+ setIsProcessing(false)

82+ }

83+ }

84+

1485 return (

1586 <div>

1687 <h2>Your cart</h2>

1788 {items.map((i) => (

1889 <div key={i.id}>

1990 {i.name} — {i.quantity} × ${i.price}

2091 </div>

2192 ))}

22- <div>Total: ${total}</div>

93+ <div>Subtotal: ${subtotal}</div>

94+ <div>Tax (20%): ${tax.toFixed(2)}</div>

95+ <div>Shipping: ${shipping}</div>

96+ <input value={promoCode} onChange={(e) => setPromoCode(e.target.value)} />

97+ <button onClick={applyPromo}>Apply</button>

98+ <div>Total: ${total.toFixed(2)}</div>

99+ <button onClick={checkout} disabled={isProcessing}>

100+ {isProcessing ? 'Processing...' : 'Checkout'}

101+ </button>

23102 </div>

24103 )

25104 }

Шаг 1 из 7

Why business logic in UI is an architectural smell

A UI component is a function from state to DOM. Its job: show the user what's in state right now. It **shouldn't**: 1. Compute business rules (taxes, discounts, shipping cost). 2. Validate promo codes, coupons, limits. 3. Generate order or transaction IDs. 4. Manage the atomicity of multi-step operations. 5. Make security decisions. All of that belongs on the **backend**. The UI receives finished values and displays them. Why: - **Security** — anything on the client is vulnerable. DevTools lets anyone change any value. - **Consistency** — logic should live in one place; otherwise frontend and backend diverge. - **Testability** — pure functions and services are easier to test than components. - **Reuse** — the same logic may be needed in mobile, CLI, or a cron job. Look at the PR and find every place this principle is broken.