Framework Free Frontend (FFF)

Экспериментальная архитектура для high-load портала, где фреймворк (Nuxt / Next / SvelteKit) — адаптер, а не ядро.

Зачем это нужно

Типичный фронтенд быстро обрастает логикой внутри framework-API: plugins, composables, pages, stores. Такой код плохо переносится и плохо тестируется вне конкретного стека.

Цель FFF: бизнес-логика, доменные use-cases, HTTP-контракты и UI-state живут вне фреймворка. Смена стека ≈ замена пары адаптеров и синтаксиса шаблонов компонентов — без переписывания домена и application-слоя.

High-load здесь — нагрузка на архитектуру (границы слоёв, изоляция, тестируемость), а не бенчмарки RPS в этом репозитории.

Демо-полигон

Не продукт, а 3–4 эталонные страницы, на которых отрабатываем слои:

Сценарий	Что проверяем
Таблица с фильтрами / пагинацией / sync с URL	списки, query-state, пагинация (/clients)
Каталог товаров	листинг, фильтры каталога, карточки
Корзина	клиентский state, мутации, side-effects
Авторизация (опционально)	сессия, guard, границы доступа

Слои архитектуры

flowchart TB
  pages[Pages_Templates]
  adapters[Framework_Adapters]
  appLayer[Application_UseCases]
  domain[Domain_Models_Rules]
  infra[Infra_HTTP_Storage]

  pages --> adapters
  adapters --> appLayer
  appLayer --> domain
  appLayer --> infra

• Domain — типы, инварианты, правила; без Vue / Nuxt / React / Svelte.
• Application — use-cases (listClients, addToCart и т.п.); без UI.
• Infra — HTTP, storage; интерфейсы на стороне application, реализации сменные.
• Adapters — тонкая склейка с хостом (useRoute, $fetch, plugins в Nuxt; аналоги в Next / SvelteKit).
• Pages — только композиция и шаблон.

Правило портативности: Nuxt → Next (или SvelteKit) = заменить adapters + переписать templates; domain / application / infra-contracts не трогаем.

Текущий статус

• Host: Nuxt 4.5 (future.compatibilityVersion: 5) + Nitro mocks.
• Эталон /clients разложен по слоям FFF:
  • src/domain/client — типы
  • src/application/clients — порт + listClients
  • src/infra/http — HTTP-реализация репозитория
  • app/adapters/clients — Nuxt-склейка (useClientsList, query-sync)
  • app/components/clients — presentational UI
  • app/pages/clients — только композиция
• Mock REST API и use-query-sync на месте.

Это направление эксперимента, а не готовый multi-framework monorepo.

Запуск

npm install
npm run dev

• Портал: /
• Клиенты: /clients
• API: /api/clients

Скрипты

• npm run lint — ESLint
• npm run test — Vitest (unit)
• npm run build — production build

E2E (Playwright + Docker)

Playwright-пакет в tests/e2e/:

tests/e2e/
  specs/          # только сценарии (clients/, cart/, …)
  support/
    fixtures/     # Playwright fixtures
    utils/        # assertions, helpers
  playwright.config.ts
  docker-compose.yml
  …

Локально (без Docker):

npm run dev          # приложение на http://127.0.0.1:4000 (PORT из .env)
npm run e2e:run      # прогон тестов

Через Docker (nginx-кэш + Playwright-контейнер):

npm run dev              # на хосте, порт 4000
npm run e2e:run-docker   # shell в Playwright-контейнере
# внутри контейнера:
npx playwright test -c ./tests/e2e/playwright.config.ts
# или снапшоты под Linux (как на Jenkins):
CI=true npm run e2e:ci -- --update-snapshots
npm run e2e:stop-docker

Вход в nginx-контейнер:

npm run e2e:run-nginx

Для WSL / Docker Desktop при необходимости задайте PW_BASE_URL (IP хоста, порт 4000).

• npm run e2e:run — Playwright локально
• npm run e2e:ci — Playwright для CI (JUnit + line reporter, поднимает preview через start-server:test)
• npm run e2e:run:watch — watch по spec-файлам
• npm run e2e:run-ui — UI mode
• npm run e2e:run-docker — поднять Docker и войти в Playwright shell
• npm run e2e:run-nginx — поднять Docker и войти в nginx shell
• npm run e2e:stop-docker — остановить контейнеры
• npm run start-server:test — build + preview для CI

Jenkins (e2e на PR)

Pipeline: tests/e2e/Jenkinsfile (по аналогии с tenchat-ssr-nuxt).

Jenkins (jenkins.primne.com):

1. New Item → Multibranch Pipeline → имя, например nuxt-clients-e2e.
2. Branch Sources → Gitea / Forgejo:
   • Server URL: https://git.primne.com
   • Credentials: токен Forgejo с доступом к sunsay/nuxt-clients
   • Owner: sunsay, Repository: nuxt-clients
   • Behaviours: Discover pull requests from origin (и при необходимости ветки master / main).
3. Build Configuration → Script Path: tests/e2e/Jenkinsfile.
4. Scan Multibranch Pipeline Triggers → периодический scan (например, каждые 5 мин) или webhook (ниже).

Forgejo (репозиторий sunsay/nuxt-clients → Settings → Webhooks):

Поле	Значение
Target URL	https://jenkins.primne.com/gitea-webhook/post
Content type	application/json
Events	Pull request (и при необходимости Push)

После merge webhook PR получает статус сборки в Forgejo (нужен Gitea/Forgejo plugin в Jenkins).

Docker-образ: e2e Jenkinsfile задаёт self-contained K8s pod с mcr.microsoft.com/playwright:v1.61.1-jammy (не inheritFrom 'playwright' — merge оставлял образ шаблона v1.51.1). Тег должен совпадать с @playwright/test в tests/e2e/package.json и tests/e2e/Dockerfile.

Локальная проверка CI-потока:

npm ci
npm --prefix=./tests/e2e ci
cp .env.example .env
CI=true npm run e2e:ci