5 причин перехода к микрофронтенд архитектуре

Независимые команды разработки

Если вы работаете в нескольких командах, организационные накладные расходы становятся значительными. Общение должно происходить хотя бы ежедневно. Согласование, необходимое для управления разработкой и развертыванием, становится невозможным. Благодаря микрофронтендам управление масштабируемостью с точки зрения ресурсов разработки становится намного проще. Как правило, каждая функция может быть разработана независимой командой. Каждая команда может автономно публиковать свой функционал без какого-либо согласования. Некоторые подходы к микрофронтендам требуют, по крайней мере, общей системы сборки или общего уровня (например, reverse proxy). Хотя такие вещи все еще можно решить заранее, они делают все решение более сложным, чтобы его можно было правильно настроить на начальном этапе. Поэтому рекомендуется искать решения, которые уже работают после первоначальной настройки.

Более быстрое время выхода на рынок (TTM, Time To Market)

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

• начать новый проект
• разработать MVP
• зарелизить MVP
• пройтись по MVP (доработать и зарелизить)
• перейти в режим обслуживания

Первоначальный функционал может быть разработан и введен в действие в течение нескольких часов или дней, а не недель или месяцев. Более быстрый выход на рынок также возможен за счет совместного использования некоторых ресурсов и функций. Вместо того, чтобы разрабатывать новое приложение с нуля (включая такие вещи, как аутентификация, логирование и т. д.), все эти вещи должны быть предоставлены общим уровнем. Рекомендуется использовать подход оболочки приложения (shell), чтобы реализовать вещи, которые должны быть общими в компонентах.

Фича флаги (Feature Flags)

Замечательно иметь отдельные микрофронтенды, составляющие вместе одно приложение. Но довольно часто владельцы продуктов хотят выйти за рамки технической композиции: они хотят использовать модульность также и для бизнес-целей. Случалось ли вам когда-нибудь, что определенная функциональность должна быть доступна только определенным пользователям? Функции администратора должны быть доступны только администраторам. Хотя UI не следует использовать в качестве уровня защиты (эти проверки осуществляются на бэкэнде), мы также не хотим показывать вещи, которые нельзя (или не следует) использовать. Следовательно, мы добавим в наш код такие вещи, как:

if (hasFeature('foo')) {
  // ...
}

Это довольно плохой стиль. Наш код теперь полон вещей, которые, скорее всего, изменятся. Что, если foo верно для всех? Что делать, если функция деактивирована для всех? Что, если завтра появится новое условие, изменяющее некоторые части, чтобы также оценить, включена ли переменная bar? Поскольку у нас уже есть надлежащая модульность, довольно просто добавить фича флаги. Все, что нам нужно сделать, это ввести условный рендеринг модуля (или его загрузки) с помощью флагов. Никаких изменений кода на функциональном уровне модуля. Хотя подобные вещи могут работать и в классических монолитах, они требуют дополнительных усилий по реализации. С микрофронтендами архитектура уже полностью к этому готова.

Единая ответственность

Несмотря на то, что микросервисы не являются решением для всего, они преподносятся как таковые. Да, они, безусловно, являются хорошим решением во многих (или даже в большинстве) случаях, но очень часто монолит или другая форма сервис-ориентированной архитектуры может оказаться не менее хорошим решением. Тем не менее, наличие выделенного сервиса (с ответственной за него командой) в бэкенде — хорошее начало. Замена монолита различными микрофронтендами — это отличное продолжение, поскольку можно ввести дополнительное измерение для разделения команд.

Одна из возможностей — начать с фулстэк команд. Таким образом, команда, занимающаяся бэкэнд-модулем (микросервисом), также отвечает за фронтенд (микрофронтенд). Хотя с технической точки зрения сервис и его фронтенд определенно являются двумя разными вещами, с точки зрения бизнеса они связаны или даже являются одним целым. Наличие одной бизнес-возможности или функции от одной ответственной команды, безусловно, является преимуществом. Одна из проблем заключается в том, что типичный сценарий пользователя довольно часто затрагивает несколько бизнес-возможностей. Поэтому рекомендуется использовать фреймворк, который также позволяет динамически использовать компоненты из одного микрофронтенда в другом микрофронтенде. Связь должна быть слабой, чтобы по-прежнему можно было использовать фича флаги.

Свобода технологий

За последние два года фронтенд-технология в значительной степени стабилизировалась. Хотя и появляются новые подходы, например Svelte, которые бросают вызов таким библиотекам как React, но все же серьезных преимуществ они не предлагают. Часто существует несколько подходов и не существует универсального решения. В микрофронтенд приложениях все разные приложения могут работать вместе. Страница, написанная с помощью Angular, может использовать компонент из микрофронтенда React и наоборот. Модальное диалоговое окно для сохранения пользовательских данных может быть написано на Vue, а компонент под ним — на Svelte.

Проблема последовательного пользовательского опыта становится сложной. Возникает много вопросов. Среди наиболее важных из них:

• Мы разделяем только CSS?
• Как насчет поведения?
• Являются ли веб-компоненты решением для этого?

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

Итоги

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

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

React.memo

React.memo — это компонент высшего порядка (higher-order component, HOC). Когда компонент отображает тот же вывод при одних и тех же пропсах, вы можете обернуть свой функциональный компонент этой функцией React.memo. За счет этого улучшится производительность и оптимизируется рендеринг. React.memo работает только при изменении пропсов компонента. Это означает, что если вы используете состояние, используя хук useState, то для каждого изменения состояния он будет ререндерить компонент. С React.memo выполняется поверхностное сравнение пропсов.

Рассмотрим компонент CustomLabel и Counter, внутри которого используется CustomLabel.

// CustomLabel.jsx

import React from "react";

export const CustomLabel = ({ name }) => {
  return (
    <>
      {console.log("CustomLabel component render")}
      <label>
        <b>{name}</b>
      </label>
    </>
  );
};

// Counter.jsx

import React, { useState } from "react";
import CustomLabel from "./CustomLabel";

export const Counter = () => {
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <CustomLabel name="Simple Counter app" />
      <p>Counter is: {counter}</p>
      <button onClick={() => setCounter(counter + 1)}>Click</button>
    </div>
  );
};

Компонент CustomLabel принимает name в качестве пропса и отображает его в теге label. В компонент CustomLabel мы добавили console.log(), чтобы мы могли видеть, сколько раз компонент ререндерится. Всякий раз, когда вы нажимаете кнопку, чтобы увеличить счетчик, он повторно рендерит компонент CustomLabel.

Теперь поработаем с React.memo. Обернем компонент CustomLabel в React.memo и снова будем нажимать счетчик. Увидим, что он отрендерил компонент CustomLabel только один раз, потому что проп name остается неизменным при каждом нажатии кнопки.

// CustomLabel.jsx

import React, {memo} from "react";

export const CustomLabel = memo(({ name }) => {
  return (
    <>
      {console.log("CustomLabel component render")}
      <label>
        <b>{name}</b>
      </label>
    </>
  );
});

Чистые компоненты названы так по аналогии с чистыми функциями.

Что такое чистые функции?

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

function Add(num1, num2){
  return num1 + num2;
}

Если мы вызовем вышеуказанную функцию add(2,2), она всегда будет возвращать 4. Если вызвать ее несколько раз с параметрами 2 и 2, она всегда будет возвращать 4. Благодаря тому что функция чистая можно оптимизировать и улучшить производительность приложения. Еще подробнее о чистых функциях можно прочитать в статье Чистые функции. Функциональное программирование.