Инфраструктура фронтэнда

Проблема

Нет основы*

*Не считая retail-ui

Послать запрос на сервер? 

Легко!

• fetch

• JQuery.ajax

• angular.http

• axios

• superagent

• ...

А как на счет тестов?

Как на счет логирования запросов и логики?

Легко!

console.log

А что если хочется посылать логи на сервер?

Чё там у бэкэндеров?

core

http

logging

topology

dtrace

Клиенты ко всем сервисам

cement

clusterconfig

cluster-client

libapi

....

Хочу также на фронте!

Все что нужно принимаем в конструктор в виде интерфейсов

Проблема

Дублирование кода

Веб-сервисы пользователя КЭ

• Auth
• Setter
• Keweb
• Highlander и Candy forms
• FT
• Таблица K84
• Сверка
• Платежки
• Норматив, Фокус, Эксперт и т.д.

~2.5Mb gzip

~7Mb raw

4x jquery

3x toolbox + plugin jsapi

4x polyfill

4x fonticon.eot

2x bem

4x react + retail-ui

3x axios

3x bluebirdjs

....

Ситуация

Вышла новая версия toolbox и нужно обновить toolbox jsapi

Обыденность

Обновления кевеба ~1 раз в два дня

Пользователи заново скачивают теже самые jquery, react, retail-ui, bluebird, axios и т.д. потому что изменился хэш

1. Простая и эффективная встройка в веб-приложения

2. Автоматическое тестирование

3. Версионность

4. Отдельный независимый деплой

5. Модульность. Синхронная и асинхронная

6. Оптимальная стратегия кэширования

7. Простое добавление дополнительных модулей

8. Возможность гибко конфигурировать и заменять сущности

9. Подробное клиентское логирование с сохранением на сервер

Нужно решение

Основа

1. CDN
2. Модульная система
3. DI контейнер
4. logging, http и другие базовые модули с интерфейсами
5. Система сборки и деплоя с поддержкой версионирования

CDN

manifest.json

[
   {
      "http":{
         "1.1":{
            "js":[
               "https://cdn.skbkontur.ru/http/1.1/js"
            ]
         }
      },
      "retail-ui":{
         "1.5":{
            "js":[
               "https://cdn.skbkontur.ru/retail-ui/1.5/js"
            ],
            "css":[
               "https://cdn.skbkontur.ru/retail-ui/1.5/css"
            ]
         }
      }
   }
]

interface IKModules {
    define<TModule>(moduleName: string,
        config: IModuleConfiguretion,
        factory: (modules: IKModuleManager) => TModule | Promise<TModule>);
}

interface IKModuleManager {
    require<TModule>(moduleName: string): Promise<TModule>;
}

Модули

DI

InversifyJS

https://github.com/inversify/InversifyJS

WebPack externals

plugins: [
    new KModlePlugin({
        name: "keweb",
        version: "1.0.0",
        entry: "./index.ts"
    })
]

externals: {
    "retail-ui": "ModuleManager.retail-ui.100"
}

Синхронные зависимости

Асинхронные зависимости

import ModuleManager from "ModuleManager"
import Container from "DI"

ModuleManager.require('extern-api').then(()=> {
    var fnsDcCreator = Container.get<FnsDcCreator>();
    fnsDcCreator.create(...);
});

Сборка модуля

Система сборки и деплоя с поддержкой версионирования

?

Недостатки

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

Нужны идеи и руки