CodeBlanks Logo Icon CodeBlanks

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.

Practice Write a DataService

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

Starter code

App.js
// Define the data service here

export default DataService;

Sample solution

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

export default DataService;

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 Write the top layer name

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

Explanation: The presentation layer is on top.

2 What can the data layer call in a layered architecture?

  • Only external services/APIs
  • The presentation layer Correct answer
  • Components
  • Hooks

Explanation: The data layer only calls external sources.

3 Match the layers

Term Meaning
Presentation Draws components
Business Runs logic
Data Talks to API
Mock Test data

All lessons in Expert