Direction of the frontend #338

moonglum commented 2025年04月27日 16:45:51 +02:00

I'm an experienced frontend dev, and would love to help in the frontend part of Forgejo. I'm also happy and experienced to do modernization efforts in this area. But right now, I'm not sure what the target setup for the frontend is. I found the discussion #73, but it has not been active in a while. But I get the impression that you want to reduce the usage of JS in general. Am I right in that?

Looking through the dependencies and code, I see:

• Vue.js
• jQuery
• htmx (with idiomorph)
• If I'm not mistaken, bootstrap is in this project, but only the JS part and not CSS.

Which of those frameworks/libraries do you want to keep in the project? Do you want to go Vanilla.js? Which ones would you like to see removed?

PS: This is not in any way a critique, I understand that this project went through many transitions. But to contribute to it, I want to understand where you intend to move to.

I'm an experienced frontend dev, and would love to help in the frontend part of Forgejo. I'm also happy and experienced to do modernization efforts in this area. But right now, I'm not sure what the target setup for the frontend is. I found the discussion #73, but it has not been active in a while. But I get the impression that you want to reduce the usage of JS in general. Am I right in that? Looking through the dependencies and code, I see: * Vue.js * jQuery * htmx (with idiomorph) * If I'm not mistaken, bootstrap is in this project, but only the JS part and not CSS. Which of those frameworks/libraries do you want to keep in the project? Do you want to go Vanilla.js? Which ones would you like to see removed? PS: This is not in any way a critique, I understand that this project went through many transitions. But to contribute to it, I want to understand where you intend to move to.

moonglum commented 2025年04月27日 16:47:20 +02:00

@jak2k is looking at removing some jQuery code, so he is interested in this question as well.

@jak2k is looking at removing some jQuery code, so he is interested in this question as well.

Beowulf commented 2025年04月27日 16:57:57 +02:00

But I get the impression that you want to reduce the usage of JS in general. Am I right in that?

Yes

Which of those frameworks/libraries do you want to keep in the project? Do you want to go Vanilla.js? Which ones would you like to see removed?

From what I remember/know, this the current plan is:

We want to get rid of jQuery over time and probably Vue as well. Htmx should just be an add-on (prevent complete page reloads when js is available). If js is needed vanilla js is the preferred way. 🤔

Multiple people working on the UI side are also available at https://matrix.to/#/#forgejo-ui:matrix.org 😃

> But I get the impression that you want to reduce the usage of JS in general. Am I right in that? Yes > Which of those frameworks/libraries do you want to keep in the project? Do you want to go Vanilla.js? Which ones would you like to see removed? From what I remember/know, this the current plan is: We want to get rid of jQuery over time and probably Vue as well. Htmx should just be an add-on (prevent complete page reloads when js is available). If js is needed vanilla js is the preferred way. 🤔 Multiple people working on the UI side are also available at https://matrix.to/#/#forgejo-ui:matrix.org 😃

moonglum commented 2025年04月27日 18:56:32 +02:00

Thanks, @Beowulf ! That helps 🙇 I'm happy to start working on removing jQuery step by step. Then we can continue with Vue after that 😉

I will set up a Matrix account, and join sometime in the next days 😄

Thanks, @Beowulf ! That helps 🙇 I'm happy to start working on removing jQuery step by step. Then we can continue with Vue after that 😉 I will set up a Matrix account, and join sometime in the next days 😄

n0toose commented 2025年04月27日 21:15:38 +02:00

@jak2k got a bit far with figuring out why it's difficult to remove the jQuery code and seemed to know his stuff, perhaps it might make sense to include him if he feels like participating further. :)

@jak2k got a bit far with figuring out why it's difficult to remove the jQuery code and seemed to know his stuff, perhaps it might make sense to include him if he feels like participating further. :)

moonglum commented 2025年04月28日 11:12:42 +02:00

Of course, happy to work with @jak2k <3 Let me know which parts you are working on right now, so we don't work on the same thing. Also happy to provide feedback if you want any!

