Create React GUI

[markhughes]

The current GUI works well and has great functionality, but it can be quickly rewritten in react. I say this because the current codebase for the GUI is a bit rough for it's time.

The goal is to keep the same structure / layout of droppy, but give it a facelift, and move to react.

By building it in react, we will improve the DX, and reduce our technical debt.

For this I've decided to use:

• next.js: very quick to get up and going, great DX
• material-ui: easy to get going, easy to theme

Importantly, I want to incorporate the following:

• [ ] Implement hbs theme system #67
• [ ] Setup a core the GUI on next.js
• [ ] Move the current structure into material-ui components
• [ ] Easy theming system, so others can customise the look and feel however they'd like later. Using material-ui we can expose this and allow people to create overrides for it.
• [ ] A new Droppy Theme! (dark and light mode)
• [ ] Localisation and translations
• [ ] More powerful, but simple table. Using something like MUI's data table would do the trick!
• [ ] More accessibility related features and focus (keyboard control, use of semantic HTML elements, alt tags, aria tags, language choice to avoid anxiety/panic, colour contrasts tests)

This means we must include all existing functionality:

• [ ] Preview images - zoom in, zoom out, full screen, fit vert., fit horiz.
• [ ] Playing songs
• [ ] Playing videos
• [ ] PDF viewing
• [ ] Code editor
• [ ] Split View
• [ ] Copy + Paste files from clipboard
• [ ] Move files/folders
• [ ] Rename files/folders
• [ ] Share links, backwards compatibility included
• [ ] Upload files
• [ ] Upload folders

After this, I'd like to start researching:

• Plugin system

[gissehel]

One thing I would like to see if the interface is going to be rewritten from scratch is the support for keyboard (keys to move inside a file panel, tab to change panel in split view, enter to execute/view/play the file, etc.)

From a user point of view, it would require a change in the way the interface is working (as it would introduce a cursor over the "current file").

[markhughes]

Really good idea! I would love to have a lot more accessibility related features added in general - I'm quite passionate about creating accessible software.

By putting a lot of energy into accessibility things like using keyboard, shortcuts, etc, it will also benefit power users. Double win!

[Tronic]

I have to say that I prefer plain HTML and light Javascript UIs to React. At least these are fairly reliable where it is way too easy to shoot yourself in the foot with React and Redux, and the resulting webapps tend to be bloated. Not to mention that even if you can quickly mock up the app, maintaining React code is not that easy either. And I don't even want to get to how many packages that you depend on have security audit issues...

[markhughes]

The old UI will be maintained should you want to use that!

I have been reviewing myself how to approach this properly and I've actually reconsidered react in favour of Web Components, using something like Stencil.

[Tronic]

I have recently found Vue/Vuex to be a better option to React/Redux, while keeping similar development patterns to it. It runs much faster and does not dictate everything about your project like React does. The templating system is quite convenient so that I don't really miss JSX.

There certainly would be other JS frameworks to consider but those two I have tried, and while not being a front developer I couldn't look at all the newcomers. Also not quite familiar on stuff built on Vue yet, alike Web Components, so don't put too much weight on my experience.

Given the slow pace of development of this project, I have a hard time seeing an entirely new UI being implemented, and even less than that to see the old UI being kept in development parallel to it. That is unless you somehow get more developers to join, or if you plan to drastically reallocate your time.

[markhughes]

I assure you a lot is happening behind the scenes :)

This has taken a different approach now, although a React or Vue implementation could come after - my first step is moving the hbs stuff into a theme system.

Once the theme system is done, any type of UI up to the user can be implemented, and themes can be maintained separately. So you could create a new hbs theme like we have now, or create a vue one. It will be up to the user to decide how they want their application to work.

[LeoVasanko]

@markhughes It might be of interest that we are working on a full remake, with Vue UI and Python server.

NodeJS is not a runtime requirement, the frontend is a static SPA, closely imitating Droppy and using assets and pieces of code of Droppy. I had to rewrite all of the UI in the last four days because previously it used ant-design components that turned out to be way too bloated and slow. Without them the uncompressed but minified JS takes 1.5 MB less space (currently around 100 kB), and runs super fast. The app is close to being good enough for an actual announcement and release.

Code https://git.zi.fi/Vasanko/cista-storage Demo https://drop.zi.fi

[markhughes]

Closing this for now to revisit later.