turing-machines / BMC-UI

GNU General Public License v2.0
5 stars 2 forks source link

Refactor into React #4

Closed barrenechea closed 4 months ago

barrenechea commented 5 months ago

Hi there! Is there any chance that bmc-ui could be refactored into React? I'd be pleased to help/lead the initiative!

I'm mainly suggesting React as it's almost twice as used by professional developers compared to jQuery, according to Stack Overflow 2023 Developer Survey, increasing the chances for this project to receive contributions.

Considering the BMC's limited resources, I would not expect it to run SSR solutions such as Next.js, but a lightweight client-side rendering approach with React + Tanstack Router compiled via Vite would be sweet.

Reaching feature parity with the current project is essential. Thankfully, all the CSS can be reused and the JS logic should not be hard to refactor.

svenrademakers commented 5 months ago

I'm the only active maintainer for the BMC firmware, and my frontend knowledge, let alone React, is very limited. So im not able to give extensive support if we have a UI written in React. However, if we can get more people onboard with using React, i will not stand in the way of approving such a PR. In this setting, i can function as "the back-end guy"

barrenechea commented 5 months ago

It would be awesome to get some feedback from the community. I'll try to play with a React PoC this weekend. We'll see how it goes 😄

svenrademakers commented 5 months ago

Please be aware that we dont have a lot of space available on the BMC. It should fit in ~5MB

barrenechea commented 4 months ago

Okay, this took a bit longer than expected, but I've reached a state where I'm pretty comfortable opening pull requests. There are just a few things to tweak.

I've replicated most of the current experience (plus improved some bits here and there). I've replaced the Basic Auth with a login screen and handled secured requests via the Bearer token. The app has route handling (so browsers could bookmark https://turingpi.local/nodes, for example). I also added fan control over the Info page. The total bundle size is less than 1.2MB.

I've already tweaked bmcd to not protect the static files with Basic auth, but I need to get it to resolve any routes into index.html (so that JS can handle routing, 404 pages, and so on). The "nginx" approach is commonly done like this.

I'm running a build that will hopefully serve index.html as the default, but we'll see! 😆

Oh, by the way, I created bmcd-api-mock so that I could test the UI without having to call my actual cluster all the time. It may not be 100% "to the spec," but it helped me greatly. I guess it may be useful for the tpi CLI tool as well.