Sensible approach to rewriting frontend of website

Question

We are looking to do a full rewrite of our backend E-commerce platform and as a consequence of this the front end will also need to be rewritten. The front end is a monster of javascript that is to put it bluntly: out of control.

The plan is to break up our backend monolithic system to a series of microservices gradually instead of launching into a full blown rewrite all at once. On the backend we can peel off functionality and break it out into a microservice fairly easily. When we do this the front end will require an update as the old system typically returned HTML and we wish the new system to be JSON REST based.

So we wish to use a sensible front end framework like React + flux but I'm struggling to think how we can apply our incremental approach we are taking on the back end to the front end.

Can we run both front end frameworks at the same time, the new one handling elements we have rewritten on the backend, or is this simply a recipe for disaster? The only other options I can think of pushes us down the path a full rewrite in one go instead of the incremental approach.

tl;dr Our backend system is suitable for an incremental rewrite in a modular fashion but the front end is not. How can we avoid a complete front-end rewrite?

Answer 1

Can we run both front end frameworks at the same time, the new one handling elements we have rewritten on the backend, or is this simply a recipe for disaster?

A recipe for disaster in my opinion.

I believe you can approach this problem incrementally, although it will involve additional work that will ultimately be discarded, however it does reduce risk.

Phase 1

Rewrite the backend system.

Phase 2

Create an adapter that sits on your new backend system, churns out the html, and allows it talk with your original JS frontend.

Phase 3

Gradually replace the font end code, bypassing the adapter.