Idea: Create a Progressive Web App for Gitea #288

lhinderberger commented 2020年09月20日 15:30:12 +02:00

Hey everyone! 👋

I couldn't help noticing that a large number of issues reported on Codeberg are related to requested UI/UX changes, including frontend bugs and customizations.

I noticed that although Gitea does have an API, Gitea's frontend still seems to be mostly server-side rendered, creating hard dependencies between frontend, backend and frontend customizations (such as we do in build-deploy-gitea). That, to me, makes the frontend development process rather hard, requiring good full-stack development skills to be able to make even moderate changes.

I think it would be beneficial for us to make development on Codeberg's/Gitea's frontend more approachable for developers who are specialized in modern frontend development.

Therefore, I want to propose the idea to create a standalone web-based frontend for Gitea that accesses Gitea only using the API, similar to what GitNex does for Android.

Doing so would likely speed up frontend development and lead to UI feature requests being implemented more quickly, making users happy :) Due to a simpler architecture, we also might be able to react to new front-end technologies more quickly.

Lastly, rendering our frontend client-side as a Progressive Web App might improve performance due to better caching and it might take some load off our servers.

The best thing is that this can be developed and tested without affecting our current technology stack and without requiring major changes to Gitea. Only Gitea's API might need some extensions here and there, if we should encounter limitations.

What are your thoughts on this? And are there people who would like to participate in such a project?

I'm happy to hear your feedback, ideas and criticism! :)

Hey everyone! 👋 I couldn't help noticing that a large number of issues reported on Codeberg are related to requested UI/UX changes, including frontend bugs and customizations. I noticed that although Gitea does have an API, Gitea's frontend still seems to be mostly server-side rendered, creating hard dependencies between frontend, backend and frontend customizations (such as we do in build-deploy-gitea). That, to me, makes the frontend development process rather hard, requiring good full-stack development skills to be able to make even moderate changes. I think it would be beneficial for us to make development on Codeberg's/Gitea's frontend more approachable for developers who are specialized in modern frontend development. Therefore, I want to propose the idea to create a standalone web-based frontend for Gitea that accesses Gitea only using the API, similar to what GitNex does for Android. Doing so would likely speed up frontend development and lead to UI feature requests being implemented more quickly, making users happy :) Due to a simpler architecture, we also might be able to react to new front-end technologies more quickly. Lastly, rendering our frontend client-side as a Progressive Web App might improve performance due to better caching and it might take some load off our servers. The best thing is that this can be developed and tested without affecting our current technology stack and without requiring major changes to Gitea. Only Gitea's API might need some extensions here and there, if we should encounter limitations. What are your thoughts on this? And are there people who would like to participate in such a project? I'm happy to hear your feedback, ideas and criticism! :)

6543 commented 2020年09月20日 22:20:37 +02:00

In my opinion: I like the current way UI things are handled,

But I'm happy to help out with API stuff just @ping to me

And having Alternative UI's is nice, so user's can then decide what to use

In my opinion: I like the current way UI things are handled, But I'm happy to help out with API stuff just @ping to me And having Alternative UI's is nice, so user's can then decide what to use

vanous commented 2020年09月22日 12:34:36 +02:00

Related gitea issues:

https://github.com/go-gitea/gitea/issues/8174

https://github.com/go-gitea/gitea/issues/5937

With all the great work being done on GitNex, it is sad we cannot reuse that...

Related gitea issues: https://github.com/go-gitea/gitea/issues/8174 https://github.com/go-gitea/gitea/issues/5937 With all the great work being done on GitNex, it is sad we cannot reuse that...

lhinderberger commented 2020年09月22日 14:44:05 +02:00

Thanks for sharing the links!

Seeing that the Gitea developers seem to prefer Vue.js, it might be wise to use that as the base for the (hypothetical, at this point) progressive web app, to enable code to be shared, where possible.

_{Also, Vue.js 3.0 has just been released 🎉}

Thanks for sharing the links! Seeing that the Gitea developers seem to prefer Vue.js, it might be wise to use that as the base for the (hypothetical, at this point) progressive web app, to enable code to be shared, where possible. _{Also, Vue.js 3.0 has just been released 🎉}

lhinderberger commented 2020年09月22日 14:45:43 +02:00

With all the great work being done on GitNex, it is sad we cannot reuse that...

While it indeed might be hard to reuse code due to the different technology stacks, we can certainly share knowledge, I think :)

> With all the great work being done on GitNex, it is sad we cannot reuse that... While it indeed might be hard to reuse code due to the different technology stacks, we can certainly share knowledge, I think :)

techknowlogick commented 2020年09月26日 08:21:11 +02:00

https://github.com/unfoldingWord/gitea-react-toolkit may be what you are looking for, it is a component library to build custom interfaces on top of gitea.

https://github.com/unfoldingWord/gitea-react-toolkit may be what you are looking for, it is a component library to build custom interfaces on top of gitea.

martijndeb commented 2020年09月27日 11:30:01 +02:00

This is a big project, I'd like to take a stab at it from scratch to improve my frontend skills. Most likely I'll start a PWA git client based on vue 3 soon. Those react components are a good resource, but it uses axios and react. Axios can be replaced with the browser native fetch api directly (I don't like bloat). I've worked with react before and I also like Vue a bit better so far.

This is a big project, I'd like to take a stab at it from scratch to improve my frontend skills. Most likely I'll start a PWA git client based on vue 3 soon. Those react components are a good resource, but it uses axios and react. Axios can be replaced with the browser native fetch api directly (I don't like bloat). I've worked with react before and I also like Vue a bit better so far.

lhinderberger commented 2020年09月27日 13:17:05 +02:00

Most likely I'll start a PWA git client based on vue 3 soon.

That is magnificent! If you need a helping hand that knows his way around Vue, let me know :)

> Most likely I'll start a PWA git client based on vue 3 soon. That is magnificent! If you need a helping hand that knows his way around Vue, let me know :)

fnetX commented 2021年10月04日 15:41:58 +02:00

I don't think it makes sense to track this downstream any more. Relevant stuff for a frontend rewrite and its direction can be tracked upstream at Gitea. I doubt Codeberg will be of any help for this topic if we have our own discussion issue here.

If someone is interested to step up here, please get in touch with the Gitea maintainers :-)

I don't think it makes sense to track this downstream any more. Relevant stuff for a frontend rewrite and its direction can be tracked upstream at Gitea. I doubt Codeberg will be of any help for this topic if we have our own discussion issue here. If someone is interested to step up here, please get in touch with the Gitea maintainers :-)