Question: Possible to split out into multiple SPAs

[nigel-dewar]

Hi Robert,

First of all, your solution here is awesome! Its what I have been looking for.

I have a question please. I have a need to divy out work to multiple developers on a project I am working on. Its a large application. I dont like the idea of building on massive SPA, because there is alot of moving parts (features) Each feature being complex enough to be its own application. The technique of running multiple silo'd SPAs as was done with angular 1.x is good in this case. Essentially I want to take a microservices approach but for the front end. Each team being responsible for an individual area or domain and only that area. Breaking apart the complexity.

I am wondering. its it possible with your current setup, to have multiple Angular 4-5 applications included in source control ( which I would give to different teams ), and have the build of these angular projects, output into the wwwroot folder.? Essentially, Im trying to figure out if this is possible?

My objective is that different teams can work on different features ( which would load into the respective MVC pages ), and keep things logically seperated.

I would have a team responsible for Infrastructure ( which would build the common components - cross cutting concerns of the application ) - which the other teams would consume.

Do you think this kind of setup might be possible?

Kind Regards

Nigel D

[RobertDyball]

Hi Nigel, First - sorry to take a while replying, I saw your message come in and then lost it. Wanted to confirm something before I replied. second thank you for your praise, but please don't rush headlong into this. I have just this last week discovered system.config.js is deprecated. I have spent nearly 2 years on this, from Angular 2 through to 5 and even got 5.2.11 to work, but when I tried to get 6.x working I have been constantly frustrated with RxJs issues, and tracing back found that key components simply weren't there or were not updated. Over the last 12 months since the articles in Code Project I have been trying various Angular Bootstrap libraries, and had PrimeNG working pretty well, fixed various date / time issues, added graphing library and while I was not too fussed if something needed work, had wanted to get the helper methods working to push out the various date, time pickers etc., as needed. In all of this I had assumed system.config.js would be around forever, but after tracing back the issues, found someone had announced the deprecation back last November (I missed that one!) and now my manager a work has 2 projects here ready to go .. (one new that they need done yesterday, and there other a major refit of existing app) you get the idea, I feel my best friend has let me down. So right now I guess you are feeling something like this too. Again my apologies. I did not see this coming, but cannot also see any other way out but to go either Vue (which is kind of like Angular 1, but made by a team member of Angualr 2 team who jumped ship, has some followers but needs lots of different low level bits to make it work, it's also mostly JS not TS so to me after using Angular 2,4,5 .. in TS - really not looking forward to JS), alternately I bite the bullet and go webpack using the new Asp.Net core 2.1 / Angular 5/6 templates that Steve Sanderson & buddies from Microsoft have been brewing - you need VS 15.7.? or 15.8 (preview version) to get these, but they do look good. I think i 'll be using this VS 2017 preview asp.net core 2.1/Angular template now - though it doesn't have tag helpers and goes against all that I wanted with tag helpers, I really can't see any other way out of it. It will mean I get a cross-plat capable app, asp.net core could be deployed on linux, etc. re your query about teams - you should still be able to get good ability to split task s up in teams, the backend will be all asp.net core web api stuff, while the front end in the MS template framework is all angular 5 using webpack. There are some nice things backed in, ability to dynamically push out changes while developing, auto build etc., and there is the possibility of dynamic code compile for pre-rendering javascript (though I have not looked into this, as it is likely to get complex, and I need to keep simple for my team here). My dream of tag helpers may not work, but with Angular4/5/6 I will still get typescript, and so ease the JS pain Now I am under the pump, as it were, I'll need to simply use it as is, adding token support for authentication. (what gripes me was I was much of the way to getting two factor auth. running in my old framework) later I will look at using directives to drive some of the common code blocks - in place of helper methods, won;t be as clever - data driven etc. The other thing I'll use is an asp.net core view that I'll load in as if it is client side script, and I'll use this to inject some server side data directly. regards Robert Sent from Outlook<http://aka.ms/weboutlook>

…

________________________________ From: Nigel Dewar <notifications@github.com> Sent: Saturday, 5 May 2018 10:47 AM To: RobertDyball/A2SPA Cc: Subscribed Subject: [RobertDyball/A2SPA] Question: Possible to split out into multiple SPAs (#10) Hi Robert, First of all, your solution here is awesome! Its what I have been looking for. I have a question please. I have a need to divy out work to multiple developers on a project I am working on. Its a large application. I dont like the idea of building on massive SPA, because there is alot of moving parts. The technique of running multiple silo'd SPAs as was done with angular 1.x is good in this case. I am wondering. its it possible with your current setup, to have multiple Angular 4-5 applications included in source control ( which I would give to different teams ), and have the build of these angular projects, output into the wwwroot folder.? Essentially, Im trying to figure out if this is possible? My objective is that different teams can work on different features ( which would load into the respective MVC pages ), and keep things logically seperated. I would have a team responsible for Infrastructure ( which would build the common components - cross cutting concerns of the application ) - which the other teams would consume. Do you think this kind of setup might be possible? Kind Regards Nigel D — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<#10>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AHYVbUQQPYTotlgREeVQ8HYuFiTQCZUBks5tvPa8gaJpZM4Tzbev>.

[nigel-dewar]

Hi Robert, thanks very much for your reply.

I did some extra research after I wrote this request to you, and found there may be some options in the works regarding Angular coming down the pipe that could make life easier for us.

The SharePoint guys have been having a few struggles with Angular as well. They are holding out for Angular elements as they feel it will solve a number issues currently causing issues.

I did find some interesting stuff whilst researching 'micro-frontends', you may find these interesting
https://github.com/CanopyTax/single-spa
https://github.com/me-12/single-spa-portal-example

Essentially these guys have figured out how to run multiple different SPA frameworks together in one page, and in the spa portal example they use Redux to connect the various SPA components up together. Its an interesting proposition isn't it?

In the context of your project, I'm wondering about using Angular elements and housing these components within MVC pages. MVC pages could act as the 'shell' or 'main container' with which to take advantage of server side goodness. If an MVC page loads its models into say a Redux store, and that store feeds into multiple SPA components across the application that may provide some level of isolation where multiple teams may focus specifically on their bits of work and just ensure their components correctly implement the contract with the redux store which is hydrated by the MVC page on initial page load.

As far as Angular is concerned. Honestly Im getting tired of its lagging behind or constant issues faced with browses, cant do this, cant do that. I realize front end moves fast but I'm very tempted to make the jump to React as many devs have done or starting to do as they get sick of it as well. React just seems to work and its server side rendering abilities out of the box provide some real benefits.

Anyways it will require some research and what I have mentioned here is merely a vague idea. I will let you know if I come up with anything decent or of interest in this area.