Чистая Архитектура для веб-приложений

Что такое Чистая Архитектура

1. Независимость от фреймворка. Архитектура не зависит от существования какой-либо библиотеки. Это позволяет использовать фреймворк в качестве инструмента, вместо того, чтобы втискивать свою систему в рамки его ограничений.
2. Тестируемость. Бизнес-правила могут быть протестированы без пользовательского интерфейса, базы данных, веб-сервера или любого другого внешнего компонента.
3. Независимоcть от UI. Пользовательский интерфейс можно легко изменить, не изменяя остальную систему. Например, веб-интерфейс может быть заменен на консольный, без изменения бизнес-правил.
4. Независимоcть от базы данных. Вы можете поменять Oracle или SQL Server на MongoDB, BigTable, CouchDB или что-то еще. Ваши бизнес-правила не связаны с базой данных.
5. Независимость от какого-либо внешнего сервиса. По факту ваши бизнес правила просто ничего не знают о внешнем мире.

• View — выводит данные клиенту, фактически визуализирует состояние логики клиенту.
• Controller — отвечает за взаимодействие с пользователем посредством IO (ввод-вывод).
• Service — отвечает за бизнес логику и ее переиспользование между компонентами.
• Repository — отвечает за получение данных из внешних источников, такие как база данных, api, локальное хранилище и пр.
• Models — отвечает за перенос данных между слоями и системами, а также за логику обработки этих данных.

Кому подойдет Чистая Архитектура

Где уже применяется?

    /**
     * View
     */

    @model WebApplication1.Controllers.Profile

    <div class="text-center">
        <h1>Добро пожаловать @Model.FirstName</h1>
    </div>

    /**
     * Controller
     */

    public class IndexController : Controller
    {
        private static int _counter = 0;
        private readonly IUserProfileService _userProfileService;

        public IndexController(IUserProfileService userProfileService)
        {
            _userProfileService = userProfileService;
        }

        public async Task<IActionResult> Index()
        {
            var profile = await this._userProfileService.GetProfile(_counter);
            return View("Index", profile);
        }

        public async Task<IActionResult> AddCounter()
        {
            _counter += 1;
            var profile = await this._userProfileService.GetProfile(_counter);
            return View("Index", profile);
        }
    }

    /**
     * Service
     */

    public interface IUserProfileService
    {
        Task<Profile> GetProfile(long id);
    }

    public class UserProfileService : IUserProfileService
    {
        private readonly IUserProfileRepository _userProfileRepository;

        public UserProfileService(IUserProfileRepository userProfileRepository)
        {
            this._userProfileRepository = userProfileRepository;
        }

        public async Task<Profile> GetProfile(long id)
        {
            return await this._userProfileRepository.GetProfile(id);
        }
    }

    /**
     * Repository
     */

    public interface IUserProfileRepository
    {
        Task<Profile> GetProfile(long id);
    }

    public class UserProfileRepository : IUserProfileRepository
    {
        private readonly DBContext _dbContext;
        public UserProfileRepository(DBContext dbContext)
        {
            this._dbContext = dbContext;
        }

        public async Task<Profile> GetProfile(long id)
        {
            return await this._dbContext
                .Set<Profile>()
                .FirstOrDefaultAsync((entity) => entity.Id.Equals(id));
        }
    }

    /**
     * Model
     */

    public class Profile
    {
        public long Id { get; set; }
        public string FirstName { get; set; }
        public string Birthdate { get; set; }
    }

Применение в веб-приложениях

1. Angular монолитный фреймворк. И это его основная проблема. Если тебе в нем что то не нравится, ты вынужден давиться этим ежедневно, и ничего с этим не поделать. Мало того что в нем масса проблемных мест, так это еще и противоречит идеологии чистой архитектуры.
2. Ужасная адаптация патерна DI. Его просто перенесли как есть, без учета особенностей веб приложений и игнорируя модульную систему импортов современного Javascript.
3. Ужасный движок представлений. Он очень примитивный и сильно уступает простоте JSX. Данные не типизируются на этапе написания кода, а на этапе компиляции научился отлавливать ошибки только в версии 6, а до этого только в рантайме. А прокинуть в компонент два шаблона и получить контент прокинутого и прокидывающего контроллера из разряда фантастики.
4. Старый бандлер. В то время как бандлер Rollup позволял собирать ES2015 и делать 2 бандла для старых и новых браузеров уже 4 года, то сборщик angular научился это делать только в версии 9.
5. И еще много проблем. В целом до ангуляр современные технологии докатываются с задержкой лет в 5 относительно React.

Начинаем создавать приложение

Паттерн Controller

export class SimpleController { // extends React.Component<object, object>

    public todos: string[] = []; // состояние контроллера

    public addTodo(todo: string): void { // вызывает событие от пользователя
        this.todos.push(todo);
    }

    public removeTodo(index: number): void { // вызывает событие от пользователя
        this.todos.splice(index, 1);
    }

