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.

To avoid the isolation, in order to update changes immediately, use Akili.unisolate() function.

<my-component>${ this.x }</my-component>

class MyComponent extends Akili.Component {
  compiled() {
    this.scope.x = 1;
    this.scope.x = 2;
  }
}

In the example above, the template will only be updated once after the entire function is executed, although the value was assigned twice.

class MyComponent extends Akili.Component {
  compiled() {
    Akili.unisolate(() => this.scope.x = 1);
    this.scope.x = 2;
  }
}

Now the template will be updated twice. This behavior is also relevant for store properties.