Как организовать миграцию с Vue на React с точки зрения команды и процессов?

Миграция с Vue на React: стратегия и процессы

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

1. Подготовительная фаза (1-2 недели)

Оценка объёма работ

1. Аудит текущей кодовой базы
   - Количество компонентов Vue
   - Используемые Vue-специфичные возможности (v-directives, slots, mixins)
   - Зависимости и их наличие аналогов в экосистеме React
   - Размер бизнес-логики vs представление

2. Оценка сложности каждого компонента
   - Простые (чистый UI, статические) — 1-2 часа
   - Средние (state, events) — 4-8 часов
   - Сложные (deep nesting, custom directives) — 2-3 дня

План обучения команды

// Обучающие сессии для команды
Week 1:
  - Основы React (JSX, Components, Props)
  - React Hooks (useState, useEffect, useContext)
  - Отличия Vue vs React

Week 2:
  - Практика: переписать 3-5 компонентов вместе
  - Code review процесс
  - Testing strategy

Week 3:
  - Самостоятельная миграция компонентов

2. Технческая архитектура

Стратегия миграции: Incremental (Постепенная)

Это лучший подход для работающих приложений:

// До миграции (все Vue)
App.vue
  ├─ Header.vue (Vue)
  ├─ Sidebar.vue (Vue)
  └─ Main.vue (Vue)

// После фазы 1 (смешанный код)
App.jsx (React wrapper)
  ├─ Header.jsx (React) — НОВАЯ
  ├─ Sidebar.vue (Vue) — старая
  └─ Main.vue (Vue) — старая

// После завершения (все React)
App.jsx (React)
  ├─ Header.jsx (React)
  ├─ Sidebar.jsx (React)
  └─ Main.jsx (React)

Параллельное существование Vue и React

// entry.js
import React from "react";
import Vue from "vue";
import ReactDOM from "react-dom";

// React приложение
const ReactApp = () => (
  <div>
    <ReactComponent />
    <div id="vue-root"></div> {/* Место для Vue */}
  </div>
);

ReactDOM.render(<ReactApp />, document.getElementById("root"));

// Vue приложение (рендерится в отдельное место)
const vueApp = new Vue({
  el: "#vue-root",
  template: "<OldVueComponent />"
});

3. Организационный процесс

Фазирование: делить на спринты

Спринт 1: UI компоненты (кнопки, ввод, карточки)
  - Button.vue -> Button.jsx
  - Input.vue -> Input.jsx
  - Card.vue -> Card.jsx
  - Время: 1 неделя

Спринт 2: Layout компоненты
  - Header.vue -> Header.jsx
  - Footer.vue -> Footer.jsx
  - Sidebar.vue -> Sidebar.jsx
  - Время: 1 неделя

Спринт 3: Feature компоненты
  - UserProfile.vue -> UserProfile.jsx
  - PostList.vue -> PostList.jsx
  - Время: 2-3 недели

Спринт 4: Удаление Vue и полная интеграция
  - Удаление vue-router
  - Миграция Vuex -> Redux/Zustand/Context
  - Время: 1-2 недели

Распределение в команде

Если команда из 4 разработчиков:

1 Junior + 1 Senior — Переписывают UI компоненты (простые)
1 Mid + 1 Senior — Переписывают complex компоненты

Сенёр разработчик:
  - Руководит архитектурой
  - Делает code review каждого PR
  - Решает проблемы с интеграцией

4. Техническая интеграция

Импорт компонентов из обеих фреймворков

// В React компоненте используем Vue компонент
import Vue from "vue";
import VueComponent from "./MyVue.vue";

// Wrapper для использования Vue в React
function VueWrapper() {
  const ref = useRef();

  useEffect(() => {
    const vm = new Vue({
      render: (h) => h(VueComponent)
    }).$mount(ref.current);

    return () => vm.$destroy();
  }, []);

  return <div ref={ref} />;
}

Миграция State Management

Vuex -> Redux/Zustand

// До (Vuex)
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) { state.count++; }
  }
});

// После (Zustand) — проще и меньше boilerplate
import create from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 }))
}));

function MyComponent() {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);

  return (
    <button onClick={increment}>
      Count: {count}
    </button>
  );
}

5. Testing стратегия

Тесты должны пройти ДО миграции

# Vue тесты (Jest/Vitest)
vm = mount(MyVueComponent);
assert.equal(vm.find(".count").text(), "0");
vn.find("button").trigger("click");
assert.equal(vm.find(".count").text(), "1");

Те же тесты для React

// React тесты (Testing Library)
const { getByText } = render(<MyReactComponent />);
assert.equal(getByText(".count"), "0");
fireEvent.click(getByText("button"));
assert.equal(getByText(".count"), "1");

Правило: тесты должны проходить до и после миграции.

6. Communication и документация

Чеклист для каждого компонента

## UserProfile.vue -> UserProfile.jsx

- [ ] Создан React компонент
- [ ] Пройдены все unit тесты
- [ ] E2E тесты прошли
- [ ] Props интерфейс совпадает (TypeScript)
- [ ] Стили мигрированы
- [ ] Code review пройден
- [ ] Развёрнуто на staging
- [ ] QA протестировало
- [ ] Vue компонент удалён

Документирование изменений

# Миграция с Vue на React

## Что изменилось для разработчиков

### Жизненный цикл
- `mounted()` -> `useEffect(() => {}, [])`
- `watch(prop)` -> `useEffect(() => {}, [prop])`
- `destroyed()` -> `useEffect(() => () => cleanup, [])`

### Данные и состояние
- `data()` -> `useState()`
- `computed` -> `useMemo()`
- `methods` -> обычные функции

### Шаблоны (Templates)
- v-if -> условные операторы (? :)
- v-for -> .map()
- v-on -> onClick, onChange

7. Risks и как их снизить

Risk 1: Производительность упадёт

// Профилирование ПЕРЕД и ПОСЛЕ
const {
  profiler,
  logActualDuration = true
} = require("react-test-library");

render(
  <Profiler onRender={onRenderCallback}>
    <MyComponent />
  </Profiler>
);

Risk 2: Функциональность сломается

// E2E тесты с Playwright/Cypress
// Перед удалением Vue компонента:
Cypres.cy
  .visit("/users/123")
  .get(".profile-name").should("have.text", "John")
  .get(".profile-age").should("have.text", "30");

Risk 3: Команда отстанет в скорости разработки

- Выделить одного опытного разработчика как "React champion"
- Проводить code reviews в паре (Senior + Junior)
- Еженедельные синхронизации по progress

8. Таймлайн миграции (для app среднего размера)

Усреднённо на 100 компонентов Vue:

Месяц 1:
  - Обучение команды (Week 1)
  - Миграция UI компонентов (Week 2-3)
  - Интеграция в приложение (Week 4)

Месяц 2:
  - Миграция layout и feature компонентов
  - Миграция state management
  - Глубокое тестирование

Месяц 3:
  - Финальная отладка
  - Удаление Vue кода
  - Production deployment

Итого: 8-12 недель для среднего приложения

Лучшие практики

1. Миграция постепенно — не переписывайте всё сразу
2. Тесты КРИТИЧНЫ — они ваша страховка
3. Документируйте различия — Vue vs React
4. Выделяйте время на обучение — не жертвуйте качеством
5. Профилируйте производительность — сравнивайте до и после
6. Страхуйте себя — сохраняйте возможность откатиться