Software Architecture Patterns in Frontend Development

Component-Based Patterns

1. Atomic Design

Organizes UI components into a hierarchical structure inspired by chemistry.

Structure:

• Atoms: Basic building blocks (buttons, inputs, labels)

• Molecules: Simple groups of atoms (search form, card header)

• Organisms: Complex components (navigation bar, form sections)

• Templates: Page-level layouts without data

• Pages: Specific instances with real content

Benefits:

• Clear component hierarchy

• Promotes reusability

• Easier design system maintenance

• Better collaboration between designers and developers

Use Cases:

• Design systems

• Large-scale applications

• Teams with dedicated design resources

Example:

// Atom
const Button = ({ children, onClick }) => (
  <button onClick={onClick}>{children}</button>
);

// Molecule
const SearchBar = () => (
  <form>
    <Input placeholder="Search..." />
    <Button>Search</Button>
  </form>
);

// Organism
const Header = () => (
  <header>
    <Logo />
    <Navigation />
    <SearchBar />
    <UserMenu />
  </header>
);

2. Container/Presentational Pattern

Separates business logic from UI presentation.

Components:

• Presentational (Dumb): Focus on how things look

  • Receive data via props

  • Rarely have state

  • Purely visual

• Container (Smart): Focus on how things work

  • Handle data fetching

  • Manage state

  • Pass data to presentational components

Benefits:

• Clear separation of concerns

• Easier testing

• Better reusability of presentational components

• Simplified logic debugging

Example:

// Presentational Component
const UserList = ({ users, onUserClick }) => (
  <ul>
    {users.map(user => (
      <li key={user.id} onClick={() => onUserClick(user)}>
        {user.name}
      </li>
    ))}
  </ul>
);

// Container Component
const UserListContainer = () => {
  const [users, setUsers] = useState([]);
  
  useEffect(() => {
    fetchUsers().then(setUsers);
  }, []);
  
  const handleUserClick = (user) => {
    // Handle business logic
    console.log('User clicked:', user);
  };
  
  return <UserList users={users} onUserClick={handleUserClick} />;
};

3. Compound Components

Components that work together to form a complete UI, sharing implicit state.

Benefits:

• Flexible API

• Encapsulated logic

• Better developer experience

• Reduced prop drilling

Example:

// Parent manages state, children share it
const Tabs = ({ children }) => {
  const [activeTab, setActiveTab] = useState(0);
  
  return (
    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
      {children}
    </TabsContext.Provider>
  );
};

Tabs.List = ({ children }) => <div className="tab-list">{children}</div>;

Tabs.Tab = ({ index, children }) => {
  const { activeTab, setActiveTab } = useContext(TabsContext);
  return (
    <button 
      className={activeTab === index ? 'active' : ''}
      onClick={() => setActiveTab(index)}
    >
      {children}
    </button>
  );
};

Tabs.Panel = ({ index, children }) => {
  const { activeTab } = useContext(TabsContext);
  return activeTab === index ? <div>{children}</div> : null;
};

// Usage
<Tabs>
  <Tabs.List>
    <Tabs.Tab index={0}>Tab 1</Tabs.Tab>
    <Tabs.Tab index={1}>Tab 2</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel index={0}>Content 1</Tabs.Panel>
  <Tabs.Panel index={1}>Content 2</Tabs.Panel>
</Tabs>

State Management Patterns

1. Flux Architecture

Unidirectional data flow pattern popularized by Facebook.

Flow:

Action → Dispatcher → Store → View → Action

Components:

• Actions: Describe what happened

• Dispatcher: Central hub managing all data flow

• Stores: Hold application state and logic

• Views: React to store changes

Benefits:

• Predictable state changes

• Easier debugging

• Clear data flow

• Better separation of concerns

Example:

// Action
const addTodo = (text) => ({
  type: 'ADD_TODO',
  payload: { text }
});

// Store
class TodoStore extends EventEmitter {
  constructor() {
    super();
    this.todos = [];
  }
  
  handleAction(action) {
    switch(action.type) {
      case 'ADD_TODO':
        this.todos.push(action.payload);
        this.emit('change');
        break;
    }
  }
  
  getTodos() {
    return this.todos;
  }
}

