DEV Community

chris-czopp
chris-czopp

Posted on

Do you implement logic first or focus on styling right-away?

Hey React people! I'm just curious how you approach implementing dynamic UI which requires things like: app-state management, fetching data from API etc. For instance, I first focus on app-state, actions, any potential state kept in URL query params, dependencies in useEffect to re-fetch data upon action completion etc. Then, I write basic unstylled JSX to see it functional. Once I can click through major user journeys, I work on styling. What's your way?

Top comments (3)

Collapse
 
fjones profile image
FJones

Focusing solely on react, because my workflow for other frameworks is entirely different:

I implement logic first, but I develop UI first. That is, I form the concept and expected DOM before implementing the actual logic. This is because the logic may dictate certain aspects of the ultimate code structure, but it has to play well with the design. Done well, this reduces the styling in the third and final step down to a few instructions, without having to rearrange things too often to fit the blend of elements and logical units.

In rare cases I'll style a non-functioning component first, then attach the logic to it. This is usually done for things like iconography or components with multiple visual styles (e.g. user cards that exist in two different display modes). Here, the logic often ends up in a different component or module anyhow and gets attached to the purely visual component through a purely logical component.

Collapse
 
chrisczopp profile image
chris-czopp

Yeah, it makes a lot of sense to not to have over abstracted logic which isn't in line with the design. Sort of modelling building blocks before putting it all together.

Collapse
 
neomrc profile image
Marc

Depends, for me if the task will be too logic intensive I will try to develop the logic first and create unit test then develop the UI to try it in action