$mol - fastest reactive micro-modular compact flexible lazy ui web framework.
$mol - fastest reactive micro-modular compact flexible lazy ui web framework.
Reactive micro-modular UI framework. Very simple, but very powerful!
The easiest way is to checkout this preconfigured MAM repository and start a dev server:
git clone https://github.com/hyoo-ru/mam.git ./mam && cd mam
npm install && npm start
The following example uses the namespace "my" and the application name "hello", but you can use your own namespace and application name.
Let's create a component that allows you to enter your name and display greeting text: "Hello, " + your name.
You need to create next files:
Add web entry point at ./my/hello/index.html:
Your application will be served at http://localhost:9080/my/hello/. Open it. You should refresh page to view your changes.
Add declarative component description at ./my/hello/hello.view.tree with string input field and greeting message:
$my_hello $mol_view
sub /
name? \
[ this.Yes() , this.No() ] ,
})
}
In both variants the compiler would verify the existence of the property and correspondence of the signature. Normally you don't need to work with fields of the object directly, all definable properties are public and can be safely overloaded.
Details about viewers and view.tree language: $mol_view.
$mol_view implements lazy rendering. $mol_scroll watches scroll position and suggests the view height to embedded components. $mol_list knows the view height and minimal sizes of the embedded components, it excludes components definitely outside viewport from rendering. And all other components report their minimal size through minimal_height property.
$my_icon $mol_view
minimal_height 16
As the result opening of any window occurs instantly. It's independent from output data size. And since data would not be rendered, any requests would not be proceeded. This allows us to download them partly, when they are needed. Such a feature is possible due to reactive architecture, that penetrates through all layers of the application.
Unlike control-flow architectures, $mol implements the data-flow architecture. All applications are defined as a set of classes having properties. Every property is defined as some function from another property (and properties of another classes too). Properties, which were called while processing a function are saved as dependencies of current property. When their values change, all dependent properties would be invalidated cascading. Calling a non relevant property would lead to its pre-actualization.
In this way the whole application at the execution stage represents a huge tree of dependencies, with a special property at the root of the tree, which in case of invalidation would actualize itself automatically. And as any property always knows, whether something depends on it or not, then it is given a simple and reliable mechanism of controlling lifecycle of objects - they are created when dependence appears and are destroyed when nothing depends on them. This solves two fundamental problems: resources leaks and cache invalidation.
Besides, the reactive architecture allows us to abstract code elegantly from asynchronous operations. If the function can't return value at the moment, it can throw Promise and is marked as part of the tree as "waiting of results". When result is retrieved, it can be inserted into property directly and an application would be reconstructed for the new state.
namespace $ {
export class $my_greeter {
@ $mol_mem
greeting() {
const user_name = $mol_fetch.json( 'https://example.org/profile/name' )
return `Hello, ${ user_name }!`
}
}
}
Details: $mol_wire.
$mol pays special attention to debugging possibilities and research of how its code works.
A human friendly id is automatically formed for every DOM-element, e.g. $hyoo_todomvc.root(0).taskRow(0).titler(), which is a valid javascript code, that could be executed in a console, returning a link to the component, which the DOM-element corresponds to. Unfolding the content of the component you'd see names and values for its fields like:
$hyoo_todomvc
dom_node() : div#$hyoo_todomvc.root(0)
task(1474385802391) : Object
task(1474386443175) : Object
taskRow(0) : $hyoo_todomvc_task_rowRow
taskRow(1) : $hyoo_todomvc_task_rowRow
taskrows() : Array[2]
The name of the field corresponds to calling the property, the content of the field would be available through. And thanks to naming classes and functions by underscoring, you always know which class instance you're looking at and can briefly find it in the code by searching the substring.
Map extensionNo open issues yet, or sync has not completed.