Модульная архитектура приложений

Mithril — это современный минималистичный JavaScript-фреймворк для создания одностраничных приложений (SPA). Одной из ключевых особенностей его использования является возможность строить приложения с модульной архитектурой, что обеспечивает удобство поддержки, расширяемость и тестируемость кода. Модульная архитектура предполагает разделение приложения на логически обособленные компоненты и сервисы, каждый из которых выполняет строго определённую роль.

Компоненты

Компоненты в Mithril — это основной строительный блок приложения. Каждый компонент представляет собой объект с обязательным методом view, который возвращает виртуальный DOM (vDOM). Компоненты могут быть как простыми, так и сложными, включающими в себя другие компоненты.

const Header = {
    view: () => m("header", m("h1", "Пример заголовка"))
};

const Footer = {
    view: () => m("footer", "© 2025 Компания")
};

Ключевые принципы работы с компонентами:

Изоляция состояния: каждый компонент может содержать собственное локальное состояние, управляемое через поля объекта или через m.stream.
Переиспользуемость: компоненты можно использовать в разных частях приложения без дублирования кода.
Композиция: сложные компоненты строятся из более простых, формируя дерево компонентов.

Модульные сервисы

Для управления данными и бизнес-логикой создаются отдельные сервисы. Сервис — это объект или модуль, который не зависит от представления (view) и отвечает за обработку данных, коммуникацию с сервером и управление состоянием.

Пример сервиса для работы с API:

const UserService = {
    users: [],
    load: () => m.request({ method: "GET", url: "/api/users" })
                 .then(result => UserService.users = result)
};

Принципы организации сервисов:

Инкапсуляция логики: все операции с данными сосредоточены в сервисе.
Отсутствие прямых зависимостей от DOM: сервисы работают независимо от компонентов.
Удобство тестирования: сервис можно легко замокать при юнит-тестировании компонентов.

Организация структуры проекта

Рекомендованная структура для крупного Mithril-приложения:

/app
  /components
    Header.js
    Footer.js
    UserList.js
  /services
    UserService.js
  /views
    HomeView.js
    UsersView.js
  /routes.js
  /app.js

components/ — отдельные UI-компоненты.
services/ — бизнес-логика и взаимодействие с внешними API.
views/ — представления, объединяющие компоненты и обеспечивающие маршрутизацию.
routes.js — конфигурация маршрутов Mithril.
app.js — точка входа приложения.

Такое разделение помогает поддерживать чистую архитектуру и упрощает масштабирование приложения.

Связь компонентов и сервисов

Компоненты должны получать данные через сервисы, избегая прямой работы с API или состоянием других компонентов. Например:

const UserList = {
    oninit: () => UserService.load(),
    view: () => m("ul", UserService.users.map(user => m("li", user.name)))
};

Особенности взаимодействия:

oninit и oncreate используются для инициализации данных и подписок.
Механизм реактивности: при изменении данных в сервисе можно использовать m.redraw() для обновления представления.

Роутинг и модульность

Mithril предоставляет встроенный роутер, который легко интегрируется с модульной архитектурой. Каждый маршрут связывается с конкретным view:

m.route(document.body, "/", {
    "/": HomeView,
    "/users": UsersView
});

HomeView и UsersView могут состоять из нескольких компонентов, подгружаемых динамически.
Роутер позволяет легко расширять приложение, добавляя новые страницы без изменения существующих компонентов.

Взаимодействие компонентов через события

Для обмена данными между компонентами используют:

Callback-функции: родительский компонент передаёт функцию дочернему компоненту.
События через сервисы: глобальные состояния или события можно хранить в сервисе и подписываться на их изменения.

Пример callback:

const Button = {
    view: ({attrs}) => m("button", {onclick: attrs.onClick}, "Нажми меня")
};

const Counter = {
    count: 0,
    view: () => m("div",
        m(Button, {onClick: () => Counter.count++}),
        m("span", `Счёт: ${Counter.count}`)
    )
};