Lag in animation when use Aurelia with Framework 7 and Cordova

Help Requests
1

I am making a mobile app using Aurelia and Framework7 on an Android device there is lag in animations specially in opening and closing side panel, but when I use Framework 7 alone without Aurelia, everything gets fine and there is no lag.

The question is how could Aurelia affect and decrease Framework7 performance?
Is there any specific settings to gain better performance?

I use webpack for building process and Framework 7 modules.

2

Can you give some more detail about your current project state ? Normally in a web app, it starts to get laggy once you get ton of elements. Do you have a simple setup to share ?

3

I have only one component!

Main.js:

import {PLATFORM} from 'aurelia-pal';
import 'babel-polyfill';
import * as Bluebird from 'bluebird';
import Framework7 from 'framework7';
import VirtualList from 'framework7/dist/components/virtual-list/virtual-list';
import View from 'framework7/dist/components/view/view';
import Panel from 'framework7/dist/components/panel/panel';

// remove out if you don't want a Promise polyfill (remove also from webpack.config.js)
Bluebird.config({ warnings: { wForgottenReturn: false } });

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature(PLATFORM.moduleName('resources/index'));

  // Uncomment the line below to enable animation.
  aurelia.use.plugin(PLATFORM.moduleName('aurelia-animator-css'));
  // if the css animator is enabled, add swap-order="after" to all router-view elements

  // Anyone wanting to use HTMLImports to load views, will need to install the following plugin.
  // aurelia.use.plugin(PLATFORM.moduleName('aurelia-html-import-template-loader'));

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  if (environment.testing) {
    aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
  }

  Framework7.use([
    VirtualList,
    View,
    Panel
  ]);
  aurelia.container.registerInstance('F7', new Framework7({
    theme: "md",
    init: false
  }));

  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}

app.html:

  <require from="./resources/styles/_iranyekan.css"></require>
  <require from="./resources/styles/fontawesome-all.min.css"></require>
  <require from="framework7/dist/css/framework7.rtl.md.min.css"></require>
  <style>
    * {
      font-family: iranyekan /*IRANSans*/;
    }
  </style>
  <div class="statusbar"></div>

  <div class="panel panel-right panel-reveal">
    <div class="block">
      <p>Right Panel content here</p>
      <p><a class="panel-close" href="#">Close me</a></p>
    </div>
  </div>

  <!-- Your main view, should have "view-main" class -->
  <div class="view view-main">
    <!-- Initial Page, "data-name" contains page name -->
    <div data-name="home" class="page">

      <!-- Top Navbar -->
      <div class="navbar">
        <div class="navbar-inner">
          <div class="left">
            <a class="panel-open" href="#" data-panel="right">
              <i class="icon fas fa-bars" style="padding-right:10px;"></i>
            </a>
          </div>
          <div class="title">Part App</div>
        </div>
      </div>

      <!-- Toolbar -->
      <!--<div class="toolbar">
        <div class="toolbar-inner">
          &lt;!&ndash; Toolbar links &ndash;&gt;
          <a href="#" class="link">Link 1</a>
          <a href="#" class="link">Link 2</a>
        </div>
      </div>-->


      <!-- Scrollable page content -->
      <div class="page-content">
        <!-- Link to another page -->
        <div class="list virtual-list media-list"></div>
      </div>
    </div>
  </div>
</template>

app.js:


@inject('F7')
export class App {
  constructor(F7) {
    this.f7 = F7;
    this.items = [];
    for (let i = 1; i <= 10000; i++) {
      this.items.push({
        title: 'item ' + i,
        subtitle: 'sub item ' + i
      });
    }
  }

  attached() {

    this.f7.init();

    this.f7.panel.create({
      el: '.pishi',
      side: 'right',
      effect: 'cover'
    });

    const mainView = this.f7.views.create('.view-main');
    const index = this;
    this.f7.virtualList.create({
      // List Element
      el: '.virtual-list',
      // Pass array with items
      items: index.items,
      itemTemplate:
      '<li>' +
      '<a href="#" class="item-link item-content">' +
      '<div class="item-inner">' +
      '<div class="item-title-row">' +
      '<div class="item-title">{{title}}</div>' +
      '</div>' +
      '<div class="item-subtitle">{{subtitle}}</div>' +
      '</div>' +
      '</a>' +
      '</li>',
      // Item height
      height: 73,
    });

  }

}
4

I have only one component!

main.js:

import {PLATFORM} from 'aurelia-pal';
import 'babel-polyfill';
import * as Bluebird from 'bluebird';
import Framework7 from 'framework7';
import VirtualList from 'framework7/dist/components/virtual-list/virtual-list';
import View from 'framework7/dist/components/view/view';
import Panel from 'framework7/dist/components/panel/panel';

// remove out if you don't want a Promise polyfill (remove also from webpack.config.js)
Bluebird.config({ warnings: { wForgottenReturn: false } });

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature(PLATFORM.moduleName('resources/index'));

  // Uncomment the line below to enable animation.
  aurelia.use.plugin(PLATFORM.moduleName('aurelia-animator-css'));
  // if the css animator is enabled, add swap-order="after" to all router-view elements

  // Anyone wanting to use HTMLImports to load views, will need to install the following plugin.
  // aurelia.use.plugin(PLATFORM.moduleName('aurelia-html-import-template-loader'));

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  if (environment.testing) {
    aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
  }

  Framework7.use([
    VirtualList,
    View,
    Panel
  ]);
  aurelia.container.registerInstance('F7', new Framework7({
    theme: "md",
    init: false
  }));

  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}

app.html:

  <require from="./resources/styles/fontawesome-all.min.css"></require>
  <require from="framework7/dist/css/framework7.rtl.md.min.css"></require>
  <div class="statusbar"></div>

  <div class="panel panel-right panel-reveal">
    <div class="block">
      <p>Right Panel content here</p>
      <p><a class="panel-close" href="#">Close me</a></p>
    </div>
  </div>

  <!-- Your main view, should have "view-main" class -->
  <div class="view view-main">
    <!-- Initial Page, "data-name" contains page name -->
    <div data-name="home" class="page">

      <!-- Top Navbar -->
      <div class="navbar">
        <div class="navbar-inner">
          <div class="left">
            <a class="panel-open" href="#" data-panel="right">
              <i class="icon fas fa-bars" style="padding-right:10px;"></i>
            </a>
          </div>
          <div class="title">Part App</div>
        </div>
      </div>

      <!-- Scrollable page content -->
      <div class="page-content">
        <!-- Link to another page -->
        <div class="list virtual-list media-list"></div>
      </div>
    </div>
  </div>
</template>

app.js:


@inject('F7')
export class App {
  constructor(F7) {
    this.f7 = F7;
    this.items = [];
    for (let i = 1; i <= 10000; i++) {
      this.items.push({
        title: 'item ' + i,
        subtitle: 'sub item ' + i
      });
    }
  }

  attached() {

    this.f7.init();
    
    const mainView = this.f7.views.create('.view-main');
    const index = this;
    this.f7.virtualList.create({
      // List Element
      el: '.virtual-list',
      // Pass array with items
      items: index.items,
      itemTemplate:
      '<li>' +
      '<a href="#" class="item-link item-content">' +
      '<div class="item-inner">' +
      '<div class="item-title-row">' +
      '<div class="item-title">{{title}}</div>' +
      '</div>' +
      '<div class="item-subtitle">{{subtitle}}</div>' +
      '</div>' +
      '</a>' +
      '</li>',
      // Item height
      height: 73,
    });

  }

}
5

I don’t see any issue with either Aurelia + F7 or F7 . I’m not sure what would be the case without profiling.