Архитектура фронтэнд приложений ​

Есть разные теоретические определения и обоснования данного понятия, но грубо говоря это следующее.

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

Хорошая архитектура фронтенд приложения позволяет выполнить всё это наиболее эффективно с наименьшими затратами.

Многие приходя из разработки на объектно-ориентированных языках пытаются использовать концепции ООП и на фронте и программировать с классами, наследованием, полиморфизмом и прочим.

Это ошибка. Основные вычисления на фронте связаны с UI - показ данных, обработка взаимодействия с пользователем. Системы классов и микросервисов на них просто не нужны. Конечно, можно создать базовую кнопку, обернуть ее в два кастомных компонента и считать это наследованием, но в коде этого не получается. Поэтому надо учиться мыслить другими категориями - компоненты, композаблы, js модули. И использовать свою мощь JavaScript-a, а не пытаться натянуть его на ООП.

В то же время неплохой аналогией объекта с глобальным ("статичным") и локальным ("объектным") состоянием является композабл функция. Это можно использовать в определённых ситуациях.

Самая удобная архитектура для Vue 3 приложения - модульная.

Изначально, приложение разбивается на логические модули, слабо связанные друг с другом. Например, для онлайн магазина это могут быть модуль каталога товаров, модуль отдельного товара, модуль личного кабинета / аккаунта пользователя.

Кроме того, есть модуль оболочки - то, что иногда называет app shell. Шаблон с хедером, футером, боковым меню и главным окном. В этот модуль целесообразно поместить утилиты и ресурсы, используемые по всему приложению - например, api, useI18n, BaseButton и stringHelpers.

В каждом модуле свои components, composables, assets, utils; возможно, api, routes, views, layouts.

Слабая связанность позволяет разрабатывать каждый модуль достаточно независимо, что значительно повышает вероятность успешности проекта.

Избегайте зависимостей ​

Если есть возможность не вводить новую зависимость (не подключать новый npm пакет) - не делайте это. Это может немного сэкономит ваше время, но сторонняя библиотека рано или поздно устареет, перестанет поддерживаться, в ней могут обнаружить уязвимость. Кроме того она увеличивает размер вашего бандла, что напрямую влияет на производительность вашего приложения. Tree shaking хорош в рекламных зазываниях, но работает реально далеко не всегда.

Если вам нужна, например, функция debounce, не торопитесь подключать её вместе с какой-либо библиотекой. Загуглите её реализацию и скопируйте 15 строк кода, сделав свою функцию.

Используйте обертки над компонентами UI библиотек и сторонних утилит ​

Если вы используете компоненты какой-то UI библиотеки, не используйте их напрямую - сделайте обертки для них. Например, BaseButton или BaseInput. Это намного облегчит стилизацию компонент, а также сильно упростит переход на другую библиотеку, или замену на свои компоненты.

То же самое с утилитами.

Регулярный рефакторинг ​

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

Используйте CSS3 ​

Старайтесь использовать для адаптивноcти чистый CSS3. Не привязывайтесь к колоночным моделям CSS и UI библиотек, если только это не проект из разряда: "сделал и забыл, пусть заказчик дальше с ним мучается".

Потратьте пару дней на изучение Флексбокса и вы сможете верстать на нём быстрей и лучше, чем на любом Тайлвинде.

Используйте современные стандарты и возможности языков ​

Например, семантические элементы HTML5 - aside, header, section, article, details и.т.д.

CSS3 - Flexbox и Grid, Container query

Документируйте проект ​

Рисуйте use-case и другие диаграммы, описывайте основной функционал проекта и важные детали его реализации - это как минимум повысит ваш уровень как разработчика ПО.

VitePress - очень удобный инструмент для технического документирования.