С чем сталкиваешься на работе

Основные вызовы Frontend разработки

В современной frontend разработке встречаюсь с целым спектром технических и организационных вызовов. Это переходит за рамки просто написания JavaScript — это управление сложностью, производительностью и опытом пользователя.

1. Управление состоянием (State Management)

Проблема: по мере роста приложения состояние становится разбросанным по компонентам, что приводит к:

// ❌ Проблема: состояние в разных местах
function Dashboard() {
  const [user, setUser] = useState(null);
  const [notifications, setNotifications] = useState([]);
  const [theme, setTheme] = useState("light");
  // + ещё 10 состояний, которые нужны детям компонентов...
}

Что я делаю: использую Context API для простых сценариев и Zustand/Redux для сложных приложений:

// ✅ Решение: централизованное состояние
const useAppStore = create((set) => ({
  user: null,
  setUser: (user) => set({ user }),
  notifications: [],
  addNotification: (notif) => set((s) => ({ 
    notifications: [...s.notifications, notif] 
  }))
}));

2. Производительность и оптимизация

Частые проблемы:

• Ненужные ре-рендеры — компоненты рендерятся без изменения props
• Тяжёлые бандлы — код не сплиттится, загружается всё сразу
• N+1 запросы — когда список из 50 элементов делает 50 запросов

Мой подход:

// 1. Мемоизация
const MemoizedList = React.memo(function List({ items }) {
  return items.map(item => <Item key={item.id} {...item} />);
});

// 2. Код-сплиттинг
const HeavyComponent = lazy(() => import(./Heavy));

// 3. Оптимизация запросов
function useFetchPosts(ids: string[]) {
  return useQuery({
    queryKey: ["posts", ids], // изменяется только при изменении ids
    queryFn: () => api.fetchPosts(ids) // один запрос на все
  });
}

3. Асинхронный код и обработка ошибок

Вызов: управлять состояниями loading, success, error одновременно с обработкой race conditions:

// ❌ Проблема: race condition
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(setUser); // что если userId изменился до ответа?
  }, [userId]);
}

// ✅ Решение: отмена запроса
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    
    fetch(`/api/users/${userId}`, { signal: controller.signal })
      .then(res => res.json())
      .then(data => {
        if (!controller.signal.aborted) {
          setUser(data);
        }
      })
      .catch(err => {
        if (err.name !== "AbortError") {
          console.error(err);
        }
      });

    return () => controller.abort();
  }, [userId]);
}

4. Кросс-браузерная совместимость

Задача: код должен работать в:

• Chrome, Firefox, Safari, Edge
• Старые версии браузеров (IE11 ещё встречается)
• Мобильные браузеры с разными особенностями

Решение:

// Используем полифиллы
import "core-js";

// Проверяем поддержку
if (CSS.supports("display", "grid")) {
  // используем grid
} else {
  // fallback
}

5. Типизация и качество кода

Вызов: в JavaScript легко сделать ошибку на типах:

// ❌ Runtime error в production
const getUserAge = (user) => {
  return user.profile.age; // что если user или profile null?
};

// ✅ TypeScript поймёт ошибку на этапе разработки
interface User {
  profile?: { age: number };
}

const getUserAge = (user: User): number | undefined => {
  return user.profile?.age; // optional chaining
};

6. Респонсивный дизайн и мобильная оптимизация

Проблемы:

• Desktop-first CSS превращается в кашу на мобильных
• Touch события vs mouse events
• Производительность на слабых устройствах

Подход:

// Mobile-first Tailwind
<div className="text-sm md:text-base lg:text-lg"> {/* мобильный по умолчанию */}
  Responsive text
</div>

// Используем useMediaQuery для логики
const isMobile = useMediaQuery("(max-width: 640px)");

7. Тестирование (Unit, Integration, E2E)

Вызов: покрытие должно быть >= 90%, а тесты быстрыми:

// ✅ Эффективный юнит-тест
describe("UserCard", () => {
  it("renders user name", () => {
    const { getByText } = render(<UserCard user={{ name: "Alice" }} />);
    expect(getByText("Alice")).toBeInTheDocument();
  });
});

// E2E тест Playwright
test("user can log in", async ({ page }) => {
  await page.goto("/login");
  await page.fill("input[type=email]", "user@example.com");
  await page.fill("input[type=password]", "password");
  await page.click("button:has-text(\"Sign in\")");
  await expect(page).toHaveURL("/dashboard");
});

8. Доступность (Accessibility)

Требование: приложение должно быть удобным для людей с ограничениями:

// ❌ Неаксессибельно
<div onClick={handleClick}>Click me</div>

// ✅ Аксессибельно
<button onClick={handleClick} aria-label="Submit form">
  Click me
</button>

9. Версионирование и совместимость API

Частая ситуация: бэкенд обновляется, фронтенд должен работать со старой версией API:

// Адаптер для разных версий API
const getUser = async (userId: string) => {
  const apiVersion = getApiVersion(); // проверяем версию
  
  if (apiVersion >= 2) {
    return api.v2.users.get(userId); // новое поле
  } else {
    return api.v1.user(userId); // старое поле
  }
};

10. Масштабируемость архитектуры

Проблема: код, написанный для 50 компонентов, становится невыносим при 500 компонентах.

Решение:

• Разделение на слои (presentational, container, logic)
• Правильная структура папок
• Использование atomic design или feature-based структуры

Вывод: frontend разработка — это не просто HTML и CSS. Это решение сложных задач производительности, архитектуры, масштабируемости и качества кода, которые требуют опыта, постоянного обучения и внимания к деталям.