Готов ли работать на чистом JS

Готов ли работать на чистом JS

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

Часто задают этот вопрос, потому что хотят убедиться, что ты не просто пишешь React, но понимаешь JavaScript на глубоком уровне.

Что такое "чистый JS" (Vanilla JS)

Чистый JavaScript — это написание кода на JavaScript БЕЗ фреймворков и библиотек типа React, Vue, Angular, jQuery и т.д.

Это означает:

• Работа с DOM напрямую (document.querySelector, addEventListener, appendChild)
• Управление состоянием вручную (без Redux, MobX)
• Собственная реализация компонентов
• Собственные утилиты для обработки данных

Практическое уменье: простое приложение на Vanilla JS

Пример: Todo List на чистом JavaScript

// HTML
// <input id="input" type="text" placeholder="Add todo...">
// <button id="btn">Add</button>
// <ul id="list"></ul>

// JavaScript
class TodoApp {
  constructor() {
    this.todos = JSON.parse(localStorage.getItem('todos')) || [];
    this.inputEl = document.getElementById('input');
    this.btnEl = document.getElementById('btn');
    this.listEl = document.getElementById('list');
    
    this.setupEventListeners();
    this.render();
  }
  
  setupEventListeners() {
    this.btnEl.addEventListener('click', () => this.addTodo());
    this.inputEl.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') this.addTodo();
    });
  }
  
  addTodo() {
    const text = this.inputEl.value.trim();
    if (!text) return;
    
    const todo = {
      id: Date.now(),
      text,
      completed: false
    };
    
    this.todos.push(todo);
    this.inputEl.value = '';
    this.save();
    this.render();
  }
  
  removeTodo(id) {
    this.todos = this.todos.filter(t => t.id !== id);
    this.save();
    this.render();
  }
  
  toggleTodo(id) {
    const todo = this.todos.find(t => t.id === id);
    if (todo) {
      todo.completed = !todo.completed;
      this.save();
      this.render();
    }
  }
  
  save() {
    localStorage.setItem('todos', JSON.stringify(this.todos));
  }
  
  render() {
    this.listEl.innerHTML = '';
    this.todos.forEach(todo => {
      const li = document.createElement('li');
      li.className = todo.completed ? 'completed' : '';
      li.innerHTML = `
        <input type="checkbox" ${todo.completed ? 'checked' : ''}>
        <span>${todo.text}</span>
        <button class="delete">Delete</button>
      `;
      
      li.querySelector('input').addEventListener('change', () => {
        this.toggleTodo(todo.id);
      });
      
      li.querySelector('.delete').addEventListener('click', () => {
        this.removeTodo(todo.id);
      });
      
      this.listEl.appendChild(li);
    });
  }
}

// Инициализация
new TodoApp();

Основные техники Vanilla JS

1. Селекторы и DOM манипуляция

// Получение элементов
const el = document.getElementById('id');
const els = document.querySelectorAll('.class');
const el = document.querySelector('#id .class');

// Создание элементов
const div = document.createElement('div');
div.textContent = 'Hello';
div.className = 'container';
div.setAttribute('data-id', '123');

// Добавление в DOM
parent.appendChild(div);
parent.insertBefore(div, firstChild);

// Удаление
parent.removeChild(div);
div.remove(); // современнее

2. Event обработка

// Добавление слушателя
button.addEventListener('click', (e) => {
  e.preventDefault(); // Отменить поведение по умолчанию
  console.log('Clicked!', e.target);
});

// Удаление слушателя
button.removeEventListener('click', handler);

// Event delegation (для динамических элементов)
list.addEventListener('click', (e) => {
  if (e.target.classList.contains('item')) {
    console.log('Item clicked:', e.target);
  }
});

3. Работа с классами и стилями

// Классы
el.classList.add('active');
el.classList.remove('active');
el.classList.toggle('active');
if (el.classList.contains('active')) { ... }

// Встроенные стили
el.style.color = 'red';
el.style.display = 'none';

// Получение вычисленных стилей
const styles = window.getComputedStyle(el);
console.log(styles.color); // rgb(255, 0, 0)

4. AJAX запросы (современный подход)

