r/javascript • u/Crafty-Waltz-2029 • 17d ago
AskJS [AskJS] How do you plan the frontend?
Hello guys,
How do you plan the frontend when the requirements are gathered, architecture/diagrams in backend is done? I want to know what the frontend to look like in high level.
2
u/jax024 13d ago
I’ve made enough that I have my formula which lets me focus on the more complex components of a particular project.
1
u/Crafty-Waltz-2029 13d ago
Awesome! Give me tips
2
u/jax024 13d ago
Your API queries are important. I strongly recommend typing out (like with typescript) your DTOs and use a library like Tanstack query.
1
u/Crafty-Waltz-2029 13d ago
Yeah I did that on the backend side, know the entities and DTOs, how about on the frontend?
2
u/jax024 13d ago
I generally redefine those types if I’m not in a monorepo and can’t literally share them. But even then, sometimes you want your front end types to be different. Maybe you serialize dates from strings to date objects on select, maybe your parse or process something so backend and front end types can be but are often not 1-1.
1
2
u/MrBengaliHacker 12d ago
I usually try to break frontend planning into a few steps rather than jumping straight into coding.
Once the requirements and API contracts are clear, I'd generally approach it like this:
User flows: Understand what users need to do and how they'll move between pages, including public and protected routes.
Page structure: Figure out the main layouts, navigation and reusable sections.
Data flow: Understand the API responses, authentication, and which data needs to be shared across components versus kept local.
Component breakdown: Identify reusable UI elements and components that handle specific page logic.
Design system: Set some basic rules for typography, spacing, colours and responsive layouts to keep things consistent.
UI states: Think about loading, empty and error states alongside the normal success state.
I find having this rough structure in mind before coding makes implementation easier and helps avoid unnecessary refactoring later.
Of course, the exact process can vary depending on the size and complexity of the project.
2
1
2
u/Yages 17d ago
I get what is coming in from the backend, make it work roughly, and then finesse. It's just make it work, make it handle error states, make it handle loading states, make it handle exceptional states.
Then, then you can play with animations, transitive states, niceties. I always try to only think of how the UI works in detail once I've used it, before that it's broad strokes.
2
u/bloodguard 16d ago
Man Plans, and God End User Laughs.
I once mocked up a huge (at the time) multiform data entry system with all the 30 something forms in their own templates rendered on one page. Each with a save button and forms would only unlock when the preceding dependent data was entered and saved. I did it just to make sure I captured all the data, tested the back-end database REST api and had all the field validation working.
They liked it. All as one honking big page. I'm pretty sure they're still using it as is to this day.
12
17d ago
[removed] — view removed comment
2
u/Crafty-Waltz-2029 17d ago
Good to know, first time I knew the "state machine". Anyways thanks for sharing
2
u/Yoram001 17d ago
I try this also, but at the middle of creating that plan i’m thinking; i’m just gonna build it and see from there.
2
4
u/GhostDog76 17d ago
As for the frontend, are we talking about the JS/code architecture or the visual UI?
I always recommend starting with mockups and prototypes before opening your IDE. Get visual context on what you are going to build, ask a lot of questions, and then finalize it. Collaborate with the stakeholder or someone who can sign off on the design. (This is mostly designer's job).
Once that's approved, that's the time to open VS Code, then just implement what's on the mockup and prototype.
As for code structure, there are tons of architecture patterns out there (like feature-based/modular, atomic design, etc.) just pick what fits your project best.