React and TypeScript front ends
We maintain and develop React front ends written in TypeScript, and add new React screens to older business applications one area at a time, so users get a modern interface without a big-bang rewrite.
What you probably want to know first
- Can you support a React application someone else built?
- Yes, provided you hold the source code. We get it building from a clean checkout, bring its packages up to date in small steps, and add tests around the main workflows before larger changes. Front ends built without TypeScript or tests take longer to make safe, and we will say so after looking.
- Can we put a modern interface on our old system without rewriting it?
- Usually. The older application gains an API, and new screens are built in React against it, starting with the ones users find hardest. The old screens keep working until each is replaced.
- What access do you need?
- Read access to the front-end and back-end source code, and a test environment with realistic data if one exists. Nothing changes on the live system while we look.
- What have you built with React?
- We build the web interfaces of our own products in React and Next.js with TypeScript, and we maintain large front ends in older frameworks such as Knockout and AngularJS on client systems.
Who this page is for
This page is for managers responsible for a business system whose web interface is built in React, or whose older interface needs replacing, and who want it maintained and developed by a team that will still be there next year.
What goes wrong with React front ends
A React application ages faster than the server code behind it. Its packages number in the hundreds, and the build tools and libraries move quickly. Left alone for two or three years, a front end can reach the point where upgrading one package forces upgrading ten others, and nobody wants to start. Without TypeScript or browser tests, each change is checked by clicking through screens by hand.
How we approach it
We bring the build and the packages up to date in small steps, each one released on its own, rather than in one large upgrade. Tests are written around the workflows people rely on, using a browser test tool that does not depend on the framework, so they keep working as the code changes underneath.
Where the problem is an older interface, we do not replace it all at once. The application gains an API, new screens are built in React against it, and users move across one area at a time.
Talk to us
Describe the system and what you need. You will hear back from someone who can answer technical questions.
Discuss your React front end 0800 433 7990What we do with React front ends
- Take it over
- A clean build, current packages and a documented release, before any new features.
- Keep the packages current
- React, its libraries and the build tools are upgraded in small steps, with known vulnerabilities fixed first.
- Add TypeScript and tests
- Types and browser tests around the main workflows make later changes safer and quicker.
- Make it faster
- Slow screens are measured and fixed: oversized bundles, repeated requests and needless re-rendering.
- Modernise an older interface
- New React screens built beside an AngularJS, Knockout, jQuery or Web Forms application, one area at a time.
- Accessible and mobile-friendly
- Screens that work on a phone and with a keyboard and screen reader.
How new React screens replace an old interface
Choose the first area
Usually the screens users struggle with most, or those that change most often.
Expose an API
The existing application gains the API the new screens need, with its business rules unchanged.
Build and test
The new screens are built in React and TypeScript and tested against the same workflows as the old ones.
Switch over
Users move to the new screens for that area; the old ones are retired once they are no longer used.
A good fit when
- You have a React front end and nobody left who knows it well.
- The interface on an older system frustrates users and slows them down.
- You need a mobile-friendly interface for staff or customers on an existing system.
Probably not for you if
- You want a new consumer app or startup MVP built from scratch; we work on business systems that are already in use.
Questions we are asked
Why React rather than Angular or Vue?
For new screens we usually choose React because it is widely used and easy to recruit for, which matters when a system will outlive any one team. If your front end is already in another framework and is in good order, we keep it and work in it.
Is our AngularJS front end the same as Angular?
No. AngularJS is the original 1.x framework, out of support since December 2021. Angular is a separate, rewritten framework. Our [AngularJS page](/technologies/angularjs/) covers the move away from it.
Tell us about your system
Say what it does, what it is built on and what is worrying you. We will reply with what we would look at first and whether we are the right people to help.