Статьи с тегом "#программирование"

🧱 Фундаментальные принципы организации

Прежде чем перейти к папкам, важно понять ключевые идеи, лежащие в основе любой хорошей структуры:

• Разделение ответственности (Separation of Concerns): Код разбивается на слои с четкими задачами. Например, слой представления (UI) не должен знать, как работает слой доступа к данным (DB). Это делает систему гибкой и тестируемой.

• Feature-First (Предметно-ориентированная) vs. Type-First (Тип-ориентированная) структура: Вместо группировки файлов по их технической роли (components/, hooks/, utils/), feature-first подход группирует все файлы, относящиеся к одной бизнес-функции (например, profile/, checkout/), в одном месте. Это значительно упрощает навигацию и поддержку в больших проектах.

• Масштабируемость (Scalability): Структура должна легко позволять добавлять новые функции, не ломая старые, и быть понятной для новых членов команды.

📁 Структура для разных частей стека

1. Backend: Express.js, Hono, Fastify

Для серверной части (API) хорошо зарекомендовала себя многослойная архитектура. Вот как она выглядит на практике.

Общая идея (Layered Architecture):

src/
├── config/           # Конфигурации (env, БД, логирование)
├── modules/          # Фичи/модули (feature-first подход)
│   └── users/        # Пример модуля "Пользователи"
│       ├── controllers/   # Обработка HTTP запросов
│       ├── services/      # Бизнес-логика
│       ├── repositories/  # Работа с БД
│       ├── schemas/       # Валидация (Zod, TypeBox)
│       ├── types/         # TypeScript типы для модуля
│       └── index.ts       # Точка входа модуля
├── shared/           # Общие утилиты, middleware, ошибки
│   ├── middleware/
│   ├── errors/
│   └── utils/
├── app.ts            # Инициализация приложения (роуты, middleware)
└── server.ts         # Запуск сервера

• Express.js: Классический пример — server/ с src/, где лежат resolvers/, models/, prisma/. В более продвинутых шаблонах используют controllers/, services/, routes/.

• Hono: Так как Hono не навязывает структуру, в сообществе предлагают гибкие подходы. Можно использовать feature-first структуру с папкой features/, где каждый модуль содержит свои api/ (эндпоинты), services/ (бизнес-логику), repositories/ (доступ к данным) и validation/. Общие части выносятся в core/ и shared/.

• Fastify: Рекомендуется структура с routes/ (группировка по ресурсам), plugins/ (для регистрации функциональности), services/ и repositories/.

2. Frontend: React / Next.js

Здесь ключевой выбор — между App Router (рекомендуемый) и Pages Router.

Структура для Next.js (App Router):

my-nextjs-app/
├── app/                    # Маршруты и страницы (App Router)
│   ├── (auth)/             # Группа маршрутов для аутентификации
│   ├── (dashboard)/        # Группа для защищенных страниц
│   ├── api/                # API Routes (serverless функции)
│   ├── layout.tsx          # Корневой layout
│   └── page.tsx            # Домашняя страница
├── src/                    # Исходный код приложения (опционально)
│   ├── components/         # Переиспользуемые UI компоненты
│   │   ├── ui/             # Базовые (Button, Input)
│   │   └── layout/         # Структурные (Header, Sidebar)
│   ├── features/           # Фичи (самодостаточные модули)
│   │   └── profile/        # Пример фичи "Профиль"
│   │       ├── components/
│   │       ├── hooks/
│   │       ├── services/   # API вызовы для фичи
│   │       └── types/
│   ├── lib/                # Утилиты, конфигурация клиентов (API, React Query)
│   ├── hooks/              # Кастомные React хуки (глобальные)
│   ├── types/              # Общие TypeScript типы
│   └── context/            # React Context провайдеры
├── public/                 # Статические файлы
└── package.json

Ключевые моменты:

• Используйте app/ для новых проектов.

• Для изоляции кода применяйте Route Groups (groupName).

• Код, относящийся к одной функции, группируйте в features/.

• Общие компоненты храните в components/.

• Серверную логику (работа с БД, сервисы) выносите в папку server/ или lib/server/.

🏗️ Архитектура на уровне решения (Monorepo)

Если вы разрабатываете фронтенд и бэкенд в одном репозитории, используйте монорепозиторий (monorepo). Это стандарт для полного цикла разработки.

Пример структуры монорепозитория:

my-monorepo/
├── packages/ или apps/
│   ├── frontend/          # Next.js приложение
│   │   ├── app/
│   │   ├── components/
│   │   └── package.json
│   └── backend/           # Express / Hono / Fastify приложение
│       ├── src/
│       │   ├── modules/
│       │   ├── shared/
│       │   └── server.ts
│       └── package.json
├── docker-compose.yml
├── package.json           # Корневой package.json с workspaces
└── turbo.json или pnpm-workspace.yaml

