Building the same components over and over
Hey there,
As a freelance front-end developer and indie hacker, I’m tired to fatigue to build the same components over and over.
For example, I start a freelance gig for a startup, they need a button for their design system.
I start googling “react typescript button”, then I go to material UI or whatever framework with a button, start inspecting and copy/past code. Or I search for a button in one of my GitHub repos. But they use a different CSS styling framework so I extract the style and rewrite it. And they need a button with an icon inside so I need to adapt the code again. etc. 😴
Buttons are quite simple and I can reuse one quite rapidly, but what about more complex components?
This type of routine is applied to large parts of components that I have already built in the past, I almost always need to rebuild them again, and adapt them for the project/enterprise.
I want to know if some of you have the same frustration as me. If yes what do you do to fight this?
What do you do to maximize components reusability across projects?
PS: this question works for designers too!
Develop your own components & design systems.
Over time, I've developed an extensive list of components I repeatedly use across projects. I need to customize some of them for a certain project every now and then, so I do.
If that customization seems like something I might need again, I add it to my "components" GitHub repo.
I think that process is fine. Projects are always slightly different. After all, if they weren't, there would be no work for Front-end developers.
I'm not too fond of 3rd party UI libraries because then development focuses on overriding instead of crafting a meaningful design system for the project needs.
I will do this, starting with a set of reusable code to build React components. It's what I miss in my process.
I share the same opinion as you for UI libs, my own lib of "low-level" components without style would be perfect.
The whole process is broke.
Every company has a "custom" solution that makes it harder for new employees to onboard etc.
Also if design makes a change to a button, as a developer you have to implement it (even though tools like figma have the CSS properties)
I've been doing FrontEnd Dev since a while now and have tried many Components-libraries or tools like Bootstrap or Material-UI. It's been a big help with such tools but it's not something where I could save my custom components.
I would recommend you to try 3rd part UI libraries which can help save or store ones custom components. Some such tools I've came across are Bit and Fast.
With Fast (fast .design) it's easier to edit the component in it's editor and then use it in the project. I would say it can be called a better version of Bootstrap with options to edit the components to get the code.
Another tool i found was Bit (bit .dev). Apart from providing options to create custom component snippet with any framework it provides, what majorly helped me is that it lets you quickly publish reusable code to Bit Cloud which can be done from any existing project and later used in other project.
We use a monorepo for that. Makes things quite easy.
If you don't enjoy building frontend components, you might not like your job.
I'm more on the backend side of things, but I'm building the same stuff again and again. emails here, tables there, crud this, the same 5 database queries, connect this to stripe, ci cd, use the same 5 cloud services again and again. And I fucking love it.
Code reuse is mostly wishful thinking. Especially across projects. As an application developer it just does not happen typically. Quite the opposite, if you try to force it you just make things harder for yourself.
Even worse, the problems it causes are kind of hidden. You're just slower... but thats fine, just the way it is.. this is a complex app after all. This is also used in that other app so you just cant touch this part..
Generally I think I our current look at software is still too much on the "build it and then its done" side of things. Maybe our systems would be better if we threw them away every 3-5 years and rewrote the whole thing.