We are trying to migrate from a monolithic application to a micro-services one. On the backend we did a lot of work and now we start splitting it into REST micro-services with a well defined JSON API. Also we have an Auth service and a gateway.
But in the frontend part we still have an old solution done by JSP, Spring MVC (Controllers), Jquery 1.10 and Datatables, Bootstrap 3, HTML5 and some Js spaghetti.
We have a main menu and when we click on one option, a Controller is called via AJAX. The Controller's response is injected into a div, as a rough approach to a SPA.
We are considering splitting front-end into small parts with its corresponding micro-service and modernize them with some JS framework or library (maybe Angular, but we can use a different one in each micro-frontend).
The problem I found is how to do a progressive migration without stopping developing on the product.
The first thing I considering is doing a Custom Component for each functional part that is injected in the main div. This part will be moved to its corresponding micro-service and when main product do an AJAX call, the Custom Component will be injected.
I suppose that the main product still will have to do the security stuff, “routing”, holding CSS, Jquery and shared JS, etc.
Is this a good approach?
How and where do we have to put all common CSS style, Bootstrap JQuery, spaghetti JS, etc?
How will be the Custom Angular component be injected? Do we have to do SSI or just import a kind of bundelized Js?
How do we maintain the style and Js compatibility? Is it possible to start an Angular 10 project with a very old Jquery and CSS and plain JS?
What about routing? Maybe we can do any improvement in menu part (i.e. make a dynamic menu with configured routes before replacing it by the final Angular application).
I know there are a lot of general questions, but I need some orientation to get the best and easier first step to reach our goal. I read this four links to make up my mind on this topic:
Micro Frontends - extending the microservice idea to frontend development
Micro Frontends – An Enterprise Use Case
Micro Frontends: Solving the Legacy JavaScript Problem
Micro-frontend Architecture: Replacing a Monolith from the Inside Out
