Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 39 additions & 39 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
Milo
====

Browser/nodejs [reactive programming](http://en.wikipedia.org/wiki/Reactive_programming) and data driven DOM manipulation with modular components.
Browser/nodejs [reactive programming](https://en.wikipedia.org/wiki/Reactive_programming) and data driven DOM manipulation with modular components.

[![Build Status](https://travis-ci.org/milojs/milo.svg?branch=master)](https://travis-ci.org/milojs/milo)
[![npm version](https://badge.fury.io/js/milojs.svg)](https://badge.fury.io/js/milojs)
[![Code Climate](https://codeclimate.com/github/milojs/milo/badges/gpa.svg)](https://codeclimate.com/github/milojs/milo)
[![Test Coverage](https://codeclimate.com/github/milojs/milo/badges/coverage.svg)](https://codeclimate.com/github/milojs/milo/coverage)

Documentation: http://milojs.github.io/milo/
Documentation: https://milojs.github.io/milo/


Quick start
Expand Down Expand Up @@ -100,19 +100,19 @@ Samples/Tutorials
-----------------

### Getting started
[Introduction to binding](http://jsfiddle.net/jasoniangreen/63T6V/)
[Introduction to binding](https://jsfiddle.net/jasoniangreen/63T6V/)

[Introduction to data facet](http://jsfiddle.net/jasoniangreen/xDFda/)
[Introduction to data facet](https://jsfiddle.net/jasoniangreen/xDFda/)

[Introduction to messengers](http://jsfiddle.net/jasoniangreen/5Hy5F/)
[Introduction to messengers](https://jsfiddle.net/jasoniangreen/5Hy5F/)

[Introduction to models](http://jsfiddle.net/jasoniangreen/225Bf/)
[Introduction to models](https://jsfiddle.net/jasoniangreen/225Bf/)

[Introduction to minder](https://github.com/milojs/milo/blob/master/examples/tutorials/5_minder.html)

[Introduction to lists](https://github.com/milojs/milo/blob/master/examples/tutorials/6_lists.html)

Article about creating milo [Rolling Your Own Framework](http://code.tutsplus.com/articles/rolling-your-own-framework--cms-21810) on tuts+
Article about creating milo [Rolling Your Own Framework](https://code.tutsplus.com/articles/rolling-your-own-framework--cms-21810) on tuts+


### TodoMVC
Expand Down Expand Up @@ -149,7 +149,7 @@ Concepts

Although __milo__ is packaged as one bundle, it has very modular structure. It consists of several independent modules that can be used together or separately and that are designed to simplify common application tasks rather than to create any particular application structure.

Some modules in __milo__ can be used only in browser ([Component](http://milojs.github.io/milo/components/c_class.js.html), [ComponentFacet](http://milojs.github.io/milo/components/c_facet.js.html), [milo.binder](http://milojs.github.io/milo/binder.js.html)), some both in browser and in nodejs ([Messenger](http://milojs.github.io/milo/messenger/index.js.html) and its related classes, [Model](http://milojs.github.io/milo/model/index.js.html), [Connector](http://milojs.github.io/milo/model/connector.js.html), [milo.minder](http://milojs.github.io/milo/minder.js.html)).
Some modules in __milo__ can be used only in browser ([Component](https://milojs.github.io/milo/components/c_class.js.html), [ComponentFacet](https://milojs.github.io/milo/components/c_facet.js.html), [milo.binder](https://milojs.github.io/milo/binder.js.html)), some both in browser and in nodejs ([Messenger](https://milojs.github.io/milo/messenger/index.js.html) and its related classes, [Model](https://milojs.github.io/milo/model/index.js.html), [Connector](https://milojs.github.io/milo/model/connector.js.html), [milo.minder](https://milojs.github.io/milo/minder.js.html)).

Milo itself uses browserify to package bundle, but any modules system can be used in an app that uses __milo__ - __milo__ does not suggest any application structure.

Expand All @@ -158,11 +158,11 @@ Milo itself uses browserify to package bundle, but any modules system can be use

Component is designed to simplify the management of DOM. Component is attached to a certain DOM element. Attaching several components to the same DOM element is usually an application (or milo) design mistake, so if it happens an error will be logged to console.

Components allow very easy creation of subclasses that are defined as a collection of configured "facets". For example, see the definition of [MLSelect](http://milojs.github.io/milo/components/ui/Select.js.html) UI component.
Components allow very easy creation of subclasses that are defined as a collection of configured "facets". For example, see the definition of [MLSelect](https://milojs.github.io/milo/components/ui/Select.js.html) UI component.

There is a [Component template](https://github.com/milojs/milo/blob/master/lib/components/ComponentTemplate.js) to simplify creation of your own components.

See [Component documentation](http://milojs.github.io/milo/components/c_class.js.html).
See [Component documentation](https://milojs.github.io/milo/components/c_class.js.html).


### Component facet
Expand All @@ -173,26 +173,26 @@ You would rarely need to instantiate a facet - when a component is created it cr

There are the following facets defined in __milo__:

- [Container](http://milojs.github.io/milo/components/c_facets/Container.js.html) - a special facet that creates a scope of components
- [Dom](http://milojs.github.io/milo/components/c_facets/Dom.js.html) - a collection of helper methods simplifying DOM manipulation of component element
- [Events](http://milojs.github.io/milo/components/c_facets/Events.js.html) - gives a convenient API to subscribe to DOM events
- [Data](http://milojs.github.io/milo/components/c_facets/Data.js.html) - an api to manipulate DOM tree inside component element as data, allowing both getting/setting structured data from/to many DOM elements at once and creating reactive data connection of Models (see below) to DOM.
- [List](http://milojs.github.io/milo/components/c_facets/List.js.html) and [Item](http://milojs.github.io/milo/components/c_facets/Item.js.html) - allow creating lists in DOM from arays in your data. Component class using any of these facets require Data facet (will be added automatically) that should be used to get/set list data and to create reactive data connection.
- [Template](http://milojs.github.io/milo/components/c_facets/Template.js.html) - simplifies rendering of component DOM element from template.
- [Css](http://milojs.github.io/milo/components/c_facets/Css.js.html) - Allows you to bind DOM data, or models to css classes using declaritive rules in the facet config.
- [Frame](http://milojs.github.io/milo/components/c_facets/Frame.js.html) - manages sending/receiveing messages to/from iframe.
- [Drag](http://milojs.github.io/milo/components/c_facets/Drag.js.html) - allows easy management of draggable DOM elements.
- [Drop](http://milojs.github.io/milo/components/c_facets/Drop.js.html) - helps creating drop targets.
- [Model](http://milojs.github.io/milo/components/c_facets/ModelFacet.js.html) - simple wrapper for __milo__ Model (see below), helping to store data on component.
- [Container](https://milojs.github.io/milo/components/c_facets/Container.js.html) - a special facet that creates a scope of components
- [Dom](https://milojs.github.io/milo/components/c_facets/Dom.js.html) - a collection of helper methods simplifying DOM manipulation of component element
- [Events](https://milojs.github.io/milo/components/c_facets/Events.js.html) - gives a convenient API to subscribe to DOM events
- [Data](https://milojs.github.io/milo/components/c_facets/Data.js.html) - an api to manipulate DOM tree inside component element as data, allowing both getting/setting structured data from/to many DOM elements at once and creating reactive data connection of Models (see below) to DOM.
- [List](https://milojs.github.io/milo/components/c_facets/List.js.html) and [Item](https://milojs.github.io/milo/components/c_facets/Item.js.html) - allow creating lists in DOM from arays in your data. Component class using any of these facets require Data facet (will be added automatically) that should be used to get/set list data and to create reactive data connection.
- [Template](https://milojs.github.io/milo/components/c_facets/Template.js.html) - simplifies rendering of component DOM element from template.
- [Css](https://milojs.github.io/milo/components/c_facets/Css.js.html) - Allows you to bind DOM data, or models to css classes using declaritive rules in the facet config.
- [Frame](https://milojs.github.io/milo/components/c_facets/Frame.js.html) - manages sending/receiveing messages to/from iframe.
- [Drag](https://milojs.github.io/milo/components/c_facets/Drag.js.html) - allows easy management of draggable DOM elements.
- [Drop](https://milojs.github.io/milo/components/c_facets/Drop.js.html) - helps creating drop targets.
- [Model](https://milojs.github.io/milo/components/c_facets/ModelFacet.js.html) - simple wrapper for __milo__ Model (see below), helping to store data on component.

There is a [Component facet template](https://github.com/milojs/milo/blob/master/lib/components/c_facets/facet_template.js) to simplify creation of your own facets. All facets of components should be subclasses of [ComponentFacet](http://milojs.github.io/milo/components/c_facet.js.html).
There is a [Component facet template](https://github.com/milojs/milo/blob/master/lib/components/c_facets/facet_template.js) to simplify creation of your own facets. All facets of components should be subclasses of [ComponentFacet](https://milojs.github.io/milo/components/c_facet.js.html).


### DOM binding and creation of component instances

Instances of your components are usually created automatically when you call [milo.binder](http://milojs.github.io/milo/binder.js.html) based on information about components classes, facets and component name in `ml-bind` attribute (can be changed via [milo.config](http://milojs.github.io/milo/config.js.html)).
Instances of your components are usually created automatically when you call [milo.binder](https://milojs.github.io/milo/binder.js.html) based on information about components classes, facets and component name in `ml-bind` attribute (can be changed via [milo.config](https://milojs.github.io/milo/config.js.html)).

To make your components available to __milo__ their classes should be registered in components registry ([milo.registry.components](http://milojs.github.io/milo/components/c_registry.js.html)). If you define new facets, their classes should also be registered (in [milo.registry.facets](http://milojs.github.io/milo/components/c_facets/cf_registry.js.html)).
To make your components available to __milo__ their classes should be registered in components registry ([milo.registry.components](https://milojs.github.io/milo/components/c_registry.js.html)). If you define new facets, their classes should also be registered (in [milo.registry.facets](https://milojs.github.io/milo/components/c_facets/cf_registry.js.html)).

As registering of components and facets classes usually happens in the same module (file) that defines the class, you have to execute this module. If you use broserify for module management it is enough to use:
```
Expand All @@ -207,7 +207,7 @@ __milo__ supplies internal messaging classes that can also be used for applicati

Messenger instances use instances of `MessageSource` subclasses to connect to external sources and instances of `MessengerAPI` subclasses to create higher level internal messages and transform message data. This architecture allows creating an advanced functionality in just a few lines of code.

See [Messenger documentation](http://milojs.github.io/milo-core/messenger/index.js.html).
See [Messenger documentation](https://milojs.github.io/milo-core/messenger/index.js.html).


### Model
Expand All @@ -216,7 +216,7 @@ __milo__ defines Model to allow safe access to the data without the need to worr

Using Model does not require these APIs, and unlike these APIs it allows subscribing to changes on properties of your Models to any depth.

See Model [demo](https://github.com/milojs/milo/blob/master/lib/model/demo.js) and [Model documentation](http://milojs.github.io/milo-core/model/index.js.html).
See Model [demo](https://github.com/milojs/milo/blob/master/lib/model/demo.js) and [Model documentation](https://milojs.github.io/milo-core/model/index.js.html).


### Connector
Expand All @@ -229,34 +229,34 @@ These connections do not have overhead of comparing data in the loop like `angul

Very soon Connector instances will support structure translation allowing creating reactive connections between models with fixed structures and DOM trees with flexible structures.

One or multiple reactive connections can be created with [milo.minder](http://milojs.github.io/milo/minder.js.html).
One or multiple reactive connections can be created with [milo.minder](https://milojs.github.io/milo/minder.js.html).

See [Connector documentation](http://milojs.github.io/milo-core/model/connector.js.html).
See [Connector documentation](https://milojs.github.io/milo-core/model/connector.js.html).


### Views and application management

- [milo.loader](http://milojs.github.io/milo/loader.js.html) - loading subviews into page.
- [milo.mail](http://milojs.github.io/milo/services/mail/index.js.html) - applicaiton level messenger that also defines `domready` event and simplifies routing of messages between iframes (see [Frame facet](http://milojs.github.io/milo/components/c_facets/Frame.js.html)).
- [milo.config](http://milojs.github.io/milo/config.js.html) - configuring __milo__ settings.
- [milo.loader](https://milojs.github.io/milo/loader.js.html) - loading subviews into page.
- [milo.mail](https://milojs.github.io/milo/services/mail/index.js.html) - applicaiton level messenger that also defines `domready` event and simplifies routing of messages between iframes (see [Frame facet](https://milojs.github.io/milo/components/c_facets/Frame.js.html)).
- [milo.config](https://milojs.github.io/milo/config.js.html) - configuring __milo__ settings.


### Utilities

- [check](http://milojs.github.io/milo/util/check.js.html) - check parameter types (forked from check package of Meteor framework).
- [logger](http://milojs.github.io/milo/util/logger.js.html) - configurable logger with log levels.
- [request](http://milojs.github.io/milo/util/request.js.html) - HTTP requests library.
- [dom](http://milojs.github.io/milo/util/dom.js.html) - library to manipulate DOM elements.
- [check](https://milojs.github.io/milo/util/check.js.html) - check parameter types (forked from check package of Meteor framework).
- [logger](https://milojs.github.io/milo/util/logger.js.html) - configurable logger with log levels.
- [request](https://milojs.github.io/milo/util/request.js.html) - HTTP requests library.
- [dom](https://milojs.github.io/milo/util/dom.js.html) - library to manipulate DOM elements.


Why Milo?
---------

__Milo__ name was chosen because of [Milo Minderbinder](http://en.wikipedia.org/wiki/Milo_Minderbinder), a war profiteer from Catch 22. Having started from managing mess operations, he expanded them into a profitable trading enterprise, that connected everybody with everything, and in that Milo and everybody else "has a share".
__Milo__ name was chosen because of [Milo Minderbinder](https://en.wikipedia.org/wiki/Milo_Minderbinder), a war profiteer from Catch 22. Having started from managing mess operations, he expanded them into a profitable trading enterprise, that connected everybody with everything, and in that Milo and everybody else "has a share".

__Milo__ the framework has the module __binder__, that binds DOM elements to components (via special ml-bind attribute), and the module __minder__ that allows establishing live reactive connections between different data sources (Model and Data facet of components are such data sources).

Coincidentally, __Milo__ can be read as an acronym of [__MaIL Online__](http://dailymail.co.uk).
Coincidentally, __Milo__ can be read as an acronym of [__MaIL Online__](https://dailymail.co.uk).


Aren't there enough browser frameworks?
Expand Down Expand Up @@ -315,7 +315,7 @@ Components and Facets register themselves in registries that allows to avoid req
Dependencies
------------

The dependencies of Milo are [__Proto__](https://github.com/milojs/proto), an object manipulation library and [__doT__](http://olado.github.io/doT/index.html), a templating engine (both are included in milo bundle).
The dependencies of Milo are [__Proto__](https://github.com/milojs/proto), an object manipulation library and [__doT__](https://olado.github.io/doT/index.html), a templating engine (both are included in milo bundle).


### No jQuery, Zepto, etc.
Expand All @@ -338,7 +338,7 @@ It is bundled together with __milo__ and all its functions are available as prop

License
-------
http://opensource.org/licenses/BSD-2-Clause
https://opensource.org/licenses/BSD-2-Clause


Changes log
Expand Down