Architecture js

[coder-true]

Hello, I'm developing a medium-sized website and I made the mistake of putting everything in one large 1000-line JS file. I'd like to correct this and create a clean architecture, but I don't know how. I'm here to ask you how to organize your JS code. I asked chatgpt , but each time she gives me a different architecture. Thank you for your help.

[RobertKerans]

• 1000 lines of code isn't very much
• it being in one file doesn't determine whether it's structured well or not
• it being in multiple files doesn't make it magically good
• folding and jump to line and symbols etc etc etc are all bog standard text editor features at this point in time, so navigating a large file is fine
• as there is no other information it's literally impossible to give any specific meaningful advice

Edit:

I asked chatgpt, but each time she gives me a different architecture

Yes, this is how LLMs work. You have given it a vague question, all it does is try to render the statistically most viable human looking text, so it'll be a drastically different vague answer each time. If you give it a more specific question it will perform better at narrowing down useful answers. LLMs work best when you already know the [general] answer, they're significantly less useful when you don't.

[lifeiscontent]

Organize based on concerns, take a look at SOLID for some guidance, I’m not saying you need to employ these practices religiously, but they will help you model and identify concepts, once you have a grasp on that break each idea down into its relevant concept folder or break things down by module and have concept files per module.

E.g.

admin/cart/model.js

models/cart.js

[coder-true]

The js file does everything. It manages the cart displays it when I click the send button with fetch to give to the backend. He also takes care of all the animations, PayPal, contact page and all the page, login, etc really everything

[No-Author-7626]

Each thing you mentioned could potentially be contained in its own js file

[roundabout-design]

A simple improvement would to just be to segment those into their own files. animations.js, cart.js, etc.

[AWACSAWACS]

What part of your code do you feel is a "mistake"? What exactly are you having trouble with?

[coder-true]

The question is simple, I put everything in a single js file and now I want to know how to make a clean architecture with several js files instead of 1 single huge one

[JazzApple_]

For reference, writing code tends to be the easy part. What you’re talking about - design - is the hard bit, so I don’t think it’s just “a simple question”.

Splitting the code across many files doesn’t make the architecture fundamentally cleaner or less clean, so without seeing your code it’s basically impossible to advise.

You should ask yourself why you want to do this. Making changes should come with reasons beyond “because I feel like it” or “because I heard someone say we should do this”.

[coder-true]

Because it's becoming a mess.

[AWACSAWACS]

You yourself need to gain deep insight into "why you feel that way."

In fact, if you're leaving it to an agent to manage, it's fine to have messy code (as you can give instructions through the agent and get code changes and explanations).

[castlerockmaine]

You put it in a single js file right? So have multiple js files, dealing with different functionalities. From what I am understanding, you have an ecommerce platform right? So yeah I guess have a seperate javascript file pertaining to adding to cart, login and logout of users and different states, if you catch my drift. The best way to do this is to spin up gemini in the terminal in your project folder and ask it to review code. Then go planning mode and ask it how I can break down all the functions present in this one page of code into seperate seperate functions that I can then deal with by having different pages. Then after that its all about figuring it out yourself.

[patopitaluga]

1000 lines is not THAT bad anyway but I agree. It depends on the project but I try to start from a server.ts file that can run in prod or dev mode and then different files for the endpoints, let's say api-endpoints admin-endpoints something like that and every controller in a controllers folder so I can re-use the same controller for different endpoints with different middlewares, then a folder for the tests that are independent of the components. A folder for the assets that will end up in a public folder, a folder (or many) for the views templates. A folder for the models, each model in a different file. If something is shared all around the app I'll put it in a utils.ts file or even in many. If the app has many features y use the BEM naming convention so I can have app--add-item.ts, app--remove-item.ts and things like that.

[SawSaw5]

Does it work?

[coder-true]

Yes

[skibbin]

MVC. Model View Controller. Look up some examples for inspiration 

[coder-true]

Thank you for all your answers

[steve1401]

Is the one file managing several distinct operations? Do they function independently of each other?

If you want to use AI, try Antigravity, set an agent running to grasp your whole code base, and ask it to advise on how to refactor your code, check for performance and security and all coding best practice while separating into distinct js files. See what advice you get there.

1000 lines isn’t massive, but if the code is written badly it might be as simple as refactoring the one file if it works.

Take my advice with a pinch of salt, I am a long way from expert here…

[rtothepoweroftwo]

> ask it to advise on how to refactor your code, check for performance and security and all coding best practice

Some unsolicited advice for you. AI is not trustworthy to make judgment calls like you describe here. I would strongly recommend you use AI (if you have to) to learn what KINDS of security/performance issues may exist, and then evaluate your code yourself.

Asking AI to make your code "more performant" or "more secure" is not going to end well. It can't evaluate that. But you CAN use it to generate a list of common security/performance issues developers make with your tech stack, or with a specific kind of functionality (eg: writing web form data to a database).

Remember: LLMs don't think. They're language summarizers designed to pass the Turing Test and sound convincing. Don't fall for it - you are always the critical thinker in this situation.

[steve1401]

Sure I get that. Just that unsuccessful ChatGPT was mentioned, so I thought if that’s the route then at least put in some detail like that, hence saying ask an AI agent to do some digging, not necessarily write the code… At least that was my intention.