Алекс Паттерсон
Оригинал: 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.