От монолитного приложения к микрофронтендам

Как начать преобразование устаревшего фронтенд-приложения в микрофронтенд

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

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

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

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

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

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

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

Преобразование монолитного приложения React в микрофронтенды

В этом случае я разработаю веб-сайт фильма, как показано ниже.

Чтобы получить доступ к упомянутому выше монолитному приложению React, вы можете легко найти его в моем репозитории GitHub. На следующих шагах я преобразую его в микрофронтенды с помощью Bit.

Шаг 1 — Выбор первого компонента для переноса

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

В этом примере я выбрал компонент src/components/Banners в качестве первого переносимого.

Шаг 2 — Инициализируйте рабочее пространство Bit в приложении React

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

После установки вы можете использовать команды Bit CLI для инициализации рабочего пространства Bit в приложении React.

Откройте интерфейс командной строки в корневом каталоге приложения и выполните команду bit init для инициализации Bit workspace. Он создаст новый файл с именем workspace.jsonc в корне проекта.

При необходимости вы можете изменить имя workspace и имя scope с помощью файла workspace.jsonc. В данном случае я изменил имя рабочей области на microfrontends, а имя области — на chameera.microfrontends, где chameera — название моей организации.

Шаг 3 — Создайте новый компонент React с помощью Bit

Вы должны создать новое приложение React, используя Bit, чтобы поддерживать микроинтерфейсы.

bit create react-app banner --aspect teambit.react/react

Приведенная ниже команда Bit CLI создаст новый каталог с именем microfrontends в корне проекта и новый компонент React с именем banner в этой папке.

Затем обновите файл microfrontends/banner/app.tsx, используя содержимое из файла src/components/Banners/Banner.jsx.

import React, { useState } from 'react'
import {
  Box,
  IconButton,
  useBreakpointValue,
  Stack,
  Container,
} from '@chakra-ui/react'
import { BiLeftArrowAlt, BiRightArrowAlt } from 'react-icons/bi'
import Slider from 'react-slick'

export type BannerProps = {
  cards: Card[]
}

type Card = {
  id: string
  image: string
}

type SliderType = {
  slickPrev: () => void
  slickNext: () => void
}

// eslint-disable-next-line @typescript-eslint/no-use-before-define
Banner.defaultProps = {
  cards: [],
}

const slidersSettings = {
  dots: true,
  arrows: false,
  fade: true,
  infinite: true,
  autoplay: true,
  speed: 500,
  autoplaySpeed: 3000,
  slidesToShow: 1,
  slidesToScroll: 1,
}

export function Banner({ cards }: BannerProps) {
  const [slider, setSlider] = useState<SliderType | undefined>(undefined)

  const top = useBreakpointValue({ base: '90%', md: '50%' })
  const side = useBreakpointValue({ base: '30%', md: '40px' })

  return (
    <Box position="relative" height="650px" width="full" overflow="hidden">
      <link
        rel="stylesheet"
        type="text/css"
        charSet="UTF-8"
        href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
      />
      <link
        rel="stylesheet"
        type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
      />
      <IconButton
        aria-label="left-arrow"
        variant="ghost"
        position="absolute"
        left={side}
        top={top}
        transform="translate(0%, -50%)"
        zIndex={2}
        onClick={() => slider?.slickPrev()}
        <BiLeftArrowAlt size="40px" />
      </IconButton>
      <IconButton
        aria-label="right-arrow"
        variant="ghost"
        position="absolute"
        right={side}
        top={top}
        transform="translate(0%, -50%)"
        zIndex={2}
        onClick={() => slider?.slickNext()}
        <BiRightArrowAlt size="40px" />
      </IconButton>
      <Slider {...slidersSettings} ref={(sliderEl) => setSlider(sliderEl)}>
        {cards.map((card) => (
          <Box
            key={card.id}
            height="2xl"
            position="relative"
            backgroundPosition="center"
            backgroundRepeat="no-repeat"
            backgroundSize="cover"
            backgroundImage={url(${card.image}) }
            <Container size="container.lg" height="600px" position="relative">
              <Stack
                spacing={6}
                border="1px soild red"
                w="full"
                position="absolute"
                color="white"
                top="15%"
                transform="translate(0, -50%)"
              />
            </Container>
          </Box>
        ))}
      </Slider>
    </Box>
  )
}

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

При необходимости вы можете добавить дополнительные зависимости к этим компонентам с помощью Bit CLI. Например, с помощью приведенной ниже команды я добавил 3 новых зависимости для компонента баннера.

bit deps set banner @emotion/styled @emotion/react framer-motion

Шаг 4 — Обновите файлы новых компонентов

