Possibility to simplify AppConnect syntax for better readability and beyond. Thought?

Coffee Lounge
#1

We know in recent trend, many developers are abandoning jQuery for vanilla or other techs like the Vue and React but here we use the AppConnect that works with Wappler UI. Even though we can achieve almost what we need using Wappler with very minimal hand coding, but when you go advance there would be need to inspect and modify the dmx codes generated by the Wappler UI.

Looking forward the implementation of BS5, I’m also thinking of getting rid of jQuery, but in my experience using Wappler, I think jQuery might still be useful in my case because in certain aspects that dmx is ‘lacking’ (not an offense), it can do a better job with easier readability and simpler syntax.

Here an example:

Let say I want to set a value to an input located within collapse within modal, while it’s very easy to do with Wappler UI, the generated syntax requires all DOM elements to identify and quite long to read, e.g.:

modal_alluser.accordion_alluser.inp_alluser_access.setValue(1)

In jQuery, this can simply be written as:

$('#inp_alluser_access').val(1)

I think the long syntax probably necessary for the UI to detect the components in the Action Window but if later I decide to rename the modal or move the accordion elsewhere, the generated code will not valid anymore. I need to set it again using the UI or amend the code manually, which can be complicated, especially when there are more than few stuffs going on there.

So now I just wonder if the dmx syntax here can be simplified with just selector e.g. by id, or how about class name and other html5 elements? - so that it’s more readable and easier to maintain, for example #inp_alluser_access.setValue(1).

I understand the main purpose of AppConnect is to be used with the ServerConnect and not a JavaScript library like jQuery but looking forward to the future I hope It can do more so that I can finally getting rid of other dependencies.

*I know that even I don’t use jQuery, things can still be achieved with JavaScript but the simplicity of jQuery is irresistible.

Recap: The main idea here is to implement selector ala jQuery in AppConnect.

What do you guys think?

1 Like
#2

You are quite right, jQuery was a great library. The problem is, if I use $('#inp_alluser_access').val(1) just once in my document, the application needs to download the complete jQuery library.

Instead, I could have used document.getElementById("inp_alluser_access").value = 1;
and nothing to download.

Incidentally, I do not see a reason why modal_alluser.accordion_alluser.inp_alluser_access.setValue(1)
could not have been coded as
inp_alluser_access.setValue(1)

#3

It would be great if we can also use AppConnect to set value of element based on its type or class name, something like querySelector().

#4

In the background we have already started working on App Connect version 2.

It will be completely rewritten according to the new ES6 JavaScript standard and empower much better techniques for dynamic data binding, making it super performant.

The goal is that the new engine will be 100% syntax compatible, so your existing pages should work without changes and you can swap app connect version framework just as you swap now bs4 and bs5.

We can think indeed of adding also some DOM manipulation functionality as it is often needed indeed @patrick

So if you also have other ideas for app connect improvements- now is the time @wappler_ambassadors :slight_smile:

7 Likes
#5

Wow, this is very positive news. Do you have a timeline for the implementation? I remember during dmxzone time there was timeline for future upcoming extensions in the pipeline and I can recall how excited I was. Having the same vibe now.

#6

No timeline yet - it is a lot of work because all existing App Connect components have to be rewritten as well, but this will give an awesome performance boost as well be much better prepared for usage with deploy tools like Webpack.

So we will be working on it for the next months and of course there will be a beta version first, so you can try it our and give us feedback.

5 Likes