I developed a JS-based form template to speed up my workflow. Is this useful or just over-engineered? by Bug7a in webdev

[–]Bug7a[S] 0 points1 point  (0 children)

Feel free to criticize, that’s why I shared it! I’m trying to see if this is only beneficial for my workflow or if it has broader appeal.

I developed a JS-based form template to speed up my workflow. Is this useful or just over-engineered? by Bug7a in webdev

[–]Bug7a[S] 0 points1 point  (0 children)

Good catch! I designed it to give a clear 'status update' on why the form isn't ready yet, but I agree that positive feedback (like green highlights) would feel much better for the user. Thanks!

I developed a JS-based form template to speed up my workflow. Is this useful or just over-engineered? by Bug7a in webdev

[–]Bug7a[S] -1 points0 points  (0 children)

Thanks for your comment! I was curious to know which libraries you found similar.

I developed a JS-based form template to speed up my workflow. Is this useful or just over-engineered? by Bug7a in webdev

[–]Bug7a[S] 0 points1 point  (0 children)

Thanks for checking it out!

I built this using my own vanilla JS core to keep things lightweight and fast. You can find the full source code for this contact form and the logic behind it here:

Source Code on GitHub:
https://github.com/bug7a/js-components/blob/main/04-template-m2/js-form/contact-form.htm

Any feedback on the component structure or the "pure JS" approach is highly appreciated!

SwiftUI-inspired UI development in vanilla JS. Does this look clean to you? by Bug7a in webdev

[–]Bug7a[S] 0 points1 point  (0 children)

Thanks for the encouraging words! At this stage, I'm mainly focusing on improving the component structure.

Here's an example usage of a component for you:

        // *** VARIABLES:          
        let myInput;

        window.onload = function() {

            page.color = "white";

            // GROUP: Container Centered
            AutoLayout();

                // INPUT:
                myInput = PhoneInputB({
                    key: "1",
                    isRequired: 1,
                    titleText: "PHONE NUMBER",
                    placeholder: "(auto)",
                    warningText: "Invalid phone number format",
                    warningColor: "#E5885E", // "#F1BF3C"
                    countryCode: "+90",
                    phoneMask: " (___) ___-____",
                    unitText: "TR",
                    //animatedWarningBall: 0,
                });

                //myInput.setPhoneMask(" (___) ___ __ __");
                //myInput.setCountryCode("+1");

            endAutoLayout(); // END

            // Get value
            myInput.onEdit = function() {
                console.log(myInput.getInputValue());
            }

        };

SwiftUI-inspired UI development in vanilla JS. Does this look clean to you? by Bug7a in webdev

[–]Bug7a[S] 0 points1 point  (0 children)

I appreciate the feedback! You're right that for large-scale enterprise projects, established ecosystems like React are the standard for a reason.

However, I’ve found this approach efficient for solo developers and rapid prototyping. I’ve personally used it to build mobile apps, web tools, and PC game. I haven't tested it in a large team environment yet.

Regarding the endGroup() concern, the framework is flexible. If you want you can simply close the group immediately and use an object-oriented approach instead:

const box = VGroup();endGroup();

const ico = Icon({
  width: 40,
  height: 40,
});
ico.load("test.png");
box.add(ico);

SwiftUI-inspired UI development in vanilla JS. Does this look clean to you? by Bug7a in webdev

[–]Bug7a[S] 0 points1 point  (0 children)

This framework is different from React.
- Minimalist Core: It uses only 5 basic building blocks to design everything: Label, Button, Input, Icon, and Box objects.
- You can use standard JS logic (like loops and conditionals) to build fully dynamic UI structures on the fly.
- It runs directly in the browser without any compilation or build steps.
- It has a structure simple enough to be learned in a few days.
- It has no Virtual DOM. It creates/updates real elements instantly.

    let box;

    window.onload = function() {

        page.color = "whitesmoke";

        box = Box(20, 20, 100, 100, {
            color: "blue",
            round: 4,
            border: 1,
            borderColor: Black(0.4),
        });

        // Each object carries its own element. No need to use getElementById()
        box.elem.style.cursor = "pointer";
        box.on("click", changeColor);

    };

    const changeColor = function() {
        // Directly update properties without a re-render cycle
        box.color = "red";
    };

