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.
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
.getor.setmethods. - From React: LEO Element class provides a
rendermethod that is called whenever the elementdataorattrsproperties 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
npm install --save @basiclines/leoUse the sample configuration from /examples, you will find:
package.json.babelrcwebpack.config.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'import {LEOElement} from 'leo'
class StarElement extends LEOElement {
render() {
this.innerHTML = this.attrs.title
}
}
customElements.define('star-element', StarElement)<star-element title="David Bowie"></star-element>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}` })Inside /examples you can find common code examples.
A object with key-value bindings and customs events.
| Method/Property | Params | Description |
|---|---|---|
| .on() | event <string>, handler <function> | Binds a handler function to the Object for an specific event. |
| .off() | event <string>, handler <function> | Unbinds the handler function from the Object for an specific event. |
| .trigger() | event <string>, value <any> | Triggers an event with a custom value. |
| .listenTo() | entity <object>, event <string>, handler <function> | Binds an Object to listen for events from another Object. |
| .stopListening() | entity <object>, event <string>, handler <function> | Unbinds an Object from listening to events from another Object. |
| .clear() | Removes all enumerable properties from the Object and it's references from .attributes | |
| .clone() | Returns a copy of the Object with all their properties. Listeners are not copied. | |
| .has() | property <string> | Checks whenever an Object has an specific property |
| .isEmpty | Checks whenever an Object has enumberable properties |
A web-components based solution with reactive bindings.
| Method/Property | Params | Description |
|---|---|---|
| .attrs | Map of live attributes of the element | |
| .data | A handy place to put any data structure needed for rendering | |
| .beforeMount() | Fired when the element is about to be added in to the DOM. Triggered before the 1st render. | |
| .mount() | Fired when the element is added in to the DOM | |
| .dismount() | Fired when the element is removed from the DOM | |
| .shouldRender() | property <string>, value <any> | Override this method to prevent unwanted renders |
| .renderStrategy() | content <string> | The render strategy, you can override it with yout own function. |
| .render() | Fired when any of .data or .attrs properties are modified. | |
| .find() | Shorcut for querySelector | |
| .findAll() | Shorcut for querySelectorAll | |
| .bind() | Fired before mount() to allow proper event binding |
A list (Array) of objects that inherits all event based behaviour from LEOObject.
| Method/Property | Params | Description |
|---|---|---|
| .map() | callback <function> | Shortcut for Array.map |
| .forEach() | callback <function> | Shortcut for Array.forEach |
| .reduce() | callback <function>, initalValue <any> | Shortcut for Array.reduce |
| .find() | callback <function> | Shortcut for Array.find |
| .filter() | callback <function> | Shortcut for Array.filter |
| .every() | callback <function> | Shortcut for Array.every |
| .pluck() | attribute <string> | Plucks an attribute from each object in the list |
| .toJSON() | Returns an array containing the enumerable properties of each object | |
| .unshift() | objects <array> | Shortcut for Array.unshift |
| .push() | objects <array> | Shortcut for Array.push |
| .isEmpty | Checks the collection lenght to know if it's empty | |
| .length | Shorcut for Array.length |
LEOJS project is still under development and it's not recommended for production use.