Краткое руководство по митозу: Зачем он нужен и как его можно использовать

Алекс Паттерсон

Привет, я основатель CodingCat.dev, сообщества веб-разработчиков. Я люблю все, что связано с Интернетом! Я также являюсь адвокатом разработчиков на Builder.io.

Оригинал: https://www.builder.io/blog/mitosis-a-quick-guide

Я работал в нескольких компаниях, как в качестве штатного сотрудника, так и в качестве подрядчика. Одно всегда оставалось неизменным: в их фронтенд-приложениях используется множество языков и фреймворков. (Ну, ладно, был небольшой стартап, который использовал только один, но это все равно применимо). Часто в нескольких командах есть люди с разным набором навыков, и они могут решить, что проще использовать React. Другая команда может выбрать Vue, потому что считает, что это следующий великий фреймворк.

Вы можете подумать: “А что тут такого? Все равно это всего лишь JavaScript”. Конечно, вы правы, но настоящая проблема заключается в том, что каждая из этих команд должна сосуществовать в рамках одного бренда, который имеет очень специфическую систему проектирования. Именно здесь Mitosis от Builder.io может помочь вам создать единый источник правды для всех многократно используемых компонентов вашей системы дизайна.

Что такое Mitosis?

Mitosis – это фреймворк времени компиляции, который позволяет писать компоненты на JSX и компилировать их в ванильный JavaScript, Angular, React, Vue и другие.

Mitosis использует статическое подмножество JSX, вдохновленное Solid. Это означает, что мы можем разобрать его до простой структуры JSON, а затем легко создавать сериализаторы, которые нацелены на различные фреймворки и реализации.

Это может показаться очень похожим на работу, которую команда Ionic проделала с Stencil. Главное отличие заключается в том, что мы не просто выводим веб-компоненты. А скорее полный JavaScript с поддержкой фреймворка. Вы даже можете скомпилировать вывод в Stencil.

По состоянию на апрель 2022 года, Mitosis от Builder.io поддерживает

  • Vue
  • React
  • Angular
  • Svelte
  • React Native
  • Swift
  • SolidJs
  • Stencil
  • Веб-компоненты
  • HTML
  • Liquid
  • Литералы шаблонов
  • JSON
  • Builder (JSON)

Вы можете попробовать это самостоятельно в Builder.io’s Mitosis Fiddle, изображенном ниже.

Как это сравнивается с другими фреймворками времени компиляции?

Два очень популярных фреймворка времени компиляции – это Svelte и SolidJS. Mitosis очень похож на них тем, что является фреймворком времени компиляции, что делает его очень быстрым. Его отличие в том, что он позволяет создавать несколько фреймворков, обеспечивая максимальную гибкость.

Подобно SolidJS, Mitosis использует версию JSX, которая компилирует компоненты в JSON. Затем плагины компилируют компоненты для различных целей, позволяя вам создавать инструменты в двух направлениях:

  • Код, который может быть преобразован в Mitosis JSON.
  • Плагины, которые компилируют или сериализуют JSON для целевых фреймворков.

Mitosis поддерживается Builder.io, потому что Mitosis также поддерживает инструменты без кода. Для этого он выполняет описанную выше сериализацию в формат JSON Builder.io. Это делает Mitosis очень стабильным продуктом, потому что нам нужно будет продолжать обновлять и улучшать кодовую базу, чтобы Builder.io оставался успешным.

Как установить CLI

Сначала установите CLI, открыв терминал и выполнив команду:

 npm install -g @builder.io/mitosis-cli
Войти в полноэкранный режим Выйти из полноэкранного режима

CLI mitosis имеет простые команды для выполнения, но если вы вдруг забудете, вы можете выполнить команду mitosis --help. Это покажет вам использование и примеры.

  USAGE
    mitosis compile --to=<format> [options] [files]
    mitosis compile -t=<format> [options] [files]

    If no [input-files] are specified or when [files] is "-", input
    is read from standard input.

  EXAMPLES
    mitosis compile -t react component.tsx
    mitosis compile -t react < component.tsx
    cat component.tsx | mitosis compile -t html -
    mitosis compile -t react --out-dir build -- src/**/*.tsx
Войти в полноэкранный режим Выход из полноэкранного режима

Важно помнить, что Mitosis – это всего лишь компилятор. Нам все еще нужно будет создать JSX-файлы, представляющие наш компонент, которые Mitosis затем выведет.

Как создать проект Mitosis

Сначала создайте новую директорию и перейдите в нее:

 mkdir mitosis-example && cd mitosis-example
Войдите в полноэкранный режим Выйти из полноэкранного режима

Теперь создайте проект npm, чтобы мы могли использовать пакет @builder.io/mitosis:

Я бы также настоятельно рекомендовал инициализировать этот каталог с помощью git (это необязательно):

 git init
Войдите в полноэкранный режим Выйти из полноэкранного режима

Если вы используете git, убедитесь, что создали файл .gitignore со следующими параметрами:

 node_modules/
Войти в полноэкранный режим Выйти из полноэкранного режима

Установите пакет Builder.io Mitosis в локальный проект:

 npm install @builder.io/mitosis
Войти в полноэкранный режим Выйти из полноэкранного режима

Добавьте файл JSX Mitosis

Имя файла должно заканчиваться на lite.jsx это позволяет использовать расширение VSCode.

 touch component.lite.jsx
Вход в полноэкранный режим Выйдите из полноэкранного режима

Откройте свой проект в VSCode:

code .
Войти в полноэкранный режим Выйти из полноэкранного режима

В VSCode ваш проект должен выглядеть следующим образом:

Добавьте JSX в файл component.lite.jsx:

import { useState } from "@builder.io/mitosis";

    export default function MyComponent(props) {
    const [name, setName] = useState("Alex");

    return (
        <div>        <input            css={{            color: "red",
            }}
            value={name}            onChange={(event) => setName(event.target.value)}
        />
        Hello! I can run in React, Vue, Solid, or Liquid!
        </div>    );
    }

Войти в полноэкранный режим Выйти из полноэкранного режима

Если вы когда-либо писали на React, это должно показаться вам очень знакомым.

Сравнение состояний

Прежде чем вы выведете наш component.lite.jsx на любой доступный язык, внимательно посмотрите, как используется состояние. Хук useState будет таким же, как и то, как вы используете его в React. Ниже вы можете увидеть несколько фреймворков и то, как они используют это определение, чтобы соответствующим образом назначить переменную state для каждого входа.

Как вы видите, переменная состояния name, используемая в JSX, правильно компилируется в других фреймворках, приведенных ниже.

Angular

<input class="input" :value="name" @input="name = $event.target.value" />
Вход в полноэкранный режим Выход из полноэкранного режима

Svelte

<input class="input" bind:value={name} />
Войти в полноэкранный режим Выйти из полноэкранного режима

Vue

<input class="input" :value="name" @input="name = $event.target.value" />
Войти в полноэкранный режим Выйти из полноэкранного режима

Компиляция Mitosis

Теперь, когда у вас настроен Mitosis CLI, создан файл component.lite.jsx и вы лучше понимаете, как работает состояние, пришло время сгенерировать собственные файлы фреймворка.

Мне нравится хранить свои выходные файлы в отдельной папке. Чтобы создать такую папку, выполните следующие действия:

 mkdir output
Войти в полноэкранный режим Выйти из полноэкранного режима

Для начала компиляции откройте терминал в том же каталоге, где находится ваш файл component.lite.jsx, и выполните следующую команду:

 mitosis compile --to=react component.lite.jsx > output/component.jsx
Войти в полноэкранный режим Выйти из полноэкранного режима

Флаг --to= устанавливает фреймворк, в который вы компилируете вывод вашего компонента Mitosis, далее следует расположение вашего входного файла Mitosis component.lite.jsx, > представляет место, куда будет помещен вывод, и, наконец, расположение выходного файла, включая любой каталог output/component.jsx.

После выполнения приведенного выше примера вы получите приведенный ниже код React.

React

Команда:

 mitosis compile --to=react component.lite.jsx > output/component.jsx
Войти в полноэкранный режим Выход из полноэкранного режима

output/component.jsx

/** @jsx jsx */ import { jsx } from "@emotion/react";
import { useLocalObservable } from "mobx-react-lite";

export default function MyComponent(props) {
  const state = useLocalObservable(() => ({ name: "Alex" }));

  return (
    <div>
      {" "}
      <input
        css={{ color: "red" }}
        value={state.name}
        onChange={(event) => (state.name = event.target.value)}
      />
      Hello! I can run in React, Vue, Solid, or Liquid!
    </div>
  );
}


Войти в полноэкранный режим Выход из полноэкранного режима

Угловой

 mitosis compile --to=angular component.lite.jsx > output/component.tsx
Войти в полноэкранный режим Выйти из полноэкранного режима

output/component.tsx

import { Component } from "@angular/core";

  @Component({
    selector: "my-component",
    template: `
      <div>
        <input
          class="input"
          [value]="name"
          (input)="name = $event.target.value"
        />
        Hello! I can run in React, Vue, Solid, or Liquid!
      </div>
    `,
    styles: [
      `
        .input {
          color: red;
        }
      `,
    ],
  })
  export default class MyComponent {
    name = "Alex";
  }

Войти в полноэкранный режим Выйти из полноэкранного режима

Svelte

 mitosis compile --to=svelte component.lite.jsx > output/component.svelte
Войти в полноэкранный режим Выйти из полноэкранного режима

output/component.svelte

<script>
  let name = "Alex";
</script>

<style>
  .input {
    color: red;
  }
</style>
<div>
  <input class="input" bind:value="{name}" /> Hello! I can run in React, Vue,
  Solid, or Liquid!
</div>

Войти в полноэкранный режим Выйти из полноэкранного режима

Vue

 mitosis compile --to=vue component.lite.jsx > output/component.vue
Войти в полноэкранный режим Выйти из полноэкранного режима

output/component.vue

<template>
  <div>
    <input class="input" :value="name" @input="name = $event.target.value" />
    Hello! I can run in React, Vue, Solid, or Liquid!
  </div>
</template>
<script>
  export default {
    name: "my-component",
    data: () => ({ name: "Alex" }),
  };
</script>
<style scoped>
  .input {
    color: red;
  }
</style>
Войти в полноэкранный режим Выход из полноэкранного режима

Заключение

Mitosis – это самый простой способ обеспечить будущее вашей текущей разработки. Если вы начинаете новый проект, то задел на будущее будет еще важнее, а также гораздо проще начать писать с нуля, чем преобразовывать текущие компоненты.

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

Есть еще вопросы? Обратитесь к документации Mitosis.

Полный пример можно найти на сайте https://github.com/codercatdev/mitosis-example.

Оцените статью
Procodings.ru
Добавить комментарий