CODEWITHSUNDEEP
angularjsangular
Milad
Milad

Reputation: 89

Angular2 organize a large application into smaller apps

Problem to Solve

At work, I inherited ownership of a (legacy) very large web application (that spans multiple scrum teams and dev teams). One constant pain-point of the current large app, is that whenever one of the scrum teams updates their respective area of the application, that team has to deploy the entire app. One thing we started doing to alleviate this, is having teams create their new functionality outside of the large app, and then, just have a page inside the large app that makes an ajax call to the new app and simply injects the HTML into the large app. That way the team can just deploy the new smaller app when making changes without having to deploy the entire large application (that spans other teams).

The Good news

We currently thinking about re-writing/redesigning the large application, and one of my goals from a development perspective, is to organize it into smaller applications/code-bases, so that each team can deploy their code without having to deploy a large app that spans multiple teams. One way I plan to achieve this is to leverage multiple services to fetch data. So that would introduce one layer of separation.

From client-side perspective, one of the technologies that I am leaning heavily towards is Angular 2, especially for the separation of concerns that Angular 2 offers (components, templates, directives, etc.). I understand that I can break up an Angular 2 application into features, components, etc., but, I believe, in the end all of those still have to live within one application/code-base that all get deployed out together. Is there a way in Angular 2 to breakup a large portal/suite into smaller apps, and have the apps interact with one another. For example, maybe one shell app can be shared (for layout and navigation), but, each area of the portal/suite can be broken up into smaller apps?

Any thoughts on best ways to approach/structure this from an Angular 2 perspective are greatly appreciated. Also, if this is definitively, not possible from an Angular 2, perspective, that would also be helpful information.

Thanks in advance!

Upvotes: 8

Views: 1287

Answers (1)

Rotem jackoby
Rotem jackoby

Reputation: 22198

I'll try to help from multiple point of views.

  1. Think about using Angular components as Custom Elements with “Angular Elements” - check this out: https://medium.com/vincent-ogloblinsky/export-angular-components-as-custom-elements-with-angular-elements-a2a0bfcd7f8a

If this approach doesn't fit your needs and you can only serve only one angular application, try:

  1. If some of the application pages can be open in a different tab and leave independently there - think about splitting this huge app into smaller, modular angular application. The user doesn't have to notice the differences. if you want to use the same url for all tabs - serve the application from a reverse proxy.

  2. If no external tabs in the flow, then you probably cant split the angular application into smaller apps, but you can build the app in a modular structure so each team takes a different application context (separate feature file) and one team will take the "shared" and "core" entities. Each team can have a separate branch with a team only privileges, and only the FE Lead can approve the PR into the master.

  3. Another option which i haven't tried, is to split the features code into different repos - but in this way you'll have to invest in some pre-compiling scripts that can pull the code from each repo before starting the app.

  4. If there is some server side logic in here - export to different microservices.

    1. I see that you mentioned some HTML injection - i'm not sure how you plan to do it, but consider using a template engine.

Upvotes: 0

Related Questions