Skip to main content

Domain-Driven Front-End Development

Modern front-end applications are not collections of components.

They are collections of business capabilities.

Consider an e-commerce platform.

Traditional thinking:

Shopping Cart Page

Domain-driven thinking:

The Shopping Cart becomes a subdomain with its own:

CartModel
CartService
CartState
CartApi
CartEvents

Only after the domain is defined do we start thinking about UI.

CartItem
CartSummary
CartList
CartTemplate
CartPage

Atomic Bomb supports this workflow directly.

The result is a front-end architecture that mirrors the business.

Mini Exercise​

Pick a business capability such as checkout, scheduling, or onboarding.

Map it into:

  • model
  • service
  • state
  • API
  • events
  • atoms, molecules, organisms, template, and page

Example​

For onboarding:

  • model: OnboardingModel
  • service: OnboardingService
  • state: OnboardingState
  • API: OnboardingApi
  • events: OnboardingStarted, StepCompleted, OnboardingFinished
  • atoms, molecules, organisms, template, and page: Input, StepIndicator, OnboardingForm, OnboardingTemplate, OnboardingPage