web-gambit-cli

1.0.2 • Public • Published

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

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

Package Sidebar

Install

npm i web-gambit-cli

Weekly Downloads

2

Version

1.0.2

License

ISC

Unpacked Size

28.3 kB

Total Files

38

Last publish

Collaborators

  • devoptionscode