// Dispatcher
const dispatcher = new Dispatcher();
dispatcher.register(todoStore.handleAction.bind(todoStore));

2. Redux Pattern

Predictable state container based on Flux principles.

Principles:

• Single source of truth (one store)

• State is read-only

• Changes via pure functions (reducers)

Benefits:

• Time-travel debugging

• Predictable state updates

• Excellent DevTools

• Middleware support

Example:

// Reducer
const todosReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    case 'REMOVE_TODO':
      return state.filter(todo => todo.id !== action.payload);
    default:
      return state;
  }
};

// Store
const store = createStore(todosReducer);

// Component
const TodoApp = () => {
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();
  
  const addTodo = (text) => {
    dispatch({ type: 'ADD_TODO', payload: { id: Date.now(), text } });
  };
  
  return <TodoList todos={todos} onAdd={addTodo} />;
};

3. Context + Hooks Pattern

Modern React approach using Context API and custom hooks.

Benefits:

• No external dependencies

• Simple for small to medium apps

• Great for theme, auth, i18n

• Type-safe with TypeScript

Example:

// Context
const AuthContext = createContext();

// Provider
export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  
  const login = async (credentials) => {
    const user = await authAPI.login(credentials);
    setUser(user);
  };
  
  const logout = () => setUser(null);
  
  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

// Custom Hook
export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within AuthProvider');
  }
  return context;
};

// Usage
const Profile = () => {
  const { user, logout } = useAuth();
  return <div>Welcome {user.name} <button onClick={logout}>Logout</button></div>;
};

4. Observable Pattern (RxJS/MobX)

Reactive state management using observables.

Benefits:

• Reactive programming paradigm

• Automatic dependency tracking

• Minimal boilerplate

• Fine-grained reactivity

Example (MobX):

import { makeObservable, observable, action, computed } from 'mobx';
import { observer } from 'mobx-react-lite';

class TodoStore {
  todos = [];
  
  constructor() {
    makeObservable(this, {
      todos: observable,
      addTodo: action,
      completedCount: computed
    });
  }
  
  addTodo(text) {
    this.todos.push({ id: Date.now(), text, completed: false });
  }
  
  get completedCount() {
    return this.todos.filter(t => t.completed).length;
  }
}

const todoStore = new TodoStore();

const TodoApp = observer(() => {
  return (
    <div>
      <p>Completed: {todoStore.completedCount}</p>
      <button onClick={() => todoStore.addTodo('New task')}>Add</button>
    </div>
  );
});

Architectural Patterns

1. MVC (Model-View-Controller)

Traditional separation of data, presentation, and logic.

Components:

• Model: Data and business logic

• View: UI presentation

• Controller: Handles user input, updates model

Benefits:

• Clear separation of concerns

• Easier testing

• Parallel development

Modern Frontend Interpretation:

// Model
class UserModel {
  constructor(data) {
    this.data = data;
  }
  
  async save() {
    return await api.saveUser(this.data);
  }
  
  validate() {
    return this.data.email && this.data.name;
  }
}

// View
const UserView = ({ user, onSave }) => (
  <form onSubmit={onSave}>
    <input value={user.name} />
    <input value={user.email} />
    <button type="submit">Save</button>
  </form>
);

// Controller
const UserController = () => {
  const [user, setUser] = useState(new UserModel({}));
  
  const handleSave = async (e) => {
    e.preventDefault();
    if (user.validate()) {
      await user.save();
    }
  };
  
  return <UserView user={user.data} onSave={handleSave} />;
};

2. MVVM (Model-View-ViewModel)

Two-way data binding between View and ViewModel.

Components:

• Model: Data layer

• View: UI layer

• ViewModel: Intermediary with binding logic

Benefits:

• Declarative UI

• Automatic synchronization

• Better testability

Example (Vue.js naturally follows MVVM):

// Model
const userModel = {
  fetchUser(id) {
    return api.get(`/users/${id}`);
  }
};

// ViewModel
export default {
  data() {
    return {
      user: {
        name: '',
        email: ''
      }
    };
  },
  
  computed: {
    isValid() {
      return this.user.name && this.user.email;
    }
  },
  
  methods: {
    async loadUser(id) {
      this.user = await userModel.fetchUser(id);
    },
    
    async saveUser() {
      if (this.isValid) {
        await api.saveUser(this.user);
      }
    }
  }
};

