Web-gambit: Modular micro front-end solution!

Web-gambit - lightweight (5Kb) modular micro front-end library for creation progressive web-application on typescript. This library provide a powerful solution based on `Clean architecture principles.
Web-gambit - easy way for creating composition of micro fronted modules from remote sources! REP, CCP and CRP - its simple.
This solution is compatible with all popular frameworks: Vue, React, Angular, Svelte, Ember, etc.

Manual

1. Frontend micro modules (FMM)

$3

AFMM - Independent reusable micro module. It can contain: Services, Interactors or Encapsulated application.
AFMM can sync states without IFMM module only through a Proxy. After hard-reload page, Modules state will be reset to initial state.

`typescript
import {Module} from 'web-gambit'

type ModuleState = {index: number}

const ModuleNamespace = {moduleName: 'numeric', moduleState: {index: 12345}}

Module(ModuleNamespace, () => console.log(AFMM ${ModuleNamespace.moduleName} is loaded))
`

$3

UFMM - Its regular UMD modules compiled via webpack, parcel, etc.

`ts
import {Module, Emit, importModule, executeUmdModule} from 'web-gambit'

type CreatedDate = {getDate(): Date}
type UMD = {exports: {default: ModuleType}}

const InstanceState = {createdDate: Date | null}
const InstanceNamespace = {moduleName: 'MainApp', moduleState: {createdDate: null}}

function fetchUmdModule(): Promise {
return importModule('/assets/modules/date/js/date.js').then(umdModule => {
const {exports} = executeUmdModule(umdModule) as UMD
return exports.default
})
}

Module(InstanceNamespace, () => {
fetchUmdModule().then(dateModule => {
Emit('createdDate', dateModule.getDate())
}).catch(console.log)
})
`

$3

Web-gambit provides methods for transferring and synchronizing data between modules, by default.
- Watch - Create a listener for the selected command
- Emit - Executing a data transfer command

`typescript
import {Module, Emit} from 'web-gambit'

type InstanceState = {text: string}

const InstanceNamespace = {moduleName: 'MainApp', moduleState: {text: 'Hello World!'}}

Module(InstanceNamespace, () => {
Watch({
name: 'watchUniqueName',
command: 'text',
action: (text: string) => console.log(text)
})
setInterval(() => Emit('text', Math.random().toString()), 300)
})
`

2. Modular micro frontend UI

You can create a modular micro-interface application through any popular library or framework. But ... Web Gambit includes its own functional UI (React like) solution for fast client-side UI development.

$3

For creation UI component with h and render functions

`typescript
import {createJsx as h, CreateApp, Module, CreateRouter, IRoute} from 'web-gambit'
import MainPage from './pages/main/MainPage'

type IContent = {text: string}

const ModuleNamespace = {moduleName: 'contentView', moduleState: {text: 'Hello World!'}}
const routes: IRoute[] = [{path: '/', name: 'Main', component: MainPage}]

function SomeComponent() {
return h('div', null, [
h('h1', null, [ModuleNamespace.moduleState.text]),
CreateRouter(routes)
])
}

Module(ModuleNamespace, () => CreateApp(SomeComponent, document.getElementById('app')))
``

Contacts

>npm@devoptions.ru