# Что нового?

В 2024 году вышла в релиз новая версия Offline Trade-In, которая сильно превосходит легаси, которое работало на стеке 2017 года.
Это было раньше:
- SSR на стороне Django (Python v3.6)
- jQuery / JS Vanilla / Web API
Краткая история: В 2020 году код фронта (при моем первом знакомстве с ним) представлял собой спагетти-легаси и содержал в себе императивную логику преобразования DOM в зависимости от различных событий (понятие Бизнес Логика в приложении отсутствовало в декларативном виде).
Таким образом с 2017 по 2024 велась доработка фич (+ максимально возможный рефакторинг в пользу DX), но все это время требовался новый продукт с более удачным подходом в плане поддержки кода и управлению Бизнес Логикой на уровне менеджмента - именно это и будет составлять основную ценность в будущем. И в 2024, наконец, пришло время переписать старое легаси на современные рельсы **(ссылка на демо будет в конце)**. Чтоб эта информация не потерялась, решил задокументировать текущие подходы и достижения в области решения проблем отладки в числе прочего (это был основной момент, требующий решения, т.к. устранив это, мы стали работать намного эффективнее).

<CollapsibleBox
header="Сводка о проектах"
text="Всего было 4-5 проектов, каждый из которых является частью экосистемы и имеет свой стек технологий:
1️⃣ Сайт для сбыта б/у устройств;
2️⃣ Админская панель;
3️⃣ Сайт для сдачи устройств в Trade-In для физ. лиц (2020);
4️⃣ Сайт для сдачи устройств в Trade-In для юр. лиц (2017) 👉 поддержка + рефакторинг + развитие Легаси с 2020 до 2023;
5️⃣ Сайт для сдачи устройств в Trade-In для юр. лиц (2024) 👉 На новом стеке технологий"
/>

# Решённые задачи

## 1. 🏗️ Монорепа разделена на фронтенд и бэкенд

Сборка партнерской версии клиентского приложения вынесена в отдельный проект с настраиваемыми Environments variables для вариативности инстансов (разработка, стейджинг, продакшен) - теперь исходный код узнает для какого инстанса он собирается, только получив envs при сборке (это было важным для нас в рамках спец. операции под кодовым названием **"Соскочить с легаси"**).

<Alert
type="success"
text="Теперь деплой фронта не требует сборки бэкенда, а сборка фронта на всех инстансах работает одинаково"
/>

## 2. 💼 Управление Бизнес Логикой стало прозрачным

Главная особенность текущего проекта (точнее, одного из тех что в работе) заключается в требовании гибкой настройки ветвлений пользовательских сценариев, периодически требующее добавления шагов (в дальнейшем - **дискретных состояний Стейт-Машины**). Новая реализация позволяет донастраивать различные сценарии поведения веб-приложения и дебажить эти сценарии на разных уровнях (внутренняя бизнес-логика, данные по API, вычисляемые значения на основе вводимых пользователем данных - одним словом, все параметры, влияющие на успешный User Flow). Чего удалось достичь:
- Настраиваемая последовательность шагов на уровне конфига Стейт Менеджера XState. Это важно, т.к. в прошлых версиях проекта, с ростом вариантов ветвлений сценариев, настраивать их было весьма затруднительно (императивный подход к мутации DOM требовал анализа всего кода без возможности декомпозировать его на отдельные подзадачи)
- Появилась гибкая валидация ответов API на уровне СТМ (сценарий не пойдет дальше, если ответ не соответствует валидации, все подобные ошибки теперь можно транслировать в UI с соответствующей формулировкой)
- На всем промежутке времени моей деятельности в компании не было представителя бизнеса, который полностью владел логикой приложения (даже Продукт менеджер - но это не его вина, просто проект очень стар). На мои попытки явным образом получить описание бизнес-логики в виде вопросов "Как оно должно здесь работать?", я получал что-то вроде "Оно же как-то работает, а сейчас требуется внести небольшое изменение" (опять же, ничего страшного, просто наша команда попала в ловушку легаси без доки). Итак, **Документация - теперь она есть в виде конфига XState + интерактивной схемы!** Теперь любой разработчик будет знать, *как оно работает*.

