Premium support for our pure JavaScript UI components


Post by sergey.maltsev »

Hi!

There could be performance issues once you have any webpack processing for our umd code.
It may use some polyfilling/transpiling for internal ES6 async methods which would be a reason for result performance degradation.

What we saw previously is that using IE11 umd package config for webpack surely affected on performance, so the solution above was to rebuild umd without any polyfills (like regenerator-runtime) in there.
You may compare the umd bundle performance between Scheduler 3rd and 4th version in pure JS app.

Some tips could be found also here to use patched react bundle for this.
https://www.bryntum.com/docs/scheduler-pro/#SchedulerPro/guides/integration/react.md#cra-performance
It was yet related to SchedulerPro but seems it could be also the reason for the problems in React app for Scheduler.

Looking for a runnable test case app from you to get the performance results.


Post by asd »

Hi,

Please find the attached simple scheduler application the way we are using.Check the timings in console.Replace the scheduler umd bundle in assets with 3.1.9 and compare the results.

Thanks,
Abhay


Post by sergey.maltsev »

Hi,

Thank you for this app. We are checking the issue.


Post by sergey.maltsev »

Hi, asd!

Summary for your test case:

scheduler.umd.js 4.2.4 from example:

Call to doSomething took 844.3999999761581 milliseconds

Retranspiled scheduler.umd.js 4.2.4 which is expected to be used:

Call to doSomething took 177.20000004768372 milliseconds.

scheduler.umd.js 3.1.9:

Call to doSomething took 220.60000002384186 milliseconds.

Please check this post viewtopic.php?p=92406#p92406 and use created umd instead of your's.


Post by asd »

Hi,

We did create transpiled version of scheduler module as you mentioned in this post viewtopic.php?p=92406#p92406, However with the transpiled code we were not able to include in our application it was throwing error saying "Class constructor DragHelper cannot be invoked without 'new'" as the transpiled bundle had not transformed the class,

We are using draghelper class like below

class Drag extends window.bryntum.scheduler.DragHelper {
...
}
....
and then using the above extended draghelper as below

const drag = new Drag({
      constrain: false,
      onDropSuccess: me.handleDropSuccess.bind(this),
      onDragStart: me.handleDragStart.bind(this),
      onDropFailure: me.handleDragFailure.bind(this),
      schedule: me.engine,
    });

I modified the webpack config from the mentioned post to transpile the classes and used it, but not much improvement in performance.

The modified webpack config from the mentioned post is

const path = require('path');

module.exports = {
    mode        : 'development',
    entry       : './lib/scheduler.module.js',
    output      : {
        path           : path.resolve(__dirname, 'build'),
        filename       : 'scheduler.umd.js',
        library        : ['bryntum', 'scheduler'],
        libraryTarget  : 'umd',
        umdNamedDefine : true
    },
    performance : {
        hints : false
    },
    module      : {
        rules : [
            {
                test    : /\.js$/,
                loader  : 'babel-loader',
                options : {
                    compact : false,
                    presets : [
                        ['@babel/preset-env', {
                            targets : {
                                chrome : 75
                            },
                            include: ["transform-classes"],
                            modules : false
                        }],
                    ],
                    plugins : [
                        ['@babel/plugin-transform-runtime', { regenerator : true }]
                    ]
                }
            }
        ]
    },
    resolve     : {
        modules : [path.resolve(__dirname, 'node_modules')]
    }
};

Thanks,
Abhay


Post by sergey.maltsev »

Hi!

Unfortunately there's no way to improve performance with the existing Scheduler umd package.

Also using this plugin
['@babel/plugin-transform-runtime', { regenerator : true }]
will surely affect on performance. This is actually the main problem.

To solve Class constructor DragHelper cannot be invoked without 'new' you may need to upgrade babel-loader.
It is related to handling ES6 classes.

You may check similar problem here.
viewtopic.php?p=92852#p92852


Post by asd »

sergey.maltsev wrote: Thu Sep 30, 2021 10:38 am

Hi!

Unfortunately there's no way to improve performance with the existing Scheduler umd package.

What are your suggestions to upgrade to latest bryntum then?

sergey.maltsev wrote: Thu Sep 30, 2021 10:38 am

To solve Class constructor DragHelper cannot be invoked without 'new' you may need to upgrade babel-loader.
It is related to handling ES6 classes.

I do understand the above error is due to classes not being transformed, Ideally the umd module should transform the ES6 classes.

Any inputs to proceed further is much appreciated.

Thanks,
Abhay


Post by sergey.maltsev »

Hi!

Standard React CRA scripts do support this transpiled umd bundle.
We use the same babel config as suggested for transpiling in SchedulerPro and Gantt and all demos are built with no problems.

All test cases provided by you also work with this transpiled bundle with normal performance.

Please check the simple attached React project (scheduler-simple.zip) for Scheduler which uses transpiled bundle instead of npm served one.

Transpiled umd package is copied in place of npm umd with postinstall script in package.json.

Unzip and place transpiled umd bundle to lib folder. Licensed scheduler.umd.js is not included in zip.
Then run

npm i
npm run start

Check output in console

Also check App.js code for creating simple class which extends bryntum API one and for preparing data for using useRawConfig option.

If you have problems with some ejected React app, custom webpack configs or other fails please contact our Sales for Professional Services for help with app development https://www.bryntum.com/services

Attachments
scheduler-simple.zip
(602.9 KiB) Downloaded 65 times

Post by asd »

Hi @Mats,

Had sent a mail of sample test case and package as discussed, is there any update on the same.

Thanks,
Abhay


Post by saki »

Hello Abhay, I have run your code a I was able to reproduce the error. We need to investigate it to find a solution or a workaround.


Post Reply