Studio New Architecture

[Amzani]

Problem

What's the story exposing the problem the users are facing

As we are working on #684 we discovered some rabbit holes and challenges when it comes to NextJS migration.

To address theses challenges we want to setup up some architecture foundations for studio to enable a smooth and an easy migration to NextJS.

Solution

Proposed solution with mockups, views...

This bet will cover 2 parts:

First part

The idea is the have the new NextJS app inside the same mono-repo and reuse the existing components / ui design system. We want to avoid having long lived branch and avoid future conflicts.

Location of the new app

apps/studio -> current app
apps/design-system
apps/studio-next -> NextJS app

The deployment and hosting should be accommodated to enable beta users to visite the studio-next app.

Second part

Create an ADR to decide the new NextJS app architecture and answer theses questions:

• Where to define the business logic ?
• What's the size of a component ?
• Architecture pattern to use (MVC?)
• State manager to use

Rabbit holes

Potential technical, design ... challenges

• Some components like monaco editor might be challenging to integrate.

Scope

Describe a list of tasks or issues that needs to be done ( you don't need to have an exhaustive list of all the tasks in the beginning)

• [x] #726
• [x] #727
• [x] #762

Out of bounds

What won't be part of the scope

We don't necessary need to have all the existing features up and running in the new app. This bet intention is to set the stage and enable future contributions.

Success criteria

How do we know we made a good bet

[Amzani]

@fmvilas @Shurtu-gal don't hesitate to add anything missing here.

[fmvilas]

I'd love to suggest that we get rid of Monaco and replace it with CodeMirror. Or at least try and see if it's better than what we have. Would you put it in a different bet issue?

[Shurtu-gal]

Yeah, but the main issue is not with Monaco but how we expose the services. I guess they were written to maintain the business logic in a central place for ease of access and maintenance. Let's try to find a solution for nextJS while following the same.

[fmvilas]

Yup, that definitely is the priority but don't want to lose the opportunity to kill Monaco with fire 🔥 😄

[Shurtu-gal]

Funny thing, github itself uses code-mirror. Meanwhile leetcode uses monaco along with next.

[fmvilas]

Drafted some initial considerations for our archtiecture: https://github.com/asyncapi/studio/pull/739. Feel free to suggest adding, editing, or removing things.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity :sleeping:

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience :heart:

[shapeit-bot[bot]]

Thanks for creating a new pitch 🥳. You can now create or link existing scopes. You can create new scopes in two different ways:

Option 1

1. Edit the Pitch or Bet issue
2. Add your scope under the scope section

See this example

Option 2

1. Create a new issue
2. Add this keywork in the description related to #ISSUE_BET_NUMBER

See this example

[Amzani]

Closing this for now! as studio will need a complete revamp/rewrite with the new DX Working group direction.