Начало работы с новым проектом Vue.js в 2023 году

Краткая предыстория — Vue.js

Vue.js — это фреймворк, созданный на основе HTML, CSS и JavaScript, который легко предлагает архитектуру, основанную на компонентах, для создания критически важных производственных приложений. Когда он был впервые анонсирован в 2014 году, он произвел фурор в индустрии программного обеспечения, предложив лучший (и более прогрессивный) подход к созданию интерфейсных приложений.

В отличие от своих конкурентов (React и Angular), Vue.js был специально разработан для преодоления разрыва между React и Angular. Он был направлен на улучшение ремонтопригодности и тестируемости компонентов внешнего интерфейса, предлагая более прогрессивный подход к разработке приложений внешнего интерфейса.

Это позволило пользователям поддерживать код JavaScript, HTML и CSS в одном файле, что значительно помогло повысить удобство сопровождения и тестирования компонентов.

Тем не менее, этого все еще было недостаточно.

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

Клиенты в 2023 году хотят, чтобы вы быстрее создавали сложные приложения.

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

Ну, как мы можем сделать лучше?

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

Итак, что же такое распределенная архитектура, управляемая компонентами?

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

Однако в 2023 году строительные компоненты не подходят. Вы по-прежнему заперты внутри гигантского монолитного приложения и теряете возможность масштабировать приложение по мере его роста.

Здесь в игру вступают такие инструменты, как Bit. Bit — это инструмент, который помогает разработчикам создавать распределенные приложения на основе компонентов и совместно работать над компонентами независимо от репозитория Git или любой другой настройки разработки. Это позволяет вам свободно использовать архитектурные шаблоны, такие как Шаблон Micro Frontends, чтобы повысить производительность вашей разработки, снизить затраты и согласовать его с вашим внутренним микросервисом.

Как показано выше, каждый компонент находится в отдельном пространстве (изолированном от остальных). Принятие такого подхода позволяет проектировать, разрабатывать, тестировать и версии одного компонента в полной изоляции.

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

И точно так же это помогает сэкономить огромное количество времени, поскольку вам больше не нужно ждать, пока приложение скомпилируется после простого изменения цвета фона компонента!

Раскройте потенциал Vue.js с помощью Bit
Сегодня мы очень рады представить среду разработки Vue (Vue env) на Bit и официальную документацию для…bit.dev

Давайте создадим распределенное приложение, управляемое компонентами, с помощью Vue.js.

Шаг 01 — Предварительные условия

Во-первых, вы должны настроить Bit в своей локальной среде разработки, прежде чем разрабатывать модульное приложение Vue.js.

Если вы настроили Bit, убедитесь, что вы используете последнюю версию.

Вы можете установить Bit, выполнив команду, показанную ниже:

npx @teambit/bvm install

Для подтверждения установки выполните команду bit --version. Вы должны увидеть вывод, который я проиллюстрировал ниже.

Далее создайте учетную запись на Bit и создайте область для экспорта компонентов, которые вы будете создавать вместе со мной в этой статье!

Шаг 02 — Инициализация среды разработки

Затем вам понадобится некоторое пространство для разработки, чтобы составить ваши компоненты. В Bit это называется «Рабочее пространство». Поэтому вы должны создать рабочее пространство, которое можно использовать для разработки ваших компонентов Vue.js. Это можно сделать с помощью команды, показанной ниже.

bit new vue my-workspace --env teambit.vue/vue --default-scope my-org.my-scope

Когда вы запускаете эту команду, убедитесь, что вы указали свою организацию и имя области и заменили значение по умолчанию «my-org.my-scope». В моем случае я указал свое имя пользователя Bit и область действия, созданную на шаге 01 — «lakindu2002.demo-vue-js».

Приведенная выше команда создает новое рабочее пространство Bit, которое будет настроено для проектирования и разработки компонентов Vue.js. Он использует среду teambut.vue/vue для обеспечения среды выполнения для запуска компонентов Vue.js.

Затем запустите bit start и посетите http://localhost:3000, чтобы запустить локальную среду разработки и приступить к созданию компонентов Vue.js. Ниже вы увидите фрагмент.

