JSX - звездное изобретение, даже если React не используется.

Если вы работали с React - а даже если нет - вы, вероятно, слышали о JSX. Это та странная конструкция html-in-javascript, которая заставляет всех съеживаться, когда они впервые ее обнаруживают, но большинству людей нравится, когда они приходят к пониманию этой идеи.

Почему это круто? Потому что он поддерживает идею о том, что шаблоны - это просто функции. Они принимают данные на входе и выводят структурированное визуальное представление этих данных.

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

  • Применяются обычные правила области видимости javascript; если он входит в область действия, вы можете включить его в шаблон.
  • Применяется обычная логика JavaScript; нет необходимости заново изобретать «if» и «else» в еще одном языке шаблонов.
  • Ошибки отрисовки шаблонов - это обычные исключения javascript с трассировкой полного стека.
  • Если вы используете статическую типизацию, ваши шаблоны теперь безопасны для типов!

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

Но команда React сделала невероятно умный ход, когда придумала JSX:

Они не связали JSX с React плотно. Ни капли.

Сделаем шаг назад. Как выглядит JSX после компиляции?

По-моему, это довольно тесно связано, не так ли? А как насчет всех этих React.createElement звонков?

Но ждать! Что, если мы быстро добавим @jsx комментарий к прагме?

Babel достаточно умен, чтобы начать переносить JSX, который мы написали, в совершенно другую прагму! В этом случае вместо React.createElement он переходит в zomboComponent.

Теперь мы полностью убрали React из картинки и можем определить наш собственный путь рендеринга JSX и рендерить все, что нам нравится!

Например, возможно, мы хотим вместо этого выполнить рендеринг непосредственно в элемент DOM. Мы можем это сделать! Все, что нам нужно сделать, это объявить функцию, которая принимает name, props и children, и создать для нас эти элементы:

Теперь все, что мне нужно сделать, это добавить /* @jsx renderDom */ комментарий, и все готово!

Неужели это так просто?

Да и нет. Вы абсолютно можете делать то, что я только что продемонстрировал выше. Но, как всегда, следует учесть несколько неприятных нюансов:

  • При таком подходе вы должны решить во время сборки, какую прагму JSX-код следует перенести для использования. Итак - если вам нужна функция, которая отображает html на сервере и которая отображает узел DOM на клиенте, потребуется немного больше работы.
  • JSX также транспилирует <MyComponent> и <mycomponent> по-разному, в зависимости от использования заглавных букв в имени компонента. Таким образом, готовая к производству версия должна учитывать оба этих типа.
  • Есть также много возможностей для ...children содержать вложенные массивы, которые может быть сложно перебрать.
  • Нам также нужно подумать о поддержке Fragment, которая теперь даже имеет свой собственный <> </> синтаксис в jsx.

Я собрал небольшой (3kb gzip) модуль, чтобы упростить работу со всем вышеперечисленным:



krakenjs / jsx-pragmatic
Создайте структуры JSX, а затем решите во время выполнения, какую прагму вы хотите использовать для их рендеринга. - krakenjs / jsx-pragmatic github.com



Используя jsx-pragmatic, вы можете решить во время выполнения в зависимости от контекста, как именно вы хотите визуализировать компонент:

Модуль поставляется со встроенными модулями визуализации HTML, DOM и React.

Но вы также можете легко создать свой собственный рендерер и подключить его! Рендереры в jsx-pragmatic - это просто функции; и вам даже не придется думать о работе с вложенными массивами, фрагментами и об обработке различий между такими элементами, как <foo />, и такими компонентами, как <Bar />. Об этом все позаботились.

Почему бы просто не использовать React?

В PayPal мы создаем SDK, которые отображают пользовательский интерфейс непосредственно на сторонних сайтах. У нас нет возможности загружать всю библиотеку представлений, такую ​​как React, на сайты, которые нам не принадлежат. Но мы любим JSX. С его помощью мы можем создавать шаблоны без необходимости поставлять огромную библиотеку шаблонов - потому что все они переносятся во время сборки - и мы можем отображать их в Интернете, как захотим, с помощью таких библиотек, как jsx-pragmatic.

Мы используем React для приложений, которыми владеем; но когда дело доходит до создания модулей для встраивания непосредственно на страницы нашего продавца, мы чувствуем, что только JSX дает нам большую часть необходимой мощности, контроля и скорости.

Привет Сыру!

Если вас интересует другое приложение JSX в PayPal, также попробуйте Syr! Мы используем Syr, чтобы преодолеть разрыв между iOS, Android и Интернетом, используя всю мощь кроссплатформенного JSX.

Правила JSX!

Создавайте интересные вещи с помощью JSX! Что еще можно было использовать для рендеринга JSX?