Frontend Micro Modules (FMM) [часть 1]⁠⁠

В данном посте я хочу рассказать о javascript библиотеке web-gambit, которая позволяет быстро и без проблем создавать удобные и легковесные клиентские typescript приложения. В основе этой библиотеки лежат инструменты, которые максимально лаконично позволяют реализовывать переиспользуемые клиентские микромодули, придерживаясь принципов "Clean architecture".

ВВЕДЕНИЕ

Основные отличия этого решения в том, что оно не требует сложной настройки модулей (например как  в webpack module federation), работает со всеми популярными клиентскими javascript библиотеками: React, Vue, Angular, Svelte, не требует специфических полифилов и плагинов, так и весит всего 5Кб... А с помощью встроенной CLI позволяет создавать реактивные приложения без каких либо сторонних фреймворков.

WEB-GAMBIT

В данном посте Мы рассмотрим реализацию FMM приложения исключительно силами web-gambit и web-gambit-cli с "чистого листа", но в дальнейшем обязательно добавим пост, о применении web-gambit со всеми популярными фреймворками. В примере мы будем использовать пакетный менеджер yarn.

И так, приступим:

1. Создадим и перейдем новую директорию в которой будем разворачивать наш проект:

2. Инициализируем файл проекта package.json и заполним все значения (в данном примере все свойства объявлены по умолчанию)

3. Добавим в зависимости проекта web-gambit и web-gambit-cli

После установки зависимостей, в терминале станет доступен инструмент web-gambit-cli. С помощью него, мы и развернем базовый шаблон FMM приложения:

Как все необходимые файлы будут скопированы в корень проекта, мы сразу сможем приступить к разработке нашего приложения, но для начала ознакомимся с содержимым:

Внутри директории src находятся уже традиционные директории для большинства фреймворков и библиотек:

components - внутри данной директории находятся общие переиспользуемые ui-компоненты нашего приложения.

modules  - в данной директории расположены подключаемые микрофронты приложения. Наличие данной директории обязательно, так как все директории внутри данной папки будут слушаться транспилятором приложения.

routes - как несложно догадаться, внутри данной директории находятся файлы страниц приложения.

index.ts - Файл точка-входа приложения

routes.tsx - Файл конфигурации маршрутов приложения

Начнем изучение проекта с точки входа:

Как мы можем увидеть из примера, в index.ts мы импортируем метода-обертку приложения Module, и в виде  обратного вызова описываем логику монтирования нашего приложения.

Метод importModule асинхронно подключает наш микро модуль в приложение и с помощью метода executeModule выполняет его инициализацию.

Путь импорта `/assets/modules/demo/js/demo.js` указан не случайно, по умолчанию все модули из директории modules компилируются в виде bundle в данную директорию по следующей логике:  `/assets/modules/[имя модуля]/[js | css]/[имя модуля].[js | css]`

Теперь посмотрим на сам подключаемый микромодуль Demo

По аналогии с точкой входа, модуль имеет обертку для определения содержимого как файл микромодуль.

Стоит отметить, что все модули внутри директории modules должны быть объявлены как директория,  а файл точка модуля должен иметь название директории модуля.ts|tsx

В принципе ничего непонятного, посмотрим как же это все работает.

4. Запустим приложение в режиме разработки:

и перейдем в браузере на страницу приложения http://localhost:8800

как мы видим приложение было собрано и микромодули были подключены. Но как? ведь во вкладке 'Network' и фильтром 'js' файла module.js нет!

Не стоит удивляться или думать что файл собран внутри example.js! Переключаем фильтра на xhr/fetch и видим, что файл модуля был подгружен асинхронно и смонтирован в нужную ноду.

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

В следующем посте мы добавим примеры создания полноценного модуля, с компонентами, модулями сервисами и интеракторами. soon