javascript - Front end "micro services" with Angular 2 - Stack Overflow

admin管理员组

文章数量:1346203

I'm looking for a solution for a bit of an odd situation. Let's take a quick look at the angular2-seed project so I can better explain: .

In that project, we have 3 isolated modules - about, home, shared. What I am looking for is a way to isolate development of these, so we're ultimately able to release each piece independently. For example, say Team A is working on the about section, and Team B is working on home. Work is plete for each, and we're ready to release, however we realize the about section is missing a critical piece of functionality, however we still want to release the change to the home section. What we're looking for is a way to achieve this.

Here are some solutions already explored, but I'm not really happy with:

• Have pletely different applications for home/about (in my eyes, this eliminates many of the benefits of a SPA).
• Have each module (about, home, shared) roll up into it's own NPM package. When we go to deploy, we would have some way to orchestrate pulling in all the published NPM packages for these modules.

I'm looking for a solution for a bit of an odd situation. Let's take a quick look at the angular2-seed project so I can better explain: https://github./mgechev/angular2-seed/tree/master/src/client/app.

In that project, we have 3 isolated modules - about, home, shared. What I am looking for is a way to isolate development of these, so we're ultimately able to release each piece independently. For example, say Team A is working on the about section, and Team B is working on home. Work is plete for each, and we're ready to release, however we realize the about section is missing a critical piece of functionality, however we still want to release the change to the home section. What we're looking for is a way to achieve this.

Here are some solutions already explored, but I'm not really happy with:

• Have pletely different applications for home/about (in my eyes, this eliminates many of the benefits of a SPA).
• Have each module (about, home, shared) roll up into it's own NPM package. When we go to deploy, we would have some way to orchestrate pulling in all the published NPM packages for these modules.

• javascript
• angular

Share Improve this question Follow asked Oct 6, 2016 at 19:26 SpareWalrusSpareWalrus 15611 silver badge44 bronze badges 3

• What is your question, exactly? How isolated are the about and home modules? – KTCO Commented Oct 7, 2016 at 13:16
• @KTCO that's part of what I still need to figure out, which will likely be tied into the final solution. The business wants to be able to release new features within the application independently from one another, rather then releasing the entire application at once. Since each piece of functionality will be owned/worked on by a different team, they want Team A to be able to release their new code without effecting Team B at all. As mentioned in the title, they really want to achieve a "micro service" architecture on the front end. – SpareWalrus Commented Oct 7, 2016 at 13:51
• @KTCO While I have my reservations about this method on the front end, I want to at least explore options before straight up saying no. – SpareWalrus Commented Oct 7, 2016 at 13:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Orchestration:

Have each team build a ponent library (NPM) and pull those into a single Angular 2 application. That way, the teams can develop using microservices principles, but you can deploy a SPA monolith which reduces plexity.

Large ponent libraries should have multiple bundles and modules so you can be selective about what you pull in.

Communication between microservices:

If necessary, the ponent libraries can municate over a back-end message bus.

If direct client-side integration is required between the ponent libraries, then you need a 3rd ponent library that about and home depends on, which contains a light-weight injectable message/event service. You can implement that service using RxJS Subjects.

A javascript meta-framework could work for you. Here this interesting project It takes inspiration from React ponent lifecycles by applying lifecycles to entire applications.

Some features:

• Use multiple frameworks on the same page without refreshing the page (React, AngularJS, Angular, Ember, or whatever you're using)
• Write code using a new framework, without rewriting your existing app
• Lazy load code for improved initial load time.

I hope it helps you to go in the right direction.

本文标签： javascriptFront end quotmicro servicesquot with Angular 2Stack Overflow