Layered

Learn layered architecture.

Layered architecture

Layered architecture splits code into horizontal layers: presentation, business and data. Each layer only accesses one layer below; the reverse is not allowed.

The presentation layer draws components, the business layer runs logic, the data layer talks to the API or database. This separation improves testability; the UI can be tested with mock data.

One-way dependency

The core rule of layered architecture is one-way dependency. The presentation layer calls the business layer, which calls the data layer. The data layer cannot call the presentation directly.

This way, if the data layer changes, only the business layer is affected; the presentation stays independent. Reverse dependencies create cycles and make testing harder.

Exercise Write a DataService

Write a DataService class or object. It should have a fetchUser(id) method that calls fetch. Export it with export.

Show example solution

// Define the data service here
const DataService = {
  fetchUser: (id) => fetch(`/api/users/${id}`)
};

export default DataService;

Test yourself

Write the top layer name

Layered mimaride en üst katman ____ katmanıdır; bileşenleri çizer.

Show answer

Layered mimaride en üst katman presentation katmanıdır; bileşenleri çizer.

What can the data layer call in a layered architecture?
- Only external services/APIs
- The presentation layer
- Components
- Hooks
Show answer

The presentation layer — The data layer only calls external sources.
Match the layers

Presentation

Draws components
Business

Runs logic
Data

Talks to API
Mock

Test data

Next lesson: Clean architecture

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies