asyncapi / studio

Visually design your AsyncAPI files and event-driven architecture.
https://studio.asyncapi.com
Apache License 2.0
167 stars 99 forks source link

Start using a React framework #661

Open fmvilas opened 1 year ago

fmvilas commented 1 year ago

Problem

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

CRA (create-react-app) is dead. They're gonna replace it with a launcher where you can select a framework.

Solution

Proposed solution with mockups, views...

That said, we should evaluate a framework and bet on it (no pun intended 😄). Things we need to take into account at first sight:

  1. The framework needs to be well maintained and have an active community behind it. We don't to repeat this in a few months 😅
  2. It needs to be possible to be deployed to Netlify. We have an open-source plan with them and that means we won't have to pay for the hosting. Please take into account that Netlify doesn't let you run server-side code (unless it's in a Netlify Function) but they do have support for certain frameworks like Next.js where they make this possible.
  3. It needs to be secure.
  4. It has to be as performant as possible. Studio is gonna grow into a big product that's gonna span multiple pages.
  5. It would be great if it has a built-in way to create APIs. We're gonna need an API to power Studio and that will probably be exposed for anyone to use.
  6. It should have good TypeScript support.
  7. The monaco-editor package is gonna give us headaches, that's for sure. Make sure you can integrate it with the framework.

Lots of things to take into account when evaluating. An initial list of frameworks that come to my mind are:

  1. Next.js
  2. Vite
  3. Remix
  4. Gatsby

Learn more here: https://react.dev/learn/start-a-new-react-project#production-grade-react-frameworks.

Rabbit holes

Potential technical, design ... challenges

Well, we're gonna change the foundations of the project so there will be rabbit holes for sure. My advice is to try to keep it as simple as possible. This issue is just about migrating to a framework, not improving the codebase. Keep it simple. We can improve the codebase in other pull requests.

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)

Out of bounds

What won't be part of the scope

Do not improve the codebase in any way. Do not try to simplify stuff or improve anything. Migrations are complex enough on their own. Keep it simple.

Success criteria

How do we know we made a good bet

Shurtu-gal commented 1 year ago

https://www.swyx.io/how-to-add-monaco-editor-to-a-next-js-app-ha3

For NextJS with reference to MonacoEditor

sambhavgupta0705 commented 1 year ago

IMO nextjs will be the best fit for this.

Shurtu-gal commented 1 year ago

@kaushik-rishi, any opinions regarding this?

Shurtu-gal commented 1 year ago

Below is a summary which I have made:-

Criteria Next.js Vite Remix Gatsby
Maintenance Well-maintained Active community Growing community Large and active community
Community Strong and active Active contributors Growing steadily Large and thriving
Deployment Compatible with Netlify Compatible with Netlify Compatible with Netlify Compatible with Netlify
Security Follows best practices Development-focused Emphasizes security Follows best practices
Performance Optimization features and multiple forms of rendering Fast development server Performance-focused Static site generation
Automatic code splitting Lightning-fast module hot-swapping Server rendering and caching strategies Highly optimized static sites
API Creation Built-in API routes No built-in support Built-in server routes Plugin-based integration
TypeScript Excellent support Excellent support Good support Good support
Monaco Editor Integration may require additional configuration and setup, but it can be achieved by leveraging Next.js's extensibility. Integration may require additional configuration and setup, but it can be achieved by leveraging Vite's extensibility. Remix doesn't have built-in support for Monaco Editor. Integration would require additional configuration and setup. Gatsby doesn't have built-in support for Monaco Editor. Integration would require additional configuration and setup.

Any suggestions would be welcome @fmvilas @sambhavgupta0705 @KhudaDad414 @kaushik-rishi

fmvilas commented 1 year ago

I love it! I have a few questions:

Would it be worth ranking these things clearly? Maybe you can give each of them a 0-5 rank to make it clearer? I also have the feeling that Next.js is the best choice but want to make sure we take a thoughtful decision.

cc @Amzani @magicmatatjahu @peter-rr @Souvikns

Shurtu-gal commented 1 year ago
Criteria Next.js Vite Remix Gatsby
Maintenance 5 4 4 5
Community 5 4 3 5
Security 5 3 4 5
TypeScript 5 5 4 4
Performance Optimization features and multiple forms of rendering Fast development server Performance-focused Static site generation
Automatic code splitting Lightning-fast module hot-swapping Server rendering and caching strategies Highly optimized static sites
API Creation Built-in API routes No built-in support Built-in server routes Plugin-based integration
Monaco Editor Integration may require additional configuration and setup, but it can be achieved by leveraging Next.js's extensibility. Integration may require additional configuration and setup, but it can be achieved by leveraging Vite's extensibility. Remix doesn't have built-in support for Monaco Editor. Integration would require additional configuration and setup. Gatsby doesn't have built-in support for Monaco Editor. Integration would require additional configuration and setup.

This is the updated one. I have removed deployment as Netlify has respective plugins for each.

cc: @fmvilas @KhudaDad414 @sambhavgupta0705 @kaushik-rishi @Amzani

fmvilas commented 1 year ago

Awesome! Looks better now. Thanks! Definitely, Next.js sounds like the best option to me too. Once @Amzani has something related to #663, adding an ADR explaining why we chose Next.js and linking to this issue would be awesome.

Amzani commented 1 year ago

@Shurtu-gal now that we have ADR system in place don't hesitate to move this decision to an ADR. https://github.com/asyncapi/studio#architecture-decision-records (Some examples here: https://github.com/asyncapi/studio/tree/master/doc/adr)

Shurtu-gal commented 1 year ago

Sure @Amzani, I will do it.

github-actions[bot] commented 11 months ago

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] commented 7 months ago

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

aeworxet commented 6 months ago

Bounty Issue's service comment

Text labels: bounty/2024-Q2, bounty/advanced, bounty/coding, bounty/misperformed, bounty/eol First assignment to third-party contributors: 2024-03-22 00:00:00 UTC+12:00 End Of Life: 2024-08-31 23:59:59 UTC-12:00

@asyncapi/bounty_team

KhudaDad414 commented 5 months ago

Progress

Remaining Tasks

  1. Dockerfile:

  2. Test Script:

    • Add test script to studio-next.
    • Use Jest instead of Craco test runner.
  3. Code Generation:

    • Implement code generation in studio-next.
    • Begin by moving template-parameters.ts from studio to studio-next.
  4. CodeMirror Integration:

    • Replace Monaco editor with CodeMirror.
    • PR #997 can be taken as a point of reference.
    • Complexity uncertain (I have limited experience with both).

I suggest we use these four remaining tasks as the new scope of the bounty issue.

cc: @Amzani @aeworxet

Shurtu-gal commented 5 months ago

@KhudaDad414 regarding code mirror integration this PR https://github.com/asyncapi/studio/pull/997 can be taken as a point of reference.

KhudaDad414 commented 5 months ago

@Shurtu-gal updated the comment. 👍

aeworxet commented 5 months ago

I would like to work on this Bounty Issue.

aeworxet commented 5 months ago

Bounty Issue's Timeline

Complexity Level Assignment date (by GitHub) Start date (by BP rules) End date (by BP rules) Draft PR submission Final PR submission Final PR merge
Advanced 2024-04-26 2024-04-29 2024-06-21 2024-05-17 2024-06-07 2024-06-21
Please note that the dates given represent deadlines, not specific dates, so if the goal is reached sooner, it's better.
Keep in mind the responsibility for violations of the Timeline.
Amzani commented 5 months ago

For tests what about using Cypress https://github.com/asyncapi/studio/issues/1091

aeworxet commented 5 months ago

Submitted the Draft PR https://github.com/asyncapi/studio/pull/1094 branched from https://github.com/asyncapi/studio/pull/1062 (Cypress included)

Amzani commented 4 months ago

I would remove CodeMirror Integration from the scope of this issue for now, until we merge everything.

smoya commented 4 months ago

I know I'm so late into this party, but I think it will be a good idea if any of the maintainers or involved people clarify the movement to NextJS, considering we moved away from it few years ago. I'm not against it, I just believe it is worth clarifying. Specially about the features we will use from NextJS, e.g. Dynamic rendering?

Thanks! 🙏

cc @Amzani @fmvilas @KhudaDad414

KhudaDad414 commented 4 months ago

@smoya We document this kind of decision in the ADR folder: https://github.com/asyncapi/studio/tree/master/doc/adr

smoya commented 4 months ago

@smoya We document this kind of decision in the ADR folder: https://github.com/asyncapi/studio/tree/master/doc/adr

Can't think on a better answer 👏 so nice and well documented. Thanks!

KhudaDad414 commented 3 months ago

@smoya it's all thanks to @Amzani ❤️

aeworxet commented 3 months ago

As I understand, there are plans to implement User Registration / Access Control in the future:

https://github.com/asyncapi/studio/blob/master/apps/design-system/src/components/AppCard.stories.tsx#L20

https://github.com/asyncapi/studio/pull/1094#issuecomment-2144702536

Should the application's state management be rethought because of this in favor of one of the standard solutions?

KhudaDad414 commented 3 months ago

@aeworxet yep. currently, we use Zustand and manage the entire state in the browser. at some point, it needs some work.

aeworxet commented 3 months ago

Implementation of the new scope of the Bounty Issue came down to:

Thus, this Bounty Issue slowly migrated to an R&D task with half-impelementations as stubs for the future, and there is, in fact, nothing to do on it anymore.

So I propose to reclassify this Bounty Issue to Medium (downgrade), merge PR https://github.com/asyncapi/studio/pull/1094 and consider this Bounty Issue completed.

aeworxet commented 3 months ago

To be clear, I propose to close only Bounty Issue, leaving the GitHub issue itself open to continue tracking migration. Just not submit this particular GitHub issue as a Bounty Issue anymore because even with loosened scope it still went beyond Advanced, but create atomic issues and submit as Bounty Issues them.

As an observation, though, I would discourage from submitting as Bounty Issues in the future:

aeworxet commented 3 months ago

@Amzani, still waiting for a decision on this.

I propose to reclassify this Bounty Issue to Medium (downgrade), merge PR #1094 and consider this Bounty Issue completed.

aeworxet commented 2 months ago

Bounty Issue's service comment

@aeworxet receives the First Suspension for misperformance on the Bounty Issue. With the utmost respect for the contributions made, but also having the best interests of the Bounty Program in mind, @aeworxet will be kept from participation in the Bounty Program from 2024-10-01 00:00:00 UTC+12:00 to 2024-11-30 23:59:59 UTC-12:00 (inclusive.) AsyncAPI hopes that this pause will provide an opportunity for reflection and perhaps a chance to address any challenges that may have led to this situation. Reward for this Bounty Issue is not paid to @aeworxet even in the case of its voluntary completion. Probation period after the First Suspension's expiration will be from 2025-01-01 00:00:00 UTC+12:00 to 2025-05-31 23:59:59 UTC-12:00 (inclusive.)

jerensl commented 2 months ago

What does it mean by Implement code generation, did it already exist as HTML Preview? or does it mean on different feature like Modelina does? or maybe I got it wrong

aeworxet commented 3 days ago

Studio is now a Next.js app. https://github.com/asyncapi/studio/pull/1141