Инициализация приложения и базовая структура

Hyperapp — это минималистичный JavaScript-фреймворк для построения реактивных пользовательских интерфейсов. Основная цель его архитектуры — обеспечить простую и прозрачную организацию приложения при минимальном количестве кода. Структура Hyperapp строится вокруг состояния (state), действий (actions) и представления (view).

Основные элементы приложения

  1. State (состояние) Состояние представляет собой объект, который хранит все данные приложения. В отличие от классических подходов, Hyperapp использует единый источник истины, где все данные сосредоточены в одном объекте.

    const state = {
  count: 0,
  user: {
    name: "Alice",
    loggedIn: false
  }
};

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

  2. Actions (действия) Действия — это функции, которые изменяют состояние. Они принимают текущее состояние и возвращают новый объект состояния или часть состояния.

    const actions = {
  increment: (state) => ({ count: state.count + 1 }),
  login: (state, payload) => ({ user: { ...state.user, loggedIn: true, name: payload.name } })
};

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

  3. View (представление) Представление формируется с помощью JSX или гипер-функции h. Оно зависит только от состояния и не должно иметь собственной логики изменения состояния.

    import { h } from "hyperapp";

const view = (state, actions) => (
  h("div", {}, [
    h("h1", {}, `Счётчик: ${state.count}`),
    h("button", { onclick: actions.increment }, "Увеличить")
  ])
);

    Каждый ререндер происходит автоматически при изменении состояния, что упрощает синхронизацию данных с интерфейсом.

Инициализация приложения

Для запуска Hyperapp используется функция app, которая связывает состояние, действия и представление. Стандартная инициализация выглядит так:

import { app, h } from "hyperapp";

app({
  init: state,
  view: view,
  node: document.getElementById("app"),
  actions: actions
});

Пояснения к ключевым параметрам:

  • init — начальное состояние приложения.
  • view — функция, формирующая DOM-структуру на основе состояния.
  • node — корневой элемент в DOM, куда будет рендериться приложение.
  • actions — объект действий для управления состоянием.

Функция app возвращает объект с теми же действиями, что позволяет вызывать их извне или тестировать отдельные функции.

Компонентная структура

Hyperapp поддерживает разбиение приложения на компоненты, что повышает читаемость и масштабируемость. Компоненты — это функции, которые принимают состояние и действия и возвращают виртуальный DOM.

const Counter = ({ count }, { increment }) => (
  h("div", {}, [
    h("h2", {}, `Счёт: ${count}`),
    h("button", { onclick: increment }, "Увеличить")
  ])
);

const view = (state, actions) => (
  h("div", {}, [
    h(Counter, { count: state.count }, { increment: actions.increment })
  ])
);

Компоненты могут быть чистыми функциями, не зависящими от глобального состояния, что облегчает их повторное использование и тестирование.

Работа с побочными эффектами

Для обработки асинхронных операций (запросы к API, таймеры) Hyperapp использует концепцию effects. Эффект — это объект или функция, которая вызывается после выполнения действия.

const fetchUser = (state, actions) => ({
  type: "fetch",
  url: "/api/user",
  success: (data) => actions.setUser(data)
});

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

Рекомендации по структуре проекта

  • src/state.js — содержит начальное состояние.
  • src/actions.js — набор действий для управления состоянием.
  • src/components/ — каталог компонентов приложения.
  • src/view.js — основная функция представления, объединяющая компоненты.
  • src/index.js — точка входа, где вызывается app.

Такое разделение упрощает поддержку больших приложений и делает код более читаемым.

Принципы работы Hyperapp

  1. Минимализм — маленький размер ядра, отсутствие лишней инфраструктуры.
  2. Реактивность — интерфейс автоматически обновляется при изменении состояния.
  3. Иммутабельность — изменения состояния только через действия, без прямой мутации.
  4. Компонентность — приложение строится из функций-компонентов, упрощая повторное использование.

Эта структура формирует классический каркас приложения Hyperapp, который позволяет создавать как небольшие виджеты, так и масштабные одностраничные приложения с предсказуемой реактивностью и прозрачным управлением состоянием.

Оглавление