readme.template

[![npm (scoped)](https://img.shields.io/npm/v/@basiclines/leo.svg?style=flat-square)](https://www.npmjs.com/package/@basiclines/leo)

# LEO

<img src="https://image.ibb.co/kNvycS/logo.png" width="128px">

> LEO is a lightweight JS library that helps you build modern front-end applications.

LEO Provides 3 simple tools (List, Element, Object) to help you build and grow you JS application without defining any specific architecture for you.

* **List**: A list (Array) of Objects
* **Element**: A web-components based solution with reactive bindings.
* **Object**: A object with key-value bindings and customs events.


## About

As an intent of reunite the best in class JS paradigms that are spread over the different ways of building modern javascript applications, LEO extracts different patterns from different frameworks and puts them together for you:

* **From Backbone**: LEO uses the same idea behind Backbone models (Object) and collections (Lists) with a simpler interface that doesn't need any `.get` or `.set` methods.
* **From React**: LEO Element class provides a `render` method that is called whenever the element `data` or `attrs` properties are changed.
* **From Web-Components**: Style and behaviour encapsulation. Any LEO Element can be registered as a web-component with it's custom tag name.

LEO doesn't provides any architecture or specific design decisions for you and it's built entirely with the new ES6 features


## Install

```bash
npm install --save @basiclines/leo
```

### Webpack and Babel configuration
Use the sample configuration from `/examples`, you will find:

* `package.json`
* `.babelrc`
* `webpack.config.js`


## Object usage

```js
import {LEOObject} from 'leo'
class Star extends LEOObject {}

let bowie = new Star({ name: 'David' })
bowie.on('change:name', (name) => { console.log(name) })

bowie.name = 'Ziggy'
```


## Element usage

```js
import {LEOElement} from 'leo'

class StarElement extends LEOElement {
  render() {
    this.innerHTML = this.attrs.title
  }
}

customElements.define('star-element', StarElement)
```

```html

<star-element title="David Bowie"></star-element>

```


## List usage

```js
import {LEOList} from 'leo'

let Constellation = new LEOList([
    { name: 'Polaris', declination: 'N 89°' },
    { name: 'Kochab', declination: 'N 74°' }
])

Constellation.on('add', (obj) => {
    console.log('Added obj', obj)
})

Constellation.on('change', (obj) => {
    console.log('changed obj', obj)
})

Constellation.push({ name: 'Schedar', declination: 'N 56°' })
Constellation.push({ name: 'Alkaid', declination: 'N 49°' })

Constellation.map(item => { item.name = `Star ${item.name}` })
```


## Examples

Inside `/examples` you can find common code examples.


## API

### LEOObject

A object with key-value bindings and customs events.

{{ object_table }}

### LEOElement

A web-components based solution with reactive bindings.

{{ element_table }}

### LEOList (extends LEOObject)

A list (Array) of objects that inherits all event based behaviour from LEOObject.

{{ list_table }}


## Disclaimer
LEOJS project is still under development and it's not recommended for production use.


## License

[MIT](http://vjpr.mit-license.org)