Application front-end assessment in Wood & Company


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.

Used services

Feeling inspired?
Start the change today!

Contact us

Related