README

Web-gambit: Modular micro front-end solution!

Web-gambit - lightweight (8Kb) 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.

Dist	version	Info
Latest	`v1.1.x`	Latest release
Stable	`v1.1.56`	Stable release
Legacy	`v1.0.100`	Stable legacy supported
Deprecated	less than `v1.0.100`	Unsupported

All information you can find at devoptions

Links

Links to official web-gambit resources, where you can learn, communicate and subscribe to the latest information about the web-gambit library.

Resource	URL	Description
Show case	show-case.devoptions.ru	Demonstration stand
Get started	gambit.devoptions.ru	Cookbook & examples
Blog	blog.devoptions.ru	Information of development process
Community	community.devoptions.ru	Live communication with the development team

Resources will be available soon...

CLI

Command	Mode	Description
yarn add web-gambit	JS	add web-gambit to any lib or framework
web-gambit create-app	(A\U\I) FMM	Create Encapsulated-app, UMD or Host-app as FMM
web-gambit serve	(A\U\I)FMM	Build AFMМ, IFMM, UFMM for web application
web-gambit build	(A\U\I)FMM	Build FMMs as `.js` bundle
web-gambit build-fmm	(A\U\I)FMM	Build FMMs as `.fmm` code cards (private)
web-gambit start	Multi-FMM	Run release ready modular Application

Manual

1. Frontend micro modules (FMM)

1.1. Create Application Frontend Micro Module (AFMM) for instance module

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.

import {Module} from 'web-gambit'

type ModuleState = {index: number}

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

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

1.2. Import remote UMD Frontend Micro Module (UFMM)

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

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

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

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

function fetchUmdModule<ModuleType=any>(): Promise<ModuleType> {
    return importModule('/modules/created-date.v0.1.js').then(umdModule => {
        const {exports} = executeUmdModule('createdDate', umdModule) as UMD<ModuleType>
        return exports.default
    })
}

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

1.3. FMM Data transfer.

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

import {Module, Emit, Instance} from 'web-gambit'

type InstanceState = {text: string}

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

Module<InstanceNamespace>(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.

2.1 Create UI via render function

For creation UI component with h and render functions

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<IContent>(ModuleNamespace, () => CreateApp(SomeComponent, document.getElementById('app')))

2.2 Create UI via tsx

If you want to create UI via jsx render, you mast add to project: babel, babel-loader, babel preset for jsx and webpack. Soon in web-gambit cli!

INFO: adding createJsx import method via webpack-import-loader!

import {CreateApp, Module, CreateRouter, CurrentRoute, 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 Application() {
    return <SomeComponent routes={CreateRouter(routes)}/>
}

function SomeComponent({routes}: {routes: JSXElement}) {
    const Route = CurrentRoute()
    return <div>
        <h1>{ModuleNamespace.moduleState.text}</h1>
        <h1>{Route.name}</h1>
        {routes}
    </div>
}

Module<IContent>(ModuleNamespace, () => CreateApp(<Application/>, document.getElementById('app')))

Contacts

npm@devoptions.ru

Tech inside

Code-gambit - Code card transpiler for FMM

Webpack - Powerful "weapon" for configuration and modulate your application

Babel - Modern javascript compiler

Express - Very cool Nodejs framework

Usage no npm install needed!