1. баннер.compositions.tsx

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

В этом примере я обновил файл banner.composition.tsx, добавив ChakraProvider и изображения, чтобы протестировать компонент баннера.

import React from 'react'
import { ChakraProvider } from '@chakra-ui/react
import { Banner } from './app'
import { cards } from './data/cards

export const BannerBasic = () => (
 <ChakraProvider>
  <Banner cards={cards} />
 </ChakraProvider>
)

Я также создал новый файл с именем banner/data/cards.ts и добавил в него приведенный ниже код, чтобы добавить изображения в файл композиции.

export const cards = [
  {
   id: '1',
   image:
    'https://nameh-dhiman.github.io/Apple-TV-Clone-Project.github.io/Images/Tedd%20Lasso.jpg',
  },
  {
   id: '2',
   image:
    'https://9to5mac.com/wp-content/uploads/sites/6/2022/02/sky-is-everywhere-how-to-watch.jpg?quality=82&strip=all',
  },
  {
   id: '3',
   image: 'https://flxt.tmsimg.com/assets/p17586756_b_h8_af.jpg',
  },
  {
   id: '4',
   image:
    'https://is1-ssl.mzstatic.com/image/thumb/Features126/v4/93/50/f4/9350f4f6-4c50-f6a5-6976-446a5333b265/U0ZfVFZBX1dXX0RlYXItUzItQ29taW5nX1Nvb24tQnJpY2subHNy.lsr/1478x832fe.webp',
  },
  {
   id: '5',
   image:
    'https://www.apple.com/tv-pr/articles/2022/01/global-hit-series-the-morning-show-starring-and-executive-produced-by-jennifer-aniston-and-reese-witherspoon-renewed-for-season-three/images/big-image/big-image-01/011021_The_Morning_Show_Renewed_Season_Three_Big_Image_01_big_image_post.jpg.large.jpg',
  },
 ]

2. баннер.приложение-root.tsx

Файл banner.app-root.tsx отвечает за подключение компонентов React к корню HTML. Вам нужно обновить его тем же кодом, который использовался для композиции.

3. index.ts

export { Banner } from './app';

Теперь вы можете запустить локальный сервер Bit с помощью команды bit start и увидеть компонент баннера в действии.

Шаг 5 — Интегрируйте микроинтерфейс в существующее приложение

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

В этом случае необходимо обновить строки импорта компонента src/pages/Home.jsx следующим образом:

import { Box } from '@chakra-ui/react'
// import { Banner } from '../components/Banners/Banner'
import { Banner } from '@chameera/microfrontends.banner'
import { HomeContent } from '../components/HomeContent/HomeContent'
import { Footer } from '../components/Footer/Footer'
import { cards } from '../db'

Затем запустите команду npm start, чтобы запустить приложение. Вы получите то же приложение, что и предыдущее, без каких-либо проблем. Но на этот раз для баннерного компонента используется микроинтерфейс.

Кроме того, вы можете запустить микро-интерфейс изолированно от приложения, используя следующие команды:

bit use banner

bit run banner

Шаг 6 — Экспорт микроинтерфейса для использования другими командами

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

Во-первых, вы должны войти в свою учетную запись, используя следующую команду:

bit login

Затем пометьте компонент семантической версией выпуска, используя приведенную ниже команду. Подробнее о команде Bit tag можно узнать здесь.

bit tag -m "banner-microftontend"

Наконец, экспортируйте компонент с помощью следующей команды.

bit export

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

Заключение

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

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

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

Спасибо, что нашли время прочитать это руководство. Я искренне ценю ваше участие и желаю вам больших успехов в ваших усилиях по миграции микроинтерфейса. Удачного кодирования, и пусть ваши приложения процветают в мире микрофронтендов!

Создавайте составные приложения React с повторно используемыми компонентами, как Lego.

Bit – это цепочка инструментов с открытым исходным кодом для разработки компонуемого программного обеспечения.

С помощью Bit вы можете разрабатывать любую часть программного обеспечения — современное веб-приложение, компонент пользовательского интерфейса, серверную службу или сценарий CLI — как независимую, повторно используемую и компонуемую единицу программного обеспечения. Совместно используйте любой компонент в своих приложениях, чтобы упростить совместную работу и ускорить сборку.

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

Начните с этих руководств:

→ Микро-Фронтенды: Видео // Гид

→ Кодшеринг: Видео // Гид

→ Модернизация: Видео // Путеводитель

→ Монорепозиторий: Видео // Путеводитель

→ Микросервисы: Видео // Путеводитель

→ Дизайн-система: Видео // Путеводитель

Рекомендуемые статьи: