Есть бесчисленные способы разработки нового приложения Frontend. Вы должны рассмотреть требования к продукту, нефункциональные требования и допущения, основанные на вашем предыдущем опыте. Вам также нужно выкопать глубоко и задать жесткие вопросы, чтобы вы не были удивлены позже по дороге. В этом посте я разделяю результатом процесса, который мы сделали, и решения, которые мы взяли за продукт, который мы в настоящее время разрабатываем, интерактивный и расширяемый видеоредактор.
В настоящее время я работаю над созданием приложения Interactive Video Editor и необходимо для разработки проекта на основе следующих основных требований к продукту:
- Обеспечить Приложение одно страницы (A.k.a. SPA), который содержит сотни компонентов.
- Использовать Существующий сервер Это принадлежит другой команде и обнажает спокойные веб-сервисы (отдых).
- Запишите библиотеку компонентов пользовательского интерфейса (UI-KIT) отдельно, поэтому мы можем использовать его в других продуктах.
Следующая диаграмма показывает соединение между источниками продукта, размещенными в Github, а различные приложения привели к ним, поскольку их используют различные заинтересованные стороны. Это может помочь вам в следующий раз, когда вы разработаете свой продукт.
Репозиторий UI-KIT
Репозиторий UII-KIT MONOREPO содержит компоненты пользовательского интерфейса, написанные в Реагировать Отказ Компоненты сгруппированы по контексту; Каждая группа — библиотека, развернутая в реестре NPM (крупнейший в мире менеджер пакетов для библиотек JavaScript), используя Навесные пакеты Отказ
Мы используем Лерна управлять репозиторием; Лерна — это Насадка Это обрабатывает сложность управления несколькими библиотеками, а затем развертывание их в NPM. Каждый раз, когда мы совершаем изменения в мастер-филиал, действия GitHub, нашей непрерывной службы интеграции и развертывания (CI/CD), автоматически выполняют «Lerna Publish Flow» для генерации и выпуска новой версии в NPM. Во время процесса он использует Обычные комбиниты Методология для принятия решения о следующей версии, а также для обновления документа ChangeLog с контентом новой версии, сгруппированным ошибками, функциями и нарушениями изменения.
Во время развития мы используем Статьгор Рамки для создания рабочей области разработки в реальном времени. Это рабочее пространство представляет собой контролируемую среду, которая позволяет создавать компоненты в изоляции с помощью данных издевательства имитации всех случаев использования и кромки! Как бонус, Статьгор Предоставляет фантастическую поддержку для генерации сайта документации на основе кода, уже написанного во время разработки. Никакого дополнительного кода не требуется, если вы следуете за некоторым рекомендациям по магазинам. Документация, доступная на облаке, означает, что разработчик в вашей команде имеет место для изучения доступных компонентов, их API и образцов интеграционного кода.
Сайт документации и рабочее пространство в реальном времени основаны на Mock Data, что делает их идеальными для персонала QA для запуска их автоматической (с Cypress ) и вручную. Сайт документации также помогает менеджеру по продукту и дизайнеру, поскольку он действует как витрина компонентов, используемых в приложении.
Автоматически сгенерированная документация сайта.
Мы используем единое рабочее пространство для разработки (приложение для сборников сборщиков) и единственное приложение автоматизации (приложение кипариса) для всех библиотек этого репозитория, поскольку все они являются частью того же UI-KIT.
Репозиторий приложений
Скриншоты видов продукта.
Применение репозитория MonorePO также написано в Реагировать Отказ Хотя не развернут до NPM, он все еще написан как группа библиотек, используемых внутри приложения. Разделение кода в библиотеки отлично подходит для повторного использования кода и обслуживания. Для этого мы используем NRWL NX Tool , библиотека с открытым исходным кодом, как наборежная репозитория.
Как в репозитории UI-набора, мы используем Статьгор Чтобы иметь рабочее пространство для разработки в реальном времени, где разработчик создает компоненты до того, как она/он интегрирует их в приложение. Мы следуем следующему подходу « компонент первого подхода |», как он хорошо играет с Реагировать философию И современные концепции развития. Наличие рабочей области разработки в реальном времени с данными издевания помогает создавать надежные компоненты с зрелыми API, которые легко составляют и повторно повторно повторно повторно повторно повторно. Как только мы удовлетворены поведением компонента в рабочей области, мы их интегрируем их в приложение. Персонал QA приоритет приоритетности тестирования в семинаре по мере их имитации всех случаев использования, включая краевые чехлы с использованием данных издевательства. Она/она выполняет тесты в приложении только для случаев использования, которые не могут быть проверены в рабочем пространстве или тестах, которые недоступны в рабочей области, такими как интеграция с API Server или между представлениями компонентов.
Рабочая область развития в реальном времени.
Мы используем действия GitHub (наш сервис CI/CD), чтобы автоматически выпустить новые версии после получения изменений в главной ветке. Процесс выпуска использует Обычные комбиниты вместе с Стандартная версия Чтобы разрешить следующую версию, создайте отпуск в GitHub и добавьте в изменение изменений в зависимости от сообщений Commit.
У нас есть еще один отдельный CI/CD-сервис с именем Vercel (ранее Zeit), который создает автономную версию всех наших продуктов Для каждого запроса на тягу (PR) и совершить у нас есть. Это мощная функция, которая позволяет нам увидеть изменения PR во время обзора кода на предварительно развернутой облачной версии. Когда мы совершаем изменения в PR или к главной отрасли, Vercel создает и публично проводят три разных сайта для каждой версии: сайт документации, рабочее пространство в реальном времени и наше приложение. С уплаченными подписками у нас также есть доступ к неограниченному прошедшему развертыванию, что означает, что мы можем получить доступ к любой выпущенной версии даже месяцев после того, как она была впервые развернута. Поскольку наша приложение предполагает, что клиенты размещают его в элементе HTML Iframe, который предоставляет конфигурацию, используя window.postmessage () , мы развертываем четвертое приложение, которое представляет собой приложение React, которое имитирует логин пользователя и проводит наше настоящее приложение внутри iFrame.
Полное развертывание для каждого фиксации и PR с немедленной обратной связью развертывания.
Мы используем Отзывный , чей лозунг — «Обзоры кода GitHub сделаны правильно». Я чувствую, что этот пост не завершен, если не упомяну об этом сервисе. Я посвящу отдельную пост, обсуждаю конкретные причины, по которым все (ну почти все) разработчики должны использовать Рассмотренный Если они серьезно относится к обзорам кода.
Активные кодовые отзывы выполняются с использованием рассмотрения.
Мы используем единое рабочее пространство для разработки (приложение для сборников сборщиков) и единственное приложение автоматизации (приложение кипариса) для всех библиотек в репозитории, а также хорошо. Я упоминаю это снова, потому что это в отличие от философии и наилучшей практики набора инструментов NRWL NX. Мы делаем это, потому что мы не собираемся разрабатывать приложения различных продуктов в том же репозитории, что поддерживается NRWL Workspace. В нашей реализации все кодовые базы в репозитории принадлежат одному и тому же продукту. Таким образом, поскольку у нас есть только приложения, которые принадлежат к тому же продукту, у нас также есть единое рабочее пространство для разработки и единственное приложение для тестирования кипариса.
Мы создали специальную автономную игровую площадку, которое позволяет нам запустить приложение редактора в изоляции. Он дает возможность этапа разработки с помощью существенных интеграций и случаев использования, обычно не доступными в производственном приложении. Несколько функций отправляют широкую связь с предварительно определенной конфигурацией в другую командую по команде (пусть это будет разработчик, QA личный, менеджер продуктов), интеграция с другими независимыми продуктами, а также выполнение действий власти пользователей, обычно выполняемых вручную. Это автономное приложение развернуто рядом с редактором, используя наш Ci/Cd в промежуточную среду.
Выделенная автономное приложение для игровой площадки, которое обеспечивает этап развития
Выбранный стек технологии интерфейса
Список ниже представляет собой краткий список со ссылками на выбранный стек технологии. Я рассмотрю причины некоторых из выбранных библиотек в будущих постах.
- Frontend Framework: Реагировать
- Управление государством: Redux (с redux-toolkit , redux-наблюдаемый , Redux views Несомненно
- Стайлинг компонентов: CSS. в JS.
- Ui-kit: Муравьиный дизайн
- Drag & Drop: Реагировать
- Анимация: Framer-Motion
- Автоматизация: Кипарис
- Асинхронные потоки: RXJS.
- Комплексная область взаимодействия пользователя: Элементы SVG (
HTML Canvas)
Заключение
В этом посте я рассмотрел решения, которые мы сделали, когда мы разработали один из проектов на моем рабочем месте. Источники не являются общедоступными, поэтому я не могу предоставить ссылку, чтобы просмотреть ее, но я предоставим образцы кода и демо-хранилище в будущих сообщениях. Тем временем не стесняйтесь задавать вопросы.
Обложка фото Артем Кньяз на Бессмысленно
Пост Создание стека приложения сплошного интерфейса, который работает для вас появился в первую очередь sakalim.com блог
Оригинал: «https://dev.to/eransakal/building-a-solid-frontend-application-stack-that-works-for-you-2pm4»