Компиляторы — это не совсем Developer eXperience о котором мы говорили в прошлых выпусках. Но они напрямую влияют на DX и входят в набор инструментов, обязательных для современного фреймворка. Так что давайте сегодня обсудим зачем они нужны и что они делают:

Компиляторы компилируют (👨‍✈️). Фреймворк — это уже не просто JS файл с рантайм движком, это ещё и набор инструментов для разработки и сборки проекта. Всем фреймворкам с DSL темплейтами понадобится их в какой-то момент распарсить, а для некоторых компиляция — это вообще основной шаг создания рантайма.

Angular был одним из первых, получивших Ahead of Time компилятор (на практике "заблаговременно" значит что мы компилируем тогда, когда нужно: при сборке проекта). С Angular и начнём:

Angular при компиляции распарсит темплейт и создаст для него JS код, который отрендерит начальное состояние и будет следить за обновлениями. Помните мы говорили про Change detection и reactivity? Так вот AoT компилятор выделит для dirty checking'а только те свойства состояния, которые используются в темплейте и не будет тратить время на неиспользуемые свойства.
Angular Ivy (с примерами аутпута компиляции темплейта): https://blog.ninja-squad.com/2019/05/07/what-is-angular-ivy/

Vue соберёт свои .vue файлы и переведёт темплейты в vDOM. А ещё и оптимизирует обновление vDOM с помощью специальных инструкций, чтобы при изменении состояния сравнивать не весь vDOM, а только подветви дерева.
Vue template Repl: https://v3.vuejs.org/guide/render-function.html#template-compilation

Svelte вообще не сможет без компилятора: все () => { a = b + c; } при сборке превратятся во что-то вроде () => { invalidate('a', b + c) } чтобы сигнализировать об изменении состояния. Svelte даже добавляет специальный синтаксис $: a = b + c; для computed значений. Так что код, который Вы пишете, — это не тот код, который будет работать в браузере.
Svelte Repl: https://svelte.dev/repl/hello-world?version=3.42.1

SolidJS распарсит JSX и превратит его в инструкции, которые напрямую манипулируют DOM. Solid может напрямую привязывать состояние к DOM, т.к. использует reactive atoms и, как и Svelte, парсит и модифицирует наш JS код.
Solid Repl: https://playground.solidjs.com/

React стоит особняком: ему не нужен компилятор. JSX можно заменить на createElement и писать на чистом JS, который никак не нужно модифицировать.

.

Для создания приложений нам не обязательно разбираться в компиляторах, но это полезно для общего понимания работы фреймворка. Если разобраться в особенностях реактивности и темплейтов — будет проще понять как их использует компилятор и почему он генерирует такой рантайм. Я добавил ссылки на примеры output'а компиляции, очень советую поиграться.

Вот, это что касается обязательной части компиляторов. Для краткости я опустил сборку JS и CSS — там более-менее одинаковые подходы у всех фреймворков.

Похоже, за компиляторами ближайшее будущее, что думаете?
Оставляйте свои комментарии и подключайтесь к math.random коммьюнити — мы любим говорить о технологиях.
Завтра поговорим об SSG и SSR. До завтра!

#thematicweek #frameworksweek