We have an web app (not a SPA but headed that direction) which uses 2 technologies: Razor (MVC) and Angular (Razor pages are being rewritten in angular over the next year so it has to be this way due to a lack of resources for a full migration).
Currently the angular pages are hosted in a separate web app (but under the same sub domain), so when MI1-MI3 are clicked, a new tab is launched which loads the corresponding angular page. The same is true when navigating back to the Razor page.
This means, that the Side and Nav(title bar) are duplicated within both applications and styled accordingly to give the appearance of being in the same app.
I inherited this code and don’t like this design as it breaks the experience for the user and leads to code duplication (the side bar menu items have some permission logic)
What I’d like to do is:
- Always keep the user in the same tab, refreshing or redirecting the page as necessary until we can get to a true SPA.
- Avoid the code duplication for the side bar and title/nav bar.
I’m considering a couple different approaches and would appreciate some feedback/guidance here:
- Razor application serve as the parent application and host the side and title bar in a content area that loads the either the Razor or angular page accordingly. If this is the approach:
- Would an Iframe be suitable for the content area? What other methods can be used to pass data back and forth between the content area and the side bar? (SSO is involved so handing a JWT is necessary between pages)
- Re-write the parent app as angular and do the same as option 1 but in reverse, so the same question persists about the content area? (No time or resources to take this on, and the Razor portion is tightly coupled to the menu/side bar – decoupling is another ongoing effort)
- Continue duplicating the menu and side bar (unacceptable, as the potential for bugs, tech debt etc is quite high)
Any suggestions here? I’m looking for feasibility here especially with the iframe/new-suggestion idea.
Also, I’d like to merge the code bases to have them all built and deployed as a single web app – possible? I believe having an Angular folder within the MVC project would suffice? Caveats?
