0

I am new to the angular and I know the basics of the angular. We have a very big project written in plain javascript, HTML, CSS in the front end and spring MVC restful APIs in backend.

Now our plan is to migrate this very big application to angular. But we cannot migrate it in one go as its big and messed up in javascript code. Here javascript code is not written as per the standard practice.

We have decided to just migrate one page initially. What will be the approach we need to follow to do this.

I am thinking of developing and deploying the separate application for that page in angular. Remove the existing page from existing application. Whenever the page is requested in the browser it will be served from the angular separate application. Other pages will be served from the existing application. But here we manage the session for existing application, how I can manage the same session in the angular application also. We maintain session in a browser cookie.

The second approach is to create a separate application for that page build it and integrate it into an existing application.

Please suggest me which approach is better and what are the pros and cons of each approach. Please suggest me if there is any other option or solution.

Our ultimate goal is to move everything in angular not at one time but slowly.

Ravindra Nalawade
  • 41
  • 5

2 Answers2

1

Being an angular developer I would suggest you to use React if you want to convert it in steps. As angular is a framework which means you have to build everything from scratch using its routers, forms, services, modules etc. But If you follow the react approach you can convert your current application into small react components. This won't impact your current application and you can make your application rich in functionality. Most of the react applications are made this way. That's the beauty of react library.

If you want Angular, it is used to build SPA (Single page applications) and migrating is not possible as you have to develop your application from scratch .

Hope this help you out.

Shivam Muttoo
  • 89
  • 8
1

is interesting question and, in my opinion you already have put focus on both possible approch.

About conceptual question, main interrogation point is about :

  • Do you want to use Angular Routing ?

If no, then just go and replace piece of application by Angular Standelone app. Where this will be tricky is about concept behind Angular who deeply recommand you to conceptualize your application as Single page application where each single page application is one piece of your global application.

Let imagine Blog as our current case :

  • You have module with many components, dedicated services to manage article. This will represent your SPA dedicated to Article display, with or without Angular Routing.

  • You have module with many components, dedicated services to manage comment. This will represent your SPA dedicated to comment display, with or without Angular Routing.

  • You have one SharedModule dedicated to all stuff shared for all other modules.

then, step by step, you create all other modules who represent peace of your final application.

By this approch you can have generic module, required on other modules to share some part of your code.

If yes, you really want to use Angular Routing, then, you will have many and many piece where you will have to manage Routing configuration and deal with LifeCycle roadmap of refactoring.

At N time, is external link who go to legacy code. at Another time, is internal link who have to be handle by Angular Routing.

About Session Cookie, no worry is automatically manage by angular HttpClient who will provide to backend all cookies present for current domain.

Other critical points :

Both Angular and React must manage all internal DOM, after bootstraping your application, Framework require to manage entire part of DOM. This can be difficult (but not impossible) when some html come from server (Editor for exemple).

Angular not force you to use all pieces of the framework, if you don't want to use :

  • angular form
  • angular routing
  • angular animation

You always can deal by another way.

Yanis-git
  • 7,737
  • 3
  • 24
  • 41