As Flock. engineers we meet monthly for two highly productive days, dedicated to learning, problem-solving, and exploring new ideas. These "Hack Days" provide a valuable opportunity to address real technical challenges faced by our clients, promoting collaboration and innovation.
Recently, Niels van Midden, a trusted partner from bol., presented us with a pressing dilemma. His company had transitioned to Next.js within the React ecosystem for server-side rendering, but now sought to leverage Next.js's latest feature: server components. The problem was that all of bol.’s design system components relied on StitchesJS which, in fact, served them very well. Unfortunately the company behind it changed the owner and, under the new management, discontinued investment into StitchesJS. Additionally, as it turned out, Stitches made integration with React Server Components (RSCs) unfeasible. For those reasons bol.’s developer team decided to transition to a CSS solution that supports the use of RSCs.
Over two consecutive Hack Days, a team comprising two bol. engineers and three Flock.’ers rolled up their sleeves to find a solution. Our objective was clear: explore alternatives, select the optimal option, and devise an automated approach for migrating the existing design system.
We evaluated several candidates, including Tailwind, Panda CSS, and Pigment. While Tailwind, although used elsewhere in the organisation, necessitated a complete code rewrite, Panda CSS and Pigment emerged as promising options, both based on CSS in JS. Ultimately, we chose Pigment for its robust backing by a reputable company, mitigating the risk of community-based projects' unpredictability.
With the solution in sight, we developed a migration script to automate the transition process. Leveraging Code Mod, a tried-and-tested tool, we achieved a remarkable 90% automation rate in migrating applications, streamlining the process for app developers.
Additionally, we conducted visual regression testing to detect any pixel-level discrepancies resulting from the migration, ensuring seamless integration within the ecosystem.
Remarkably, within just two Hack Day sessions, spanning four days in total, we progressed from a state of uncertainty to readiness for testing. A final session with the bol. team is all that remains to validate the Code Mod implementation.
We have to say collaborating with our partner on this project has been very rewarding. We are delighted to have provided a solution tailored to their needs, showcasing the power of partnership and collective problem-solving.
Do you find yourself facing a challenge beyond your current resources? Don’t wait any longer and reach out to Flock.! Together, we can unlock innovative solutions through the strength of collaboration.
