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

Single Page App states

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; NPM 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

Browser with Developer Tools

Check Your Debug artifacts at ./tmp/ folder

Callgraph (image)

xdg-open ./tmp/callgraph.svg

Basic Callgraph

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

Browser with Developer Tools 1s state

4. Check your Callgraph (image) again

xdg-open ./tmp/callgraph.svg

Basic Callgraph

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

MVP Basic Rules


MVP Separation of Concerns


MVP State Cell Composition


MVP State Data Travel Rules


How to Debug source code

VIDEO: Click bellow to play

Debugging source code

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

Cellular JS

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

Cellular JS Info

ā­ Stars 16
šŸ”— Source Code github.com
šŸ•’ Last Update 2 years ago
šŸ•’ Created 2 years ago
šŸž Open Issues 1
āž— Star-Issue Ratio 16
šŸ˜Ž Author afsec