Инструменты для управления: pnpm workspaces, npm workspaces, или Turborepo для более сложных сценариев.

🚀 Специфика для Bun

Bun — это не только рантайм, но и пакетный менеджер, и сборщик.

• Структура: Стандартный проект на Bun выглядит так:

  text

  my-bun-app/
  ├── src/           # Исходный код
  ├── index.ts       # Точка входа
  ├── package.json
  └── tsconfig.json

• Монорепозиторий: Bun отлично поддерживает workspaces в package.json для создания монорепозиториев.

📈 От простого к сложному: Эволюция структуры

Важно понимать, что структура растет вместе с проектом:

1. Начальный уровень (Small Project): app/, components/, lib/, types/. Просто и быстро.

2. Средний уровень (Medium Project): Добавляются features/ для логической группировки, server/ для серверной логики, ui/ для общих компонентов.

3. Продвинутый уровень (Enterprise): Внедряются Domain-Driven Design (DDD) с папкой entities/, четкое разделение на core/, modules/, shared/ и использование принципов Чистой архитектуры.

💎 Итог: Стратегия выбора

1. Начните с малого: Для нового проекта используйте простую, но логичную структуру (например, app/ + components/ + lib/ для Next.js).

2. Рефакторинг по мере роста: Как только проект начинает разрастаться, внедряйте feature-first подход, группируя код по функциям в папке features/.

3. Разделяйте backend и frontend: Даже в монорепозитории четко разделяйте код клиента и сервера по разным пакетам.

4. Следуйте соглашениям фреймворка: Используйте App Router в Next.js, роутинг по ресурсам в Fastify, и feature-based структуру в Hono.

Выбор правильной структуры — это инвестиция в будущее вашего проекта. Начните с обдуманного базового варианта и развивайте его по мере необходимости.

В современной веб-разработке с использованием TypeScript, React, Next.js и Node.js сложился ряд отраслевых стандартов и лучших практик. Эти практики помогают создавать код, который легко поддерживать, масштабировать и развивать в команде.

Ниже представлен сводный обзор ключевых стандартов для каждого компонента вашего стека.

📝 Единые стандарты кода и TypeScript

• Стиль кода: Для обеспечения единообразия в команде принято использовать один из популярных стилевых гайдов, например Airbnb JavaScript Style Guide или Google Style Guide. Их легко внедрить с помощью соответствующих конфигураций для ESLint (eslint-config-airbnb-typescript, eslint-config-google).

• Строгий TypeScript: В файле tsconfig.json обязательно нужно устанавливать "strict": true. Это включает все строгие проверки типов, что является фундаментом надежности кода.

• Инструменты линтинга и форматирования: Используйте ESLint для поиска проблем в коде и Prettier для автоматического форматирования. Это обязательный минимум для любого современного проекта.

⚛️ Стандарты для React и Next.js

• Компоненты: Предпочтение отдается функциональным компонентам с четко описанными TypeScript-интерфейсами для props. По возможности используйте серверные компоненты (Server Components) по умолчанию.

• Производительность: Для оптимизации используйте встроенные хуки: useCallback для мемоизации функций, useMemo для дорогих вычислений и React.memo для предотвращения лишних перерисовок компонентов.

• Маршрутизация: В новых проектах на Next.js используйте App Router, так как это современный и рекомендуемый подход.

⚙️ Стандарты для серверных фреймворков (Express.js, Hono, Fastify)

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

Общие для всех бэкенд-фреймворков практики:

• Структура проекта (Layered Architecture): Следуйте четкому разделению ответственности, выделяя слои:

  • routes/ — определение эндпоинтов.

  • controllers/ — обработка HTTP-запросов и ответов.

  • services/ — бизнес-логика (не должна зависеть от HTTP).

  • repositories/ или models/ — работа с данными и базой данных.

  • middleware/ — кастомные middleware (аутентификация, валидация, логирование).

• Валидация: Всегда проверяйте входные данные на границе приложения (в контроллере или middleware). Для этого отлично подходят библиотеки вроде Zod или TypeBox.

• Обработка ошибок: Используйте централизованный обработчик ошибок и иерархию кастомных классов ошибок (например, ValidationError, NotFoundError).

🚀 Стандарты для рантаймов (Bun и Node.js)

• Node.js: Это стандарт де-факто для серверной разработки с огромной экосистемой.

