Skip to content
/ mam_mol Public
forked from hyoo-ru/mam_mol

$mol - fastest reactive micro-modular compact flexible lazy ui web framework.

mol.hyoo.ru

License

MIT license
0 stars 59 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

JTJag/mam_mol

BranchesTags
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6,962 Commits
.github
.github
 
 
3d
3d
 
 
action
action
 
 
after
after
 
 
ambient
ambient
 
 
app
app
 
 
array
array
 
 
assert
assert
 
 
atom2
atom2
 
 
attach
attach
 
 
audio
audio
 
 
avatar
avatar
 
 
bar
bar
 
 
base64
base64
 
 
bench
bench
 
 
bind
bind
 
 
blob
blob
 
 
book
book
 
 
book2
book2
 
 
browser
browser
 
 
build
build
 
 
button
button
 
 
calendar
calendar
 
 
canvas
canvas
 
 
card
card
 
 
chance
chance
 
 
charset
charset
 
 
chart
chart
 
 
chat
chat
 
 
check
check
 
 
class
class
 
 
code
code
 
 
colors
colors
 
 
compare
compare
 
 
conform
conform
 
 
const
const
 
 
coord
coord
 
 
cordova
cordova
 
 
cost
cost
 
 
crypto
crypto
 
 
csv
csv
 
 
data
data
 
 
date
date
 
 
db
db
 
 
deck
deck
 
 
decor
decor
 
 
defer
defer
 
 
define
define
 
 
delegate
delegate
 
 
dev
dev
 
 
dict
dict
 
 
diff/path
diff/path
 
 
dimmer
dimmer
 
 
dom
dom
 
 
drag
drag
 
 
drop
drop
 
 
dump
dump
 
 
embed
embed
 
 
env
env
 
 
error
error
 
 
example
example
 
 
exec
exec
 
 
expander
expander
 
 
fail
fail
 
 
fetch
fetch
 
 
fiber
fiber
 
 
file
file
 
 
filler
filler
 
 
float
float
 
 
follower
follower
 
 
font
font
 
 
form
form
 
 
format
format
 
 
frame
frame
 
 
func
func
 
 
gallery
gallery
 
 
gap
gap
 
 
geo
geo
 
 
ghost
ghost
 
 
github
github
 
 
global
global
 
 
graph
graph
 
 
grid
grid
 
 
guard
guard
 
 
guid
guid
 
 
harp
harp
 
 
hash
hash
 
 
hint
hint
 
 
hor
hor
 
 
hotkey
hotkey
 
 
html
html
 
 
http
http
 
 
huggingface
huggingface
 
 
image
image
 
 
image2
image2
 
 
import
import
 
 
infinite
infinite
 
 
int62
int62
 
 
jack
jack
 
 
js/eval
js/eval
 
 

Repository files navigation

$mol

Reactive micro-modular UI framework. Very simple, but very powerful!

Contents

Features

Reviews

Quick start

Video of this process

Create MAM project

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

Or simply use Gitpod Online Dev Workspace.

Setup your editor

Create your application component

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:

  • ./my/hello/index.html - Web entry point
  • ./my/hello/hello.view.tree - Declarative component description
  • ./my/hello/hello.view.ts - Behaviour/User interface logic
  • ./my/hello/hello.test.ts - Tests
  • ./my/hello/hello.view.css - Styles

Add web entry point at ./my/hello/index.html:

<!doctype html> <!-- Disable quirks mode -->
<html mol_view_root> <!-- Reset root styles -->
	<head>
		<meta charset="utf-8" /> <!-- Force utf-8 encoding -->
		<meta
			name="viewport"
			content="width=device-width, height=device-height, initial-scale=1"
		/> <!-- Disable mobile browser auto zoom, $mol is adaptive -->
		<meta name="mobile-web-app-capable" content="yes"> <!-- Fullscreen support -->
		<meta name="apple-mobile-web-app-capable" content="yes">
	</head>
	<body mol_view_root> <!-- Reset root styles -->
		<div mol_view_root="$my_hello"></div> <!-- Autobind component to element on load -->
		<script src="web.js"></script> <!-- Load autogenerated js bundle -->
	</body>
</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 $mol_string
			hint \Name
			value? <=> name? \
		<= message \

Add your behaviour at ./my/hello/hello.view.ts by extending generated class:

namespace $.$$ {
	export class $my_hello extends $.$my_hello {
		
		message() {
			let name = this.name()
			return name && `Hello, ${name}!`
		}
		
	}
}

Add tests for your behaviour at ./my/hello/hello.test.ts

namespace $.$$ {

	$mol_test({

		'Generating greeting message'() {

			const app = new $my_hello
			$mol_assert_equal( app.message() , '' )
			
			app.name( 'Jin' )
			$mol_assert_equal( app.message() , 'Hello, Jin!' )

		}

	})

}

