Чем отличался предпоследний проект от последнего?

Сравнение предпоследнего и последнего проектов

В моей практике как Frontend Developer, предпоследний и последний проекты существенно отличались по архитектуре, технологическому стеку, методологии разработки и бизнес-задачам.

Предпоследний проект: Корпоративный CRM-портал

Технологический стек:

// Основные технологии:
- Vue.js 2 + Vuex
- Классовые компоненты + Options API
- Webpack 4
- REST API (Axios)
- SCSS с BEM-методологией
- Jest для unit-тестов

Ключевые особенности:

• Монолитная архитектура – единое приложение с модульной структурой
• Строгая типизация через JSDoc комментарии
• Компонентный подход средней степени переиспользования
• Ручная оптимизация производительности (ленивая загрузка, мемоизация)
• Waterfall-методология с четкими этапами сдачи

Бизнес-задачи:

• Автоматизация внутренних бизнес-процессов
• Интеграция с legacy-системами
• Поддержка IE11 (что сильно ограничивало современные подходы)
• Строгие требования к accessibility (WCAG 2.1 AA)

Последний проект: FinTech SaaS-платформа

Технологический стек:

// Современный стек:
- React 18 + TypeScript
- Next.js 14 (App Router)
- Zustand + React Query
- Tailwind CSS + shadcn/ui
- Vite + Turborepo
- Cypress + Vitest
- GraphQL (Apollo Client)

Ключевые отличия:

1. Архитектурный парадигм-сдвиг:

   • Микросервисная фронтенд-архитектура (Monorepo с Turborepo)
   • Server Components и Server Actions в Next.js
   • Инфраструктура как код – полная CI/CD автоматизация

2. Подход к состоянию приложения:

   // Вместо глобального хранилища – комбинация решений:
   - React Query для server state
   - Zustand для client state
   - URL Search Params для фильтров
   - Local Storage для пользовательских настроек
   

3. Производительность как приоритет:

   • Automatic code splitting через Next.js
   • Измерение Core Web Vitals в production
   • Edge Runtime для критичных к задержке операций
   • Оптимизация изображений через next/image

4. Методология разработки:

   • Full TypeScript с strict режимом
   • Feature-Sliced Design архитектура
   • Trunk-based development с короткоживущими ветками
   • A/B тестирование на уровне компонентов

5. Инфраструктурные различия:

   Предпоследний:           Последний:
   ------------           ------------
   • Ручные деплои        • Автоматические деплои на Vercel
   • Self-hosted          • Cloud-native (AWS + Vercel)
   • Ежемесячные релизы   • Множественные деплои в день
   • Мануальное тестирование • E2E тесты на каждый PR
   

Эволюция подходов

От Vue 2 к React 18: Переход от Options API к Composition API/Hooks ментально подготовил к современному React, где хуки, suspense и concurrent features стали стандартом.

От REST к GraphQL: Гибкость GraphQL позволила решить проблему over-fetching/under-fetching, особенно критичную в финансовых приложениях с сложными взаимосвязями данных.

От SCSS к Utility-First: Tailwind CSS ускорил разработку UI, но потребовал переосмысления организации стилей и борьбы с CSS-специфичностью.

Выводы и уроки

Основные различия отражают эволюцию фронтенд-экосистемы:

1. Типизация стала обязательной – TypeScript из опции превратился в стандарт
2. Серверный ренессанс – возвращение логики на сервер через Next.js
3. Инфраструктура как часть разработки – DevOps-практики стали daily routine
4. Производительность измеряется, а не предполагается – инструменты мониторинга встроены в процесс

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