Reactive micromodules

$mol — the reactivemicromodule framework

Reactivity lives in the framework's foundation, not bolted on top.Dependency arrays, manual subscriptions, manual cache invalidation, effect cleanup — none of it exists here. Not made easier, made unnecessary.Get Started Try Playground Why $molview.tree$my_hello $mol_view guest \stranger sub / <= Name $mol_string value? <=> name? \mol hint @ \Type a name <= Greeting $mol_paragraph title <= greeting \view.tsclass $my_hello extends $.$my_hello { greeting() { return `Hello, ${ this.name() || this.guest() }!` }}view.css.tsnamespace $ { $mol_style_define( $my_hello, { gap: $mol_gap.block, flex: { direction: 'column' }, Greeting: { font: { size: '2rem', weight: 600 }, }, } )}→liveHello, mol!Three files: the markup, the logic and the styles.Try this exampleMinimalisticAn incrementally adoptable ecosystem that scales between a single component and a full-stack local-first app.OptimalBuild UIs as trees of components. Reactivity is automatic, side-effects are explicit.LazyFull rendering virtualization — components outside the viewport simply do not exist.Structure

Micromodule architecture by default

A project is a folder, a folder is a repository, and the framework sits next to your code instead of inside it. The layout is the same for a first component and for a company with thirty of them.mam/ workspace├── .meta.tree registry├── mol/ the framework└── my/ your package ├── my.meta.tree your registry └── hello/ your project ├── index.html entry point └── hello.view.tree the markupFive steps to a project of your own1Clone MAM once. It is the workspace every project lives in.git clone https://github.com/hyoo-ru/mam.git2Make one short folder for yourself and push it as a repository.mam/my/3Add the registry of your projects next to it.my/my.meta.tree4Create the project inside, with a repository of its own.my/hello/5Register it, so a fresh checkout fetches it by name.pack hello git \https://github.com/you/hello.gitWhy your project is a repository of its ownHow a project is laid outCompareOne scenario, run side by side in React, Vue and $mol, live in your own browser.Open the comparison Start with $mol vs React