Шаг 03 — Создание компонента Vue.js

Теперь, когда ваш сервер разработки запущен, вы можете приступить к созданию компонентов Vue.js! С Bit создание компонента Vue.js можно выполнить одной простой командой:

bit create vue <<NAMESPACE>>/<<COMPONENT-NAME>>

Если вы не знакомы с пространством имен — подумайте о нем как о подкаталоге для хранения ваших компонентов.

Итак, если бы вы создавали компонент дизайна, такой как кнопка, вы бы написали команду — bit create vue design/button. Это позволяет аккуратно организовать компоненты внутри области видимости. После запуска команды вы увидите каталог, показанный ниже.

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

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

По умолчанию Bit заставляет вас принять TDD, предоставляя тестовый файл spec.ts, гарантируя, что код, который вы отправляете, не содержит ошибок.
Далее вам предоставляется файл документации .md, который поможет документировать ваш компонент, чтобы обеспечить максимальную ремонтопригодность.
Кроме того, вы можете определить композиции для своего компонента, чтобы продемонстрировать различные варианты, которые вы собираетесь поддерживать!
Вы можете принять хороший стандарт кодирования, потому что вы должны думать о компонентах независимо. Вы не пишете компоненты, думая о их потребителях. Это поможет вам создать более осмысленные имена свойств, относящиеся к вашему разрабатываемому компоненту.

Шаг 04 — Разработка компонента Vue.js

Теперь, когда мы создали простой компонент (кнопку), давайте приступим к созданию компонента. Давайте начнем с определения тестовых случаев для компонента! Откройте файл button.spec.ts и включите приведенный ниже код.

import { render } from "@testing-library/vue";
import { BasicButton, BlueButton, ButtonWithCustomGoodByeWorldLabel } from "./button.composition";

it("should render with the correct text", () => {
  const { getByText } = render(BasicButton);
  const rendered = getByText("Hello World");
  expect(rendered).toBeTruthy();
});

it("should render button with label Hello World with the blue color", () => {
  const { getByText } = render(BlueButton);
  const rendered = getByText("Hello World");
  expect(rendered.style.background).toBe('blue');
});


it("should render button with label Goodbye World", () => {
  const { getByText } = render(ButtonWithCustomGoodByeWorldLabel);
  const rendered = getByText("Goodbye World");
  expect(rendered).toBeTruthy();
});

Мы включили три тестовых примера для вашего приложения.

Первый тестовый пример гарантирует, что кнопка отображается с меткой — Hello World.
Второй тестовый пример гарантирует, что кнопка отобразится с меткой — Hello World, а с цветом фона — blue.
Последний тестовый пример гарантирует, что кнопка отображается с пользовательской меткой — Goodbye World.

Эти тестовые примеры означают, что компонент «Кнопка» должен иметь метку по умолчанию — Hello World, и мы должны разрешить пользователям изменять эту метку, обеспечивая при этом поддержку изменения цвета фона.

Итак, давайте приступим к разработке компонента Button.

Откройте файл button.vue и включите код, показанный ниже:

<script setup lang="ts">
import { defineProps, computed } from "vue";

const props = defineProps({
  label: {
    type: String,
    default: "Hello World",
    required: false,
  },
  style: {
    type: Object,
    default: () => ({}),
    required: false,
  },
});

const buttonStyle = computed(() => {
  return props.style;
});
</script>

<template>
  <button :style="buttonStyle">{{ label }}</button>
</template>

Показанный выше код определяет простой компонент Button Vue.js. Он принимает два реквизита — label и style, чтобы помочь настроить Button, чтобы помочь удовлетворить требования изменения метки и цвета.

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

После этого вы можете определить свои композиции, чтобы обеспечить поддержку функционирования ваших тестовых примеров и продемонстрировать возможности вашего компонента! Поэтому создайте два новых файла внутри каталога button:

button-blue.fixture.vue
button-goodbye-world.fixture.vue

Далее включите фрагменты, показанные ниже, чтобы определить композицию.

