Summary - App architecture

Combine feature-based, clean and repository to write an architecture skeleton.

Summary - App architecture

We covered three architectural approaches: feature-based (grouping by feature), layered (presentation-business-data layers) and clean architecture (inward dependency, domain at center).

On top of these we added repository pattern (data access abstraction) and dependency injection (dependencies supplied from outside). In React, DI is done with Context; with a repository interface, mockable tests become possible.

Exercise DI with Provider

Write a RepoProvider component. It should wrap RepoContext.Provider and pass apiRepo as value. Render children through the children prop. Import RepoContext.

Show example solution

import React from 'react';
import RepoContext from './RepoContext';

const apiRepo = { getUser: () => null };

const RepoProvider = ({ children }) => (
  <RepoContext.Provider value={apiRepo}>
    {children}
  </RepoContext.Provider>
);

export default RepoProvider;

Exercise Get the repository with useContext

Write a useRepo hook. It should call useContext(RepoContext) and return the result. Import useContext from React, RepoContext from the same folder.

Show example solution

import React, { useContext } from 'react';
import RepoContext from './RepoContext';

const useRepo = () => useContext(RepoContext);

export default useRepo;

Test yourself

What is the key measure in architectural decisions?
- Number of colors
- Testability and separation
- Length of file names
- Number of third-party libraries
Show answer

Testability and separation — Separation and testability are the key measure.
Match all the concepts

Feature-based

Folder grouping
Layered

Layers
Clean

Domain at center
Repository

Data abstraction

Next lesson: What is a monorepo?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies