Rewrite dashboard with modern framework

[mtrezza]

New Feature / Enhancement Checklist

• I am not disclosing a vulnerability.
• I am not just asking a question.
• I have searched through existing issues.

Issue

We are spending quite some time on basic, fundamental bugs related to UI style, button size, scrollbars. And yet the dashboard feels and in some regards is outdated.

Enhancement

Completely rewrite dashboard using a modern UI framework where things like these come OOTB:

• UI controls don't need to be individually customized and styled
• dark mode
• responsive design
• touch UI compatibility
• UI testing compatibility

[parse-github-assistant]

Thanks for opening this issue!

• 🎉 We are excited about your ideas for improvement!

[mtrezza]

@AshishBarvaliya, @damianstasik, @parse-community/dashboard what is your opinion? Does anyone have a framework suggestion? Would anyone be anyone interested in making the first step?

[damianstasik]

@mtrezza I really like the idea, I worked with MUI a lot and I would be voting to use it as the framework. It ticks off everything on your list, has a large community and a great team working on it. I would be super interested in making the first step and trying to see how it would integrate with the current code.

[mtrezza]

Great! I assume you are referring to MUI? What do you think are the most important criteria when deciding for a framework, and how MUI covers these?

[damianstasik]

I assume you are referring to MUI?

Yes

What do you think are the most important criteria when deciding for a framework, and how MUI covers these?

I think there are 2 quite important factors:

1. How easy it is to integrate a framework in an existing app?
2. How mature is the framework?

When it comes to the ease of integration, in our case we have styles in the global scope, so a potential framework should have properly scoped styles and fortunately most of them do. Another thing would be no additional build steps, some frameworks need a bit deeper integration in a project. MUI does not need any build step mods, and should be properly isolated from existing styles.

When it comes to the maturity of a framework it means not only how long it has been available, but also what it offers. I have used quite a few frameworks lately: Chakra, MUI, Bootstrap, Blueprint, and a few more that are too fresh to mention. While I like all the frameworks I mentioned, most of the time I had a hard time to find a proper usage example, or customization description, sometimes I would be blocked by a component I thought would be available, but was not. The only framework that helped me move forward at a decent pace was MUI, it offered a big catalogue of components and the documentation was clear and up-to-date.

Now that does not mean MUI is perfect, none of existing frameworks are, I am sure each of them could bring their own bag of surprises. In my experience MUI brought less surprises than other frameworks, that is why it is my choice.

[mtrezza]

I had a look through the docs and I also find it offers a vast selection of components and seems to be well documented - with a large community.

@dblythy @dplewis do you have any opinion on this?

[damianstasik]

One thing we should be aware is that most of the modern frameworks require at least React 17 (including MUI), so we would need to check what's the current situation and focus on bringing React to latest version piece by piece.

[mtrezza]

Do you think we should build a new dashboard from the ground up, or convert the current one gradually?

• If we convert the current one, we would need to do that in small PRs, otherwise we'll always loose momentum due to merge conflicts.

• If we start a new one, it takes longer to get feedback due to slower adoption; people will stick with the old one until the new one provides all the functionality they need. But no baggage to carry over, clean code, maybe even faster / easier development because there's no legacy code to consider.

[damianstasik]

Of all the times I saw some apps being completely rewritten, paid or free/open source, most of the time it was worse, incomplete and rushed. We have a lot of complex code that could be tricky to rewrite in the new app without making some mistakes. Maybe there could be another approach, a hybrid of these two, using something like module federation? Some pages could use React 18 and new code, while others would work as expected with some components slowly being replaced by MUI one by one.

[mtrezza]

Makes sense; what do you think could a rough roadmap look like for this conversion? Keeping in mind that we prefer smaller PRs to avoid merge conflicts due to code divergence.

I would also say that the current UI layout doesn't have to be kept, there may be better layout suggestions. I would go with what the framework supports best, with as little customization as possible. That will make it easier to extend and maintain over time. Otherwise we end up again with a lot of custom code, widgets and styles as we have now where we need to dig into the CSS to keep a scrollbar visible 😵‍💫

[dblythy]

I think that a rebuild is probably a good idea. Even though it will be a lot of work, the current project is a bit all over the place, and has older relics deep in the code (such as Cloud Code Editors) that can be cleaned out.

• enforce stronger lint rules
• test driven development to reduce recurring bugs
• use modern JS syntax (the project currently uses .bind a fair bit when () => {} does the same thing

A completely fresh approach could allow us to integrate features with Parse Server easier, perhaps the ambitious one of Dashboard Users.

An overall UI refresh would be welcomed as well.

[mtrezza]

We've just reached out via Twitter to see if we have any UI designer in our community that could provide suggestions for a more appealing, modern design. I still suggest to try to stay with the framework basics as much as possible but a dashboard style guide would help us to start this off and help contributors and reviewers to keep a consistent design in future development.

[jadsonlourenco]

I agree with @damianstasik MUI is the best one, for almost all of the projects today. I think the issue will be the Table component, the "pro" version is better.

How about "routing"? I think NextJS could be included, the new approach for routing and "layouts" is good, but in beta - so, I think is better to wait until it is stable to use in production, but I think it will be released this year; also MUI doesn't work on with this new Next "app" folder for server-side components.

I don't think that is possible to have a "hybrid" without new bugs and a lot of time to fix.
If is a new dashboard, with new frameworks, etc, so, is better to start from zero.

About features I think to start we need just to keep the same, changing the UI/UX for the better, as @mtrezza said.

About UI, I'm a designer, I like to design directly on the code, not Photoshop/sketch, etc, so, the result is the front-end code done at the same time.
I like the current design and colors, but for mobile is not good, the keyboard shortcuts need a tutorial.

But I think the Parse project needs a little rebranding like Mozilla did to Firefox, and the Parse Dashboard a new UI, but unique. If we use MUI I think is easy to style, but I think we don't need to use "Material Design", I like more the "Ant Design" style.

So, how to help? I think we need some examples of good UI/UX os tools like DB dashboard, to inspire, then, start to design (code) the sketch.