<ImagesGalleryBox2 itemsJson='[
  {
    "src": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1734127033086.png",
    "original": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1734127033086.png",
    "title": "Фрагмент схемы",
    "caption": " Внимание, прототип! Все персонажи и события вымышлены исключительно для визуального представления о разработке в духе Enterprise каким его видела наша команда =)"
  },
{
    "src": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1733993517636.png",
    "original": "https://pravosleva.pro/express-helper/chat/storage/uploads/sp.pravosleva/1733993517636.png",
    "title": "Фрагмент схемы",
    "caption": " Внимание, прототип! Все персонажи и события вымышлены исключительно для визуального представления о разработке в духе Enterprise каким его видела наша команда =)"
  }
]' />

<Alert
type="success"
text="Теперь основная часть бизнес-логики (понятная и очевидная схема пользовательских сценариев) может быть быстро настроена на уровне конфига и наглядно продемонстрирована в виде блок-схемы. Взаимодействие с менеджером Продукта стало эффективнее. DX стал более совершенным и декларативным"
/>

## 3. 📈 Повысилась эффективность отдела IT

Дебаг и отладка теперь не требуют лишних усилий, репорты по возможным ошибкам сами летят в "Телегу"...

- **BFF сервисы (немного фулл-стека):** Появилась возможность добавить автоматизированные оповещения об ошибках по socket.io (далее некоторые из них улетают в Google Sheets, Telegram и т.д.) **по Socket соединению в отдельном потоке Web Worker**. Анализ логов теперь также может быть автоматизирован для ретрансляции в чаты в виде задач (возможно даже с указанием исполнителя).
- Добавлена функция "Сообщить об ошибке", позволяющая отправить сообщение от Пользователя и историю его взаимодействия с приложением для анализа Разработчиком

<CollapsibleBox
header="Отправка лога и обратная связь от сервера"
text="➡️ Event from App to Worker
➡️ Socket event to your Service
⬅️ Incoming socket event to Worker
⬅️ Event from Worker to App 🏁"
/>

<Alert
type="success"
text="**Теперь информация по каждому прецеденту прилетает в Telegram группу!** Ранее были проблемы скорости реагирования на ошибки в продакшене - их диагностика занимала много времени. Теперь анализ логов взаимодействия пользователя с интерфейсом (и не только) в рамках сессии занимает минуты"
/>

## 4. 🤝 Кастомизация UI для каждого из партнёров стала гибче

Решены проблемы вариативности дизайна, связанные с тем, что кодовая база собираемого приложения ранее НЕ была разделена на подпроекты - изменения интерфейса (как и бизнес-логики) затрагивали всех пользователей. Не было unit & e2e тестов.

<Alert
type="success"
text="Ранее были проблемы реализации специфичного дизайна в зависимости от роли/типа пользователя. Теперь каждый из партнёров будет перенаправлен на конкретное SPA в соответствии с внешним роутом NGINX"
/>

# Стек технологий

- **Vite** / **React** / **Typescript** (принято в стек как современный стандарт, когда SSR не требуется)
- **XState v4.x** (отлично вписался под свои задачи, связанные с ветвлением пользовательских сценариев, 5-я версия на тот момент ещё была не готова к релизам в прод)
- **Valtio** (минималистичный и гибкий подход к управлению состоянием на базе нативных JS механизмов объекта Proxy)
- **Tailwind CSS** / **Headless UI** (ориентированная на утилиты CSS-инфраструктура для быстрого создания современных веб-сайтов, которая позволяет удобно и быстро создавать кастомные компоненты с заданными стандартными параметрами - настройки стилей типовых элеметнов и т.д.)
- **CSS modules** / SCSS (для компонентов с нестандартной версткой)
- **Web Sockets** in **Web Workers** (для отправки логов в отдельном потоке, не нагружая основной поток)

