На чем написан фронтенд на рабочем проекте

На чем написан фронтенд в рабочем проекте?

В моём последнем проекте фронтенд React 18 + TypeScript + Tailwind CSS на Node.js. Это была e-commerce платформа с миллионами пользователей, поэтому выбор был особенно критичен.

Почему именно React?

Причины выбора:

1. Экосистема и tooling - NPM ecosystem, Webpack/Vite, DevTools
2. Команда - Большое сообщество, легко нанимать
3. Performance - Virtual DOM, code splitting, SSR с Next.js
4. Компоненты - Переиспользование, тестируемость, масштабируемость

Стек в деталях

Dependencies: React 18, TypeScript 5, Vite, React Query, Zustand, Tailwind, Framer Motion, Zod

Архитектура

features/
├── auth/
│   ├── components/
│   ├── hooks/
│   ├── services/
│   └── types/
├── products/
│   ├── components/
│   ├── hooks/
│   └── services/
└── cart/
    ├── components/
    ├── hooks/
    └── services/

Примеры кода

React Query для данных

const { data, isLoading } = useQuery({
  queryKey: ['products', categoryId],
  queryFn: () => productService.getProducts(),
});

Zustand для state management

const useCartStore = create((set) => ({
  items: [],
  addItem: (item) => set((state) => ({
    items: [...state.items, item],
  })),
}));

Testing

Vitest + Testing Library для unit/integration тестов

API интеграция

const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
});

apiClient.interceptors.request.use((config) => {
  const token = localStorage.getItem('authToken');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

Challenges & Solutions

State management: Redux → Zustand (simpler, scalable)

Data fetching: axios + useEffect → React Query (caching, retry, invalidation)

TypeScript: any везде → strict mode (compile-time safety)

Почему React для Java бэкенда?

✅ REST API friendly - JSON, HTTP ✅ Асинхронность - async/await, Promises ✅ Масштабируемость - MPA, SPA, Micro-frontends ✅ Type safety - TypeScript примерно как Java ✅ Dev tooling - быстрый цикл разработки

Альтернативы

• Next.js: Нужна SEO, SSR, API routes
• Vue: Меньше engineers, простой стек
• Angular: Enterprise, большая команда
• Svelte: Максимум performance
• React Native: iOS/Android + web sharing code

Deployment

npm run dev       # Vite dev server
npm run build     # Production build
npm run test      # Unit tests
npm run lint      # ESLint

TL;DR

React 18 + TypeScript + Zustand + React Query — это sweet spot для production e-commerce систем. Экосистема зрелая, performance отличный, developer experience превосходный.

Для Java Developer переход на фронтенд обычно гладкий — типизация, ООП, async/await, dependency injection существуют в обоих местах.

Ключевой урок: как бэкенд-разработчик, нужно понимать оба стека. Фронтенд не просто JavaScript, это полноценная архитектура с паттернами и best practices, как и бэкенд.

Индустрия движется в сторону full-stack инженеров, которые понимают всю цепочку от API к UI и обратно.