// View (template)
// <div>
//   <input v-model="user.name" />
//   <input v-model="user.email" />
//   <button @click="saveUser" :disabled="!isValid">Save</button>
// </div>

3. Feature-Sliced Design

Modern architectural methodology organizing code by features and layers.

Layers (top to bottom):

1. App: Application initialization

2. Processes: Complex inter-page scenarios

3. Pages: Full pages

4. Widgets: Large independent blocks

5. Features: User scenarios and actions

6. Entities: Business entities

7. Shared: Reusable code

Benefits:

• Scalable structure

• Clear dependencies

• Easy navigation

• Team-friendly

Structure:

src/
├── app/
│   ├── providers/
│   ├── styles/
│   └── index.tsx
├── pages/
│   ├── home/
│   └── profile/
├── widgets/
│   ├── header/
│   └── sidebar/
├── features/
│   ├── auth/
│   │   ├── ui/
│   │   ├── model/
│   │   └── api/
│   └── todo-create/
├── entities/
│   ├── user/
│   └── todo/
└── shared/
    ├── ui/
    ├── lib/
    └── api/

4. Clean Architecture

Dependency rule: inner layers don't know about outer layers.

Layers:

• Domain: Business logic (entities, use cases)

• Application: Application logic (services, state)

• Infrastructure: External concerns (API, storage)

• Presentation: UI components

Benefits:

• Framework independence

• Testability

• UI independence

• Database independence

Example:

// Domain Layer (innermost)
class User {
  constructor(id, name, email) {
    this.id = id;
    this.name = name;
    this.email = email;
  }
  
  isValid() {
    return this.name && this.email.includes('@');
  }
}

// Application Layer (use cases)
class CreateUserUseCase {
  constructor(userRepository) {
    this.userRepository = userRepository;
  }
  
  async execute(userData) {
    const user = new User(null, userData.name, userData.email);
    
    if (!user.isValid()) {
      throw new Error('Invalid user data');
    }
    
    return await this.userRepository.create(user);
  }
}

// Infrastructure Layer
class UserRepository {
  async create(user) {
    const response = await fetch('/api/users', {
      method: 'POST',
      body: JSON.stringify(user)
    });
    return response.json();
  }
}

// Presentation Layer
const CreateUserForm = () => {
  const createUser = new CreateUserUseCase(new UserRepository());
  
  const handleSubmit = async (formData) => {
    try {
      await createUser.execute(formData);
    } catch (error) {
      // Handle error
    }
  };
  
  return <form onSubmit={handleSubmit}>...</form>;
};

Data Flow Patterns

1. Unidirectional Data Flow

Data flows in one direction through the application.

Flow:

State → View → Action → State Update → View Update

Benefits:

• Predictable updates

• Easier debugging

• Time-travel possible

• Clear data provenance

2. Bidirectional Data Binding

View and model stay in sync automatically.

Use Cases:

• Forms with many fields

• Real-time collaboration

• Configuration UIs

Trade-offs:

• Can be harder to debug

• Less predictable with complex interactions

• Performance considerations

3. Event-Driven Architecture

Components communicate through events.

Benefits:

• Loose coupling

• Scalability

• Easy to add features

• Asynchronous handling

Example:

// Event Bus
class EventBus {
  constructor() {
    this.listeners = {};
  }
  
  on(event, callback) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event].push(callback);
  }
  
  emit(event, data) {
    if (this.listeners[event]) {
      this.listeners[event].forEach(callback => callback(data));
    }
  }
}

const eventBus = new EventBus();

// Component A
eventBus.emit('user:login', { userId: 123 });

// Component B
eventBus.on('user:login', (data) => {
  console.log('User logged in:', data.userId);
});

Micro Frontend Patterns

1. Build-Time Integration

Micro frontends composed during build process.

Approaches:

• NPM packages

• Git submodules

• Monorepo with shared build

Benefits:

• Simple deployment

• Better performance

• Type safety across apps

Trade-offs:

• Rebuild required for updates

• Tight coupling at build time

2. Run-Time Integration

