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

Тема выпускной квалификационной работы: «Разработка

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

Данная работа посвящена созданию удобного и гибкого фронтенда для

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

Основные задачи работы:

- Анализ требований к веб-приложениям и изучение потребностей

пользователей.

- Обзор современных технологий и инструментов для создания фронтенда.

- Разработка удобной структуры проекта на основе 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 помог сделать проект более удобным для поддержки и доработки. Итогом работы стало создание фронтенд-приложения, которое можно использовать повторно, экономя время и ресурсы разработчиков при создании новых веб-приложений. Благодаря своим качествам приложение уже находится на этапах внедрения и подготовки к релизу в нескольких компаниях.

ВВЕДЕНИЕ ................................................................................................................. 6

ГЛАВА 1. АКТУАЛЬНОСТЬ .................................................................................... 8

1.1. ЦЕЛИ ...................................................................................................................... 8

1.2. ЗАДАЧИ .................................................................................................................. 8

ГЛАВА 2. ОБЗОР СУЩЕСТВУЮЩИХ РЕШЕНИЙ ........................................... 10

ГЛАВА 3. ВЫБОР ИНСТРУМЕНТОВ И ТЕХНОЛОГИЙ .................................. 13

ГЛАВА 4. РАЗРАБОТКА ........................................................................................ 15

4.1 АРХИТЕКТУРА ПРИЛОЖЕНИЯ ................................................................................ 15

4.1 РАЗРАБОТКА КОМПОНЕНТОВ ................................................................................. 18

4.3 ВИРТУАЛЬНЫЙ DOM И ЕГО ВНУТРЕННЯЯ МЕХАНИКА.......................................... 22

4.4 НАСТРОЙКА МАРШРУТИЗАЦИИ ............................................................................. 23

4.5 ДОСТУПНОСТЬ В ВЕБЕ (WEB ACCESSIBILITY) ....................................................... 24

4.6 НАСТРОЙКА КОНФИГУРАЦИИ TYPESCRIPT ........................................................... 26

4.7 УПРАВЛЕНИЕ СОСТОЯНИЕМ И НАСТРОЙКА REDUX TOOLKIT ................................ 30

4.8 СТИЛИЗАЦИЯ ПРИЛОЖЕНИЯ. SCSS И МОДУЛЬНЫЕ СТИЛИ ................................... 32

4.9 НАСТРОЙКА КОНФИГУРАЦИИ ДЛЯ РАБОТЫ С API ................................................. 37

4.10 НАСТРОЙКА ЛИНТЕРА ......................................................................................... 41

4.11 ТЕСТИРОВАНИЕ ПРИЛОЖЕНИЯ ............................................................................ 43

4.12 НАСТРОЙКА НЕПРЕРЫВНОЙ ИНТЕГРАЦИИ И НЕПРЕРЫВНОЙ ДОСТАВКИ ............. 50 4.13 ПЛАНЫ ПО РАЗВИТИЮ ......................................................................................... 52 ЗАКЛЮЧЕНИЕ ......................................................................................................... 54

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ ............................................... 57

1. Коноплев Дмитрий Эдуардович Закат десктопов: как мобильные

платформы меняют медиа и их аудиторию // Вестник ЧелГУ. 2015. №5 (360). URL:

2. Флэнаган Д. JavaScript //Подробное руководство, Изд-во «Символ-Плюс.

– 2013.

3. Дакетт Д. HTML и CSS. Разработка и дизайн веб-сайтов. – Litres, 2022.

4. Чиннатамби К. Изучаем React. – Litres, 2019.

5. Файн Я., Моисеев А. Angular и TypeScript. Сайтостроение для

профессионалов. – Питер, 2023.

6. Хэнчетт Э., Листуон Б. Vue. js в действии. – Питер, 2024.

7. Климович Н. Контент: топовые техники SEO-продвижения. – Litres,

2022.

8. Мартин Р. Чистый код: создание, анализ и рефакторинг. – Питер, 2022. 9. Стефанов С. React. Быстрый старт. – Питер, 2024.

всего 25 источников