    // public render(): JSX.Element {...} // view injection

}

UserPageController. Контроллер с бизнес логикой

export class UserPageControlle {

    public userProfile: any = {};
    public insuranceCases: any[] = [];
    public tariffs: any[] = [];
    public bestTariff: any = {};

    constructor() {
        this.activate();
    }

    public activate(): void {
        this.requestUserProfile();
        this.requestTariffs();
    }

    public async requestUserProfile(): Promise<void> { // получение данных
        try {
            const response = await fetch("./api/user-profile");
            this.userProfile = await response.json();
            this.findBestTariff();
        } catch (e) {
            console.error(e);
        }
    }

    public async requestTariffs(): Promise<void> { // получение данных
        try {
            const response = await fetch("./api/tariffs");
            this.tariffs = await response.json();
            this.findBestTariff();
        } catch (e) {
            console.error(e);
        }
    }

    public findBestTariff(): void { // метод с бизнес логикой
        if (this.userProfile && this.tariffs) {
            this.bestTariff = this.tariffs.find((tarif: any) => {
                return tarif.ageFrom <= this.userProfile.age && this.userProfile.age < tarif.ageTo;
            });
        }
    }

    /**
     * ... множество других методов, запрос страховых случаев,
     * редактирование профиля, выбор тарифа и прочее
     */
}

Паттерн Service

UserPageController. Контроллер без бизнес логики

import { UserProfilService } from "./UserProfilService";
import { TariffService } from "./TariffService";

export class UserPageController {

    public userProfile: any = {};
    public insuranceCases: any[] = [];
    public tariffs: any[] = [];
    public bestTariff: any = {};

    // внедряем сервисы в контроллер
    private readonly userProfilService: UserProfilService = new UserProfilService();
    private readonly tarifService: TariffService = new TariffService();

    constructor() {
        this.activate();
    }

    public activate(): void {
        this.requestUserProfile();
        this.requestTariffs();
    }

    public async requestUserProfile(): Promise<void> {
        try {
            // используем сервисы для получения данных
            this.userProfile = await this.userProfilService.getUserProfile();
            this.bestTariff = await this.tarifService.findBestTariff(this.userProfile);
        } catch (e) {
            console.error(e);
        }
    }

    public async requestTariffs(): Promise<void> {
        try {
            // используем сервис для получения данных
            this.tariffs = await this.tarifService.getTariffs();
        } catch (e) {
            console.error(e);
        }
    }

    /**
     * ... множество других методов, запрос страховых случаев,
     * редактирование профиля, выбор тарифа и прочее
     */
}

UserProfilService. Сервис для работы с профилем пользователя

export class UserProfilService {
    public async getUserProfile(): Promise<any> { // получение данных
        const response = await fetch("./api/user-profile");
        return await response.json();
    }
    
    /**
     * ... множество других методов для работы с профилем пользователя
     */
}

TariffService. Сервис для работы с тарифами

export class TariffService {
    // получение данных
    public async getTariffs(): Promise<any> {
        const response = await fetch("./api/tariffs");
        return await response.json();
    }

    // метод с бизнес логикой
    public async findBestTariff(userProfile: any): Promise<any> {
        const tariffs = await this.getTariffs();
        return tariffs.find((tarif: any) => {
            return tarif.ageFrom <= userProfile.age &&
                userProfile.age < tarif.ageTo;
        });
    }
    
    /**
     * ... множество других методов для работы с тарифами
     */
}

Паттерн Repository

UserProfilService. Сервис для работы с профилем пользователя

import { UserProfilRepository } from "./UserProfilRepository";

export class UserProfilService {

    private readonly userProfilRepository: UserProfilRepository =
        new UserProfilRepository();

    public async getUserProfile(): Promise<any> {
        return await this.userProfilRepository.getUserProfile();
    }
    
    /**
     * ... множество других методов для работы с профилем пользователя
     */
}

UserProfilRepository. Сервис для работы с хранилищем профилей пользователя

export class UserProfilRepository {
    public async getUserProfile(): Promise<any> { // получение данных
        const response = await fetch("./api/user-profile");
        return await response.json();
    }
    
    /**
     * ... множество других методов для работы с профилем пользователя
     */
}

TariffService. Сервис для работы с тарифами

import { TariffRepository } from "./TariffRepository";

export class TariffService {
    
    private readonly tarifRepository: TariffRepository = new TariffRepository();

    public async getTariffs(): Promise<any> {
        return await this.tarifRepository.getTariffs();
    }

    // метод с бизнес логикой
    public async findBestTariff(userProfile: any): Promise<any> {
        // запрашиваем у источника данных
        const tariffs = await this.tarifRepository.getTariffs();
        return tariffs.find((tarif: any) => {
            return tarif.ageFrom <= userProfile.age &&
                userProfile.age < tarif.ageTo;
        });
    }
    
    /**
     * ... множество других методов для работы с тарифами
     */
}

TariffRepository. Репозиторий для работы с хранилищем тарифов

