Advanced features

Like any other framework Akili has some nuances that you better get to know.

Isolation

The Proxy using entails some issues. When you change the scope value all expressions in templates will be changed at once. It could be a complex operation in some cases. For example, if you change many variables in the loop with a large size of data you can experience a noticeable slowdown.

In order to avoid this we isolate the most of functions. Isolation means that any changes in the DOM will be accumulated and happen at the end of the function.

class MyComponent extends Akili.Component {
  created() {
    this.scope.data = [];
  }
}

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

document.addEventListener('DOMContentLoaded', () => {
  Akili.init()
  .then(() => {
    const component = Akili.root.child('my-component');

    Akili.isolate(() => {
      for(let i = 0; i < 100000; i++) {
        component.scope.data.push(i);
      }
    });
  })
  .catch((err) => console.error(err));
});

The example above just illustrates how you can face this issue. In fact, we have already isolated all commonly used functions.

  • All component lifecycle methods
  • All scope functions
  • All event handlers
  • setTimeout, setInterval, Promise etc.