• Bun: Позиционируется как более быстрая альтернатива. Его стоит рассматривать, если важна производительность, а встроенный бандлер и тест-раннер могут упростить тулинг.

  • Ключевая практика для Bun: Bun нативно поддерживает TypeScript, поэтому для запуска .ts файлов не нужны дополнительные инструменты вроде ts-node. Предпочтительно использовать встроенные Web API (fetch, fs, path) вместо Node.js-специфичных, где это возможно.

🏗️ Общие принципы архитектуры

• Чистая архитектура: Стремитесь к тому, чтобы ваша бизнес-логика (сервисы) не зависела от внешних фреймворков и баз данных. Это делает код более тестируемым и гибким.

• Single Responsibility (SRP): Каждый модуль, класс или функция должны иметь одну четкую зону ответственности.

• DRY (Don't Repeat Yourself): Избегайте дублирования кода, выносите повторяющуюся логику в утилиты или переиспользуемые хуки/компоненты.

🛠️ Рекомендованный инструментарий

• Линтер: eslint с плагинами для TypeScript, React и Next.js.

• Форматтер: prettier.

• Типы: typescript (строгий режим).

• Валидация: zod (отлично работает с TypeScript для вывода типов).

• Управление состояниями (React): Redux Toolkit или Zustand (более легковесный).

В целом, ключ к успеху — это строгая типизация, четкая структура проекта и автоматизированные инструменты для поддержания качества кода. Выбор между конкретными фреймворками (Express vs Fastify vs Hono) и рантаймами (Node vs Bun) зависит от конкретных требований вашего проекта к производительности, среде запуска и опыту команды.

🧱 Архитектура решения

Создание такой студии потребует разделения на три ключевых уровня:

1. Клиентская часть (Frontend): Здесь пользователь будет работать с макетом в реальном времени. Этот уровень отвечает за отрисовку, перемещение, масштабирование объектов и работу с кривыми.

2. Серверная логика (Backend - PHP/MySQL): Обрабатывает запросы от фронтенда, сохраняет данные макетов в базу данных и управляет файлами.

3. Система конвертации: Компонент, который преобразует сохраненный макет в необходимые форматы для скачивания (SVG, PNG, PDF, EPS, CDR).

Рассмотрим подробнее лучшие инструменты для каждого из этих слоев.

🎨 Клиентская часть (Frontend)

Это мозг вашего редактора. Пользователь видит и взаимодействует с макетом именно здесь.

• Fabric.js: Это, вероятно, ваш лучший выбор в качестве основы.

  • Что это? Мощная JavaScript-библиотека для работы с элементом ``. Она предоставляет объектную модель для векторных и растровых изображений.

  • Плюсы: Идеально подходит для создания графических редакторов, поддерживает сложные объекты, кривые Безье, слои, фильтры. Создана для интерактива.

  • Как использовать: Вы передаете в браузер пользователя HTML-страницу с Fabric.js. Он создает холст, а когда пользователь завершает работу, вы сериализуете состояние холста в JSON и отправляете на сервер через обычный PHP-скрипт.

• Альтернативы:

  • Paper.js: Более ориентирован на векторную графику и кривые. Отлично подходит для сложного рисования пером, но порог входа выше, чем у Fabric.js.

  • Three.js: Используется только если вам нужна работа с 3D-объектами или сложными 3D-эффектами. Для 2D-дизайна это избыточно.

⚙️ Серверная часть (Backend - PHP)

Здесь хранятся пользовательские данные и управляется бизнес-логика.

• Сохранение макетов:

  • При сохранении вы получаете от фронтенда JSON-строку (например, {"objects":[{"type":"rect", ...}]}).

  • Вы можете сохранить эту строку напрямую в базу данных MySQL в поле типа TEXT или JSON. Это самый быстрый и простой способ.

  • Альтернативно, вы можете генерировать и хранить на сервере SVG файлы, но JSON удобнее для последующего редактирования.

• Библиотеки для работы с векторной графикой:

  • Imagick (PHP Extension): Это обязательное расширение для вашего сервера. Оно является оберткой над мощнейшей библиотекой ImageMagick, которая умеет читать, конвертировать и записывать изображения в более чем 100 форматах, включая SVG, PDF, EPS и множество растровых. Оно станет основой для вашей системы конвертации.

  • Alto\Bezier: Если вам нужна чисто PHP-библиотека для сложных математических операций с кривыми (оценка, разбиение, измерение), это отличный инструмент. Он идеально подходит для экспорта данных в SVG.

🖨️ Система конвертации (SVG/PNG/PDF/EPS/CDR)

Это самый сложный, но решаемый этап. Ожидать, что PHP на 100% нативно создаст файл .cdr, не приходится, поэтому стратегия строится на конвертации через другие форматы.

• Схема конвертации: JSON (из базы) -> SVG -> (нужный формат)

  1. Из JSON в SVG: Это ваша первая и ключевая задача. Нужно написать PHP-скрипт, который берет JSON из базы данных и превращает его в чистый XML-код SVG-файла. Это можно сделать с помощью простых манипуляций со строками или специализированной библиотеки (например, norkunas/php-svg).

  2. Из SVG в PNG: Это делается через Imagick одной-двумя строками кода.

  3. Из SVG в PDF:

     • Вариант А (Простой): Использовать Imagick. Он тоже умеет конвертировать SVG в PDF.

     • Вариант Б (Качественный): Использовать Inkscape через командную строку (exec или shell_exec). Inkscape — это профессиональный векторный редактор, и его консольная версия дает очень качественный результат. Пример: inkscape input.svg --export-filename=output.pdf.

  4. Из SVG в EPS:

     • Здесь тот же выбор: либо Imagick, либо Inkscape.

  5. Из SVG в CDR (Самое сложное):

     • Честное решение: Конвертировать SVG -> PDF (как описано выше), а затем использовать сторонний сервис или API. Формат CDR является проприетарным (собственность Corel).

     • Возможные сервисы: Посмотрите в сторону API для конвертации документов, например, от Aspose или GroupDocs. У них есть облачные сервисы, которые могут преобразовать PDF или SVG в CDR. Это будет платным, но наиболее надежным решением.

     • Альтернатива: Можно попробовать через LibreOffice в headless-режиме, который может открывать SVG и экспортировать в другие форматы. Это может сработать, но результат с CDR не гарантирован и может быть нестабильным.

📦 Сторонние API для конвертации

Чтобы не изобретать велосипед для сложных форматов, можно использовать готовые облачные решения:

• Aspose.Total / Aspose.PDF: Мощные коммерческие API, которые умеют создавать, редактировать и конвертировать PDF, а также работать с EPS.

• GroupDocs.Conversion: Еще одно мощное коммерческое API для конвертации между множеством форматов, включая CDR.

Резюме и рекомендация

💎 Резюме и рекомендация

Для старта я бы рекомендовал следующий технологический стек:

1. Frontend: Fabric.js.

2. Backend: PHP + MySQL.

3. Серверные утилиты: Установить Inkscape и ImageMagick на сервер, подключить к PHP расширение Imagick.

4. Стратегия конвертации:

   • Сначала реализовать конвертацию в SVG, PNG, PDF и EPS через Imagick (быстро, но есть риск потери качества).

   • Для премиум-качества конвертации в PDF и EPS настроить вызов Inkscape.

   • Конвертацию в CDR на начальном этапе исключить или реализовать через платное API (например, Aspose), так как это самая трудоемкая задача.

   • В будущем, при необходимости полностью контролировать процесс конвертации SVG в PDF/EPS и иметь ресурсы на разработку, можно рассмотреть использование Cairo в качестве единого бэкенда для рендеринга.

Надеюсь, эта подробная схема поможет вам сориентироваться.

🧲Умный Сайдбар — всегда рядом, но никогда не мешает

Мы полностью переработали поведение правой колонки, чтобы чтение статей стало максимально комфортным и естественным. Новый Smart Sticky‑сайдбар адаптируется под ваши действия и ведёт себя так, как вы ожидаете.

1. Как это работает

Естественная прокрутка

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

Умное закрепление (Smart Sticky)

📉 При движении вниз

Когда вы прокручиваете страницу вниз и достигаете нижней границы сайдбара, он мягко фиксируется у нижнего края экрана.
Вы видите весь его контент — без внутренних полос прокрутки и без «матрешек».

📈 При движении вверх

Как только вы начинаете прокручивать страницу вверх:

• сайдбар сразу «отлипает»
• движется вверх вместе со страницей
• когда его верхняя часть достигает видимой области — фиксируется у шапки

Поведение получается естественным и предсказуемым.

2. Главные преимущества

🖥 Использование всей полезной площади

Сайдбар больше не ограничен высотой экрана.
Даже если он длиннее вашего монитора — вы всё равно увидите его полностью при обычной прокрутке.

🧹 Никаких лишних скроллбаров

Мы убрали внутренние полосы прокрутки.
Остался только один — общий для всей страницы.

🧲 Плавность и стабильность

Сайдбар движется:

• без рывков
• без дрожания
• без конфликтов с CSS‑sticky

Он ощущается как часть контента, а не как отдельный блок.

✨ Итог

Навигация стала:

• целостной
• современной
• предсказуемой
• удобной

Сайдбар всегда там, где вы ожидаете его увидеть — и никогда не перекрывает контент.

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