Продолжаем снимать фрустрацию по поводу разнообразия фреймворков и сегодня коротко обсудим как мы описываем UI часть компонент.
Есть два доминирующих подхода, темплейты и JSX. Рассмотрим их по отдельности:

Темплейты
Темплейты — это DSL языки, созданные с учётом специфики и фич фреймворка, с прицелом на оптимизацию рендеринга и обновления DOM. JS в таких языках появляется вкраплениями, отдельными островками. Синтаксис темплейтов обычно похож на чистый HTML (но не обязательно), добавляя к нему специальные "глаголы" для вставки данных (например, {{ count }} для текстовых данных), для отображения списков (`v-for / ng-for / # each`), для создания условий (`ng-if / v-if / # if`) и прочие. Темплейты могут описываться строкой, специальной секцией (как во .vue файлах) или даже отдельным файлом (`.component.html` как в Angular).

<template>
  <p>Hello, {{ name }}</p>
</template>

<script>
let name = 'world';
</script>

Темплейтам нужен парсер, чтобы превратить их в JS структуру, которую фреймворк сможет прочесть и соответственно модифицировать DOM.
При обновлении состояния компоненты, фреймворк точечно обновит соответствующие DOM элементы, т.к. точно знает где произошли изменения.

Темплейты используются в Angular, Svelte, Vue


JSX
JSX же — это наоборот JavaScript с вкраплениями HTML-like языка. Это даёт нам максимальную гибкость в описании темплейтов за счёт JS манипуляций, но такая гибкость имеет свои минусы: её сложнее анализировать и оптимизировать. JSX хорошо стандартизирован.

function () {
  let name = 'world';
  return <p>Hello, { name }</p>
}

Для JSX нужен транспайлер, который превратит return <p>42</p> во что-то вроде return createElement('p', { children: 42 }). Функция createElement(…) создаст так называемый virtualDOM элемент — JS объект, описывающий реальный DOM элемент, что-то вроде { type: 'p', children: 42 }. При обновлении состояния компоненты она создаёт новый vDOM, фреймворк сравнит текущий vDOM с новым и сделает обновления реального DOM'а там, где состояние изменилось.

JSX используется в React, Solid, Vue

.

Вот я описал какие они разные, но на практике эти два подхода довольно таки схожи и граница между ними чуть размыта. Вы заметили что я упомянул Vue дважды, и в темплейтах и в JSX? Vue разрешает девелоперам использовать оба синтаксиса: под капотом Vue использует vDOM, но предлагает пользователям писать компоненты в основном с помощью темплейтов, так как компилятор может их хорошо оптимизировать. А компилятор Solid распарсит и оптимизирует JSX почти как темплейты. А Astro использует JSX-like синтаксис, но это на самом деле темплейты.

Да и в целом, на каждый [].map есть свой *-for, а <p>{{ name }}</p> не сильно то отличается от return <p>{ name }</p>.

Оставляйте свои комментарии и подключайтесь к math.random коммьюнити — мы любим говорить о технологиях.
Надеюсь, сегодня я вас больше успокоил чем запутал 🙂
До завтра, завтра поговорим о компиляторах!

#thematicweek #frameworksweek