// Fetch API
fetch('/api/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// Или с async/await
async function getUsers() {
  try {
    const response = await fetch('/api/users');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

// POST запрос
fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John', age: 30 })
})
  .then(response => response.json())
  .then(data => console.log(data));

5. Управление состоянием вручную

// Простое хранилище (state management без Redux)
class Store {
  constructor(initialState = {}) {
    this.state = initialState;
    this.listeners = [];
  }
  
  getState() {
    return { ...this.state };
  }
  
  setState(newState) {
    this.state = { ...this.state, ...newState };
    this.notifyListeners();
  }
  
  subscribe(listener) {
    this.listeners.push(listener);
    return () => {
      this.listeners = this.listeners.filter(l => l !== listener);
    };
  }
  
  notifyListeners() {
    this.listeners.forEach(listener => listener(this.state));
  }
}

// Использование
const store = new Store({ count: 0 });

store.subscribe(state => {
  console.log('State changed:', state);
});

store.setState({ count: 1 });
store.setState({ count: 2 });

6. Работа с формами

// Получение значений
const form = document.getElementById('myForm');
const formData = new FormData(form);
const data = Object.fromEntries(formData);

// Валидация
form.addEventListener('submit', (e) => {
  e.preventDefault();
  
  const email = form.email.value;
  const password = form.password.value;
  
  if (!email.includes('@')) {
    console.log('Invalid email');
    return;
  }
  
  if (password.length < 8) {
    console.log('Password too short');
    return;
  }
  
  // Отправить данные
  console.log('Form is valid');
});

Преимущества чистого JS

1. Лучшее понимание: Ты видишь, как на самом деле работает браузер
2. Контроль: Никаких "скрытых" операций из фреймворка
3. Производительность: Нет overhead от фреймворка
4. Простые проекты: Для маленьких проектов фреймворк может быть overkill
5. Фундамент: Лучше понимаешь React, Vue, Angular после этого

Недостатки чистого JS

1. Больше кода: Нужно писать то, что фреймворки делают за тебя
2. Управление состоянием: Без Redux это сложнее
3. Переиспользование: Сложнее делать компоненты
4. Масштабируемость: На больших проектах кода становится много
5. Performance: Ручная оптимизация DOM

Когда использовать чистый JS

Хорошо для:

• Простых веб-страниц (лендинги, блоги)
• Маленьких интерактивных компонентов
• Обучения JavaScript
• Проектов без сложного состояния
• Демонстрации навыков на интервью

Плохо для:

• Сложных SPA (Single Page Applications)
• Больших команд (сложнее координация)
• Проектов с часто меняющимися требованиями
• Когда нужна большая экосистема пакетов

Мой ответ на интервью

Да, я готов работать на чистом JavaScript. Более того, я считаю, 
что это важный навык.

Я понимаю DOM API, методы манипуляции, работу с событиями, 
Fetch API, управление состоянием вручную. 

Я реализовал несколько проектов на Vanilla JS:
- Todo приложение с localStorage
- Поиск по списку с фильтрацией
- Интерактивные компоненты (модальные окна, дропдауны)

Однако я также понимаю, когда стоит использовать React/Vue:
- Для сложных SPA с большим состоянием
- Когда нужна переиспользуемость компонентов
- В больших командах для консистентности

Я не закреплен за одним фреймворком. Выбираю инструмент 
в зависимости от задачи. А фундамент — это понимание JavaScript.

Практический совет

Если интервьюер спрашивает этот вопрос, часто хочет увидеть практику. Будь готов:

1. Написать простую функцию вручную

   // Может попросить написать:
   function debounce(fn, delay) {
     let timeout;
     return function(...args) {
       clearTimeout(timeout);
       timeout = setTimeout(() => fn(...args), delay);
     };
   }
   

2. Рассказать о проекте на Vanilla JS

   • Какие проблемы решил
   • Как управляю состоянием
   • Какие уроки извлек

3. Обсудить различия

   • Почему React лучше для больших проектов
   • Как React упрощает жизнь
   • Но также стоимость абстракции

Вывод

Да, нужно уметь писать на чистом JavaScript.

Это не означает, что ты должен писать только на Vanilla JS. Но ты должен понимать, что происходит под капотом браузера, как работает DOM, события, асинхронность.

Это отличает хорошего фронтенд-разработчика от того, кто просто knows React. Фреймворки приходят и уходят (помню Backbone, jQuery, Knockout...), а JavaScript остается.

Поэтому инвестируй в фундамент — чистый JavaScript. Фреймворки будут легче даваться.