Назвіть популярні шаблонізатори для фронтенд-розробки. Опишіть особливості їх використання.

Повне пояснення

Що це і навіщо Шаблонізатори дозволяють розділити логіку від представлення, зменшуючи дублювання коду та полегшуючи підтримку.

Ключові принципи, терміни, інваріанти

• Template – файл з розміткою і плейсхолдерами.
• Engine – програма, що парсить шаблон і генерує фінальний HTML/JSX.
• Partials – підшаблони, що можна вставляти в інші шаблони.
• Helpers – функції, що розширюють можливості шаблонізатора.

Як це працює (життєвий цикл)

1. Шаблон читається з файлової системи або рядка.
2. Engine парсить синтаксис, створює AST (Abstract Syntax Tree).
3. Через контекст (об’єкт даних) відбувається рендеринг – заміна плейсхолдерів.
4. Отриманий рядок передається у браузер або в React‑компонент.

Практика і реалізація

• Handlebars:

const template = Handlebars.compile('<h1>{{title}}</h1>');
const html = template({ title: 'Привіт' });

• Pug:

doctype html
html
  head
    title= pageTitle
  body
    h1 Hello World

• JSX (React):

const Greeting = ({ name }: { name: string }) => <h1>Hello, {name}!</h1>;

Тестування

• Handlebars/ Pug можна тестувати за допомогою Jest, перевіряючи, що рендеринг повертає очікуваний HTML.
• Для JSX використовують React Testing Library: render(<Greeting name="Alex" />).

Оптимізація продуктивності

• Кешування скомпільованих шаблонів (наприклад, Handlebars.compile один раз).
• У React – використання React.memo, useMemo для уникнення зайвих рендерів.

Accessibility

• У шаблонах слід використовувати семантичні теги (<nav>, <main>), ARIA‑атрибути, коли це потрібно.

Безпека та валідація

• У Handlebars за замовчуванням екраніруються дані, що запобігає XSS.
• У Pug слід уникати вставки неперевірених даних у атрибути.

Типові помилки й edge cases

• Неправильне вкладення блоків у Handlebars → синтаксична помилка.
• Відсутність частини (partial) у Pug → ReferenceError.
• У JSX – неправильний тип пропсу, що викликає TypeScript‑попередження.

Cheatsheet + можливі follow-up питання

• Handlebars: {{#each items}}...{{/each}}, {{> partialName}}.
• Pug: індентування, змінні #{var}.
• JSX: {condition && <Component />}, {array.map(item => ...)}.
• Follow‑up: Як обробляти асинхронні дані у шаблонізаторах? Чому JSX не потребує окремого парсера?