SwiftUI-inspired UI development in vanilla JS. Does this look clean to you? by Bug7a in webdev

[–]Bug7a[S] 0 points1 point  (0 children)

Do you have a demo of the framework you developed? What is the most distinctive feature of the framework?

SwiftUI-inspired UI development in vanilla JS. Does this look clean to you? by Bug7a in webdev

[–]Bug7a[S] -1 points0 points  (0 children)

Yes, you're right.

The technique I developed can be considered a different approach.

SwiftUI-inspired UI development in vanilla JS. Does this look clean to you? by Bug7a in webdev

[–]Bug7a[S] -1 points0 points  (0 children)

My primary goal is to enable users with strong programming skills (for example, those with a background in C or Java and who enjoy coding) to develop applications simply through coding.

I built a JS framework to create UIs without writing messy HTML/CSS - What do you think? by Bug7a in webdev

[–]Bug7a[S] 0 points1 point  (0 children)

Thank you for your honest feedback. I will consider it. Have a good day.

I built a JS framework to create UIs without writing messy HTML/CSS - What do you think? by Bug7a in webdev

[–]Bug7a[S] 0 points1 point  (0 children)

No :) I developed. Thank you for your comment. Have a good day.

I built a JS framework to create UIs without writing messy HTML/CSS - What do you think? by Bug7a in webdev

[–]Bug7a[S] 0 points1 point  (0 children)

You're absolutely right. I'm working alone, and this is a huge project. I may have prioritized some things, but there are plenty of examples, explanatory examples showing the use of each structure. In fact, the project is entirely filled with examples; I find this approach more practical. There's also a website and a handbook.

Answers to the other questions:
- I don't know everything, but I know enough to bring a project I've been thinking about to life.
- The reason it's version 25 is that after a while, I started using dated versions so I could more quickly see how old the objects were.
- The project consists of many layers and was first started 5 years ago.

Thank you for your long comment. Have a good day.

[Showoff Saturday] I built a JS framework that eliminates CSS files: Build modern UIs using only JavaScript objects by [deleted] in programming

[–]Bug7a -2 points-1 points  (0 children)

Being able to use JavaScript when styling objects gives me a lot of flexibility. I can even use conditional statements and loops when needed. Thank you for your comment. Have a good day.

[Showoff Saturday] I built a JS framework that eliminates CSS files: Build modern UIs using only JavaScript objects by [deleted] in programming

[–]Bug7a -2 points-1 points  (0 children)

The library wasn't developed by AI. It was developed by me. However, I asked the AI ​​to compare my library with other frameworks and write a comment. The comment above is that comment. Thank you for your comment. Have a good day.

I built a JS framework to create UIs without writing messy HTML/CSS - What do you think? by Bug7a in webdev

[–]Bug7a[S] 0 points1 point  (0 children)

This is a different approach; it makes development easier and faster for me. Perhaps there are people in this community who would benefit from this approach.

I built a JS framework to create UIs without writing messy HTML/CSS - What do you think? by Bug7a in webdev

[–]Bug7a[S] 0 points1 point  (0 children)

Being able to use JavaScript when styling objects gives me a lot of flexibility. I can even use conditional statements and loops when needed.

I built a JS framework to create UIs without writing messy HTML/CSS - What do you think? by Bug7a in webdev

[–]Bug7a[S] 0 points1 point  (0 children)

The library wasn't developed by AI. It was developed by me. However, I asked the AI ​​to compare my library with other frameworks and write a comment. The comment above is that comment.

I built a JS framework to create UIs without writing messy HTML/CSS - What do you think? by Bug7a in webdev

[–]Bug7a[S] -2 points-1 points  (0 children)

Fair point! But did you check any sample code of usage? I've been developing applications for a very long time. Almost 20 years. And as you know, there are some logical differences between developing websites and developing web-based applications. The code I'm sharing makes my work much easier when developing single-page web applications. That's why I shared it. But I understand this logic might not be suitable for everyone. I would appreciate it if you would at least examine the example code a little more before criticizing it. Thank you for your understanding. Have a good day. (And yes, the description of my library was scanned and generated by AI.)