PREVIEW: Upcoming App Connect Performance Update

Request For Comments
#1

We are glad to announce that we’ve been working on some huge performance improvements for App Connect.

The way App Connect always worked was that each expression on the page was parsed again and again when some data or component property was updated, then the components checked which values were changed and if they need to update.

With the new update the expressions are evaluated first and we store what kind of data they depend on. When data or component properties are updated we first check if the expression needs to be parsed again or can be skipped. When no expression of a component needed parsing we can skip many of the update logic of the component and check the next component.

Not only the component update logic is skipped, expressions are parsed a lot less. Formatters are called less because of this, so having a console.log in your custom formatter doesn’t cause millions of logs in your console. Less parsing means faster page updates.

Please download the update to see if it improves speed for you and give us feedback on any problems you encounter with the update.

dmxAppConnect.zip (25.7 KB)

15 Likes
Custom Client Side Formatter Getting Evaluated 4 Times
#2

Massive implications for us on multiple projects. Will need to find time to test @sid @slashash.sanjay

2 Likes
#3

This App Connect update will offer a huge performance boost on your existing sites, specially if you have complex pages with a lot of expressions and formatters.

We don’t anticipate any breaking changes - just pure performance boost :slight_smile:

But still test it well @wappler_ambassadors

4 Likes
#4

If there is no situation that requires me to take a backup, I can try it in the system we use in the office. It’s very very big and complex :slight_smile:

#5

You can just rename your dmxAppConnect/dmxAppConnect.js to dmxAppConnect.js.bak and add the new one.

Then make sure you hard refresh the browser with ctrl+f5

1 Like
#6

You should always have some version control or regular backup of your files. But if the update causes problems then you just delete the file again, save a page with app connect in Wappler which then will copy the previous version back.

2 Likes
#7

@patrick any changes I need to implement to make sure custom components data is monitored by AC?

#8

I’m testing now with the new appConnect yes there is a noticeable performance difference.
no problems appear :+1: :+1: :+1:

thanks @patrick @George

3 Likes
#9

No changes are needed in components. The update method of the component is not called each time some data is updated, so don’t depend on that.

1 Like
#10

I just tested it in one of the SPA NodeJS project I’m currently working on and my first impression is that the pages are definitely loading much quicker :+1:t4:

Some of the bugs I can report based on this testing.

  1. Page routing is not working when clicked on a link. The route url appears correctly but the browser doesn’t automatically navigate.
  2. The table data is not displayed on the first load. If I go to another tab and come back to this, the data displays correctly.
  3. Radio Group values are not passed on to the API
  4. Photo urls (AWS S3) are working correctly in some places, but in other places, photo from the same url is not being displayed.

The new AC will provide a huge performance boost. Looking forward to the release of final version. Thanks @patrick @George

#11

@guptast could you send me your html in a private message, so that I can check which components and expressions are being used.

#12

I can confirm this.

#13

First update, it should fix issues with the routing. Get the update by downloading the file from the topic again.

3 Likes
#14

Would it affect dmx-html and dmx-text attributes in any way? I’m getting different behaviour when I’m using a custom formatter that depends on loading a library.

#15

The attribute behavior is not changed, but it depends on the expression since it will not call the update if it thinks there is nothing changed. What does your custom formatter do?

#16

New update. Fixes several issues where data wasn’t updated. Get the update by downloading the file from the topic again.

#17

Invoke the translation function of i18next

dmx.Formatter('string', 't', function (key, options) {
    if (i18next.isInitialized) return i18next.t(key, options);
    else return key;
});

Which relies on the i18next library to be loaded and if not it will return the key.

render: function () {
        i18next
            .use(window.i18nextFluent)
            .use(window.i18nextFluentBackend)
            .init({
                debug: this.props.debug,
                whitelist: this.props.whitelist,
                lng: this.props.lng,
                fallbackLng: this.props.fallbackLng,
                ns: this.props.namespaces,
                defaultNS: this.props.defaultNS,
                backend: this.props.backend
            });

        i18next.on('initialized', function (options) {
            this.dispatchEvent('init')
            this.set("init", true)
            //dmx.requestUpdate()
            //i18next.off('initialized');
        }.bind(this));
        
        i18next.on('languageChanged', function (lng) {
            this.dispatchEvent('lngchange')
            this.set("language", lng)
        }.bind(this))
    }
#18

The formatters should not have side-effects to work correctly with the new changes. This means that it should always return the same output when the input didn’t change.

Does it update when you call dmx.requestUpdate()?

#19

Nope. It won’t change the DOM.

But if I call the parse function you can see that the formatter is properly defined and working.

image

#20

@JonL Test the new update.