Введение в паттерны и архитектуру🏠

Работяги! В прошлом опросе тема архитектуры и паттернов набрала больше всех голосов, поэтому буду стараться писать о ней чаще.
Реакт на втором месте, поэтому скоро тоже будет.👨‍💻

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

🧑‍🎓Нам понадобится:

1. «Паттерны объектно-ориентированного проектирования» Эрих Гамма, Ричард Хелм, Роберт Джонсон, Джон Влиссидес — знаменитая книга банды четырех. Кто-то ее списал в утиль, но не я. Считаю ее базовой, нужно лишь адаптировать рецепты под свою область.

2. «Рефакторинг-гуру» — великолепный материал. Как книга банды четырех, но более простым языком и с большим кол-вом примеров(есть и на TS).

3. «Dive Into DESIGN PATTERNS» Oleksandr Shvets — замечательная книга для новичков в архитектуре и паттернах от создателя «Рефакторинг-гуру».

4. Сайт Эдди Османи — топ-труд по шаблонам для фронтендера. У Эдди есть еще и книги, если хотите, можете и их почитать, они хорошие.

5. «Чистая архитектура. Искусство разработки программного обеспечения» Роберт Мартин — последняя в списке, но не последняя по значению.

👨‍💻Теперь инструкция:

1. База-базовая. Читаем книгу «Dive Into DESIGN PATTERNS» Oleksandr Shvets. Читаем всё до главы «Каталог паттернов». Эта часть объяснит нам, что вообще такое эта архитектура, зачем о ней думать, какие базовые критерии есть и где в этом всем паттерны. Расскажет про солид, который станет базой для наших решений.

2. Паттерны. Далее начинаются паттерны. Читаем по одному паттерну с сайта «Рефакторинг-гуру». Смотрим на этом же сайте пример на TS. После этого читаем про него же у банды четырех(там написано максимально сухо и академично, но классический вариант знать надо). После этого смотрим на сайт Эдди Османи, если наш паттерн есть там, то читаем его. В итоге мы получаем следующую картину: понятное описание + пример на TS + классическое описание + адаптация под JS/Frontend. Таким образом у вас будет полная картина о каждом паттерне, останется шлифануть практикой.

3. Практика. После изучения паттерна не пихайте его везде. Не нужно подгонять задачи под паттерны, адаптируйте паттерны под ваши ситуации. Шаблоны должны быть органично использованы. В самом начале этой органичности, скорее всего, не будет, понимание приходит с опытом. Для тренировки можете брать места в ваших проектах, которые болят, и на листочке их перепроектировать различными вариантами, реализовывать необязательно, схемы на листочке для тренировки будет достаточно. Листочек и карандаш вообще крутой тренажер. Помните, каждый паттерн — это в первую очередь идея, а уже после реализация, поэтому не бойтесь адаптировать, главное — не теряйте сути.

4. Развиваем. После изучения базы про архитектуру, солида и базового набора паттернов можно переходить к изучению более специфичных паттернов(остальные паттерны с сайта Эдди Османи) и дальнейшему погружению в архитектуру(Чистая архитектура Мартина).

Тут ничего нет про FSD, структуру папок в вашем проекте и т. д. Да, я считаю, что нет смысла строить дворец на фундаменте от сельского туалета, поэтому предлагаю стартовать с базы. После этого вам будет проще видеть полную картину и принимать решения самостоятельно, а не следовать как зомби правилам конкретной методологии.