export class TariffRepository {
    // получение данных
    public async getTariffs(): Promise<any> {
        const response = await fetch("./api/tariffs");
        return await response.json();
    }

    /**
     * ... множество других методов для работы с хранилищем тарифов
     */
}

Модели: DTO, Entities, ViewModels

• Entities — отвечают за работу с базой данных и представляют из себя структуру повторяющую таблицу или документ в базе данных.
• DTO (Data Transfer Object) — служат для переноса данных между разными слоями приложения.
• ViewModel — содержат заранее подготовленную информацию необходимую для отображении в представлении.

UserPageController. Вместо типа any используются описанные модели

import { UserProfilService } from "./UserProfilService";
import { TariffService } from "./TariffService";
import { UserProfileDto } from "./UserProfileDto";
import { TariffDto } from "./TariffDto";
import { InsuranceCaseDto } from "./InsuranceCasesDto";

export class UserPageController {

    /**
     * Используем модель для типа и пустую модель для первой отрисовки
     * как заглушку до тех пока данные из сервиса не придут.
     */
    public userProfile: UserProfileDto = new UserProfileDto();
    public insuranceCases: InsuranceCaseDto[] = [];
    public tariffs: TariffDto[] = [];
    public bestTariff: TariffDto | void = void 0;

    private readonly userProfilService: UserProfilService = new UserProfilService();
    private readonly tarifService: TariffService = new TariffService();

    constructor() {
        this.activate();
    }

    public activate(): void {
        this.requestUserProfile();
        this.requestTariffs();
    }

    public async requestUserProfile(): Promise<void> {
        try {
            this.userProfile = await this.userProfilService.getUserProfile();
            this.bestTariff = await this.tarifService.findBestTariff(this.userProfile);
        } catch (e) {
            console.error(e);
        }
    }

    public async requestTariffs(): Promise<void> {
        try {
            this.tariffs = await this.tarifService.getTariffs();
        } catch (e) {
            console.error(e);
        }
    }

    /**
     * ... множество других методов, запрос страховых случаев,
     * редактирование профиля, выбор тарифа и прочее
     */
}

UserProfilService. Вместо any указываем возвращаемую модель

import { UserProfilRepository } from "./UserProfilRepository";
import { UserProfileDto } from "./UserProfileDto";

export class UserProfilService {

    private readonly userProfilRepository: UserProfilRepository =
        new UserProfilRepository();

    public async getUserProfile(): Promise<UserProfileDto> { // возвращаем модель
        return await this.userProfilRepository.getUserProfile();
    }
    
    /**
     * ... множество других методов для работы с профилем пользователя
     */
}

TariffService. Вместо any указываем возвращаемую модель

import { TariffRepository } from "./TariffRepository";
import { TariffDto } from "./TariffDto";
import { UserProfileDto } from "./UserProfileDto";

export class TariffService {
    
    private readonly tarifRepository: TariffRepository = new TariffRepository();

    public async getTariffs(): Promise<TariffDto[]> { // возвращаем модель
        return await this.tarifRepository.requestTariffs();
    }

    // возвращаем модель
    public async findBestTariff(userProfile: UserProfileDto): Promise<TariffDto | void> {
        const tariffs = await this.tarifRepository.requestTariffs();
        return tariffs.find((tarif: TariffDto) => {
            // было userProfile.age стало userProfile.getAge()
            const age = userProfile.getAge();
            return age &&
                tarif.ageFrom <= age &&
                age < tarif.ageTo;
        });
    }
    
    /**
     * ... множество других методов для работы с тарифами
     */
}

UserProfilRepository. Вместо any указываем возвращаемую модель

import { UserProfileDto } from "./UserProfileDto";

export class UserProfilRepository {
    public async getUserProfile(): Promise<UserProfileDto> { // возвращаем модель
        const response = await fetch("./api/user-profile");
        return await response.json();
    }
    
    /**
     * ... множество других методов для рабоыт с профилем пользователя
     */
}

TariffRepository. Вместо any указываем возвращаемую модель

import { TariffDto } from "./TariffDto";

export class TariffRepository {
    public async requestTariffs(): Promise<TariffDto[]> { // возвращаем модель
        const response = await fetch("./api/tariffs");
        return await response.json();
    }

    /**
     * ... множество других методов для работы с хранилищем тарифов
     */
}

UserProfileDto. Модель с описанием данных с которыми мы работаем

export class UserProfileDto { // <-- модель с описанием данных и логикой
    public firstName: string | null = null;
    public lastName: string | null = null;
    public birthdate: Date | null = null;

    public getAge(): number | null {
        if (this.birthdate) {
            const ageDifMs = Date.now() - this.birthdate.getTime();
            const ageDate = new Date(ageDifMs);
            return Math.abs(ageDate.getUTCFullYear() - 1970);
        }
        return null;
    }

    public getFullname(): string | null {
        return [
            this.firstName ?? "",
            this.lastName ?? ""
        ]
            .join(" ")
            .trim() || null;
    }

}

