С момента своего возникновения веб-приложения прошли долгий путь. Мы знаем, какую важную роль играет в вебе JavaScript и какие безграничные возможности есть у нас при выборе фреймворков и технологий. Каждый фреймворк имеет свои достоинства и недостатки, но почти во всех используются какие-то основные методологии. Такие инструменты как create-react-app, next.js, vue-cli и другие действительно полезны для начального формирования проекта и его структуры, но в остальном вы вольны создавать приложение в соответствии со своими предпочтениями и требованиями проекта.
В статье собран список принципов, которые будут полезны при создании веб-приложений с помощью React и Vue. Они помогут вам задать нужное направление и упорядочить разработку. Большинство этих принципов применимо к созданию любого ПО, но всё же список предназначен именно для веб-приложений.
1. Разрабатывайте компоненты, а не экраны
- Старайтесь инкапсулировать всю логику компонента, чтобы его можно было легко отобразить где угодно, например, на разных экранах и в разных разделах.
- Все CRUD-операции обращаются за необходимыми данными к контроллерам/поставщикам. Эти данные потом передаются компонентам, которые с ними связаны. Один из распространенных подходов заключается в использовании redux/vuex: данные сохраняются в хранилище и рассматриваются как истинные, а контейнеры извлекают нужную информацию.
2. Разделяйте уровни представления и бизнес-логику/управление
Не всем компонентам нужно подключение к хранилищам, серверному API или каким-то иным сервисам. Когда делаешь компоненты «безразличными к источнику данных», очень сильно повышаются возможности по их многократному использованию.
3. Применяйте стандартный способ извлечения данных
- Этот принцип замечательно иллюстрирует rest-hooks, который поощряет создание простой и понятной структуры вызовов API.
- Для некоторых проектов достаточно использования вызовов с явным извлечением данных. Но если вы работаете с многочисленными источниками и взаимосвязями, то вам поможет абстрагирование серверного API.
4. Используйте общую стратегию ввода информации пользователями
- Сюда относятся формы, выбор меток, проверки и валидации, ошибочные состояния.
- Есть подходящие решения уже из коробки: библиотеки с компонентами пользовательского интерфейса предлагает antd.
- Если вы создаёте приложение без использования UI-библиотеки, то постарайтесь стандартизировать элементы ради улучшения пользовательского опыта.
5. Пишите автоматизированные тесты
- Компоненты лучше тестировать с помощью интеграционных тестов, например, Cypress.
- Необходимо тщательно проверять бизнес-логику с помощью модульных тестов.
- e2e полезно для smoke-тестирования больших пользовательских сценариев. Это поможет выявить регрессии между клиентами и API.
6. Используйте Storybook для создания компонентов многократного использования
Storybook – прекрасный инструмент для взаимодействия с дизайнерами и обсуждения функциональности. Он служит «руководством по стилю» для вашего приложения.
7. Используйте линтеры и средства форматирования
- Примеры линтеров: ESLint, stylelint.
- Большинство инструментов для быстрого старта, например, create-react-app, заранее установят для вас линтеры. Но если вы работаете со старой кодовой базой, то линтеры могут быть бесполезны.
- Они помогают в поиске багов, но также могут применяться для формирования стиля кода, который пишет команда. Это снижает когнитивную нагрузку при работе над фичами, которые вы получили от своих коллег.
- Плагин sonarJS eslint поможет улучшить качество кода за счёт проверки его логической структуры.
- prettier — это прекрасный инструмент форматирования. Достаточно настроить его один раз и забыть. Очень полезно при работе в команде.
8. Избегайте глобальных стилей
- Переопределения и сбросы могут быть глобальными.
- Создать изолированные стили можно с помощью CSS-модулей или CSS-in-JS.
- Локальные стили часто улучшают ситуацию с многократным использованием компонентов.
9. Используйте структурированное версионирование
Модель ветвления:
- Например, gitflow — «модель ветвления для Git, созданная Винсентом Дриссеном».
- Для командной работы необходимо наличие структуры в вашем версионировании. Но это будет полезно и при самостоятельной работе.
Инструмент для линтинга коммит-сообщений — commitlint
- Полезен при создании списка изменений и поиске багов в ходе работы над проектом.
- Правила по написанию коммит-сообщений в Angular часто подходят и для других проектов. А commitlint поможет соблюдать эти правила, когда будете писать свои сообщения.
10. Поддерживайте changelog
В самом начале любого проекта обычно легко держать все изменения в памяти. По мере роста проекта changelog может быть главным «хранилищем», где будут описаны заметные изменения кодовой базы. Пройдут месяцы и даже годы, а он все еще будет актуален для вас.
Список можно продолжать бесконечно
Да, сюда можно добавить ещё много пунктов, в зависимости от сферы вашего проекта и используемых технологий. Перечисленного будет достаточно для радикального улучшения многих фронтенд-приложений. Почти каждый принцип можно применять постепенно и в зависимости от приоритетов, которые определите вы и ваша команда. Так что не нужно думать о том, как применить всё и сразу :)
Автор: A11oW
