Clean Architecture & Design Patterns in Practice · Lekcja

Presenters i View Models

Dowiedz się, jak Presenters formatują dane z Use Cases do postaci View Models odpowiedniej do wyświetlenia w interfejsie użytkownika.

Presenters i View Models to bezpłatna lekcja Clean Architecture & Design Patterns in Practice na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Clean Architecture & Design Patterns in Practice, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Clean Architecture & Design Patterns in Practice zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

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.

Często zadawane pytania

Czy lekcja „Presenters i View Models” jest bezpłatna?

Tak — pełny tekst „Presenters i View Models” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Clean Architecture & Design Patterns in Practice, przejdź na CoddyKit PRO. Kurs Clean Architecture & Design Patterns in Practice zawiera 4 lekcji w sumie.

Co nauczysz się w „Presenters i View Models”?

Dowiedz się, jak Presenters formatują dane z Use Cases do postaci View Models odpowiedniej do wyświetlenia w interfejsie użytkownika. Ćwiczysz Clean Architecture & Design Patterns in Practice z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Clean Architecture & Design Patterns in Practice?

Nie wymagamy żadnego doświadczenia. Clean Architecture & Design Patterns in Practice w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Presenters i View Models”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Clean Architecture & Design Patterns in Practice?

Tak. Każda lekcja Clean Architecture & Design Patterns in Practice zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Clean Architecture & Design Patterns in Practice