TariffDto. Модель с описанием данных с которыми мы работаем

export class TariffDto {
    public ageFrom: number = 0;
    public ageTo: number = 0;
    public price: number = 0;
}

Десериализация данных

TariffRepository. Добавляем процесс десериализации

import { UserProfileDto } from "./UserProfileDto";

export class UserProfilRepository {
    public async getUserProfile(): Promise<UserProfileDto> {
        const response = await fetch("./api/user-profile");
        const object = await response.json();
        return new UserProfileDto().fromJSON(object); // добавляем десериализацию
    }
    
    /**
     * ... множество других методов для рабоыт с профилем пользователя
     */
}

TariffRepository. Добавляем процесс десериализации

import { TariffDto } from "./TariffDto";

export class TariffRepository {
    public async requestTariffs(): Promise<TariffDto[]> { // возвращаем модель
        const response = await fetch("./api/tariffs");
        const objects: object[] = await response.json();
        return objects.map((object: object) => {
            return new TariffDto().fromJSON(object); // добавляем десериализацию
        });
    }

    /**
     * ... множество других методов для работы с хранилищем тарифов
     */
}

ProfileDto . Добавляем поддержку десериализации

import { Serializable, jsonProperty } from "ts-serializable";

export class UserProfileDto extends Serializable { // <-- наследуемся от базового класса

    @jsonProperty(String, null) // <-- вспомогательный декоратор
    public firstName: string | null = null;

    @jsonProperty(String, null) // <-- вспомогательный декоратор
    public lastName: string | null = null;

    @jsonProperty(Date, null) // <-- вспомогательный декоратор
    public birthdate: Date | null = null;

    public getAge(): number | null {
        if (this.birthdate) {
            const ageDifMs = Date.now() - this.birthdate.getTime();
            const ageDate = new Date(ageDifMs);
            return Math.abs(ageDate.getUTCFullYear() - 1970);
        }
        return null;
    }

    public getFullname(): string | null {
        return [
            this.firstName ?? "",
            this.lastName ?? ""
        ]
            .join(" ")
            .trim() || null;
    }

}

TariffDto. Добавляем поддержку десериализации

import { Serializable, jsonProperty } from "ts-serializable";

export class TariffDto extends Serializable { // <-- наследуемся от базового класса

    @jsonProperty(Number, null) // <-- вспомогательный декоратор
    public ageFrom: number = 0;

    @jsonProperty(Number, null) // <-- вспомогательный декоратор
    public ageTo: number = 0;

    @jsonProperty(Number, null) // <-- вспомогательный декоратор
    public price: number = 0;

}

Dependency Injection — внедряем зависимости

var programm = new IndexPageController(new ProfileService(new ProfileRepository()));

DI.register(IProfileService,ProfileService);

1. При транспиляции Typescript в Javascript от интерфейсов не остается и следа.
2. Все что попало в классический DI остается в нем навсегда. Его очень сложно вычистить при рефакторинге. А в веб приложении необходимо экономить каждый байт.
3. Почти все библиотеки представлений не используют DI и конструкторы контроллеров заняты параметрами.

Соединяем все в единое целое

Main.ts. Место инициализации программы

import { override } from "first-di";
import { UserProfilRepository } from "./UserProfilRepository";
import { MockUserProfilRepository } from "./MockUserProfilRepository";

if (process.env.NODE_ENV === "test") {
    // для тестового окружение подменяем реальный запрос на тестовые данные
    override(UserProfilRepository, MockUserProfilRepository);
}

UserPageController. Внедряем зависимость через декоратор autowired

import { UserProfilService } from "./UserProfilService";
import { TariffService } from "./TariffService";
import { UserProfileDto } from "./UserProfileDto";
import { TariffDto } from "./TariffDto";
import { InsuranceCaseDto } from "./InsuranceCasesDto";
import { autowired } from "first-di";

export class UserPageController {

    public userProfile: UserProfileDto = new UserProfileDto();
    public insuranceCases: InsuranceCaseDto[] = [];
    public tariffs: TariffDto[] = [];
    public bestTariff: TariffDto | void = void 0;

    @autowired() // внедряет зависимость
    private readonly userProfilService!: UserProfilService;

    @autowired() // внедряет зависимость
    private readonly tarifService!: TariffService;

    constructor() {
        // конструктор для внедрения не используется, т.к. занят фреймворком
        this.activate();
    }

    public activate(): void {
        this.requestUserProfile();
        this.requestTariffs();
    }

    public async requestUserProfile(): Promise<void> {
        try {
            this.userProfile = await this.userProfilService.getUserProfile();
            this.bestTariff = await this.tarifService.findBestTariff(this.userProfile);
        } catch (e) {
            console.error(e);
        }
    }

    public async requestTariffs(): Promise<void> {
        try {
            this.tariffs = await this.tarifService.getTariffs();
        } catch (e) {
            console.error(e);
        }
    }