Apps integrated in the browser.

Approaches:

• Module Federation (Webpack 5)

• iframes

• Web Components

Example (Module Federation):

// Remote App (webpack.config.js)
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button'
      }
    })
  ]
};

// Host App
const RemoteButton = React.lazy(() => import('remoteApp/Button'));

function App() {
  return (
    <Suspense fallback="Loading...">
      <RemoteButton />
    </Suspense>
  );
}

3. Server-Side Integration

Composition happens on the server.

Approaches:

• Server-Side Includes (SSI)

• Edge-Side Includes (ESI)

• Reverse proxy composition

Benefits:

• Initial load performance

• SEO friendly

• Progressive enhancement

Performance Patterns

1. Code Splitting

Load code only when needed.

Strategies:

• Route-based splitting

• Component-based splitting

• Vendor splitting

Example:

// Route-based
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

// Component-based
const HeavyChart = lazy(() => import('./components/HeavyChart'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  );
}

2. Virtual Scrolling

Render only visible items in long lists.

Benefits:

• Handles thousands of items

• Constant memory usage

• Smooth scrolling

Example:

import { FixedSizeList } from 'react-window';

const VirtualList = ({ items }) => {
  const Row = ({ index, style }) => (
    <div style={style}>
      {items[index].name}
    </div>
  );
  
  return (
    <FixedSizeList
      height={600}
      itemCount={items.length}
      itemSize={50}
      width="100%"
    >
      {Row}
    </FixedSizeList>
  );
};

3. Memoization

Cache expensive computations.

Techniques:

• React.memo for components

• useMemo for values

• useCallback for functions

Example:

// Expensive component only re-renders when props change
const ExpensiveComponent = React.memo(({ data }) => {
  return <div>{/* Complex rendering */}</div>;
});

// Expensive calculation
const ProcessedData = ({ rawData }) => {
  const processed = useMemo(() => {
    return rawData.map(item => expensiveTransform(item));
  }, [rawData]);
  
  return <List data={processed} />;
};

4. Lazy Loading

Defer loading of non-critical resources.

Strategies:

• Below-the-fold images

• Route-based components

• Modal/drawer contents

• Third-party widgets

Example:

// Image lazy loading
<img 
  src="placeholder.jpg" 
  data-src="actual-image.jpg"
  loading="lazy"
  alt="Description"
/>

// Intersection Observer approach
const LazyImage = ({ src, alt }) => {
  const [imageSrc, setImageSrc] = useState('placeholder.jpg');
  const imgRef = useRef();
  
  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setImageSrc(src);
        observer.disconnect();
      }
    });
    
    observer.observe(imgRef.current);
    return () => observer.disconnect();
  }, [src]);
  
  return <img ref={imgRef} src={imageSrc} alt={alt} />;
};

Best Practices

1. Choose the Right Pattern

• Small apps: Context + Hooks, simple component patterns

• Medium apps: Redux or MobX, feature-based organization

• Large apps: Micro frontends, Clean Architecture, Feature-Sliced Design

• Forms-heavy: MVVM-style, bidirectional binding

• Data-heavy: Observable patterns, virtual scrolling

2. Maintain Consistency

• Document chosen patterns

• Create templates and generators

• Enforce with linting rules

• Regular code reviews

3. Balance Flexibility and Structure

• Don't over-engineer for current needs

• Build for change, not perfection

• Refactor as complexity grows

• Keep escape hatches for exceptions

4. Performance Considerations

• Measure before optimizing

• Use production profiling tools

• Consider bundle size impact

• Test on real devices and networks

5. Developer Experience

• Clear folder structure

• Consistent naming conventions

• Good TypeScript types

• Helpful error messages

• Comprehensive documentation

Conclusion

The best architecture pattern depends on your specific context:

• Team size and structure: Larger teams benefit from stricter patterns

• Application complexity: Complex apps need more sophisticated architectures

• Performance requirements: High-performance apps need careful optimization patterns

• Development speed: Rapid prototyping favors simpler patterns

• Maintainability needs: Long-term projects benefit from clean architecture

Start simple, measure regularly, and evolve your architecture as your application grows. No single pattern fits all scenarios—often the best solution combines multiple patterns strategically.