🚀 Tech Radar: RFC new design

[clanghout]

Plugin Name

Tech radar

🔖 Feature description

Redesign of the tech radar:

We believe that by understanding the tech radar users first we are able to improve the user interface and user experience for the tech radar. This will change the way the tech radar looks and behaves so it meets the needs of the users in a better way.

🎤 Context

Spotify and bol were working both on an initiative to improve the tech radar. We seized the opportunity to collaborate together and find common ground. The initiative was entrusted to bol because they wanted to do usability testing with users to validate the new designs and make remarks where needed. The usability tests were very positive and on a scale from 1 to 10 the engineers, tech leads, and tech principles scored the new tech radar overall with 2 points higher than the current tech radar.

✌️ Possible Implementation

What will change?

• The tech radar will contain two tab menu-items: Tech Radar and About

  

• Different ways to interact:

  • Search: it will automatically filter the list results based on your search queries

  • Filter on: disciplines (front-end, back-end, data science, etc)

  • Filter on: categories (techniques, frameworks, tools, etc)

  • Filter on: synchronous communication (REST, GraphQL ,etc) and asynchronous communication (Pub/Sub, Webhooks, WebSockets, GraphQL subscriptions, Server-sent events (SSE), etc)

  • Filter on: ring assessment (adopt, trial, asses, hold, leave)

    

  • Tech radar: select a blip and it will scroll down and open the right accordion-item

  • Zoom in on a quarter of the tech radar to create a more focused view

  • Fullscreen option so you will only have the tech radar and no other menus around it

• The new tech radar uses an accordion list with list-items that contain:

  • a description
  • an indicator whether it moved up or down in the ring assessment
  • The date since it was moved to a different ring assessment
  • A learn more call to action
  • A blip in case the list-item is trending up, trending down, or is new

• The accordion lists are categorized based on the different ring assessments which can be recognized by the titles above the accordion list. It also contains an information icon which leads to a modal containing the ring assessment legend. This will help users get a better understanding of what everything stands for.
• About page contains: FAQ that could be useful for users, the ring assignment legend, the blips legend, and a call to action tile which leads to your community.

What will be configurable?

• The blips to make it fit the needs of your organization + the blip legend
• The naming of categories
• The filters
• The ring assessment names + ring assessment legend
• The FAQ / the about page NOTE: Likely this would mean to define a new version of the data format that includes filter options that can be taken into account automatically.

Current tech radar:

New tech radar:

Data format:

• Current: https://github.com/backstage/community-plugins/tree/main/workspaces/tech-radar/plugins/tech-radar#tech-radar-data-model
• Missing:
  • Filter data: ex:

Proposal: enrich the entry data object with a label or filter property. The type of that property should be a list of:

{
// to represent the category this filter value applies to (the bold header in the filter dropdown)
category: string,
// the value for this entry within the category (e.g. category: Disciplines; value: Back-end)
value: sting,
}

This would allow the front-end to collect all possible filter labels, and dynamically fill this dropdown with the categories and values.

Where will the configuration for rings reside (count, names, colors)?

https://github.com/backstage/community-plugins/tree/main/workspaces/tech-radar/plugins/tech-radar#tech-radar-data-model -> the ring type already has name, color, and description

How to configure the shape of the blip?

Is now automatically inferred from the timeline property of an entry (blip)

How to include/exclude golden technology indication?

Let’s add an extra property to the entry data type for this. An optional boolean isGoldenTechnology or something like that.

👀 Have you spent some time to check if this feature request has been raised before?

• [X] I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• [X] I have read the Code of Conduct

Are you willing to submit PR?

Yes I am willing to submit a PR!

[Rugvip]

As mentioned we've been discussing this redesign for a bit, it has my 🦭 of approval 🟢 👍

[andrei-ivanovici]

This looks really good and extends the base functionality significantly. Especially the filters. I have a few questions and ideas to share

• Have you considered allowing labels/tags to be associated with an entry ?
• In this proposal, can an entry have multiple categories defined ?
• Given that backstage itself relies a lot on git and yaml files, have you considered allowing git to be a source for radar definitions ? This could be achieved similarly to how the catalog-info.yaml pattern works in the Catalog

• Are there any plans to implement a visual editor ?

  Looking forward to see how this progresses

[acierto]

Hey @andrei-ivanovici 👋

1. What is the use case for having labels/tags?
2. Do you have an example when a blip can be in multiple categories at the same time?
3. Currently Tech Radar get's the data via Rest API, where user defines the call. So even now can be created a custom entity kind, where this API can read and return to Tech Radar as a source of it.
4. No, we don't have plans to implement a visual editor. Could be a good addition if someone will 😄

[schobbejak]

I've been working with the Tech Radar and this redesign would address some of the issues I've been facing. A few other issues I've had are:

• Changing layout: Updating or adapting the layout for components within TechRadarComponent is difficult to do
• Customisability of search: Wanted to add a search on the description in addition to the title and timelines only but this was very difficult to do.
• Adding new fields: Option to flexibly add new fields to the entries that could be then shown in the details.

So having the options to customise and more flexibility in the data model would be very helpful. If the above options are possible currently and I missed something, I would greatly appreciate any advice on that.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[clanghout]

For us we will not be able to get to this before the end of the year. We do still want to make this change but it will likely be planned for 2025

[andrei-ivanovici]

Hey @andrei-ivanovici 👋

1. What is the use case for having labels/tags?
2. Do you have an example when a blip can be in multiple categories at the same time?
3. Currently Tech Radar get's the data via Rest API, where user defines the call. So even now can be created a custom entity kind, where this API can read and return to Tech Radar as a source of it.
4. No, we don't have plans to implement a visual editor. Could be a good addition if someone will 😄

Hi, For our use case tags enables us to perform more fine tuned filtering and group blips based on them. A blip can have one or more tags associated with it. For example, Zod has the tag library and validation, Sass has the tag language and styling. NextJS is a framework and relate to SSR, etc. Regarding git as a radar source. The current flexibility of the radar API is awesome. It allows anyone to integrate the radar with any data source. I was just considering some useful default. Since backstage uses git heavily, having a git source as an option feels like a good feature to have. If this can be done already and it's just a matter of configuration, I'd like to hear more about it 😄 Regarding a visual editor. We have experimented with a basic visual editor and have seen a lot of success with driving adoption. Our engineers feel more comfortable with a visual experience instead of editing yaml files

I hope this helps