    /**
     * ... множество других методов, запрос страховых случаев,
     * редактирование профиля, выбор тарифа и прочее
     */
}

UserProfilService. Внедряем генерацию рефлексии и зависимости

import { UserProfilRepository } from "./UserProfilRepository";
import { UserProfileDto } from "./UserProfileDto";
import { reflection } from "first-di";

@reflection // заставляет typescript генерировать рефлексию
export class UserProfilService {

    private readonly userProfilRepository: UserProfilRepository;

    constructor(userProfilRepository: UserProfilRepository) {
        // внедряем зависимость через конструктор
        this.userProfilRepository = userProfilRepository;
    }

    public async getUserProfile(): Promise<UserProfileDto> {
        return await this.userProfilRepository.getUserProfile();
    }

    /**
     * ... множество других методов для работы с профилем пользователя
     */
}

TariffService. Внедряем генерацию рефлексии и зависимости

import { TariffRepository } from "./TariffRepository";
import { TariffDto } from "./TariffDto";
import { UserProfileDto } from "./UserProfileDto";
import { reflection } from "first-di";

@reflection // заставляет typescript генерировать рефлексию
export class TariffService {

    private readonly tarifRepository: TariffRepository;

    constructor(tarifRepository: TariffRepository) {
        // внедряем зависимость через конструктор
        this.tarifRepository = tarifRepository;
    }

    public async getTariffs(): Promise<TariffDto[]> {
        return await this.tarifRepository.requestTariffs();
    }

    public async findBestTariff(userProfile: UserProfileDto): Promise<TariffDto | void> {
        const tariffs = await this.tarifRepository.requestTariffs();
        return tariffs.find((tarif: TariffDto) => {
            const age = userProfile.getAge();
            return age &&
                tarif.ageFrom <= age &&
                age < tarif.ageTo;
        });
    }

    /**
     * ... множество других методов для работы с тарифами
     */
}

UserProfilRepository. Внедряем генерацию рефлексии

import { UserProfileDto } from "./UserProfileDto";
import { reflection } from "first-di";

@reflection // заставляет typescript генерировать рефлексию
export class UserProfilRepository {
    public async getUserProfile(): Promise<UserProfileDto> {
        const response = await fetch("./api/user-profile");
        const object = await response.json();
        return new UserProfileDto().fromJSON(object);
    }

    /**
     * ... множество других методов для работы с профилем пользователя
     */
}

MockUserProfilRepository. Новый репозиторий для тестирования

import { UserProfileDto } from "./UserProfileDto";
import { reflection } from "first-di";

@reflection // заставляет typescript генерировать рефлексию
export class MockUserProfilRepository { // репозиторий для тестов
    public async getUserProfile(): Promise<UserProfileDto> {
        const profile = new UserProfileDto();
        profile.firstName = "Констанция";
        profile.lastName = "Константинопольская";
        profile.birthdate = new Date(Date.now() - 1.5e12);
        return Promise.resolve(profile); // возвращаем тестовые данные
    }

    /**
     * ... множество других методов для рабоыт с профилем пользователя
     */
}

TariffRepository. Внедряем генерацию рефлексии

import { TariffDto } from "./TariffDto";
import { reflection } from "first-di";

@reflection // заставляет typescript генерировать рефлексию
export class TariffRepository {
    public async requestTariffs(): Promise<TariffDto[]> {
        const response = await fetch("./api/tariffs");
        const objects: object[] = await response.json();
        return objects.map((object: object) => {
            return new TariffDto().fromJSON(object);
        });
    }

    /**
     * ... множество других методов для работы с хранилищем тарифов
     */
}

Внедряем View

Main.ts. Запускает отрисовку React компонента

import { override } from "first-di";
import { UserProfilRepository } from "./UserProfilRepository";
import { MockUserProfilRepository } from "./MockUserProfilRepository";
import { UserPageController } from "./UserPageController";
import React from "react";
import { render } from "react-dom";

if (process.env.NODE_ENV === "test") {
    // для тестового окружение подменяем реальный запрос на тестовые данные
    override(UserProfilRepository, MockUserProfilRepository);
}

render(React.createElement(UserPageController), document.body);

UserPageController. Наследует от React.Component и добавляет метод render

import { UserProfilService } from "./UserProfilService";
import { TariffService } from "./TariffService";
import { UserProfileDto } from "./UserProfileDto";
import { TariffDto } from "./TariffDto";
import { InsuranceCaseDto } from "./InsuranceCasesDto";
import { autowired } from "first-di";
import React from "react";

// наследуем контроллер от React.Component
export class UserPageController extends React.Component<object, object> {

    public userProfile: UserProfileDto = new UserProfileDto();
    public insuranceCases: InsuranceCaseDto[] = [];
    public tariffs: TariffDto[] = [];
    public bestTariff: TariffDto | void = void 0;

    @autowired()
    private readonly userProfilService!: UserProfilService;

