Get feedback on new demo site

[joeldenning]

Need some feedback on how helpful the demo is and where it could be improved.

[joeldenning]

@TheMcMurder what are your thoughts on this? https://single-spa.surge.sh is the live demo, and the source code can be found here.

Would love to hear feedback

[TheMcMurder]

This is awesome. I was initially confused by webpack card linking to the react app until I noticed the more vertical icon, that's a nice touch.

I'm going to spend some more time looking at the code tomorrow.

[TheMcMurder]

Okay I've been going through the code for a while. This is dead simple. One thing that I think would be an awesome addition would be a feature to show the different apps in the UI.

I'd suggest something like a button that when clicked adds a blue border to all React apps and a red border to all Angular apps.

That way you can show a simple "Here's how they can communicate"

I'm looking an how to implement that so you don't have to, it may take a bit as I'm still working through the learning curve.

[joeldenning]

👍 that's great feedback, I like the idea of a button that puts colored borders around apps. And for the inter-app communication part, I think that would be a great thing to do in the "Parts of the page written in one framework, while other parts use a different framework." example that is still not finished.

I've created two issues for those things:

• 9

• 10

[mirandaleandro]

Firstly, Joel, this demo is so much better than what you had before. Thank you for putting this together for the community. I don't have anything greatly important to give you as feedback, so I will be very picky on my input to you. I hope that you will like it!

Cosmetics

• I recommend changing the name to single-spa-showcase. If you would like to show off some really cool things you can do with single-spa, all of its capabilities and flexibility, or even answer a question on StackOverflow that refers to a piece of code here, then you have more than just mere examples.

• I recommend having a logo for single-spa and using it here and on the github readme. Simple investments like that in marketing make the framework look professional.

• I recommend changing from a button to a switch the trigger for bordering the app types. In addition to that, I recommend to turn that thing on on any screen but your landing page.

• I recommend making the content width on the page smaller. I changed it to 992px max width instead of 1280px so you can take a look. It looks less stretched in my opinion.

Code

• I recommend having examples that show a more elaborate logic the isActive callback of at least one application, just to show off that that's no the only way.

• I recommend having at least in comment on the single-spa-examples.js making it explicit that the app code can live anywhere and that System.import will handle it. It just occurred to me that even though this is obvious, you will be dealing with people accessing that code with various skill levels.

• I recommend having the angular 2 app with more than just one route.

• I recommend inviting the user to refresh the page so he can tell that single-spa survives that just fine.

• I strongly recommend having mixed app pages ( which you kind do with appbar) as promised on the landing page.

• I recommend having an example of an iframe app. This may sound stupid, but it might propose the usage of single-spa as a platform for integration of apps that can be built in any technology.

• I recommend having a themed example. I can tell by going through the example that one wanted to show off some features but the pages themselves have no content. To solve that problem, I recommend having the example around a small system like a task manager, but not only that, I would make users and tasks inspired in Lord of the Rings.

Probably more than half of this feedback is useless. They might sound as critics but it is just caring =) I want to reiterate that I think single-spa as one of the most brilliant/simple ideas that have seen lately. I think your examples are pointed to the right direction and are very helpful already. In the software business, there are no limits for improvements, though.

I do want to help! If you create issues for some of those items, and are willing to take my pull requests, I will jump in and do them.

Thank you very much.

[joeldenning]

@mirandaleandro thanks that's great feedback. I've created the following issues and would love if you helped out with them:

• 20

• 21

• 23

• 24

• 25

• 26

The ones I didn't create issues for:

• About switching to single-spa-showcase, I think I'd prefer to stick to single-spa-examples since that's what other projects usually call this sort of thing and "examples" is what a lot of people have asked me for.
• For I recommend having examples that show a more elaborate logic the isActive callback of at least one application, just to show off that that's no the only way., the way that I plan on implementing #13 will do just that.
• Mixed app pages is something that will also be implemented with #13
• About the themed example, I think that that could be cool. Sounds like a lot of work to refactor all of the apps to match that theme, though. If you'd like to tackle that, then I'd definitely be open to it. But I don't think I would get to it myself.