<ControlsBox
  controlsJson='[
    {
      "title": "PREV",
      "label": "Наши стандарты DX (подробнейший разбор)",
      "type": "link",
      "link": "/blog/article/good-dx-exp-2024"
    },
    {
      "title": "START_NEW_TAB",
      "label": "XState interactive scheme",
      "type": "link",
      "link": "https://stately.ai/registry/editor/embed/4c16acf2-6d92-4602-849d-99e1b06f2f39?mode=Design&machineId=f4ab287d-d1a6-4a2f-b0b5-25f6a0d3f4af"
    },
    {
      "title": "NEXT",
      "label": "Life Demo",
      "type": "link",
      "link": "https://pravosleva.pro/subprojects/sp/tradein"
    }
  ]'
/>

💳 Offline Trade-In (Level Up) #smartpriceRINGEO #рабочие_моменты 2024.8 [3/3]

# Custom fetch-retry in legacy projects

`fetchRetry.js`
```js
function wait(delay) {
  return new Promise((resolve) => setTimeout(resolve, delay))
}

function fetchRetry({ url, delay = 1000, tries = 0, fetchOptions = {} }) {
  let __triesLeft = tries
  function onError(err) {
    __triesLeft = !!__triesLeft ? __triesLeft - 1 : 0

    if (!__triesLeft) throw err

    return wait(delay).then(() => fetchRetry({ url, delay, tries: __triesLeft, fetchOptions }))
  }
  return fetch(url, fetchOptions).catch(onError)
}
```

### Usage
```js
// --- NOTE: Target action
// 1. Try to use different IPs
const ips = ['178.248.232.203', '2.58.70.214', '159.65.25.117', getAPIBaseUrl()]
const getBaseUrl = ({ ip, url }) => (!validateAnything.hasProtocol(ip) ? `https://${ip}${url}` : `${ip}${url}`)
const getEndpoints = ({ url }) =>
  ips
    .map((ip) => getBaseUrl({ url, ip }))
    .filter((url) => validateAnything.isValidURL(url))
const endpoints = getEndpoints({ url: '/partner_api/tradein/accept' })
const abortController = new AbortController()
const tries = 20

Promise.first(
  endpoints.map((url) =>
    fetchRetry({
      url,
      delay: 30000,
      tries,
      fetchOptions: {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
        signal: abortController.signal,
      },
    })
  )
)
  .then(async (response) => {
    // QuicklyDone fulfils first

    const res = await response.json()
    if (res.ok) {
      abortController.abort()
      targetAction(res)
    } else throw new Error('/accept response is not ok!')
  })
  .catch((errs) => {
    // Arrary of rejections (if no one resolved)
    // Провалено (ips.length * tries) попыток

    // Or one main Error?
  })
