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?
chris-czopp @chrisczopp
About: Senior/Lead Fullstack Web Developer: 10+yrs, React/solidjs, NodeJS, TypeScript, AWS
Location:
United Kingdom
Joined:
May 20, 2020
Do you implement logic first or focus on styling right-away?
Publish Date: Dec 18 '21
3 3Comments 3 total
FJonesDec 18, 2021Focusing 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.
chris-czoppDec 18, 2021Yeah, 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.
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