Skip to content

GossJS/itmo-nir

 
 

Repository files navigation

Сравнительный анализ Backend-Driven UI и классического подхода

Проект для проведения сравнительного анализа двух подходов к разработке пользовательских интерфейсов согласно методике из НИР2.

Развернутое приложение

Backend-Driven UI

Классический подход

Структура проекта

itmo-nir/
├── bdui/              # Реализация Backend-Driven UI
├── classic/           # Реализация классического подхода
├── COMPARISON.md      # Методика проведения сравнения
├── Каримова_ЮО_НИР.docx      # НИР1: Обзор литературы
└── Каримова_ЮО_НИР_2.docx    # НИР2: Методика сравнения

Описание подходов

Backend-Driven UI (BDUI)

  • Структура: Backend → BFF → Frontend
  • Особенность: Сервер отдает структуру страницы с блоками (JSON)
  • Frontend: Универсальный рендерер блоков
  • Изменения: Через админ-панель или API, без пересборки фронтенда

Классический подход

  • Структура: Backend → Frontend
  • Особенность: Сервер отдает только данные
  • Frontend: Жестко закодированные компоненты страниц
  • Изменения: Требуется изменение кода и пересборка фронтенда

Быстрый старт

Запуск BDUI

cd bdui
docker compose up --build

Запуск Classic

cd classic
docker compose up --build

Примечание: Проекты настроены на разные порты, поэтому можно запускать оба одновременно.

Параметры сравнения

Согласно НИР2, сравнение проводится по 5 параметрам:

  1. Скорость доставки изменений (TTM) - время от коммита до появления у пользователей
  2. Объём передаваемых данных - размер ответов API и количество запросов
  3. Производительность UI - метрики First Contentful Paint, Time to Interactive
  4. Использование ресурсов - нагрузка на CPU и RAM
  5. Простота поддержки - субъективная оценка удобства разработки

Сценарии тестирования

  1. S1: Малая правка - замена текста кнопки и цвета фона
  2. S2: Новая форма - добавление формы из 5 полей с валидацией
  3. S3: A/B-эксперимент - показ альтернативного баннера 50% пользователей
  4. S4: Оффлайн-режим - открытие страницы без сети

Методика сравнения

  • COMPARISON.md - Общая методика и описание параметров сравнения
  • STEP_BY_STEP_COMPARISON.md - ⭐ Подробная пошаговая инструкция с командами и примерами
  • DEPLOYMENT_GUIDE.md - 🚀 Руководство по развертыванию на облаке для более реалистичного сравнения TTM
  • PLATFORM_COMPARISON.md - 📊 Сравнение Render vs Railway - какой выбрать для развертывания
  • RAILWAY_SETUP.md - 🚂 Пошаговая инструкция по развертыванию на Railway - как задеплоить оба проекта
  • RAILWAY_QUICK_FIX.md - 🔧 Быстрое решение проблемы "Railpack could not determine" - создание отдельных сервисов

Документация НИР

  • НИР1: Анализ зарубежных и отечественных научных источников по теме Backend-Driven UI
  • НИР2: Разработка методики сравнительного анализа BDUI и классического подхода
  • НИР3: Практическое сравнение подходов (в процессе)

Технологии

  • Backend: Node.js + Express
  • Frontend: React
  • BFF: Node.js + Express (только для BDUI)
  • Контейнеризация: Docker + Docker Compose

Лицензия

Проект создан в рамках научно-исследовательской работы в Университете ИТМО.

About

Репозиторий Юлии Каримовой к НИР-3

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • JavaScript 81.4%
  • CSS 14.2%
  • Python 2.3%
  • Dockerfile 1.2%
  • HTML 0.9%