/ Vue Js

Vue шаблоны на JSX

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

Вот список того, что мы получим от использования JSX с Vue. Каждый из этих пунктов подробно рассматривается ниже.

Аргумент ЗА

  • Вся мощь JavaScript в вашем распоряжении.
  • Нет необходимости регистрировать компоненты.
  • Spread оператор на максималках.
  • Именование компонентов и props-параметров.
  • Отсутствие конфликтов с существующими HTML-элементами.
  • Вы не привязаны к паттерну: один файл = один компонент.

Аргумент ПРОТИВ

  • Для обычного верстальщика это выглядит чуждым.
  • Отсутствие директивной управления структурой.
  • Больше никаких тегов style в ваших однофайловых компонентах.
  • JSX непопулярен в экосистеме Vue.

Я собираюсь поделиться своими первоначальными мыслями об использовании JSX с Vue. Я буду выкладывать одновременно два примера шаблонов Vue и их JSX-аналогов, для сравнения.

Чтобы заставить шар катиться, вот простой пример того, как выглядит JSX в простом компоненте Vue:

<template>
  <h1>{{ message }}</h1>
</template>

<script>
  export default {
    data: () => ({
      message: "Hello, JSX!"
    })
  };
</script>
export default {
  data: () => ({
    message: "Hello, JSX!"
  }),

  render() {
    return <h1>{this.message}</h1>;
  }
};

За: Вся мощь JavaScript в вашем распоряжении.

Шаблоны Vue ограничиваются использованием только зарегистрированных компонентов. С помощью JSX можно делать всё что угодно внутри функции рендеринга.

Нет необходимости присваивать функции методам, что означает немного меньше шаблонов.

<template>
  <span>{{ formatPrice(this.price) }}</span>
</template>

<script>
  import { formatPrice } from "./util";

  export default {
    props: ["price"],

    methods: {
      formatPrice
    }
  };
</script>
import { formatPrice } from "./util";

export default {
  props: ["price"],

  render() {
    return <span>{formatPrice(this.price)}</span>;
  }
};

За: Нет необходимости регистрировать компоненты

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

<template>
  <span class="price-tag">
    <formatted-price :price="price"></formatted-price>
  </span>
</template>

<script>
  import FormattedPrice from "./FormattedPrice";

  export default {
    data: () => ({
      price: 100
    }),

    components: {
      FormattedPrice
    }
  };
</script>
import FormattedPrice from "./FormattedPrice";

export default {
  data: () => ({
    price: 100
  }),

  render() {
    return (
      <span class="price-tag">
        <FormattedPrice price={this.price} />
      </span>
    );
  }
};

За: Spread оператор

В шаблонах Vue мы можем использовать v-bind для передачи объекта в качестве prop-параметра компонента. Пример из документации Vue:

<blog-post v-bind="post"></blog-post>

<!-- Will be equivalent to: -->

<blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post>

Это очень похоже на синтаксис JavaScript spread, который доступен нам в JSX.

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

<template>
  <!-- This doesn't work! -->
  <blog-post v-bind="post" v-bind="metaData"></blog-post>
</template>

<script>
  // ...
</script>
export default {
  // ...
  render() {
    return <BlogPost {...this.post} {...this.metaData} />;
  }
};

За: Именование для людей

Именование во Vue достаточно грубое, и, иногда, запутывающее.

Шаблонам нужно, чтобы всё было кебаб-кейсом, в то время как всё в вашем сценарии, вероятно, верблюжьим кейсом.

Из документации Vue:

HTML имена атрибутов не чувствительны к регистру, поэтому браузеры будут интерпретировать любые заглавные символы как строчные. Это означает, что когда вы используете шаблоны в DOM, имена props-параметров в формате camelCase должны использовать свои эквиваленты в формате шаблона (с дефисом).

Вы можете использовать PascalCase для компонентов и camelCase для props-параметров ваших файлов .vue, но тогда они не будут работать в шаблонах встраиваемых в DOM. О, и это относится только к названиям компонентов и props-ам. События должны быть написаны эквивалентно тому, как объявлены, никаких закулисных изменений кейса там нет.

<!-- App.vue -->
<template>
  <!-- Компоненты могут быть вызваны с помощью PascalCase, а аттрибуты kebab-аннотацией -->
  <PostList
    posts="posts"
    link-color="blue"
    @post-click="handlePostClick"
  ></PostList>

  <!-- Это также работает, но не в шаблонах в DOM -->
  <!-- Не забывайте, что вы не можете изменить регистр событий! -->
  <PostList
    posts="posts"
    linkColor="blue"
    @post-click="handlePostClick"
  ></PostList>