// ---
```

`validateAnything.js`
```js
const validateAnything = {
  hasProtocol(str) {
    const pattern = new RegExp('https?:\\/\\/')
    return !!pattern.test(str)
  },
  hasWWW(str) {
    const pattern = new RegExp(/www./)
    return !!pattern.test(str)
  },
  isValidURL(str) {
    const pattern = new RegExp(/(?:https?):\/\/(\w+:?\w*)?(\S+)(:\d+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/)
    return !!pattern.test(str)
  },
}
```

### Polyfills
```js
if (!Promise.first)
  // https://github.com/huruji/p-first
  Promise.first = function (e) {
    return Promise.all(
      e.map(function (e) {
        return e.then(
          function (e) {
            return Promise.reject(e)
          },
          function (e) {
            return Promise.resolve(e)
          }
        )
      })
    ).then(
      function (e) {
        return Promise.reject(e)
      },
      function (e) {
        return Promise.resolve(e)
      }
    )
  }

if (!Promise.any)
  Promise.any = (o) =>
    new Promise((i, l) => {
      var n, t, v, d, e
      let u = !1,
        c = [],
        h = 0,
        f = []
      function a(o) {
        u || ((u = !0), i(o))
      }
      function r(o) {
        f.push(o), f.length >= h && l(f)
      }
      for (let i of o) h++, c.push(i)
      for (let o of c)
        void 0 !== (null === (n = o) || void 0 === n ? void 0 : n.then) ||
        void 0 !== (null === (t = o) || void 0 === t ? void 0 : t.catch)
          ? (null === (d = null === (v = o) || void 0 === v ? void 0 : v.then((o) => a(o))) ||
              void 0 === d ||
              d.catch((o) => {}),
            null === (e = o) || void 0 === e || e.catch((o) => r(o)))
          : a(o)
    })
```

*See also https://gitlab.com/smartprice/ringeo/-/merge_requests/1818*

#jsVanilla | fetchRetry #smartpriceRINGEO #promise #TCP/IP

## CMD sample
```bash
GIT_SHA1=$(git show --format=\"%h\" --no-patch) NODE_ENV=production rollup -c rollup.config.js
```

`package.json`
```bash
{
  "scripts": {
    "dev": "yarn watch:spa",
    "build": "GIT_SHA1=$(git show --format=\"%h\" --no-patch) NODE_ENV=production rollup -c rollup.config.js",
    "watch": "GIT_SHA1=$(git show --format=\"%h\" --no-patch) NODE_ENV=development OPEN_SPA=0 rollup -c rollup.config.js --watch",
    "watch:spa": "GIT_SHA1=$(git show --format=\"%h\" --no-patch) NODE_ENV=development OPEN_SPA=1 rollup -c rollup.config.js --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
}
```

`./rollup.config.js`
```js
import { writeStaticFileAsync } from './scripts/write_static_file_async'

const gitSHA1 = process.env.GIT_SHA1 || 'No process.env.GIT_SHA1'
const buildInfoFilePath = path.join(__dirname, 'front/static/js/common/constants/build-info.js')
writeStaticFileAsync(buildInfoFilePath, `const gitSHA1 = '${gitSHA1}';`)
```

`./scripts/write_static_file_async.js`
```js
import fs from 'fs'

export const writeStaticFileAsync = (storageFilePath, text) => {
  fs.writeFile(storageFilePath, text, 'utf8', (err) => {
    if (!!err) console.log(err)
  })
}
```

Не забудьте добавить создаваемый файл в `.gitignore`

#git #bash | Get commit hash for build // GIT_SHA1 #smartpriceRINGEO

**multi-spa**
```bash
git diff 5fa4919167c5c3e49b74529cf9f4a7d81d63d5a7 d234158c43493c639c1c958daf0195faaff64c26
```

**spa-sample**
```git
+1
```

#smartpriceRINGEO | multi spa exp

*Сей треш был создан для сбера в рамках легаси проекта на jQuery:*
```js
$('.sp-form_for_personal .sp-field_for_sms-signing .sp-button_type_submit').on('click', function() {
    const countDownId = `sms-countdown-${Math.random()}`;

    Swal.fire({
        title: 'Введите код из СМС',
        input: 'text',
        inputAttributes: {
            autocapitalize: 'off',
            maxlength: 4,
        },
        showCancelButton: true,
        confirmButtonText: 'Ok',
        confirmButtonColor: '#168f48',
        cancelButtonColor: 'lightgray',
        showLoaderOnConfirm: true,
        html: `<b id="${countDownId}"></b>`,
        preConfirm: (text) => {
            // return fetch(`//api.github.com/users/${text}`)
            //     .then(response => {
            //         if (!response.ok) {
            //         throw new Error(response.statusText)
            //         }
            //         return response.json()
            //     })
            //     .catch(error => {
            //         Swal.showValidationMessage(
            //         `Request failed: ${error}`
            //         )
            //     })

            // TODO: SMS API + timer
            return { isOk: true, message: 'TESTED', text }
        },
        allowOutsideClick: false, // () => !Swal.isLoading()
    })
    .then((result) => {
        // result.value <- response
        console.log(result.value)
        if (result.isConfirmed) {
            // Swal.fire({ title: `${result.value.login}'s avatar`, imageUrl: result.value.avatar_url })
            Swal.fire({ icon: 'success', text: 'Ok, thanx', confirmButtonText: 'Ok', confirmButtonColor: '#168f48' })
            // TODO: API?
        }
    })
    .catch((err) => {
        console.log(err)
        Swal.fire({
            icon: 'error',
            text: err.message,
            showConfirmButton: false,
            timer: 800,
        })
    })

    const runCountDown = () => {
        const updateCouner = ({ counterText, failCb }) => {
            const countDown = document.getElementById(countDownId);
            if (!!countDown) {
                countDown.innerHTML = counterText;
            } else {
                // console.log(document.getElementById('sms-countdown'));
                failCb();
                console.log('failCb CALLED')
            }
        }
        const resetCounter = () => {
            updateCouner({ counterText: 'Wait...' });
        }
        
        const actions = document.getElementsByClassName('swal2-actions')[0];
        if (!!actions) {
            const disableConfirm = () => {
                try {
                    const confirmBtn = document.getElementsByClassName('swal2-confirm')[0];
                    confirmBtn.setAttribute("disabled", true);
                } catch (err) {
                    console.log(err)
                }
            }
            const enableConfirm = () => {
                try {
                    const confirmBtn = document.getElementsByClassName('swal2-confirm')[0];
                    confirmBtn.removeAttribute("disabled");
                } catch (err) {
                    console.log(err)
                }
            }

            const newBtn = document.createElement('button');
            newBtn.setAttribute('class', 'swal2-styled swal2-default-outline');
            newBtn.style.border = '0';
            newBtn.style.color = '#FFF';
            const disableTryAgain = () => {
                newBtn.setAttribute("disabled", true);
                enableConfirm();
            }
            disableTryAgain();
            const enableTryAgain = () => {
                newBtn.removeAttribute("disabled");
                // NOTE: Or this: newBtn.disabled = false;
                disableConfirm();
            }
            newBtn.style.borderRadius = '.25em';
            newBtn.style.backgroundColor = '#168f48';
            newBtn.innerHTML = 'Попробовать еще раз';

            const limitSec = 10;
            const delayTime = limitSec * 1000;
            resetCounter();

            const runCounter = (s) => {
                let left = s;

                const counter = MakeTimer(1000)();
                counter.startTimer(() => {
                    left -= 1;
                    if (left <= 0) {
                        counter.stopTimer();
                        updateCouner({ counterText: 'Время вышло', failCb: () => counter.stopTimer() });
                        enableTryAgain();
                    } else {
                        updateCouner({ counterText: `Осталось ${left} сек`, failCb: () => counter.stopTimer() });
                    }
                })
            }

            newBtn.onclick = function() {
                disableTryAgain();
                resetCounter();
                runCounter(limitSec);
            };
            actions.appendChild(newBtn);

            runCounter(limitSec);
            setTimeout(enableTryAgain, delayTime);
        }
    }
    setTimeout(runCountDown, 1000)
})
```

`MakeTimer.js`
```js
function MakeTimer (ms = 3000) {
  let timer;
  let wasStopped = false;

  return () => {
    const startTimer = (cb) => {
      // console.log("Run");
      if (!wasStopped) {
        timer = setTimeout(function () {
          // console.log("Timer done and will be restarted.");
          if (cb) cb();
          startTimer(cb);
        }, ms);
      }
    };
    const stopTimer = () => {
      // console.log("Timer stopped");
      wasStopped = true;
      clearTimeout(timer);
    };
    return { startTimer, stopTimer };
  };
}
```

smartpriceRINGEO

💳 Offline Trade-In (Level Up) #smartpriceRINGEO #рабочие_моменты 2024.8 [3/3]

#jsVanilla | fetchRetry #smartpriceRINGEO #promise #TCP/IP

#git #bash | Get commit hash for build // GIT_SHA1 #smartpriceRINGEO

#smartpriceRINGEO | multi spa exp

#sweetalert2 | Countdown timer #sber #swal #smartpriceRINGEO #smartpriceLegacy