Multiple SPAs in one page hosted in different HTML elements

[Martin Kovářík]

Hello,

1) Is there a sample or recommended approach how to setup multiple SPAs in one page using multiple applicationHost elements?

2) I know I can do composition using ko bindings in shell and bind fragments of SPA, but I want to host these SPAs in different elements on our legacy HTML page - so I cannot use shell composition.

3) How to setup router that it redirects routing info to certain application host(s) based on URI pattern? 

4) Is there recommended folder structure for doing this? 

5) Is this even possible using Durandal and its plugin Router?

Also see my question on SO: http://stackoverflow.com/questions/15736038/multiple-independent-spa-in-one-page-using-durandal/15750531

Thx,

Martin

[Roger Gullhaug]

I don't think it will be possible, because most of the Durandal modules are implemented as Singletons, so the different SPAs will unintentionally interfere with each other. I think the only way to do it is to place the seperate SPAs in seperate iframes.

[Martin Kovářík]

Thank you, I will try that. I think that support for multiple SPA in own applicationHost elements would be good feature for this great framework. This might help adoption of Durandal in brownfield projects. 

[Rob Eisenberg]

There's nothing preventing you from having multiple SPAs in the same page. The durandal modules are all singletons, so they would be shared, but that's the only limitation.

--
You received this message because you are subscribed to the Google Groups "DurandalJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to durandaljs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--

Rob Eisenberg,

President - Blue Spire
www.durandaljs.com

[Joseph Gabriel]

Roger, is there any specific scenario where you are concerned that the Durandal modules may interfere with each other?  We're implementing a web site with multiple SPAs, and I haven't seen any issues yet, but I may be missing something.  I do that a lot :)

When we navigate from one SPA to another, it's via a request to an MVC controller action, which reloads the entire page, so everything is loaded from scratch.  I think a full reload is the key - otherwise you're basically back to one SPA.

[Brett Postin]

Martin, you may want to read some of the potential issues with SPAs and keep them in mind when designing your multi-SPA application.

This blog post outlines some of these problems and offers some suggestions.

[Martin Kovářík]

Joseph, I think you are talking about case where you have only one SPA active at a time and handle multiple SPA via page reload. I do this also, this is not problem. Real problem is when I want to host two or more SPAs in one HTML page where each SPA is loaded into its own applicationHost element. I think router plugin is confused and dont know which applicationHost manage with which route... But as I am quite new user, I am not 100% sure what is going on:) 

[Martin Kovářík]

Brett, thanks for a link, will read!

[Martin Kovářík]

Hi Rob, can you be more specific how to approach this problem? Or are there any samples that uses multiple applicationHost elements in one HTML page using app.setRoot() and Router plugin? Maybe I am not clear about problem, I can provide sample code to see what I am trying to achieve ... :)

[Rob Eisenberg]

The router would be the catch to doing this. The rest of the modules shouldn't care. After all, if you have two different SPAs...and you navigate, which one does that pertain to? Who should navigate SPA1 or SPA2? That is a really non-standard scenario...and if you want to handle that you would need to implement your own router. But, I wouldn't recommend that you build an app like that. It is likely going to confuse the user.

--

You received this message because you are subscribed to the Google Groups "DurandalJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to durandaljs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Martin Kovářík]

Thanks Rob, I know this is not best architecture to go with, but I am limited with our old brownfield app that could potentially use Durandal framework for certain page areas that will work like a "webpart" or a "widget". 

So I think the solution I will try is to host main SPA (the core area) like usuall and load secondary SPAs into iframes. 

If this fails, then i will leave only one SPA. Other parts of HTML page will be created using Knockout templates and custom code.

[Ramón Elías Rodríguez Alba]

Hi... I read this post... and I wonder if I can have this software structure unde Durandal:

index.html -> load main.js anotherPage.html -> load main2.js and anotherOne.html -> load main3.js

This way I would have one SPA per page, if I wan to. Is this layout posible?

Thank you.!!!!