    @autowired()
    private readonly tarifService!: TariffService;

    // реакт занял конструктор
    constructor(props: object, context: object) {
        super(props, context);
    }

    // после создания компонента запускаем запросы
    public componentDidMount(): void {
        this.activate();
    }

    public activate(): void {
        this.requestUserProfile();
        this.requestTariffs();
    }

    public async requestUserProfile(): Promise<void> {
        try {
            this.userProfile = await this.userProfilService.getUserProfile();
            this.bestTariff = await this.tarifService.findBestTariff(this.userProfile);
            this.forceUpdate(); // обновляем view после получения данных
        } catch (e) {
            console.error(e);
        }
    }

    public async requestTariffs(): Promise<void> {
        try {
            this.tariffs = await this.tarifService.getTariffs();
            this.forceUpdate(); // обновляем view после получения данных
        } catch (e) {
            console.error(e);
        }
    }

    // внедрение слоя view
    public render(): JSX.Element {
        return (
            <>
                <div className="user">
                    <div className="user-name">
                        Имя пользователя: {this.userProfile.getFullname()}
                    </div>
                    <div className="user-age">
                        Возраст: {this.userProfile.getAge()}
                    </div>
                </div>
                <div className="tarifаs">
                    {/* остальная часть вьюхи */}
                </div>
            </>
        );
    }

    /**
     * ... множество других методов, запрос страховых случаев,
     * редактирование профиля, выбор тарифа и прочее
     */
}

Разделение Controller и View

UserPageView. Вынесли представление в отдельный файл

import { UserPageOptions, UserPageController } from "./UserPageController";
import React from "react";

export const userPageView = <P extends UserPageOptions, S>(
    ctrl: UserPageController<P, S>,
    props: P
): JSX.Element => (
    <>
        <div className="user">
            <div className="user-name">
                Имя пользователя: {ctrl.userProfile.getFullname()}
            </div>
            <div className="user-age">
                Возраст: {ctrl.userProfile.getAge()}
            </div>
        </div>
        <div className="tarifаs">
            {/* остальная часть вьюхи */}
        </div>
    </>
);

UserPageOptions. Вынесли view и React в отдельный файл

import { UserProfilService } from "./UserProfilService";
import { TariffService } from "./TariffService";
import { UserProfileDto } from "./UserProfileDto";
import { TariffDto } from "./TariffDto";
import { InsuranceCaseDto } from "./InsuranceCasesDto";
import { autowired } from "first-di";
import { BaseComponent } from "./BaseComponent";
import { userPageView } from "./UserPageview";

export interface UserPageOptions {
    param1?: number;
    param2?: string;
}

// наследуем контроллер от BaseComponent
export class UserPageController<P extends UserPageOptions, S> extends BaseComponent<P, S> {

    public userProfile: UserProfileDto = new UserProfileDto();
    public insuranceCases: InsuranceCaseDto[] = [];
    public tariffs: TariffDto[] = [];
    public bestTariff: TariffDto | void = void 0;

    // иньекция представления
    public readonly view = userPageView;

    @autowired()
    private readonly userProfilService!: UserProfilService;

    @autowired()
    private readonly tarifService!: TariffService;

    // типизированные пропсы
    constructor(props: P, context: S) {
        super(props, context);
    }

    // запустится при componentDidMount, см. BaseComponent
    public activate(): void {
        this.requestUserProfile();
        this.requestTariffs();
    }

    public async requestUserProfile(): Promise<void> {
        try {
            this.userProfile = await this.userProfilService.getUserProfile();
            this.bestTariff = await this.tarifService.findBestTariff(this.userProfile);
            this.forceUpdate();
        } catch (e) {
            console.error(e);
        }
    }

    public async requestTariffs(): Promise<void> {
        try {
            this.tariffs = await this.tarifService.getTariffs();
            this.forceUpdate();
        } catch (e) {
            console.error(e);
        }
    }

    /**
     * ... множество других методов, запрос страховых случаев,
     * редактирование профиля, выбор тарифа и прочее
     */
}

BaseComponent. Компонент который абстрагирует нас от конкретного фреймворка

import React from "react";

export class BaseComponent<P, S> extends React.Component<P, S> {

    // внедряем view
    public view?: (ctrl: this, props: P) => JSX.Element;

    constructor(props: P, context: S) {
        super(props, context);
        // можно дописать свою логику
    }

    // абстрагируем от жизненного цикла конкретного фреймворка
    public componentDidMount(): void {
        this.activate && this.activate();
    }

    // абстрагируем от жизненного цикла конкретного фреймворка
    public shouldComponentUpdate(
        nextProps: Readonly<P>,
        nextState: Readonly<S>,
        nextContext: any
    ): boolean {
        return this.update(nextProps, nextState, nextContext);
    }

    public componentWillUnmount(): void {
        this.dispose();
    }

    public activate(): void {
        // метод для переопределения
    }

