Last week we talked about our plans to build a new API to support Funkwhale's new and improved functionality. While this new API is important, most people interact with Funkwhale through the Funkwhale web app. In fact, this is what most people think of when you say "Funkwhale". In this post, I'll take you through the changes and improvements we're planning for the web app.
The story so far
The Funkwhale web app has grown organically over the last eight years. We haven't had the opportunity to go back and overhaul the underlying code or introduce new designs, meaning that some parts of the app don't perform very well and others look very out of place.
A big part of the reason for this is that the Funkwhale web app was mostly designed and implemented by a single developer (Agate) over the years, then later picked up by an entirely different team. There haven't always been designs to follow, so things have got a bit untidy and unkempt.
Funkwhale 1.3.0 brought big changes to the web app, though you may not have noticed them. wvffle updated a lot of the underlying code, but the design and functionality remained the same. In the meantime, mjourdan has been working diligently on creating a cohesive design for the whole app, as well as design guidelines for us to follow. The two of them have collaborated on the creation of the Funkwhale UI library, which we plan to use across the whole web app.
Iteration vs. replacement
Updating the web app is a process that requires a few steps:
- Define how a feature or page should work and what it should do
- Design the interface and interactions for the new feature
- Write the code that powers the new feature
- Add new components to the UI library, if necessary
- Build the new interface
There are a few ways we could go about adding these new features, but the main two approachs are iteration and replacement.
- Iteration: this approach would allow us to leave our existing web app in place and swap out elements a bit at a time.
- Replacement: this approach would require us to update the whole web app at once when the new one is complete.
We debated for a while about how we would introduce new web app designs. After we created the UI library, we considered replacing components in the web app a bit at a time. For example: maybe we replace all buttons with Funkwhale UI buttons in the next version, or all text inputs with Funkwhale textareas. This approach makes it easy for us to ship out new content and get people excited, but it presents a few issues:
- Replacing individual components makes everything look inconsistent for a while
- Some new designs require new functionality to be developed, so we still have to replace the code later
We decided that the best approach was to build new parts of the interface and enable people to opt in to using them. We will build the new features and interfaces, then add them to releases to let users test them out and report issues.
Once we've implemented everything, we'll enable the new interface for all users and remove the old code 👋
More platforms
Part of the drive to build this new app is introducing support for more platforms. Currently, the Funkwhale web app is available in browsers and as a PWA (Progressive Web App). However, tools like Tauri present an opportunity to expand the usefulness of the web app.
We plan to make the Funkwhale web app available natively for all platforms by shipping the same app for web, desktop, and mobile devices using Tauri. This means we have to ensure that we update all designs to support mobile devices properly and define sensible offline behavior for devices that may disconnect from the internet. Just this week, we merged initial support for Tauri and have produced our first desktop build 🎉
Using a single application and deprecating our existing mobile app enables us to focus our efforts and make a unified experience for Funkwhale that is excellent on all devices 🤩
What does the new web app look like?
The new web app design isn't just a fresh coat of paint. We plan to create a new app from the ground up that brings improvements to the user interface, the user experience, and the performance of the application. To give you an example of this, here's a sneak peak at the new upload process!
How you can help
If you want to help us with building this exciting new interface, here are a few ways you can help:
Donations
Running the Funkwhale project costs money. We have to pay for hosting, external audits, and paying a part-time maintainer to manage everything.
If you are willing and able to offer money to the project - either a one-time donation or a recurring donation - please check out our donation page. Any amount helps us enormously.
Talk about us
If you're excited about these changes, talking about them and spreading the word to your followers is a great way to help! The more people hear about the project and use it, the more support the project receives.
Contribute to the project
Designing and building a new web app is no small task, and the more people we can get involved the better. Specifically, you can help with the following:
- Feeding back on designs and demos to let us know if anything could be improved
- Testing new designs when they get implemented
- Getting involved in the design process itself
- Contributing to the web app codebase and reviewing changes.
If you have the time to spare and want to get involved, check out our contribution page for more information.