Getting Started

Akili is a component-based framework. To use it you just need to include a downloaded file into your html.

<script src="akili.min.js"></script>

Of course you can use something to compile the framework. All examples in the documentation are written so that they will be compiled by babel using many es6+ and some experimental features.

import Akili from 'akili';

So you can wrap any html element to a component and control all its lifecycle. Like this:

import Component from 'akili/src/component';

class MyComponent extends Component {
  constructor(el, scope) {
    super(el, scope);
    scope.example = 'Hello World';
  }
}

Akili.component('my-component', MyComponent);

document.addEventListener('DOMContentLoaded', () => {
  Akili.init().catch((err) => console.error(err));
});
<div>
  <my-component>${ this.example }</my-component>
</div>

There we create new component to control of all html elements with my-component tag name and register it in the framework. Then we initialize our application when DOM content is loaded. The expression in the html will be replaced by scope example value Hello World. If you would like to wrap some system element you can set component attribute to the element:

<textarea component="my-textarea"></textarea> === <my-textarea></my-textarea>

Aliases

Sometimes you would like to assign a component by some specific selector. So you can use Akili.alias function here.

class MyComponent extends Component {
  constructor(el, scope) {
    super(el, scope);
    scope.example = 'Hello World';
  }
}

Akili.component('my-component', MyComponent);
Akili.alias('div.my-component', 'my-component');

document.addEventListener('DOMContentLoaded', () => {
  Akili.init().catch((err) => console.error(err));
});
<div class="my-component">${ this.example }</div>

The first argument in the alias function is DOM selector, the second is component name which you used during component registration.

<my-component></my-component> === <div class="my-component"></div>

During the component registration, an alias is created automatically by the tag. It is the default behavior.

Akili.component('my-component', MyComponent) => Akili.alias('my-component', 'my-component');

The framework structure

All files in the library are located in a certain order in src folder. The enter point is akili.js. It returns and adds to window the main object - Akili, which includes some functions and a few another objects:

  • Akili.Component - main class from which all components are inherited.
  • Akili.Scope - main class from which all scopes are inherited. You can extend it and add any own features to every component's scope.
  • Akili.EventEmitter - object to create a some kind of a component attribute to manage events.
  • Akili.components - object with all default components. For example you can find the framework input implementation as window.Akili.components.Input.
  • Akili.services - object with services (router, request etc.)
  • Akili.utils - object with different useful functions. Copying variables, working with arrays, etc.

If you are using system of es6 modules you have all of the above objects in the according places:

import Akili from 'akili';
import Scope from 'akili/src/scope';
import Component from 'akili/src/component';
import EventEmitter from 'akili/src/event-emitter';
import utils from 'akili/src/utils';
import Input from 'akili/src/components/input';

Options

The framework's setting are stored in the variable Akili.options.

  • debug - debug mode. By default it is true.
  • nestedWatching - all information is here. By default it is true.