GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → hyoo-ru → Mam_mol

hyoo-ru / Mam_mol

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

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Labels

frameworkcomponentsisomorphiclazy-loadingbembundler

Projects that are alternatives of or similar to Mam mol

Bem Core
BEM Core Library
Stars: ✭ 275 (-28.57%)
Mutual labels:  framework, components, bem
Catberry
Catberry is an isomorphic framework for building universal front-end apps using components, Flux architecture and progressive rendering.
Stars: ✭ 793 (+105.97%)
Mutual labels:  framework, isomorphic, components
Crank
Write JSX-driven components with functions, promises and generators.
Stars: ✭ 2,487 (+545.97%)
Mutual labels:  framework, components
A17t
An atomic design toolkit for pragmatists
Stars: ✭ 236 (-38.7%)
Mutual labels:  framework, components
The-HTML-and-CSS-Workshop
A New, Interactive Approach to Learning HTML and CSS
Stars: ✭ 65 (-83.12%)
Mutual labels:  bundler, bem
Celestite
Beautifully reactive, server-side rendered Svelte apps w/ a Crystal backend
Stars: ✭ 185 (-51.95%)
Mutual labels:  framework, isomorphic
Ivory
IVORY is simple and highly customizable CSS framework, gives you all to build your pages faster and easier.
Stars: ✭ 196 (-49.09%)
Mutual labels:  framework, components
Enb
Tool for building web projects, BEM bundler.
Stars: ✭ 136 (-64.68%)
Mutual labels:  bundler, bem
Capivarajs
✌️ Um novo jeito de criar componentes híbridos.
Stars: ✭ 97 (-74.81%)
Mutual labels:  framework, components
Visualplus
🎨 The VisualPlus Framework (VPF) for WinForms allows you to rapidly deploy professional .NET applications with customizable components and controls.
Stars: ✭ 268 (-30.39%)
Mutual labels:  framework, components
Go Starter Kit
[abandoned] Golang isomorphic react/hot reloadable/redux/css-modules/SSR starter kit
Stars: ✭ 2,855 (+641.56%)
Mutual labels:  isomorphic, components
Cmui
Lightweight UI solution for mobile web.
Stars: ✭ 182 (-52.73%)
Mutual labels:  framework, components
Vcomponents
VComponents is a SwiftUI framework that contains 40+ customizable UI components
Stars: ✭ 117 (-69.61%)
Mutual labels:  framework, components
Aleph.js
The Full-stack Framework in Deno.
Stars: ✭ 3,448 (+795.58%)
Mutual labels:  framework, components
Atlas.js
A component-based Node.js library to reduce boilerplate and provide sane project structure 🍻
Stars: ✭ 108 (-71.95%)
Mutual labels:  framework, components
Phaser Node Kit
Rapid Game Development with PhaserJS and Node for Modern Browsers
Stars: ✭ 39 (-89.87%)
Mutual labels:  bundler, framework
Bem Components
Set of components for sites development
Stars: ✭ 318 (-17.4%)
Mutual labels:  components, bem
Danf
Danf is a Node.js full-stack isomorphic OOP framework allowing to code the same way on both client and server sides. It helps you to make deep architectures and handle asynchronous flows in order to help in producing scalable, maintainable, testable and performant applications.
Stars: ✭ 58 (-84.94%)
Mutual labels:  framework, isomorphic
Kanbasu
A lightweight CSS framework written in Sass.
Stars: ✭ 94 (-75.58%)
Mutual labels:  framework, bem
Tonic
A Low Profile Component Framework. Stable, Minimal, Auditable, and Build-Tool-Free.
Stars: ✭ 265 (-31.17%)
Mutual labels:  framework, components
View All Similar Projects ➔

$mol

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

Contents

Levels

  1. Library. $mol is just set of small libs. Honor libs: jQuery, React, Redux, MobX.
  2. Low level framework. $mol is very flexible, but simple. Honor low level fw: Angular, Vue, Ember.
  3. high level framework. $mol has many costomizable ui components. Honor high level fw: Ext, OpenUI5.
  4. Platform. $mol doesn't fit it yet. Honor platforms: Drupal, SAP, 1C.

Features

Benchmarks

Articles

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

Setup your editor

Create your application component

Examples use namespace my and application name hello, but you can use your own namespace and application name.

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

<!-- Disable quirks mode -->
<!doctype html>

<!-- Allow height:100% in body -->
<html style=" height: 100% ">

<!-- Force utf-8 encoding -->
<meta charset="utf-8" />
	
<!-- Disable mobile browser auto zoom, $mol is adaptive -->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1" />
	
<!-- autobind component to element on load -->
<body mol_view_root="$my_hello">

<!-- link to autogenerated js bundle -->
<script src="web.js"></script>

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?val <=> name?val \
		<= message \

That will be automatically compiled to typescript code like this:

namespace $ { export class $my_hello extends $mol_view {

	/// name?val \
	@ $mol_mem
	name( next = '' ) {
		return next
	}

	/// Name $mol_string 
	/// 	hint \Name
	/// 	value?val <=> name?val
	@ $mol_mem
	Name() {
		const obj = new $mol_string
		obj.hint = () => "Name" ,
		obj.value = next => this.name( next ) ,
		return obj
	}

	/// message \
	message() {
		return ""
	}

	/// sub / 
	/// 	<= Name
	/// 	<= message
	sub() {
		return [ this.Name() , this.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
			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: var(--mol_skin_light_outline);
	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 integrate to 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 of modern CSS into CSS supported by browsers (postcss-cssnext): vendor prefixes and variables etc.

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

Lazyness

$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() : string {
			const user_name = $mol_fetch.json( 'https://example.org/profile' ).name
			return `Hello, ${ user_name }!`
		}
		
	}
}

Details: $mol_mem, $mol_atom2.

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

Functions

Collections

State modules

Simple components

Simple controls

Layout components

Plugin components

Complex components

Charts

Data formats

Math

Resources

Testing

API

Time

Maps

Web Services

Building

Contributors

This project exists thanks to all the people who contribute.

Cool stuff

Donate

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].