Cellular JS

A Javascript framework implementation of UI Focused State Oriented Architecture grounded by MVP (Model View Presenter), with micro-frontends support.

Sample WebApp

https://github.com/afsec/cellular-js-example-app

Visual concept

Features

• Works beautifully with micro-frontends;
• Tiny artifacts ( Ex: Sample WebApp < 50KBytes );
• Now you can have a Live Debug on a TV, so you can track segfaults at real time (I know, it's useless. But, it's cool!). Try it;
• Powered by Google Closure Compiler;
• No npm,yarn, etc;
• No node_modules blackhole;
• Low learning curve;
• Beginners are doing well;
• Agile prototyping for experienced developers;
• A state can't be broken by another state execution. So, that means no segmentation faults. But, be cautious about usage footprint: CPU, Memory and DOM reentrance.

Dependencies

1. Google Closure Compiler ($HOME/bin/closure-compiler.jar)

2. Graphviz (dot language) - sudo apt-get install graphviz

3. Python 3 (for local HTTP Server)

Getting Started

Install dependencies first.

Create your workspace

git clone --depth=1 https://github.com/afsec/cellular-js
cd cellular-js

Create the required (InitialState) and move to ./src/js/states/ folder.

./new-state.sh InitialState
mv -v initialstate ./src/js/states/
./build.sh

Check your project (http://localhost:8000) with Developer Tools

Check Your Debug artifacts at ./tmp/ folder

Callgraph (image)

xdg-open ./tmp/callgraph.svg

Tree view

./tmp/
├── callgraph.dot (Callgraph source code)
├── callgraph.svg (Callgraph image)
├── main-compiled.js (Artifact)
├── main-compiler.js (Javascript merged to generate callgraph to be compiled)
└── main-debug.js (Javascript merged to generate callgraph)

Create your own project

1. Make your first state (ShowPage)

./new-state.sh ShowPage
mv -v showpage ./src/js/states/
./build.sh

CAUTION: Don't use state in you state name.

2. Call your current state(ShowPage) from previous state(InitialState)

vi ./src/js/states/initialstate/presenter.js

Before

const stateInitialStatePresenter = () => {
    debug(`stateInitialStatePresenter()`)
    const model = stateInitialStateModel()
    const view = stateInitialStateView(model)
    // AddEvenListener, innerHTML or Call Another State.
}

After

const stateInitialStatePresenter = () => {
    debug(`stateInitialStatePresenter()`)
    const model = stateInitialStateModel()
    const view = stateInitialStateView(model)
    // AddEvenListener, innerHTML or Call Another State.
    stateShowPage()
}

3. Check your project (http://localhost:8000) with Developer Tools again

4. Check your Callgraph (image) again

xdg-open ./tmp/callgraph.svg

How to generate Production artifacts tree

Use ./build.sh -p for production code generation (no debug messages).

Deploy

Distribution folder: ./dist/htdocs/pages/

tree ./dist/htdocs/pages/

./dist/htdocs/pages/
├── css
│   ├── style.1583309824.css
│   └── uikit.min.css
├── favicon.ico
├── index.html
└── js
    ├── main.1583309824.js
    ├── uikit-icons.min.js
    └── uikit.min.js

2 directories, 7 files

Workflows

How to Debug source code

VIDEO: Click bellow to play

TODO

• An useful CRUD Example

• More documentation

• Desktop Application support (Multi-Plartform)

• Mobile Application support (Multi-Plartform)

• A tutorial to show you some Proof of Concept about UI focused State Oriented Architecture.

• Merge script into one executable (maybe Rust)

• A type-system implementation

Thanks to

• Michael Geers(@naltatis) Micro Frontends (https://micro-frontends.org/)
• Elm lang (Inspiration for Inter-State Communication)
• Actor Model
• Kevlin Henney talks
• Joe Armstrong talks
• Robert "Uncle Bob" Martin talks
• Google Closure Compiler