    public update(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean {
        // метод для переопределения
        return false;
    }

    public dispose(): void {
        // метод для переопределения
    }

    // внедрение слоя view
    public render(): React.ReactElement<object> {
        if (this.view) {
            return this.view(this, this.props);
        } else {
            return React.createElement("div", {}, "Представление не определено");
        }
    }

}

Смотрим результат

Main.ts. Файл с которого запускается программа

import { override } from "first-di";
import { UserProfilRepository } from "./UserProfilRepository";
import { MockUserProfilRepository } from "./MockUserProfilRepository";
import { UserPageController } from "./UserPageController";
import React from "react";
import { render } from "react-dom";

if (process.env.NODE_ENV === "test") {
    override(UserProfilRepository, MockUserProfilRepository);
}

render(React.createElement(UserPageController), document.body);

UserPageView. Представление одного из компонентов программы.

import { UserPageOptions, UserPageController } from "./UserPageController";
import React from "react";

export const userPageView = <P extends UserPageOptions, S>(
    ctrl: UserPageController<P, S>,
    props: P
): JSX.Element => (
    <>
        <div className="user">
            <div className="user-name">
                Имя пользователя: {ctrl.userProfile.getFullname()}
            </div>
            <div className="user-age">
                Возраст: {ctrl.userProfile.getAge()}
            </div>
        </div>
        <div className="tarifаs">
            {/* остальная часть вьюхи */}
        </div>
    </>
);

UserPageController. Логика одного из компонентов для взаимодействия с пользователем

import { UserProfilService } from "./UserProfilService";
import { TariffService } from "./TariffService";
import { UserProfileDto } from "./UserProfileDto";
import { TariffDto } from "./TariffDto";
import { InsuranceCaseDto } from "./InsuranceCasesDto";
import { autowired } from "first-di";
import { BaseComponent } from "./BaseComponent";
import { userPageView } from "./UserPageview";

export interface UserPageOptions {
    param1?: number;
    param2?: string;
}

export class UserPageController<P extends UserPageOptions, S> extends BaseComponent<P, S> {

    public userProfile: UserProfileDto = new UserProfileDto();
    public insuranceCases: InsuranceCaseDto[] = [];
    public tariffs: TariffDto[] = [];
    public bestTariff: TariffDto | void = void 0;

    public readonly view = userPageView;

    @autowired()
    private readonly userProfilService!: UserProfilService;

    @autowired()
    private readonly tarifService!: TariffService;

    // запустится при componentDidMount, см. BaseComponent
    public activate(): void {
        this.requestUserProfile();
        this.requestTariffs();
    }

    public async requestUserProfile(): Promise<void> {
        try {
            this.userProfile = await this.userProfilService.getUserProfile();
            this.bestTariff = await this.tarifService.findBestTariff(this.userProfile);
            this.forceUpdate();
        } catch (e) {
            console.error(e);
        }
    }

    public async requestTariffs(): Promise<void> {
        try {
            this.tariffs = await this.tarifService.getTariffs();
            this.forceUpdate();
        } catch (e) {
            console.error(e);
        }
    }

    /**
     * ... множество других методов, запрос страховых случаев,
     * редактирование профиля, выбор тарифа и прочее
     */
}

BaseComponent. Базовый класс для всех компонентов программы

import React from "react";

export class BaseComponent<P, S> extends React.Component<P, S> {

    public view?: (ctrl: this, props: P) => JSX.Element;

    constructor(props: P, context: S) {
        super(props, context);
    }

    public componentDidMount(): void {
        this.activate && this.activate();
    }

    public shouldComponentUpdate(
        nextProps: Readonly<P>,
        nextState: Readonly<S>,
        nextContext: any
    ): boolean {
        return this.update(nextProps, nextState, nextContext);
    }

    public componentWillUnmount(): void {
        this.dispose();
    }

    public activate(): void {
        // метод для переопределения
    }

    public update(nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any): boolean {
        // метод для переопределения
        return false;
    }

    public dispose(): void {
        // метод для переопределения
    }

    public render(): React.ReactElement<object> {
        if (this.view) {
            return this.view(this, this.props);
        } else {
            return React.createElement("div", {}, "Представление не определено");
        }
    }

}

UserProfilService. Сервис для переиспользования логики между компонентами для работы с профилем пользователя

import { UserProfilRepository } from "./UserProfilRepository";
import { UserProfileDto } from "./UserProfileDto";
import { reflection } from "first-di";

@reflection
export class UserProfilService {

    private readonly userProfilRepository: UserProfilRepository;

    constructor(userProfilRepository: UserProfilRepository) {
        this.userProfilRepository = userProfilRepository;
    }

    public async getUserProfile(): Promise<UserProfileDto> {
        return await this.userProfilRepository.getUserProfile();
    }

    /**
     * ... множество других методов для работы с профилем пользователя
     */
}

TariffService. Сервис для переиспользования логики между компонентами для работы с тарифами

import { TariffRepository } from "./TariffRepository";
import { TariffDto } from "./TariffDto";
import { UserProfileDto } from "./UserProfileDto";
import { reflection } from "first-di";

@reflection
export class TariffService {

