Reflecting on the Right Path in Project Development

I often ponder whether we are on the right path when undertaking a specific project. I want to refer to an example I have previously described: owning a large component library.

Maintaining such a library is crucial, involving its upkeep, updating, and development to continually meet the latest project needs. It’s not an easy task. Most of you probably face the dilemma of whether it’s better to start from scratch rather than improve and update the current solution. New solutions frequently emerge in the market, each promising to accelerate the development process. Every new solution aims to be faster and better than its predecessor. While it’s essential to keep track of these developments, I believe in not hastily changing the technological stack, especially if it works well. I advocate for comprehensive solutions used by large user groups, as they are well-thought-out.

Our Company’s Approach: Sticking with Vue 3

In our company, we use Vue 3 for front-end development. The release of each “new” exciting framework stirs emotions, making us question whether to continue with Vue 3 or switch to something new to stay ahead. My team and I keep abreast of the latest trends, and as long as Vue doesn’t diverge from our desired path, we avoid a technological revolution. This approach also allows for long-term planning and development of existing solutions, like our component library, which provides many UI solutions and specific functionalities for new projects (such as integration with auth, composable for auth, i18n, and more).

Addressing Library Maintenance Challenges

Having maintained this library for several years, it’s evident that certain ‘growths’ begin to hinder its use, affecting satisfaction over time. How can we counter this?

The key is to regularly and incrementally improve and develop the solution that supports us. There’s no need to allocate weeks for rewriting certain functionalities. We can adopt the small steps approach, tweaking little bits of code with every task from a different project. This allows us to work on other main products while simultaneously developing the library without slowing down the main development process. However, it’s crucial to create a list of functionalities that need to be changed, rewritten, or improved.

How to Implement Small Steps?

I would divide this into stages:

1. Review the entire library for functionalities that:
   • Require changes.
   • We wish to enhance.
2. Document these functionalities using tools like tables, Miro, or others.
3. Prioritize what needs to be done and in what order.
4. Establish stages, e.g.:
   • Refactor UI parts.
   • Refactor logical parts.
   • Enhancements to UI.
   • Logical improvements.
   • New functionalities.
5. Create small tasks assigned to these stages.
6. Maintain a Changelog to understand what has been changed and if there are any “breaking changes”.
7. Begin implementation. 🙂

See, we have broken down the significant task of “refactoring the component library” into stages that are:

• Measurable.
• Easier to manage.
• More enjoyable to develop.

Each stage we complete is a significant success, and we should celebrate it as it brings us closer to the final effect. This shows that we can approach each project in this manner and replace some outdated parts with new ones.

Our Approach to Refactoring

How do we approach such a refactor? Exactly as described above: in small steps. This allows us to continually use the library in every project, with any “breaking changes” being relatively simple to implement.

Practical Example: Refactoring Components

Suppose you need to refactor all components in terms of their properties (e.g., standardizing the props they accept):

1. Review all components.
2. List those that require changes.
3. Create a list of props you would like to be the same across all components.
4. Assign these props to each component, along with unique props for each.
5. Create tasks.
6. Start refactoring component by component.
7. After each completed task, publish the library and update it in your project (small changes).

As you can see, such changes ensure that both the library and the target project are continuously operational without disrupting or slowing down work.

Sharing Small Successes

Share these small successes with your team. It’s your product and your work that significantly impact the main projects. Small steps are great, and combining them with a team you collaborate with can yield incredible results.