текст перекладу
На перший погляд, JSX та TSX здаються інноваційними інструментами: JavaScript і TypeScript раптово перетворюються на щось більше, ніж просто мови програмування — вони тепер майже повноцінні інструменти для розмітки. Однак глибший погляд виявляє, що цей підхід далеко не такий ідеальний, як здається.
Змішування логіки та подання
Однією з головних критик JSX/TSX є змішування логіки та подання. На відміну від Vue або Angular, де структура шаблонів (HTML) чітко відокремлена від логіки (JavaScript/TypeScript), в JSX все переплетено.
Так, React дозволяє розділяти компоненти на менші частини, але на практиці це рідко рятує від збільшення когнітивного навантаження. Наприклад:
function App() {
// ... інші речі
return (
{items.map((item) => ( handleClick(item)}>{item.name} ))}
); }
Читання такого коду вимагає одночасного утримання в голові контексту двох світів: подання та дій. Vue та Angular вирішують цю проблему за допомогою декларативних шаблонів та директив:
```
Цей підхід робить код більш зрозумілим та очевидним.
## Проблеми з синтаксичним цукром
JSX схожий на HTML, але це не HTML. Маленькі відмінності (наприклад, `className` замість `class`, необхідність використання самозакриваючихся тегів, таких як `<img />`, явне використання фігурних дужок для інтерполяції) постійно плутають, особливо новачків.
Більше того, такі рішення додають додаткову складність сприйняття коду.
## Продуктивність компіляції
Шаблони Vue або Angular зазвичай компілюються у високооптимізований JavaScript-код, який підходить для віртуального DOM або інших підходів рендерингу. JSX вимагає трансформації через Babel або TypeScript. Це накладає додаткові вимоги до процесу зборки і уповільнює процес розробки.
Більше того, будь-який проект з JSX стає практично непотрібним без складного ланцюга зборки.
## Обмежена екосистема
JSX/TSX був створений для React, і його використання поза цією екосистемою викликає багато запитань. Наприклад, Vue пропонує використання своїх шаблонів в інших інструментах — їх можна легко адаптувати для Nuxt.js, який підтримує серверний рендеринг.
Angular інтегрується з різними платформами, будь то мобільні додатки чи PWA. JSX поза React — скоріше виняток, а не правило.
## Чому JSX/TSX досі популярний?
Його популярність базується на потужній маркетинговій стратегії React. Ідея «UI як функція стану», яку підтримує декларативність, звучить привабливо.
Розробники схиляються до коротких та гнучких рішень, і JSX пропонує саме це — на перший погляд зручний і швидкий інструмент для роботи з компонентами. Висока популярність React і підтримка великих компаній, таких як Facebook та Airbnb, також відіграють свою роль.
Багато хто любить JSX/TSX за його лаконічність у простих випадках, але проблеми починають накопичуватися в міру розвитку проекту.
## Висновок
JSX/TSX безсумнівно революціонізував світ веб-розробки, але це інструмент з чіткими недоліками. Змішування логіки та подання, синтаксичні тонкощі та обмежена екосистема роблять його менш підходящим для великих і довгострокових проектів.
Vue та Angular демонструють, як шаблони можуть бути більш інтуїтивно зрозумілими та читабельними. Тому, якщо для вас важлива підтримуваність, не поспішайте покладатися тільки на JSX.
Перекладено з: [Why JSX/TSX Isn’t Cool](https://medium.com/@broflovski/why-jsx-tsx-isnt-cool-3267fa0d8595)