Web app to display the result nicely.

[lamLeX]

I would like to contribute by creating an web app to display the test result nicely.
The results could be sorted, hidden, or graphed.
The app will be scheduled to run every times a new version of IoC is updated.
The app will be hosted on Azure App Service.

Are you interested in PR for this feature?

[danielpalme]

Nice idea.

You can have a look at the existing IOutput implementations:
https://github.com/danielpalme/IocPerformance/tree/master/IocPerformance/Output

You can add one more implementation of the IOutput interface which generates the web app.
I would suggest you generate a JSON file containing the results and create a simple SPA (based on Angular, Aurelia, vue, etc) which renders the results from the JSON file.

Regarding hosting:
I would prefer using GitHub Pages instead of Azure here.
Then the benchmark and the results are in a single repository and I can easily update the page just by pushing the gh-pages branch.

[lamLeX]

GitHub Pages seem to be a good start.
I'll put some time to investigate your recommendation and see how much I can do.

[lamLeX]

Sorry for a long delay, last couple weeks were busy time for me.
I would like to give a quick status update on the progress.

After clone, fork and run the project locally, here is what I propose for the action plan:

• Create JSON output file from IOuput interface
• @danielpalme need to run the benchmark on his computer to get the JSON result and upload it on source control for GitHub Pages to read.
  - [ ] (Still doing research and open for recommendation) Create a React app to be hosted and run by GitHub Pages. I'm still doing research on how to incorporate them together. My background is C# and .Net; hence, it may take some time for me to come up with the final plan for this step.
• Using Angular as the frontend

[danielpalme]

Here is the current result.json. I will create the gh-pages branch when the complete page is available.
result.zip

[lamLeX]

Thank you for your waiting,
Here is my first trial run https://lamlex.github.io/IocPerformance/IocPerformanceResultWebApp/dist/index.html

@danielpalme can you review and give me some feedback before I clean up the code, writing instruction for compiling and making the pull request?

[danielpalme]

I would change the following things:

• Remove the paging and show all container in the beginning
• Group the different the benchmarks into Basic, Advanced, Prepare and show the Basic set when the page loads. The user should not be forced to select a particular benchmark before he is able to see any results.
• Use a consistent font for table and header

[lamLeX]

@danielpalme can you show me where the font for table and header are not consistent? Is it the text "Welcome to IoC Performance Benchmark!" ?

[danielpalme]

Yes, the header uses "Times New Roman" (on Windows).
All the other text uses "-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;"

[jzabroski]

This does not display well on my mobile phone. While this is an interesting idea, I think the best visualization would be 4 scatter charts and a drop down to select different competitors. Basically, this is the type of tool you choose at the start of a project and don't revisit, so generally support for features and performance and maintenance /documentation (Google search reaults, stack overflow tagged answers, repository last commit date, etc.) are the only things that matter. So, you can add more data on each project to really make a huge difference.

[lamLeX]

@danielpalme During implementing this suggestion

Group the different the benchmarks into Basic, Advanced, Prepare

I would like to add additional property to BenchmarkInfo and IBenchmark to show the group category that the benchmark belongs to (Basic, Advanced, or Prepare). This property could be either enum type or string.

I would like to do so because in the web app I don't need to hard code which group the benchmark belong to; I only need to read from the JSON. By doing so the information about category grouping is encapsulated in one place and we don't run into the issue that the web app doesn't get updated when you decided to add new benchmark.

If you agree on this idea, I'll make a pull request with the change in C# to include this new property.

[lamLeX]

@jzabroski I appreciate your suggestion about the scatter chart. Unfortunately, it will require to completely redesign the app. This is done during my spare time so I don't think I could have enough time to finish your suggestion. However, since GitHub is an open community. You are welcomed to fork my repo or the original one and work on your design.
About the mobile phone display, I'll verify to see what I can fix.

[danielpalme]

The JSON now contains a property "Category" in object "BenchmarkInfo"
0 = Basic,
1 = Advanced
2 = Prepare

[lamLeX]

@danielpalme can you send me the updated JSON so that it will be consistent with your report in the markdown?

Also, could you suggest a place for me to put the final JSON that you would prefer?
Currently, I used the relative path ./assets/result/result.json.
The ./ is currently interpreted as Angular app dir at the GitHub-pages https://lamlex.github.io/IocPerformance/IocPerformanceResultWebApp/dist/

[danielpalme]

I have added a simple GitHub Page to the "/docs" directory:
https://danielpalme.github.io/IocPerformance/

This is generated by the following class:
https://github.com/danielpalme/IocPerformance/blob/master/IocPerformance/Output/GithubPagesOutput.cs

Here you will find the latest JSON file:
https://github.com/danielpalme/IocPerformance/blob/master/docs/result.json