assr v1.21.4

Репозиторий новой платформы сайта alfabank.ru

Новая платформа сайта, основанная на виджетах.

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

Структура:

• ./src/api — классы для работы с api geo и content
• ./src/server — серверный рендеринг, роутинг, мидлвары
• ./src/client — стартовая точка для клиента
• ./src/data — mock-и в виде json дерева для сборки страниц, на клиенте доступно через window.__APP_STATE__
• ./src/components — компоненты для виджетов
• ./src/widgets — виджеты
• ./src/widgets-factory — фабрика виджетов, регистрация виджета в configure.js

Как запустить

Подготовка

1. Склонировать репозиторий в локальную папку: git clone http://gitlab.k8s.alfa.link/alfabank/nodejs/assr.git
2. Установить nvm
3. Уточнить актуальную версию node через package.json проекта (>=10.15 на момент последней правки readme) и установить: nvm install <версия из package.json>
4. Сделать nvm use в корне репозитория
5. Установить yarn

Development с Hot Reload

1. Установить зависимости проекта: yarn install
2. Запустить проект: yarn start
3. Открыть страницу, например sme, в браузере

Production like (для тестирования в IE и на других устройствах)

1. Установить зависимости проекта: yarn install
2. Запустить проект: yarn start:prod
3. Открыть страницу, например sme, в браузере

В этом режиме возможно работать с ngrok и другими похожими утилитами.

Как коммитить? Почему я не могу запушить коммиты?

Для написания сообщений при коммите используется commitizen:

• Установка: npm install -g commitizen.
• Конфигурация: configs/git/commitizen.js

Фабрика виджетов

Виджет — React компонент, который оборачивается в ErrorBoundary и Loadable.

Модуль widget-factory переводит JSON представление страницы в массив React компонетов:

JSON tree:                      +----------------------+
                                |                      |
{                               |                      |
  pageContent: {      +-------> +    widget-factory    +-------> React.Component[]
    widgets: IWidget[]          |                      |
  }                             |                      |
}                               +----------------------+

// Свойства виджета
interface IWidget {
    name: string; // название виджета
    properties: IWidgetProperty[] // массив пропсов, включая плоский массив children компонента
}

// Описание пропса
interface IWidgetProperty {
    name: string; // название пропса
    value: json; // значение пропса
}

Модуль содержит классы:

• TreeBuilder — рекурсивно проходит по JSON дереву и возвращает соответствующие компоненты, применяет к компонентам middleware и оборачивает в ErrorBoundary
• WidgetFactory — регистрирует и создает виджеты

Middleware добавляют новый функционал в компонент. Например, добавление через пропсы метода TreeBuilder#create. Тогда компонент сам сможет генерировать React компоненты из JSON представления.

Новые виджеты регистрируются в configure.js.

Добавление новых страниц

Для добавления новой страницы необходимо создать новую директорию (папку) в src/mocks/pages. Имя папки будет в дальнейшем являться алиасом (прижился такой формат: __alias, __custom_alias, __aeroflot). Алиас кратко отражает суть содержимого.

Новые страницы прописываются в registry.js в виде обьекта:

  __custom_alias: {
  url: URLS.__custom_alias,
  desktop: component, // компонент для десктопной версии
  mobile: componentMobile // компонент для мобильной версии
}

Важно не забыть указать путь, по которому страница будет доступна на проде в tools/update-mocks/config.js. Если адрес неизвестен, его следует узнать у менеджера до пулл-реквеста (спросить в начале выполнения задачи будет норм, т.к. процесс заведомо не быстрый).

Чтобы посмотреть страницу в браузере из мока - необходимо указать в URL её алиас. Например, чтобы открыть страницу, алиас которой __custom_alias, в строке адреса нужно написать http://localhost:8080/__custom_alias. Два нижних подчёркивания - нужны, слеш в конце - обычно не нужен.