jsx vs angular templates

TL;DR: С jsx мелкие компоненты более проще писать и использовать. А это ведет к меньшему количеству говнокода. Но с другой стороны, JSX выглядит как какашка.

React и Angular исповедуют два разных подхода:

  • JSX: мы смешаем html и js внутри js, получив надмножество js
  • Angular: мы смешаем html + велосипедный язык, получив надмножество html.

Первое почему-то считается хуже. Возможно так проявляется истинное отношение людей к js. Но сейчас не об этом.


У первого подхода есть очень крутое достоинство — переиспользование всей инфраструктуры js становится довольно простым: линтеры, форматтеры, синтаксическая расцветка в IDE, тайп-чекинг и т.д.

Но самое главное — поддержка любого способа импорта кода. В том числе и импорта компонентов. А вот ангуляру пришлось для этого изобретать собственную систему модулей, работающих поверх es6-модулей. Возможно были еще причины для велосипеда, но who cares?

В англуляре для написания компонента нужно написать модуль. Но это лень. Поэтому модули обычно содержат несколько компонентов. А это приводит к тому, что у нас внезапно часть кода импортится, но не обязательно будет использоваться. Поэтому ангуляр продвигает Rollup, который может такую проблему решать. Прим.: но который нихера не работает в реальных условиях. В общем, это такая типичная забавная история о том, как на абсолютно ровном месте можно получить кучу проблем и героически их решать.

Чтобы заюзать компонент, нужно закинуть внутрь текущего модуля импорт модуля содержащего этот компонент. А также убедиться, что необходимый компонент экспортируется из модуля. Вы уже наверняка заебались это читать. Но таков уж ангуляр.


В итоге в ангуляре мелкие компоненты реально слишком дороги. Это приводит к нарушению DRY и невозможности вовремя создавать необходимые абстракции. Т.е на ангуляре гораздо проще написать говнокод, нежели на реактоподобной технологии.


Отдельно стоит рассказать насколько эпична разница в плане динамических и лениво загружаемых компонентов. Как это делается на реакте: await import('./my-component.tsx') и см. документацию вашего любимого бандлера.

На ангуляре динамическое создание компонента — это девять кругов ада. Достаточно сказать, что вам нужно где-то раздобыть экземпляры ComponentFactoryResolver и ViewContainerRef. Вы просто вдумайтесь в эти названия. “Резолвер фабрики компонента”, тьфу.

К счастью, авторы фреймворка недавно сжалились над людишками и ввели ngComponentOutlet. Ну где-то через месяца три после того как я свой велосипед написал. Они вообще весьма своевременные ребята.

А ленивая подгрузка — это еще два круга ада, ибо в ангуляре обдумали только ленивые роуты. Ибо они заюзали крутую вещь “Ahead Of Time”. Реактоводы таких умных слов не знают, зато знают слово transpiler.

Как вы думаете, чем отличается Angular AoT от transpiler? Правильный ответ: сложностью интеграции в существующую эко-систему. Потому что других концептуальных отличий нету. Либо чувакам не рассказали чем отличается компиляция от транспиляции, либо у чуваков хорошие маркетолухи.


Но у ангуляра есть клёвое преимущество: темплейты реально более читаемы. Куча сахара в виде директив, пайпов, transclusions и т.д. Выглядит так, как будто чуваки не любят размазывать сопли по файлам.

В принципе, ничто не мешало бы сделать тот же jsx удобочитаемым. Но увы.

Disclaimer: вам могло показаться, что статья направлена на хейт ангуляра и поддержку реакта. Но это не так. Хейтить реакт я не могу из-за малого опыта работы с ним.

Show your support

Clapping shows how much you appreciated Viktor Love’s story.