Clean Architecture & Design Patterns in Practice · Урок

Представления и модели представления

Разберитесь, как представления преобразуют данные вариантов использования в модели представления, подходящие для отображения в пользовательском интерфейсе.

«Представления и модели представления» — бесплатный урок Clean Architecture & Design Patterns in Practice на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Clean Architecture & Design Patterns in Practice, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Clean Architecture & Design Patterns in Practice содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

Presenting Data to Users

In Clean Architecture, the outermost layer is dedicated to frameworks and drivers, which includes our user interface (UI). How do we effectively get data from our core business logic (Use Cases) to display on the screen?

This is where Presenters and View Models step in. They act as crucial adapters, bridging the gap between your application's core and its visual representation.

The Presenter's Purpose

A Presenter is an intermediary responsible for preparing data for the UI. It receives the 'raw' output from a Use Case, which often consists of business entities or specific data transfer objects (DTOs) from the application layer.

It transforms Use Case output into a UI-friendly format.
It handles presentation logic, such as formatting dates or combining strings.
It does NOT contain business rules or data access logic.

What is a View Model?

A View Model is a simple data structure specifically designed for a single view or UI component. It contains only the data needed to render that view, nothing more.

It's a 'dumb' data container with no behavior.
It only has properties relevant to the UI.
It decouples the UI from core domain objects, making the UI simpler.

Think of it as a blueprint for exactly what your screen needs to show.

Presenter & View Model in Action

Here's how Presenters and View Models typically work together in a Clean Architecture flow:

A user action triggers a Use Case (e.g., 'Fetch User Details').
The Use Case executes business logic and produces a result (e.g., a UserOutputData object).
This result is passed to a Presenter.
The Presenter transforms the UserOutputData into a UserViewModel.
The UI then directly consumes and displays the UserViewModel.

Why This Separation Matters

Using Presenters and View Models provides significant architectural advantages:

UI Independence: Your core application logic doesn't need to know or care about how data is displayed.
Testability: Presenters are plain objects, making their transformation logic easy to unit test without needing a UI framework.
Flexibility: You can change your UI framework (e.g., from an old framework to a new one) without altering your Use Cases or Entities.

Example: Use Case Output

Let's consider a Use Case that fetches user details. It might return a data object like this, containing raw information:

public class UserOutputData {
    private String firstName;
    private String lastName;
    private String email;
    private long registrationTimestamp; // epoch seconds

    public UserOutputData(String firstName, String lastName, String email, long registrationTimestamp) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.email = email;
        this.registrationTimestamp = registrationTimestamp;
    }

    public String getFirstName() { return firstName; }
    public String getLastName() { return lastName; }
    public String getEmail() { return email; }
    public long getRegistrationTimestamp() { return registrationTimestamp; }
}

Designing the View Model

For our UI, we want to display the user's full name and a nicely formatted registration date. The raw timestamp from UserOutputData isn't directly displayable. So, we create a UserViewModel specifically for this purpose:

public class UserViewModel {
    private String fullName;
    private String formattedRegistrationDate;

    public UserViewModel(String fullName, String formattedRegistrationDate) {
        this.fullName = fullName;
        this.formattedRegistrationDate = formattedRegistrationDate;
    }

    public String getFullName() { return fullName; }
    public String getFormattedRegistrationDate() { return formattedRegistrationDate; }
}

Building the Presenter

Now, let's create a UserPresenter. Its job is to take the UserOutputData and convert it into the UserViewModel, handling any necessary formatting or presentation logic.

import java.time.Instant;
import java.time.ZoneId;
import java.time.format.DateTimeFormatter;

public class UserPresenter {
    public UserViewModel present(UserOutputData outputData) {
        // Combine first and last name for display
        String fullName = outputData.getFirstName() + " " + outputData.getLastName();

        // Format the timestamp into a readable date string
        Instant instant = Instant.ofEpochSecond(outputData.getRegistrationTimestamp());
        DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm")
                                            .withZone(ZoneId.systemDefault());
        String formattedDate = formatter.format(instant);

        return new UserViewModel(fullName, formattedDate);
    }
}

