Vanilla Culture: Clean, unified DOM manipulation. Combine logic, structure, and styles without the framework bloat. Kalida Script.

[addller]

Following the Vanilla JS culture, I create Javascript library (Kalida Script) that creates HTML elements associated with a variable and a CSS style with a single instruction.
This approach allows you to create web applications using "99%" JavaScript, so that HTML files work by importing these scripts. Virtually no HTML elements are created in the HTML file; the most that is used is the body tag. The rest is all Javascript file imports.

The result is clean code, without HTML tag trees that make project maintenance difficult.
Since almost everything is done via Javascript, maintenance is much clearer and therefore easier.

An additional benefit is the identification of created elements through browser inspection, including the CSS style associated with that element in a clear and simple way.
Advice is welcome.

The library is available at: https://github.com/addller/kalida_script.git
Example available at: https://github.com/addller/kalida_framework.git

[abdul0325]

Interesting approach. Generating UI entirely from JavaScript can improve component organization and reduce HTML duplication, similar to how React, Vue, and other frameworks work. My main suggestion would be to clearly document the advantages over existing solutions, especially around maintainability, performance, learning curve, and debugging. Adding benchmarks and real-world examples would also help developers evaluate whether it's a good fit for their projects.

[addller]

@abdul0325
I consider the learning curve simple because the composition of the components is basically a very flexible Lego set.
However, as more components are created, you need to organize responsibilities, and the best folder structure I've managed to create is:
1 - actions, for repetitive actions, for example, checking if you are logged in, composing the menu, etc.;
2 - api, for separating different APIs;
3 - aspect, for error handling;
4 - controller, for manipulating views and view rows, events, requests, and view compositions;
5 - lang, for language selection;
6 - tag, where the script and tag tools, which are auxiliary scripts, are located;
7 - view, where the components created by composition are located, divided into views and view rows.
Creating components is very simple, but as you can see, for development efficiency, you only need good folder organization with a division of responsibilities, since you shouldn't perform complex operations on the classes that build views, even if it's possible, as it affects the organization. As for the benchmark, I'll have to leave that out, as it would require an implementation in a framework like React for comparison.
Example of a login view composition:

class ViewLogin extends JView{
constructor() {
super().mount_()
}

_init() {
    A.form('formLogin').a(
        A.label('lblUsername').t(LANG.username),
        A.inputText('inputUsername').r(),
        A.label('lblPassword').t(LANG.password),
        A.inputPassword('inputPassword').r(),
        A.div('groupButtons').a(
            A.inputButton('btnSignUp').v(LANG.sign_up),
            A.inputSubmit('btnSignIn').v(LANG.sign_in)
        ),
        A.label('lblRecoverAccess').t(LANG.recover_access)
    )
}

_limits(){
    this.$inputUsername.maxLength = 255
    this.$inputPassword.maxLength = 255
}

}

As you can see, it's necessary to know the names of the elements in HTML, which isn't difficult.

It's also necessary to know the abbreviations, which are few:
a = appendTo
c = addClasses
ck = checked
d = disabled
h = set href
otv = setTextAndValueToOption
p = set placeHolder
r = set required
rmc = removeClasses
rmcls = removeClasses, for view
t = set text
v = set value
for = links another element

I've studied several view rendering methods, and none of them implement this style.
I find this approach very efficient and pleasing.

[felquis]

rapaz....

[addller]

@felquis A ideia é boa ou ruim?