Of course, happy to work with @jak2k <3 Let me know which parts you are working on right now, so we don't work on the same thing. Also happy to provide feedback if you want any!

floss4good commented 2025年04月28日 13:10:32 +02:00

I was also thinking about starting a similar discussion, not necessarily only regarding the JS dependencies but also the CSS ones, since I asked myself multiple times whether I should use things like Fomantic, or Tailwinds of rather try to implement new features without using these frameworks.

From my point of view a great first step would be if a consensus can be reached amoung the core contributors regarding what frameworks are still considered for the long run and which should be avoided; and the conclusions should be communicated at least as recommendations for new contributions.

I was also thinking about starting a similar discussion, not necessarily only regarding the JS dependencies but also the CSS ones, since I asked myself multiple times whether I should use things like Fomantic, or Tailwinds of rather try to implement new features without using these frameworks. From my point of view a great first step would be if a consensus can be reached amoung the core contributors regarding what frameworks are still considered for the long run and which should be avoided; and the conclusions should be communicated at least as recommendations for new contributions.

jak2k commented 2025年04月28日 19:35:48 +02:00

whether I should use things like Fomantic, or Tailwinds

Fomantic seems to provide things like dropdowns and dialogs and is the reason jQuery is still needed. Moving away from it, at least on the JS side, is probably a good thing.

Tailwind just moves the styles into the HTML, which means a lot of templating would be required to achieve a proper design system. I think vanilla CSS with some variables is a much better solution.

> whether I should use things like Fomantic, or Tailwinds Fomantic seems to provide things like dropdowns and dialogs and is the reason jQuery is still needed. Moving away from it, at least on the JS side, is probably a good thing. Tailwind just moves the styles into the HTML, which means a lot of templating would be required to achieve a proper design system. I think vanilla CSS with some variables is a much better solution.

moonglum commented 2025年04月28日 19:38:39 +02:00

I agree with jak2k on the direction of CSS 👍

For JS, I think we should step by step move to vanilla JS with custom elements. There might be some complex components for which Vue is a good fit, but I think we should discuss them on a case by case basis.

I agree with jak2k on the direction of CSS 👍 For JS, I think we should step by step move to vanilla JS with custom elements. There might be some complex components for which Vue is a good fit, but I think we should discuss them on a case by case basis.

jak2k commented 2025年04月28日 20:14:13 +02:00

For JS, I think we should step by step move to vanilla JS with custom elements.

I think we don't even need custom elements for many simple things. Confirmation dialogs could be a simple as a global confirm function that uses the native element. (Browser support is at 96.31%). Dropdowns can use the native elements too with some progressive enhancement (JS for autocomplete; CSS with the new picker selector, which is only at 58.53%).

I don't think keeping Vue for the more complex ones would hurt anyone, as JS is required for them anyway.

> For JS, I think we should step by step move to vanilla JS with custom elements. I think we don't even need custom elements for many simple things. Confirmation dialogs could be a simple as a global confirm function that uses the native element. (Browser support is at 96.31%). Dropdowns can use the native elements too with some progressive enhancement (JS for autocomplete; CSS with the new picker selector, which is only at 58.53%). I don't think keeping Vue for the more complex ones would hurt anyone, as JS is required for them anyway.

floss4good commented 2025年07月27日 23:39:42 +02:00

Concerning my own question:

I asked myself multiple times whether I should use things like Fomantic, or Tailwinds of rather try to implement new features without using these frameworks.

@Gusted wrote in forgejo/forgejo#8694 (comment):

It's possible to migrate to tailwind v4... but time is better spent to just move away from tailwind. Their new usage is incompatible with the current layout Forgejo uses for CSS.

Concerning my own question: > I asked myself multiple times whether I should use things like Fomantic, or Tailwinds of rather try to implement new features without using these frameworks. @Gusted wrote in https://codeberg.org/forgejo/forgejo/pulls/8694#issuecomment-6014062: > It's possible to migrate to tailwind v4... but time is better spent to just move away from tailwind. Their new usage is incompatible with the current layout Forgejo uses for CSS.