// button-blue.fixture.vue

<script setup>
import Button from "./button.vue";
</script>

<template>
  <Button label="Hello World" :style="{
    background: 'blue'
  }" />
</template>

// button-goodbye-world.fixture.vue

<script setup>
import Button from "./button.vue";
</script>

<template>
  <Button label="Goodbye World" />
</template>

Два фрагмента, определенные выше, демонстрируют две композиции. После этого откройте файл button.composition.ts и включите код, показанный ниже.

import BasicButton from "./button-basic.fixture.vue";
import BlueButton from "./button-blue.fixture.vue";
import ButtonWithCustomGoodByeWorldLabel from "./button-goodbye-world.fixture.vue"

export { BasicButton, BlueButton, ButtonWithCustomGoodByeWorldLabel };

Фрагмент, показанный выше, позволяет файлу spec.ts импортировать компоненты, определенные для запуска тестовых случаев.

Шаг 05 — Создание приложения Vue.js

Теперь вы можете задаться вопросом: «Я создал компонент, но как мне его использовать?» Ну, вот где компонент App вступает в игру. Bit позволяет создать компонент App, который обеспечивает развертываемую среду выполнения для ваших компонентов и позволяет создавать полнофункциональные производственные приложения с использованием Vue.js!

Чтобы создать приложение, выполните команду, показанную ниже.

bit create vue-app apps/hello-app

Приведенная выше команда создает приложение Vue.js под названием hello-app. Это создаст структуру папок, показанную ниже.

Откройте hello-app.vue и включите приведенный ниже код, который поможет вам использовать пользовательский компонент Button.

<script setup lang="ts">
import Button from "@lakindu2002/demo-vue-js.design.button";

</script>

<template>
  <Button label="Hello World" />
</template>

Как показано выше, это компонент Button, который мы создали ранее! Затем вам нужно будет позволить рабочей области загрузить App как отдельный экземпляр. Для этого выполните команду, показанную ниже.

bit use apps/hello-app

Наконец, выполните следующую команду, чтобы запустить новое приложение Vue.js!

bit run hello-app-app

Да, вам нужно будет использовать «приложение-приложение», если вы создали приложение, добавив «приложение» к имени. Если вы указали только «bit create app hello», используйте «bit run «hello-app».

Сделав это, вы можете просматривать приложение локально.

Шаг 06 — Версионирование и совместное использование кода

После того, как вы создали свое приложение, вы можете отправить его в удаленное хранилище — scope для дальнейшего обслуживания.

Для этого вы должны «пометить» свои компоненты, чтобы создать их версии и экспортировать их в Bit Cloud.

Вы можете изменить версию своего компонента, запустив bit tag с последующим сообщением. Например, ваша команда может быть bit tag -m "adding a property for the button name". Что уникально в этой команде, так это то, что она создает компонент и выполняет его тестовые примеры, чтобы гарантировать, что вы выпускаете только полностью функциональный код.

Наконец, после того как вы пометили новую версию своего компонента, вы можете отправить ее в репозиторий компонентов — Bit Cloud с помощью команды bit export.

Ну, разве это не многообещающий подход для разработки приложений Vue.js?

Создание интерфейсов прошло долгий путь с момента первого запуска Vue.js. Прошли те времена, когда разработчики пытались управлять отдельными гигантскими монолитными фронтенд-приложениями. Наступил рассвет микрофронтендов и Bit — модернизированного подхода к созданию модульных и распределенных компонентов, которые можно разрабатывать, тестировать и версионировать изолированно!

Чтобы узнать, что мы создали в этом сообщении блога, посетите мой репозиторий GitHub в Bit Cloud и взгляните!

Я надеюсь, что эта статья поможет вам создавать потрясающие приложения Vue.js в 2023 году!

Спасибо за чтение.

Простое управление версиями независимых компонентов с помощью Bit

Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.

Превратите любой пользовательский интерфейс, функцию или страницу в компонент многократного использования — и поделитесь им со своими приложениями. Легче сотрудничать и строить быстрее.

→ Подробнее

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