Considerable things for a front-end story development
Today we will discuss how to start working on a design while developing front-end content for an application. Actually, this blog is more me than you, cause I often jump into coding right after getting a story/design to work on.
But in principle, one should not do that. It doesn’t take long to sit for some time and think and analyze the tasks. So, I thought if I write a blog on this I’ll remember to work accordingly next time 😁.
A wise person once said, “When a developer receives a task/story to work on he/she should take a moment to think about the task and design a flow in mind. It helps to plan better and implement on time”.
How do we plan?
The followings are some key considerations that help you organize your work in a better way,
- Divide your task into smaller parts
- Ensure the components of the design
- List considerable details for each component
- List required unit tests
- Highlight parts where backend API is required
- Highlight parts where any translation is required
Let's Discuss these topics with an example. Suppose Tim got a story to develop the following page with IBM Carbon React. Now we will see how he will follow the above considerable things 😒?
Divide your task into smaller parts
After receiving the task Tim divides the task into four parts with their possible times to work on those. Tims works very fast 🤓 but these timing can be different for different individuals.
Ensure the components of the design
Once Tim divided his tasks into smaller parts he investigates the components required for each task. As we are using Carbon React for this example we will select all carbon components for each part.
FEX: As carbon already has a UI shell right panel component which makes Tim’s job easier and he quickly identifies the component required for part 1. He can easily add the sample code of SideNav Rail w/Header from the carbon storybook to his local development env. and start modifying that as required. While ensuring the components Tim also keeps links to access quickly.
His final components list is
List considerable details for each component
Now it's time to list some considerable aspects which will help Tim to identify crucial details. For the above example, Tim can consider thinking about the following item and make a list,
- What is already covered by carbon, and what else is required (CSS styles)
- What should be the onClick operation for each clickable
- Are there any other components required that appear on a condition
- Which component needs more logic
- etc….
List required unit tests
While developing even a small part of the UI one should always consider thinking about the possible unit tests. Well, unit text can be different for different applications. Sometimes developers want to test each text, button, etc., and sometimes they only add tests to some crucial parts. In Tim’s case, Tim can enlist some considerable unit tests following his team's preferences and keep updating the list from time to time.
Highlight parts where backend API is required
This is a very important part of task division. If one can initially identify what he needs from the backend it saves a huge time and also helps the backend team to work in parallel. FEx: For part 3 there is a set of grid items and their data seems to be coming from the backend, so Tim must consider reading and reflecting the actual data from the backend to the UI. Once he makes a list he can also share it with the backend team so that they are also updated on the UI requirements.
If backend is not ready yet Tim can try implementing these with mocked data.
An example list of backend API highlighting.
Highlight parts where any translation is required
If the example application is developed for users of different languages Tim needs to identify all translatable text from the design page and add those items as entries to the translation file. FEx: Dashboard is a translatable word, and entry can be {“dashboard”: “Dashboard” }, while CAD is not a translatable word.
This whole process might take a few minutes for Tim, but it will save a lot during development.
Helpful Links
- https://carbondesignsystem.com/
- https://reactjs.org/docs/testing.html
- https://www.guru99.com/unit-testing-guide.html
Appendix
FEx — For example
Gifs are taken from
https://www.behance.net/gallery/39926149/Jumping-GIF-Animation
