JSX: антипаттерн или нет?

React компоненты — это и есть View + поведение. Как в PHP принято выносить в шаблоны View какое то поведение включающее в себя незамысловатое ветвление if, else, так собственно и здесь. За одним исключением — добавляется какая то минимальная реакция на события. Важно понимать границы где заканчивается View и начинается бизнес-логика.

Импользование template string вместо <template> элемента значит, что вы игнорируете возможности платформы, которые могут помочь вам распарсить кусок DOM заблаговременно, тем самым увеличив производительность.

А по сравнению с прошлым примером, кода стало меньше за счет удаления прослойки, которая готовила данные в шаблон.

Разница в 8 строк. Но если в первом случае когнитивная нагрузка при работе с файлами небольшая, то с JSX (имхо) когнитивная нагрузка сильно возрастает. К тому же, сама разница в количестве строк по большей части обусловлена самим React. К примеру, в Polymer подобное:

{{#if isOverLimit}}
    {{warningText}}
{{/if}}

я решил кастомным методом if:

[[if(isOverLimit, warningText)]]

При чем я его могу таким образом использовать и для аттрибутов, и для свойств DOM элементов, сравните:

<div class="cart-item {{#if isSelected}}active{{/if}}">
<div class="cart-item ${isSelected ? 'active' : ''}">
<div class$="cart-item [[isSelected, 'active', '']]">

<button class="btn-more" {{#if isOverLimit}}disabled{{/if}}>+</button>
<button class="btn-more" ${isOverLimit ? 'disabled': ''}>+</button>
<button class="btn-more" disabled="[[isOverLimit]]">+</button>

Синтаксис сравним по читаемости к template string, такой же краткий, и при этом в HTML формате, позволяя использовать для обработки возможности платформы.

А ещё можно писать не HTML, а Pug/Jade, где читаемость становится ещё лучше (нужно знать синтаксис, но мне кажется, зная CSS вам не составит труда понять что тут происходит):

div(class$="cart-item [[if(isSelected, 'active', '']]")
  h3 [[title]]
  img(src="http://[[img_url]]")
  div
    button.btn-less -
    input(value="[[count]]")
    button.btn-more(disabled="[[isOverLimit]]") +
  | [[isOverLimit, warningText, '']]

Если в ход идут миксины, тогда разница становится ещё больше.

В итоге, мне кажется, JSX делает всё только хуже, не позволяя использовать сторонние инструменты вроде Pug/Jade и, по сути, больше решает проблемы синтаксиса самого React.

Да, это довольно удобно, когда верстка и код этой верстки рядом (но не бизнес-логика, конечно). Но JSX — это новый синтаксис. Нужна поддержка со стороны редакторов, IDE, линтеров, прочих инструментов. Нужно привыкать. Нужно запоминать, что и как делается, что возможно и что невозможно.

И то, что это именно синтаксис, накладывает серьезные ограничения. Поддержка Dart, CoffeeScript, ClosureScript, HAML, Pug/Jade? Даже если есть компилятор, не факт, что IDE/редактор не сойдет с ума.

В этом отношении подход Vue.js гораздо изящнее. *.vue — опциональный формат (и не такой опциональный, как JSX, потому что писать React.createElement('div') никто в здравом уме не будет), и это просто html. Шаблоны, стили, код — все это пишется на любом языке и при необходимости (разрастание, верстальщик без специальных познаний) легко выносится в отдельные файлы.
При этом Vue.js умеет в Redux с вытекающими плюшками.

Простите, увлекся:) По существу: большие шаблоны в коде зло, маленькие иногда можно:)

import {dom} from '../inc/dom';
import {WAElement} from '../core/';
  
export let login = function(dom: any){ 

    return class Login extends WAElement { 

        constructor(){         
            super();           
        }                      

        connectedCallback() {  
            
            let holder = this; 
            let form =         
                <form>         
                    <input name='login' placeholder='login' /><br />
                    <input name='pwd' placeholder='pwd' type='password' /><br />
                    <input type='submit' value='log me' /> 
                </form>        
            ;                  
            
            form.addEventListener('submit', function(evt: any){
                               
                let formData = new FormData(form);  
                holder.sendMessage('authorize', {formData});
                evt.preventDefault();           
            });                
            this.appendChild(  
                <div>          
                    { form }   
                    <x-auth-sign-up />              
                </div>
            );
        }     
    };    
}(dom);

Ваш код можно переписать без единой строчки JS и отдать параллельно верстальщику, программисту и переводчикам:

$my_cart_position_viewer $mol_viewer

    attr * my_cart_position_viewer_selected < isSelected false

    childs /

        < header $mol_viewer
            childs / < title \

        < imager $mol_imager
            uri < imageUri \

        < counter $mol_number
            enabledDec < canRemove true
            value > count 1
            enabledInc < canAdd true

        < messager $mol_viewer
            childs < messages /
                < messageOverflow @ \You have reached the limit

Верстальщик добавит демонстрации компонента в различных состояниях:

$my_cart_position_viewer_demo $my_cart_position_viewer
    isSelected false
    title \Xperia XYZ
    imageUri \xperia.jpg
    messages /

$my_cart_position_viewer_demo_minimum $my_cart_position_viewer_demo
    count 0
    canRemove false

$my_cart_position_viewer_demo_long_selected $my_cart_position_viewer_demo
    isSelected true
    title \Computer with screen, mouse, keyboard and foot heater
    count 1

$my_cart_position_viewer_demo_maximum $my_cart_position_viewer_demo
    count 2
    canAdd false

$my_cart_position_viewer_demo_over9000 $my_cart_position_viewer_demo
    count 9001
    canAdd false
    messages / < messageOverflow

И застилизует:

[my_cart_position_viewer] {
    display: flex;
    padding: .5rem;
}

[my_cart_position_viewer_selected] {
    background: #fed;
}

[my_cart_position_viewer_header] {
    flex: 1 1 15rem;
    font-weight: bold;
    padding: .5rem;
}

[my_cart_position_viewer_counter] {
    flex: 0 0 2rem;
}

[my_cart_position_viewer_messager] {
    color: red;
    flex: 1 1 15rem;
    padding: .5rem;
}

А программист возьмёт доменные модели:

    export interface $my_product {
        name() : string
        available() : number
        thumbUri() : string
    }

    export interface $my_cart_position {
        count( ...diff : number[] ) : number
        product() : $my_product
    }

И опишет их преобразование в интерфейсную модель, добавив дополнительную интерфейсную логику:

    export class $my_cart_position_viewer extends $.$my_cart_position_viewer {

        position() {
            return < $my_cart_position > null
        }

        title() {
            return this.position().product().name()
        }

        imageUri() {
            return this.position().product().thumbUri()
        }

        count( ...diff : number[] ) {
            return this.position().count( ...diff )
        }

        canRemove() {
            return this.count() > 0
        }

        canAdd() {
            return this.count() < this.position().product().available()
        }

        isOverflow() {
            return this.count() > this.position().product().available()
        }

        messages() {
            return [
                this.isOverflow() ? this.messageOverflow() : null
            ]
        }

    }

А тем временем переводчики переведут текст "You have reached the limit" на все языки мира, получив следующего вида json:

{
    "$my_cart_position_viewer_messageOverflow": "You have reached the limit"
}

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

Чем лично мне, как программисту (не верстальщику) удобен jsx.
Оговорюсь сразу, что использую тайпскрипт и tsx, но многие вещи справедливы и без тайпскрипта:

• Строгая типизация шаблонов и кастомных компонентов. Тайпскрипт подсказывает свойства и события, компилятор показывает ошибки в шаблонах.

  
  

• Удобная работа с children. Как в ангуляре удобно работать с содержимым компонента? Никак, только через боль и страдания, через парсинг строк, обработку дом-узлов и transclude. В Реакте это просто объекты, можно обрабатывать обычным кодом.

  
  

• Расширение и декорация компонентов и классов компонентов. Метапрограммирование для бедных. Но лучше, чем в строковых и dom-based шаблонах.

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

Однако, jsx в чем-то неуловимо раздражает. Постоянно спотыкаешься на className. Зачем это было делать?!

Также теряется преимущество в разделении труда верстальщика и девелопера. Даже если научить писать вестальщика писать jsx, все его привычные методы работы не годятся.

Кстати помимо теологических причин держать разметку и код в одном файле неудобно даже с точки зрения мержа. То есть когда эти вещи разнесены по разным файлам вероятность конфликтов при мерже меньшая. И уж тем более мне не хотелось бы чтобы верстальщики (чистые верстальщики) лазили в код компонентов и что-то там меняли.

Почему-то любое обсуждение React быстро переходит на обсуждение производительности, потом выясняется, что нативный DOM быстрее, и делается вывод, что React отстой.

Как по мне, производительность у Реакта достаточная для большинства случаев, кроме того, есть еще запас по оптимизации. Конечно, он медленее идеального обновления ДОМ вручную.

Но, как по мне, он наиболее прямолинейный и предсказуемый, с точки зрения разработки, из всех фреймворков-лидеров. Плюс поддержка IDE у него самая лучшая. Также у Реакта наиболее "дешевое", с точки зрения производительности, дробление на компоненты — каждый компонент — это функция (либо класс), а в Ангуляре, например, это дополнительная куча watcher-ов.

Также у Реакта наиболее "дешевое", с точки зрения производительности, дробление на компоненты — каждый компонент — это функция (либо класс), а в Ангуляре, например, это дополнительная куча watcher-ов.

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

Как по мне риакт далеко не уникален, и это просто хайп вокрг него и ничего более. Кроме того он слишком усложняет дело со своим вирруальным DOM деревом, вычисляя что именно патчить в реальном дереве. Я бы лучше посмотрел в сторону Riot JS.

<div>
    { this.state.loading  &&
        <div class="loading-icon"> </div>
    }
</div>

<div>
    <div class="loading-icon" *ngIf="loading"> </div>
</div>

<ul>
    { this.state.items.map(item => 
        <li >{item.name} </li>
    )}
</ul>

<ul>
    <li *ngFor="let item in items" >{{item.name}}</li>
</ul>