Details

Данная работа посвящена созданию удобного и гибкого фронтенда для современных веб-приложений. В ходе исследования изучены существующие решения, выбраны наиболее подходящие технологии и спроектирована система, которая упрощает процесс разработки и масштабирования веб-приложений. Основные задачи работы: - Анализ требований к веб-приложениям и изучение потребностей пользователей. - Обзор современных технологий и инструментов для создания фронтенда. - Разработка удобной структуры проекта на основе Feature-Sliced Design. - Реализация компонентов интерфейса с использованием React и Redux Toolkit. - Настройка взаимодействия с сервером через API и улучшение доступности (Web Accessibility). - Проведение тестирования приложения, которое включает в себя unit, интеграционное и End-to-End тестирование. - Внедрение автоматизации процессов CI/CD для быстрого масштабирования. В работе использованы популярные технологии, такие как React, Next.js, TypeScript, Redux Toolkit, SCSS и Jest. Метод Feature-Sliced Design помог сделать проект более удобным для поддержки и доработки. Итогом работы стало создание фронтенд-приложения, которое можно использовать повторно, экономя время и ресурсы разработчиков при создании новых веб-приложений. Благодаря своим качествам приложение уже находится на этапах внедрения и подготовки к релизу в нескольких компаниях.

This work is devoted to the creation of a convenient and flexible frontend for modern web applications. During the study, existing solutions were studied, the most suitable technologies were selected, and a system was designed that simplifies the process of developing and scaling web applications. Main objectives of the work: - Analysis of requirements for web applications and study of user needs. - Review of modern technologies and tools for creating a frontend. - Development of a convenient project structure based on Feature-Sliced Design. - Implementation of interface components using React and Redux Toolkit. - Setting up interaction with the server via API and improving accessibility (Web Accessibility). - Conducting application testing, which includes unit, integration and End-to-End testing. - Implementing CI/CD process automation for rapid scaling. The work used popular technologies such as React, Next.js, TypeScript, Redux Toolkit, SCSS and Jest. The Feature-Sliced Design method helped make the project more convenient for support and refinement. The result of the work was the creation of a front-end application that can be reused, saving time and resources for developers when creating new web applications. Due to its qualities, the application is al-ready at the stages of implementation and preparation for release in several companies.

• ВВЕДЕНИЕ
• ГЛАВА 1. АКТУАЛЬНОСТЬ
  • 1.1. Цели
  • 1.2. Задачи
• ГЛАВА 2. ОБЗОР СУЩЕСТВУЮЩИХ РЕШЕНИЙ
• ГЛАВА 3. ВЫБОР ИНСТРУМЕНТОВ И ТЕХНОЛОГИЙ
• ГЛАВА 4. РАЗРАБОТКА
  • 4.1 Архитектура приложения
  • 4.1 Разработка компонентов
  • 4.3 Виртуальный DOM и его внутренняя механика
  • 4.4 Настройка маршрутизации
  • 4.5 Доступность в вебе (Web Accessibility)
  • 4.6 Настройка конфигурации TypeScript
  • 4.7 Управление состоянием и настройка Redux Toolkit
  • 4.8 Стилизация приложения. SCSS и модульные стили
  • 4.9 Настройка конфигурации для работы с API
  • 4.10 Настройка линтера
  • 4.11 Тестирование приложения
  • 4.12 Настройка непрерывной интеграции и непрерывной доставки
  • 4.13 Планы по развитию
• ЗАКЛЮЧЕНИЕ
• СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