web-gambit-cli

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.

Dist	version	Info
Latest	v1.1.x	Latest release
Stable	v1.1.72	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	FMM	Create Encapsulated-app, UMD or Host-app as FMM
web-gambit create-docker	CI	Create docker-compose and Dockerfile
web-gambit serve	DEV	Run development mode
web-gambit build	BUILD	Build FMMs as .js bundle
web-gambit start	PROD	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('/assets/modules/date/js/date.js').then(umdModule => {
        const {exports} = executeUmdModule(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} 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

[e-mail]

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