Перейти к основному содержимому

UI

Настраиваемый фронтенд бэк-офиса и дашбордов.

Пользовательский интерфейс​

Как следует из названия, в папке 📂 ui находится логика пользовательского интерфейса приложения.

Она позволяет вести разработку для изменения поведения бэк-офиса приложения.

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

Для разработки общего кода приложения, будь то бэкенд или фронтенд, рекомендуем бесплатные редакторы кода, такие как:

Структура папки​

./ui/
 ├─ ./src/
 │   ├─ ./components/
 │   │   └─ ./МояКнопка/
 │   │       └─ ./index.jsx
 │   ├─ ./containers/
 │   │   └─ ./КонтейнерДашборда/
 │   │       ├─ ./index.jsx
 │   │       └─ ./index.less
 │   ├─ ./styles/
 │   │   └─ ./main.less
 │   └─ ./index.jsx
 ├─ ./package.json
 ├─ ./vite.config.js
 └─ ./README.md

Исходный код​

Папка 📂 src содержит прикладной код фронтенда. В этой папке находится организация React-компонентов, соответственно components и containers.

Контейнеры​

Папка 📂 containers предназначена для контейнеров — React-компонентов для областей с наибольшим количеством взаимодействий, то есть компонентов с большим количеством функциональности; обычно они охватывают значительную область экрана и могут объединять другие компоненты в зависимости от контекста.

Например, он отображает таблицу заказов с формой для фильтрации, а также график, агрегирующий месячный итог; всё это внутри контейнера, при этом каждый элемент мог бы быть отдельным компонентом, но объединяется в контейнере заказов на дашборде.

Компоненты​

Папка 📂 components предназначена для переиспользуемых компонентов в React; обычно они реализуют довольно специфичную функциональность, которую полезно интегрировать в другие компоненты или контейнеры.

Обычно они имеют более простое поведение и очень сосредоточены на своей цели в определённом контексте, чтобы их можно было переиспользовать в нескольких контейнерах или даже в других компонентах.

Примерами компонентов могут быть конкретная таблица, форма, тип графика и многое другое.

Стили​

Папка 📂 styles обычно служит для глобальных стилей различных контейнеров приложения. Хотя в этой области нет строгого стандарта, мы предлагаем организовывать стили, специфичные для компонента или контейнера, рядом с ними, то есть внутри соответствующей папки компонента.

Vite​

Чтобы была сгенерирована финальная версия кода на JavaScript, содержащая UI приложения, скомпилированная и оптимизированная, которая обрабатывается и используется браузером, необходимо выполнить соответствующую компиляцию фронтенд-кода, написанного на React/JSX.

Эта компиляция выполняется с помощью Vite, а её конфигурация и другие инструкции находятся в файле:

  • vite.config.js

Он находится в корне папки 📂 ui.

Менеджер пакетов​

Файл package.json используется менеджером модулей зависимостей; рекомендуем использовать Bun для установки всех необходимых зависимостей фронтенда.

А команды выполнения используют Bun, что также является важной рекомендацией.

Поэтому рекомендуем установить Bun.

Инструкции​

В файле README.md содержатся инструкции по установке и выполнению.

Чтобы установить зависимости, выполните:

  • bun install

А для запуска компиляции фронтенд-кода в режиме разработки:

  • bun run watch

Или для финальной окончательной компиляции, оптимизированной для продакшена:

  • bun run build

По умолчанию компиляция создаёт следующие файлы:

  • ../public/scripts/ui.js
  • ../public/scripts/ui.js.map
  • ../public/styles/ui.css

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