2021-08-17 15:13:23
Продолжаем снимать фрустрацию по поводу разнообразия фреймворков и сегодня коротко обсудим как мы описываем UI часть компонент.
Есть два доминирующих подхода,
темплейты и
JSX. Рассмотрим их по отдельности:
ТемплейтыТемплейты — это DSL языки, созданные с учётом специфики и фич фреймворка, с прицелом на оптимизацию рендеринга и обновления DOM. JS в таких языках появляется вкраплениями, отдельными островками. Синтаксис темплейтов обычно похож на чистый HTML (но не обязательно), добавляя к нему специальные "глаголы" для вставки данных (например, {{ count }} для текстовых данных), для отображения списков (`v-for / ng-for / # each`), для создания условий (`ng-if / v-if / # if`) и прочие. Темплейты могут описываться строкой, специальной секцией (как во .vue файлах) или даже отдельным файлом (`.component.html` как в Angular).
Hello, {{ name }}
Темплейтам нужен парсер, чтобы превратить их в JS структуру, которую фреймворк сможет прочесть и соответственно модифицировать DOM.
При обновлении состояния компоненты, фреймворк точечно обновит соответствующие DOM элементы, т.к. точно знает где произошли изменения.
Темплейты используются в
Angular,
Svelte,
VueJSXJSX же — это наоборот JavaScript с вкраплениями HTML-like языка. Это даёт нам максимальную гибкость в описании темплейтов за счёт JS манипуляций, но такая гибкость имеет свои минусы: её сложнее анализировать и оптимизировать. JSX хорошо стандартизирован.
function () {
let name = 'world';
return
Hello, { name }
}
Для JSX нужен транспайлер, который превратит return
42
во что-то вроде 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, а
{{ name }}
не сильно то отличается от return
{ name }
.
Оставляйте свои комментарии и подключайтесь к
math.random коммьюнити — мы любим говорить о технологиях.
Надеюсь, сегодня я вас больше успокоил чем запутал
До завтра, завтра поговорим о компиляторах!
#thematicweek #frameworksweek
361 viewsedited 12:13
