React developers: Logic and Components
Introduction
Once I receive the task to update my old front-end work, both logic, and UI. I couldn’t escape this task since it has tricky logic and it would take some time for other developers to understand how my code is working. It was a long time since I didn’t make any components, so I was not very happy with the fact that I need to write some CSS again. But what prevents me from outsourcing the UI part?
Storybook to rescue
I already heard about Storybook and decided to check it out. The idea of making interactive documentation for our components seemed to be very useful. So I decided to split the page into components, and for each one made a file with an interface. Like this:
import React from 'react'// design spec: https://design.of.the.component
export default ({ onClick, active, text }) => (
<div>
JSON.stringify({ onClick, active, text })
</div>
)
Then I formulated the task and list all stateless components that I need. When the developer finished components — I was able to place them on the page and connect to the logic part.
After some time I found that Storybook was useful not only to outsource components development, but also it helped to write less of same components, simplify the process of developing components since you can change them in real time and see the result immediately. Also, knobs are very helpful, because it serves as interactive documentation. And if you have few themes, for example — dark and light, in your app, you can add a switcher to see how component looks in the specific theme.
Two types of a front-end developer
Front-end apps are getting bigger and more complex. The part of business logic goes from the back-end to front-end. Maybe it is time to make specializations in front-end development — logic and components developer. The logic developer will open Storybook the same way as he may open documentation of some popular components library and will need to write styles only for placing components on the page. The components developer will receive a description of the components and will implement them without bothering about actions, reducers or sagas.
For Medium readers, I provide a Udemy course How to Start React Project: Best Practices for 9.99$. The goal of this course is to share with You my findings of the last few years about what steps and decisions are better to make at the beginning of development so that you will have a good starting point for your new project.
Reach the next level of focus and productivity with increaser.org.
