19. Миграция старых проектов

Миграция старых SAPUI5 проектов на новые инструменты

Зачем мигрировать?

  • Старые проекты часто используют устаревшие версии UI5, не поддерживают современные инструменты (TypeScript, UI5 Tooling, Fiori Tools), плохо покрыты тестами, сложны в поддержке.
  • Миграция позволяет упростить поддержку, ускорить разработку, повысить качество кода и интеграцию с CI/CD.

1. Аудит текущего состояния

Пример:
Было:

  • Весь код в одной папке /webapp, все контроллеры в одной директории, нет разделения на модули.
  • Используется устаревший Component-preload.js, нет ui5.yaml.

Стало:

  • Чёткое разделение: /src для нового кода, /webapp для legacy, есть ui5.yaml, структура контроллеров по папкам.

2. Переход на UI5 Tooling

Пример ui5.yaml:

specVersion: '3.0'
metadata:
  name: my.legacy.app
type: application
resources:
  configuration:
    paths:
      webapp: webapp

Команда:

npm install --save-dev @ui5/cli
ui5 build

3. Внедрение TypeScript

Было:
LegacyController.controller.js

sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function(Controller) {
  return Controller.extend("my.legacy.app.controller.LegacyController", {
    onInit: function() {
      // ...
    }
  });
});

Стало:
NewFancyController.ts

import Controller from "sap/ui/core/mvc/Controller";

export default class NewFancyController extends Controller {
  onInit(): void {
    // ...
  }
}

tsconfig.json — см. 14. TypeScript

4. Рефакторинг архитектуры

Было:
В каждом контроллере свои утилиты, дублирование кода.

Стало:
BaseController.ts

import Controller from "sap/ui/core/mvc/Controller";

export default class BaseController extends Controller {
  showError(message: string) {
    sap.m.MessageBox.error(message);
  }
}

MyPage.controller.ts

import BaseController from "./BaseController";

export default class MyPage extends BaseController {
  onError() {
    this.showError("Что-то пошло не так");
  }
}

5. Миграция UI

Было:
Кастомная таблица на XML:

<Table>
  <columns>
    <Column><Text text="ID"/></Column>
    <Column><Text text="Name"/></Column>
  </columns>
  <items>
    <ColumnListItem>
      <cells>
        <Text text="{id}"/>
        <Text text="{name}"/>
      </cells>
    </ColumnListItem>
  </items>
</Table>

Стало:
Использование SmartTable (Fiori Elements):

<smartTable:SmartTable
  entitySet="Products"
  tableType="Table"
  useExportToExcel="true"
  useVariantManagement="true"
  useTablePersonalisation="true"
  header="Products"
  showRowCount="true"/>

6. Внедрение тестирования

Было:
Тестов нет.

Стало:
/webapp/test/unit/model/formatter.js

QUnit.module("formatter", function () {
  QUnit.test("should return upper case", function (assert) {
    var sText = formatter.upperCase("test");
    assert.strictEqual(sText, "TEST");
  });
});

E2E:
/e2e/test.spec.js (wdi5)

describe("App", () => {
  it("should open the main page", async () => {
    await browser.url("/");
    const title = await browser.$("id=mainTitle");
    expect(await title.getText()).toBe("Главная");
  });
});

7. Автоматизация и CI/CD

Пример GitHub Actions workflow:

name: UI5 CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install dependencies
        run: npm install
      - name: Build UI5 app
        run: ui5 build
      - name: Run unit tests
        run: npm test

Best practices

  • Мигрируйте поэтапно: не пытайтесь переписать всё сразу. Начните с инфраструктуры, затем переводите отдельные модули.
  • Покрывайте изменения тестами: это снизит риски регрессий.
  • Используйте генераторы: для новых модулей и приложений используйте yo @sap/fiori.
  • Документируйте архитектурные решения: это поможет при онбординге новых разработчиков.
  • Удаляйте legacy-код: не бойтесь избавляться от устаревших утилит и паттернов.

Подводные камни

Было:
Кастомный компонент, который не работает после обновления UI5.

Решение:

  • Проверить changelog UI5.
  • Переписать компонент с использованием стандартных API.
  • Добавить тесты на критичные функции.

Полезные ссылки

Миграция — это не только про новые инструменты, но и про культуру разработки:

  • Пишите тесты на каждый новый модуль.
  • Используйте линтеры и автотесты.
  • Документируйте архитектурные решения.

Миграция — это не разовая задача, а процесс. Чем раньше начнёте — тем проще будет поддерживать проект в будущем.

См. также