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

Что строим?
Два встраиваемых виджета с одним общим ядром, которое они переиспользуют

Решения
Решил вспомнить универские годы, когда все пытались делать по книжке и красиво. И вот к чему пришли.

1. Vanilla JS, без фреймворков 🌚 Зачему?
- BundleSize: 125KB
- 0 конфликтов с хостом
- Встаривается через <script>

2. Finite State Machine
Всегда одно явное глобавльное состояние у виджета.

3. Event-Driven
Компоненты общаются через события. Слабая связанность и легко тестировать

4. Также, спасибо ИИшкам, учли
- XSS защиту
- Sanitization
- Валидацию инпутов

Из минусов:
- Надо было изначально писать все на TS, чтобы много где не прописывать типы через JSDoc
- Используется long-polling(бек заставил)
- Многа строк у основных виджетов(из-за JSDoc :( )
- Заметил сложность с локализацией(пока думаю как лучше сделать)


#javascript #architecture #webdev