    private readonly tarifRepository: TariffRepository;

    constructor(tarifRepository: TariffRepository) {
        this.tarifRepository = tarifRepository;
    }

    public async getTariffs(): Promise<TariffDto[]> {
        return await this.tarifRepository.requestTariffs();
    }

    public async findBestTariff(userProfile: UserProfileDto): Promise<TariffDto | void> {
        const tariffs = await this.tarifRepository.requestTariffs();
        return tariffs.find((tarif: TariffDto) => {
            const age = userProfile.getAge();
            return age &&
                tarif.ageFrom <= age &&
                age < tarif.ageTo;
        });
    }

    /**
     * ... множество других методов для работы с тарифами
     */
}

UserProfilRepository. Репозиторий для получение профиля с сервера, его проверки и валидации

import { UserProfileDto } from "./UserProfileDto";
import { reflection } from "first-di";

@reflection
export class UserProfilRepository {
    public async getUserProfile(): Promise<UserProfileDto> {
        const response = await fetch("./api/user-profile");
        const object = await response.json();
        return new UserProfileDto().fromJSON(object);
    }

    /**
     * ... множество других методов для рабоыт с профилем пользователя
     */
}

MockUserProfilRepository. Репозиторий для тестирования логики и верстки на тестовых данных

import { UserProfileDto } from "./UserProfileDto";
import { reflection } from "first-di";

@reflection // заставляет typescript генерировать рефлексию
export class MockUserProfilRepository { // репозиторий для тестов
    public async getUserProfile(): Promise<UserProfileDto> {
        const profile = new UserProfileDto();
        profile.firstName = "Констанция";
        profile.lastName = "Константинопольская";
        profile.birthdate = new Date(Date.now() - 1.5e12);
        return Promise.resolve(profile); // возвращаем тестовые данные
    }

    /**
     * ... множество других методов для рабоыт с профилем пользователя
     */
}

TariffRepository. Репозиторий для получение тарифов с сервера, их проверки и валидации

import { TariffDto } from "./TariffDto";
import { reflection } from "first-di";

@reflection // заставляет typescript генерировать рефлексию
export class TariffRepository {
    public async requestTariffs(): Promise<TariffDto[]> {
        const response = await fetch("./api/tariffs");
        const objects: object[] = await response.json();
        return objects.map((object: object) => {
            return new TariffDto().fromJSON(object);
        });
    }

    /**
     * ... множество других методов для работы с хранилищем тарифов
     */
}

UserProfileDto. Модель с логикой и описанием данных для переноса данных между слоями

import { Serializable, jsonProperty } from "ts-serializable";

export class UserProfileDto extends Serializable {

    @jsonProperty(String, null)
    public firstName: string | null = null;

    @jsonProperty(String, null)
    public lastName: string | null = null;

    @jsonProperty(Date, null)
    public birthdate: Date | null = null;

    public getAge(): number | null {
        if (this.birthdate) {
            const ageDifMs = Date.now() - this.birthdate.getTime();
            const ageDate = new Date(ageDifMs);
            return Math.abs(ageDate.getUTCFullYear() - 1970);
        }
        return null;
    }

    public getFullname(): string | null {
        return [
            this.firstName ?? "",
            this.lastName ?? ""
        ]
            .join(" ")
            .trim() || null;
    }

}

TariffDto. Модель с логикой и описанием данных для переноса данных между слоями

import { Serializable, jsonProperty } from "ts-serializable";

export class TariffDto extends Serializable {

    @jsonProperty(Number, null)
    public ageFrom: number = 0;

    @jsonProperty(Number, null)
    public ageTo: number = 0;

    @jsonProperty(Number, null)
    public price: number = 0;

}

В чем преимущество относительно Redux?

let create = new Function([
"return {",
...new Array(100).fill(1).map((val, ind) => `param${ind}:${ind},`),
"}"
].join(""));

let obj1 = create();

console.time("store recreation time");
let obj2 = {
    ...obj1,
    param100: 100 ** 2
}
console.timeEnd("store recreation time");

console.time("clear logic");
let val = 100 ** 2;
console.timeEnd("clear logic");

console.log(obj2, val);

// store recreation time: 0.041015625ms
// clear logic: 0.0048828125ms

Бонус 1: Расширение функционала компонентов фреймворка

export class BaseComponent<P, S> extends React.Component<P, S> {

    ...

    public render(): React.ReactElement<object> {
        try {
            if (this.view) {
                return this.view(this, this.props);
            } else {
                return React.createElement("div", {}, "Представление не определено");
            }
        } catch (e) {
            return React.createElement(
                "div",
                { style: { color: "red" } },
                `В этом компоненте произошла ошибка: ${e}`
            );
        }
    }

}

Бонус 2: Валидация данных

Бонус 3: Создание сущностей

Спасибо за внимание