Do you implement logic first or focus on styling right-away?
source link: https://dev.to/chrisczopp/do-you-implement-logic-first-or-focus-on-styling-right-away-f54
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Posted on Dec 18
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?
Discussion (3)
Collapse
Expand
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
Expand
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
Expand
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK