Карта сайта

HTML/CSS или Фреймворки: когда достаточно нативных технологий?

/HTML/CSS/HTML/CSS или Фреймворки: когда достаточно нативных технологий?
HTML/CSS или Фреймворки: когда достаточно нативных технологий?
Автор: написал в рубрике HTML/CSS. 0 Комментариев.

За свою карьеру я создавал проекты на чистом HTML/CSS, подключал jQuery для анимаций, а позже погрузился в мир React и Angular. Но чем больше я работал с фреймворками, тем чаще задавался вопросом: «А не переусложняем ли мы простые задачи?» В этой статье я поделюсь кейсами, где React и Angular избыточны и покажу, как нативные технологии экономят время, ресурсы и нервы.

Почему я перестал использовать фреймворки для всего подряд

Раньше я автоматически выбирал React даже для лендингов. Казалось логичным: знакомый инструмент, компонентный подход, удобный стейт-менеджмент. Но однажды клиент пожаловался, что его сайт грузится 4 секунды. Причина? React + Redux + куча зависимостей «на всякий случай». Тогда я переписал проект на чистом HTML/CSS/JS, и время загрузки сократилось до 0.8 секунд. Это стало поводом пересмотреть подход к выбору инструментов.

Кейсы, где React/Angular избыточны

1. Статические сайты и лендинги

Если ваш сайт это 5 страниц с текстом, формой обратной связи и кнопкой «Заказать», фреймворк лишь добавит накладных расходов.

Пример на HTML/CSS/JS:

html
<!DOCTYPE html>
<html>
<head>
    <title>Простой лендинг</title>
    <style>
        .cta-button {
            padding: 15px 30px;
            background: #3498db;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <section id="hero">
        <h1>Добро пожаловать!</h1>
        <button class="cta-button" onclick="showForm()">Заказать</button>
    </section>

    <script>
        function showForm() {
            // Простая логика открытия модального окна
            const form = document.createElement('div');
            form.innerHTML = `
                <form>
                    <input type="email" placeholder="Email">
                    <button type="submit">Отправить</button>
                </form>
            `;
            document.body.appendChild(form);
        }
    </script>
</body>
</html>

Почему не React?

  • Размер бандла: React + ReactDOM = ~40 KB (gzipped). Для лендинга это 30% всего контента.
  • Гидротация: Даже после загрузки React тратит время на «оживление» статического HTML.

2. Простые SPA с минимальной динамикой

Допустим, вы делаете блог с поиском по статьям. Фильтрация работает на клиенте без сложных состояний.

Чистый JavaScript:

javascript
// articles.js
document.addEventListener('DOMContentLoaded', () => {
    const searchInput = document.getElementById('search');
    const articles = JSON.parse(localStorage.getItem('articles')) || [];
    
    searchInput.addEventListener('input', (e) => {
        const filtered = articles.filter(article => 
            article.title.includes(e.target.value)
        );
        renderArticles(filtered);
    });
});

function renderArticles(articles) {
    const container = document.getElementById('articles');
    container.innerHTML = articles.map(article => `
        <div class="article">
            <h2>${article.title}</h2>
            <p>${article.content}</p>
        </div>
    `).join('');
}

Почему не Angular?

  • Сложность: Angular требует изучения RxJS, Zone.js, Dependency Injection.
  • Инициализация: Запуск приложения занимает время даже для простых задач.

3. Прототипирование

Когда нужно быстро проверить идею, нативные технологии позволяют начать за минуты без настройки Webpack/Babel.

Быстрый прототип:

html
<!-- prototype.html -->
<script>
    let state = { count: 0 };
    
    function updateCounter() {
        document.getElementById('counter').textContent = state.count;
    }
</script>

<button onclick="state.count++; updateCounter()">+1</button>
<span id="counter">0</span>

Почему не фреймворк?

  • Оверхед: Создание проекта через create-react-app занимает 2-3 минуты.
  • Отладка: Ошибки в JSX или шаблонах Angular замедляют процесс.

Сравнительные тесты: HTML/CSS vs React/Angular

Параметр Нативный код React Angular
Время загрузки (ms) 1200 2500 3000
Размер бандла (KB) 50 150 200
Время инициализации 0 300 500
SEO-дружественность Высокая Средняя¹ Средняя¹
Сложность поддержки Низкая Высокая Высокая

¹ Для улучшения SEO во фреймворках требуется SSR (Next.js/Nuxt.js/Universal), что усложняет архитектуру.

Как выбрать инструмент

  1. Задайте вопрос: «Что будет через год?»
    Если проект масштабируется до уровня Gmail, сразу выбирайте фреймворк. Если это сайт визитка, то HTML/CSS.
  2. Проверьте требования к интерактивности
    Нужны ли сложные анимации, real-time обновления, глубокий стейт-менеджмент? Если нет, не усложняйте.
  3. Проанализируйте команду
    Если разработчики не знают Vanilla JS, но умеют в React, возможно проще использовать их сильные стороны.
  4. Тестируйте производительность
    Сравните Lighthouse-отчеты для двух версий (нативной и на фреймворке). Разница в 30% по скорости? Задумайтесь.

Когда всё-таки нужны фреймворки

  • Сложные SPA. Много взаимосвязанных компонентов (админки, CRM).
  • Командная разработка. Компонентный подход стандартизирует код.
  • Экосистема. Готовые решения для маршрутизации (React Router), стейта (Redux), форм (Formik).

Современный веб помешан на фреймворках, но это не значит, что они нужны всегда. В моей практике 40% проектов можно было реализовать на чистом HTML/CSS/JS, сэкономив часы разработки и улучшив производительность. Попробуйте провести эксперимент, сделайте небольшой проект без React/Angular. Уверен, результаты вас удивят.