[Request] Bootstrap 4 implementation questions

[jonathanlundstrom]

Hi,

I've been an OctoPrint user for quite some time and I'm also a web developer by day. I noticed that OctoPrint is still running an older version of OctoPrint and I'm sure there are several reasons why. Migrating from Bootstrap 2 to newer versions can be a pain.

Nevertheless, I was wondering if you've looked into newer versions such as Bootstrap 4 etc. Perhaps it would be a good time to update OctoPrint to a newer frontend stack. I for one would argue that a Vue.js based Bootstrap 4 interface could be pretty slick.

Lets talk! :)

[foosel]

I completely agree, and this combination is actually what I've been thinking about myself, but there's a problem: Backwards compatibility. OctoPrint does allow plugins to inject their own stuff into the UI. And all the plugins out there currently rely on Bootstrap 2.

The introduction of UiPlugins with 1.3.0 allows various UIs to exist peacefully however, so the current idea is to do a soft update: Develop a new UI alongside the existing one, offer some means of plugins to also support that (without any mixup happening), then give plugin developers some time to adapt before making the new UI the default one (or make it default from the get-go but do something like detecting if a plugin only supporting the old one is installed and if so tell the user to switch to utilize that plugin).

Additionally - and that's more a problem for myself - find the time to even think about how a new frontend could look like to begin with and to evaluate the current ideas for a replacement a bit further before committing to it next to everything else that's demanding my attention ;)

[jonathanlundstrom]

I can see how the plugin bit might be tricky. Didn't even think about that, but you're absolutely right. Best perhaps is to make a new version and somehow limit plugins to old/new.

I don't think that the UI necessarily needs to change that much, but it'll be an undertaking porting everything over to a newer version of Bootstrap etc. Does it run any UI framework today, such as Angular, Vue, React etc?

[foosel]

It uses knockout.js.

[driftfox]

Hi @foosel, I'm a front-end developer and have been wondering about this for quite some time. I'd like to help if possible. Do you have any information about how you were wanting to move forward with newer JavaScript and CSS frameworks?

[foosel]

So first of all, this is not on the roadmap for 1.4.0 because I have bigger fish to fry for that release.

After that the idea would still be what I outlined here:

The introduction of UiPlugins with 1.3.0 allows various UIs to exist peacefully however, so the current idea is to do a soft update: Develop a new UI alongside the existing one, offer some means of plugins to also support that (without any mixup happening), then give plugin developers some time to adapt before making the new UI the default one (or make it default from the get-go but do something like detecting if a plugin only supporting the old one is installed and if so tell the user to switch to utilize that plugin).

This would also probably mean a switch away from Knockout.js and possibly even bootstrap. I still haven't found the time to look closer at available options today, but vue.js and svelte would be what I'd try to play around with if I could find the time, plus some form of material design with more control by the user how stuff is positioned. Maybe web components?

In principle it would be possible to already start with something like this today - as I said, a separate UIPlugin would be easy to do, even as a for now third party plugin. I just can't look into it myself as long as 1.4.0 isn't out the door (as much as I want to). I'd be happy for any kind of brainstorming on how a new UI could look like, what the technology stack for it could be like and maybe even some prototypes.

[lloydjatkinson]

I'd be happy to help out with React! There are plenty of material design component libraries for the big 3 frameworks.

[apbarratt]

Just wondering if any more progress has been put into this? Especially now that Bootstrap has actually reached version 5 since this issue was first created three years ago :)

[cp2004]

A lot more work has been put into something like this but nothing has come out of it. There's several discussions about considering the difficulty of breaking changes and plugins etc. that would need to be handled.

The next version of the UI may not even be Bootstrap based. But yes, there's a lot of consideration that has gone in to this subject about.

If you want to get involved in front end development with OctoPrint, then you can create a UI plugin and give it a go.

[apbarratt]

Fair enough :) I'd actually thought I might try putting together some kind of compatibility checker for bootstrap just so folk can get a quick scan of installed plugins and see if any use features that have been changed or removed since bootstrap 2 etc. But as there doesn't seem to be any official compatibility checkers out there it might take a while to figure out. The good news is that there are very useful migration notes for each major release of bootstrap that do detail what has happened, so it shouldn't be too difficult to run a search for class names etc and flag how they may be affected if an upgrade were done. But it does seem like a time consuming thing to write, so I may have to put it off for a while... which knowing my poor attention span means it will likely be forgotten about :(

[jneilliii]

There was a user mattkurek on the Discord server who I thought was going to surprise us this past weekend with a bootstrap 5 implementation, but haven't seen anything come through in the form of a PR so I think maybe they gave up like all the previous devs that have mentioned doing the same.

[ShivamJoker]

Okay it's been more than 3 years yet no updates. Lot of people above mentioned they are web devs and they can contribute but the issue is it will take lot of efforts but it should be doable if we can clear some stuffs out like frameworks, libraries, designs and flow.

React has got good community and UI libraries

If anyone is still interested please let me know.

[lloydjatkinson]

I’m still happy to help out with React and Typescript👍 there’s a lot of styling choices too like Tailwind or material design etc, or even CSS-in-JS.

[tommck]

Is it a viable idea to make use of Custom Elements for plugins? This way there wouldn't be a framework tie in for the future?

That seems like the most future-proof way to handle things.

I haven't looked at the current code yet, but it might even be possible to write a generic Custom Element wrapper with knockout support in it to support current plugins as a migration strategy.

I could be completely wrong here though. like I said, I haven't looked at the current code yet. It's been an eternity since I looked at KnockoutJS code

[lloydjatkinson]

Creating futureproof "framework" independent solutions with web components are a total misnomer and a myth promoted by web component library authors and the spec authors.

• Web Components are a way to create custom HTML elements that invoke a piece of JavaScript.
• They do not provide features such as reactive state, binding of state to the UI, or updating state in response to user events, which are provided by component frameworks.
• In order to recreate these rendering and state concerns, you would essentially be inventing your own framework or rending library (Knockout, React, whatever)
• These fundamental concerns still need to be addressed and implemented, regardless of whether or not you are using Web Components.

Source: I've been maintaining a design system component library written in Web Components for a couple of years and I just cannot emphasise how deeply misused and inappropriate of a web technology they are. Every turn results in yet more problems resulting from the flawed API of custom elements. Every day I wish it was React instead. My advice is don't nuke OctoPrint's web UI with web components.

https://dev.to/ryansolid/maybe-web-components-are-not-the-future-hfh