Summary
We assisted Wood & Company in boosting its FE development by upgrading the legacy code framework and incorporating a component library use into the process. As a result, Wood can gradually improve its code base while developing new customer features.
Challenge
What was the problem
Wood & Company found it increasingly challenging to deliver features at velocity whilst resolving previously accumulated technical debt. They were seeking a solution that would allow them to update their application to the latest technology whilst retaining the ability to deliver business-critical features, improve UX, and streamline the front-end development process.
Solution
How we solved it
Ableneo conducted an in-depth FE development health check, evaluating:
- Code quality
- Dependencies
- Security vulnerabilities
- Build step and deployment
- Team velocity and processes
- Frontend/Backend communication
- Documentation
- Accessibility
- Error handling
The cooperation within the teams (BE x FE) and with an external vendor was also reviewed and improvement proposals presented and adopted by the client.
Based on a shared understanding, we have chosen a component-by-component rewrite strategy as the optimal path for their situation.
The core of this strategy was a component library delivered via Storybook, written to match their exact needs:
- Compatibility with both Vue2 and 3, allowing us to upgrade the existing application whilst building the foundation of the new one.
- Pixel perfect implementation of their design system.
- Maximum type-safety to minimize regressions via TypeScript
- Unit tests for complex pieces of logic via Vitest
- Rigorous documentation for every component, making sure that testers and future developers are not left in the dark.
- Extensive usage of autogenerated type information from OpenAPI backend services to focus and clarify API discussions between frontend and backend teams
- Standardization of commonly used elements to drastically reduce duplicated logic
- Clear delineation of frontend/backend responsibilities
This pattern allowed us to move faster with a tighter feedback loop, resulting in a higher quality user interface, whilst also upgrading the legacy application in a non-disruptive manner.
Technology & tool stack
- Vue.js v2 and v3
- Nuxt v2, Nuxt bridge, v3
- TypeScript
- Storybook
- OpenAPI
- Vite
- Vitest
- Node.js
Outcomes
What has changed
Having agreed on the recommendations provided, Wood & Company has embarked on the gradual FE code transformation path that can be done simultaneously with new priority features development.