Add styles at ./my/hello/hello.view.css:

/* Styling BEM-block by autogenerated attribute */
[my_hello] {
	display: flex;
	flex-direction: column;
	align-items: center;
	font: 1.5rem/1 sans-serif;
	box-shadow: 0 0 0 1px var(--mol_theme_line);
	flex: 1 1 auto;
	align-self: stretch;
	margin: 0;
}

/* Styling BEM-element by autogenerated attribute */
[my_hello_name] {
	flex-grow: 0;
	margin: 1rem;
	width: 14rem;
}

That is all!

Tutorials

Rationale

Zero configuration

Instead of ensuring configurability by any means, $mol concentrates on everything working good directly out of the box and does not bother $mol's developer by a typical configuration process. (Nevertheless, this doesn't exclude setup for your needs if required)

For example if you download base MAM-project you'll get this:

Building of JS and CSS bundles for different platforms. A bundle can be built for any module. This bundle would contain sources of that module and sources of all other modules on which that module depends on. There also would not be any redundant modules in the bundle.

Here is a full set of supported bundles:

  • -/web.js - JS for browser
  • -/web.d.ts - TypeScript definitions
  • -/web.test.js - JS with tests for a browser
  • -/web.deps.json - map of dependencies modules for browser
  • -/web.locale=en.json - strings pulled from *.view.tree and *.locale=en.json sources
  • -/node.js - JS for NodeJS
  • -/node.test.js - JS with tests for NodeJS
  • -/node.deps.json - a map of dependencies modules for NodeJS

Support of Source Maps. Sources are compiled and integrated into maps, they are fully self-sufficient.

Development server, which compiles bundles as needed. For example, when http://localhost:9080/hyoo/todomvc/-/web.js is requested, the js bundle is built from hyoo/todomvc for web environment. Rebuilding occurs only if any source files are changed.

Transpilling TypeScript into JS. In TS configuration enabled support decorators and disabled implicit any type, to prevent missing typing by change.

Watching dependencies by fact of using and automatic inclusion of the needed modules on further bundling. You don't need to write include and require. All you need is to refer instance by full name like $mol_state_arg and $mol.state.arg (depending on its definition) in *.ts, *.view.ts, *.view.tree and *.jam.js files. Dependencies in CSS files are looked for by entries like [mol_check_checked] , [mol_check_checked= and .mol_check_checked.

Lego components

$mol uses the component approach to building interfaces, however every component is self-sufficient and can be used as a self-sufficient application. Small components are aggregated inside larger components etc.

Unlike another frameworks, $mol does not isolate the internals of its components. Vice versa, a comfortable mechanism is provided for developers to configure them, the creator of the component doesn't have to do any additional actions.

For example, to set the list of sub components you need to redefine sub property in view.tree

Confirm_delete $mol_row sub /
	<= Yes $mol_button_minor title \Yes
	<= No $mol_button_major title \No

Or the same code in TypeScript would be:

@ $mol_mem
Confirm_delete() {
	return $mol_row.make({
		sub : ()=> [ 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.

Laziness

$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.

Reactivity

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.

Debugging

$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.

Modules

Flow

Object model

Lifecycle

Functions

Collections

State modules

Simple components

Simple controls

Layout components

Plugin components

Complex components

Charts

Data formats

Math

Resources

Testing

API

Time

Maps

WebAssemply

Web Services

Building

Usage from NPM ecosystem

You can manually build any $mol module as standalone lib:

git clone https://github.com/hyoo-ru/mam.git ./mam
cd mam
npm install
npm start path/to/module
cp path/to/module/-/* your/build/directory

Some libs are already published to NPM:

  • $mol_data - Static typed DTO with strict runtime validation and user friendly error messages.
  • $mol_strict - Makes JS runtime more strict.
  • $mol_time - Proper date/time/duration/interval arithmetic.
  • $mol_type - TypeScript meta types for complex logic.
  • $mol_regexp - Regular Expressions builder.
  • $mol_crypto - Efficient cryptographic algorithms.
  • $mol_db - Static typed IndexedDB wrapper with auto migrations.
  • $hyoo_crowd - Conflict-free Reinterpretable Ordered Washed Data.
  • $mol_plot - Fastest plot lib for vector graphics.

All of them are very small, powerful and fastest. Use it for your pleasure.

Contributors

This project exists thanks to all the people who contribute.

Cool stuff

Donate

About

$mol - fastest reactive micro-modular compact flexible lazy ui web framework.

mol.hyoo.ru

Resources

Readme

License

MIT license

Code of conduct

Code of conduct
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

2 tags

Packages

No packages published

Languages

  • TypeScript 95.0%
  • CSS 3.4%
  • Other 1.6%