</template>

<!-- PostList.vue -->
<script>
export default {
  // Meanwhile, props should be declared with camelCase
  props: ['linkColor'],
}

Все эти проблемы исчезают при использовании JSX. Поскольку вы пишете JavaScript, вы просто используете PascalCase и kebabCase везде, где пожелаете.

export default {
  // ...
  render() {
    return (
      <PostList
        posts={this.posts}
        linkColor="blue"
        onPostClick={() => this.handlePostClick()}
      />
    );
  }
};

За: Отсутствие конфликтов с существующими элементами HTML

Больше дополнительных преимуществ, потому что мы отходим от HTML. Из документации Vue:

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

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

<template>
  <my-form></my-form>
</template>

import Form from "./Form";

export default {
  render() {
    return <Form />;
  }
};

За: Вы не привязаны к требованию создания файла на отдельный компонент.

Иногда вам хочется написать небольшой компонент, который будет использоваться только в контексте другого компонента. С файлами .vue, вам нужно будет создать два файла, даже если второй тривиален и не должен использоваться больше нигде.

С помощью JSX вы можете структурировать вещи как угодно. Обычно я придерживаюсь одного компонента в каждом файле, но может быть полезно извлечь из него кусочки, чтобы сделать вещи более читабельными.

<template>
  <article>
    <post-title :title="title"></post-title>
    <section>{{ post.contents }}</section>
  </article>
</template>
<script>
  import PostTitle from "./PostTitle";

  export default {
    props: ["post"],

    components: {
      PostTitle
    }
  };
</script>

<!-- PostTitle теперь можно импортировать куда угодно, в то время как мы создали его только для компонента Post -->
<template>
  <h1>{{ title }}</h1>
</template>
<script>
  export default {
    props: ["title"]
  };
</script>
// Поскольку остальная часть приложения не нуждается в PostTitle, мы не должны делать этот компонент доступным другим компонентам
const PostTitle = {
  props: ["title"],

  render() {
    return <h1>{this.title}</h1>;
  }
};

export default {
  props: ["post"],

  render() {
    return (
      <article>
        <PostTitle title={this.post.title} />
        <section>{this.post.contents}</section>
      </article>
    );
  }
};

Недостаток: Это выглядит пугающим для людей, которые не имели опыта работы с JSX

Если кто-то другой подготавливает вёрстку вашего приложения, вы принуждаете его к пугающей JavaScript-территории, а не к счастливой и беззаботной HTML-странице.

Это зависит от вашей команды и ситуации, стоит ли идти на компромисс.

Недостаток: Никаких директив управления структурой DOM

Возможно, вы будете скучать по Vue синтаксису рендеринга блоков и вывода их в цикле. Но, лично я, не против полностью использовать JavaScript, например, используя map вместо v-for.

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

<template>
  <ul>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</template>
export default {
  // ...
  render() {
    return (
      <ul>
        {this.posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    );
  }
};

Недостаток: Больше никаких тегов style в ваших однофайловых компонентах.

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

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

Недостаток: JSX непопулярен в экосистеме Vue.

Несмотря на то, что Vue предлагает возможность использования JSX, похоже, что в сообществе Vue оно не имеет большой популярности.

С JSX приходится делать что-то другое, в отрезе от фреймворка Vue. Обычно, проще всего держаться за большинство, когда дело касается стека, если только это не приносит существенной пользы.

Дадим шанс JSX во Vue

Я работаю над проектом, в котором достаточно много низкоуровневых компонентов. Они содержат большое количество скриптов с небольшим количеством шаблонов. В JSX чувствуется глоток свежего воздуха в этом случае.

С другой стороны, при построении больших шаблонов, состоящих из огромных кусков html с некоторыми пользовательскими компонентами и директивами, шаблоны Vue подходят лучше.

К счастью, нам не нужно выбирать один из этих вариантов, мы можем использовать оба! Я буду заниматься низкоуровневыми компонентами на JSX, а "представления", которые будут писаться другими разработчиками, будут писать с привычными шаблонами Vue.

Однозначно, стоит попробовать на одном-двух проектах, оценить, как оно, и принять решение: остаться на стороне JSX, или полностью и бесповоротно вернуться на стандартные шаблоны Vue.

Резюме

В этой статье я рассказал, что вы получите от перехода и использование JSX в шаблонах Vue. Какие преимущества и недостатки использования JSX во Vue. Так же было приведено несколько полезных примеров, того, как будут выглядеть выши Vue компоненты при переходе на JSX.