Running the Presenter Flow

Here's a complete, runnable example demonstrating how a Use Case might return data, which is then processed by a Presenter and prepared for display by the UI.

import java.time.Instant;
import java.time.ZoneId;
import java.time.format.DateTimeFormatter;

// Simulate Use Case Output
class UserOutputData {
    private String firstName;
    private String lastName;
    private String email;
    private long registrationTimestamp;

    public UserOutputData(String firstName, String lastName, String email, long registrationTimestamp) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.email = email;
        this.registrationTimestamp = registrationTimestamp;
    }

    public String getFirstName() { return firstName; }
    public String getLastName() { return lastName; }
    public String getEmail() { return email; }
    public long getRegistrationTimestamp() { return registrationTimestamp; }
}

// View Model for UI
class UserViewModel {
    private String fullName;
    private String formattedRegistrationDate;

    public UserViewModel(String fullName, String formattedRegistrationDate) {
        this.fullName = fullName;
        this.formattedRegistrationDate = formattedRegistrationDate;
    }

    public String getFullName() { return fullName; }
    public String getFormattedRegistrationDate() { return formattedRegistrationDate; }
}

// Presenter logic
class UserPresenter {
    public UserViewModel present(UserOutputData outputData) {
        String fullName = outputData.getFirstName() + " " + outputData.getLastName();

        Instant instant = Instant.ofEpochSecond(outputData.getRegistrationTimestamp());
        DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm")
                                            .withZone(ZoneId.systemDefault());
        String formattedDate = formatter.format(instant);

        return new UserViewModel(fullName, formattedDate);
    }
}

public class Main {
    public static void main(String[] args) {
        // 1. Simulate Use Case returning data
        UserOutputData userData = new UserOutputData(
            "Alice", "Smith", "alice@example.com", 1678886400L // March 15, 2023 12:00:00 PM UTC
        );

        // 2. Presenter transforms data
        UserPresenter presenter = new UserPresenter();
        UserViewModel viewModel = presenter.present(userData);

        // 3. UI "displays" the ViewModel
        System.out.println("Displaying User Profile:");
        System.out.println("Name: " + viewModel.getFullName());
        System.out.println("Registered: " + viewModel.getFormattedRegistrationDate());
    }
}

Test Your Knowledge

Which of the following best describes the primary role of a View Model in Clean Architecture?

Presenting Your Data Cleanly

In this lesson, we explored how Presenters and View Models play a vital role in the presentation layer of Clean Architecture.

Presenters act as data chefs, transforming Use Case output into UI-friendly formats.
View Models are simple, UI-specific data structures, containing only what's needed for display.
This separation boosts testability, maintains UI independence, and allows for flexible UI changes.

By using these patterns, your application's core logic remains pristine, unburdened by presentation details, making your system more robust and maintainable.

Часто задаваемые вопросы

Урок «Представления и модели представления» бесплатный?

Да — полный текст урока «Представления и модели представления» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Clean Architecture & Design Patterns in Practice, подпишись на CoddyKit PRO. Курс Clean Architecture & Design Patterns in Practice содержит 4 уроков всего.

Чему я научусь в уроке «Представления и модели представления»?

Разберитесь, как представления преобразуют данные вариантов использования в модели представления, подходящие для отображения в пользовательском интерфейсе. Ты практикуешь Clean Architecture & Design Patterns in Practice с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Clean Architecture & Design Patterns in Practice?

Предыдущий опыт не требуется. Clean Architecture & Design Patterns in Practice на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Представления и модели представления»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Clean Architecture & Design Patterns in Practice?

Да. Каждый урок Clean Architecture & Design Patterns in Practice включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Представления и модели представления
Адаптация к веб-фреймворкам
Тестирование слоя представления
Скромные объекты и граница представления

← Назад к Clean Architecture & Design Patterns in Practice