User Interface Refactor
28 Aug 2023 Oliver
The InvenTree development team is thrilled to share some exciting news about the ongoing efforts to significantly overhaul our user interface. To provide a major facelift to InvenTree, we are migrating our entire user interface to the React framework.
A Brief History
The InvenTree software project started as a pure server-side app, with the pages rendered on the server using html template files, via the Django template engine. As the amount of data handled by InvenTree increased, this approach very quickly became untenable, with page loading times slowing noticeably.
While various improvements have been made, and new features implemented, this has been how the InvenTree user interface has functioned for a number of years. Functionality (and code) has grown somewhat organically, and without much in the way of an overarching design strategy.
A lot of the user interface is still dynamically rendered on the server, with the “gaps” filled in by the client (via API calls). This approach has some drawbacks:
- Inconsistent: There is no real guiding strategy as to which parts are rendered by the server or the client
- Inefficient: Rendering UI elements on the server via templates is very slow, and we cannot make use of modern design patterns
So, it’s time for a clean break! Moving to a modern UI framework is a daunting task, but with some very clear benefits and provides a path into the future.
The primary design goal for our refactor is to render the entire user interface dynamically, using React. To achieve this, we have to implement the following:
- Update the API
- Reimplement the UI
- Test everything
As it stands, the API currently provides the majority of required data to various interfaces, including the web interface, mobile app, and any third party integrations. However there are some data which are not currently accessible via the API, and rendered on-demand by the server. So, we need to ensure that all displayed data are available via API endpoints.
A big advantage of moving to a modern UI framework is the ability to enhance our unit testing. Currently, while the server code has good code coverage, the front-end code has very little. Our move to React will include a focus on test driven development, to ensure that our front-end is as bug free as is reasonably possible.
There are a number of significant advantages that this refactor will afford:
- User Experience: A major driver here is a better user experience. The interface will be more “user friendly”, pages will load more smoothly, and the interface flow (should) feel more intuitive
- Efficiency Gains: As the django server no longer has to render front-end code, it should me much more responsive for API requests
- Improved API: As a necessary requirement, our API will be enhanced. Data availability and response times will be improved.
- Reduce Served Load: By only loading data when necessary, we will drastically reduce the load on the server
- Code Separation: Good separation of code between the server (API) and front-end (UI) will result in cleaner code
- Better for Developers: By moving to a well-known modern framework, we will make it much easier for other developers to contribute to our codebase.
- Future Development: We will have a clear path forward for development of modern, responsive interface features which are not possible with our current toolchain.
- Easier Integrations: Developers can implement responsive integrations with external services or plugins
Currently, the “master” branch of InvenTree ships with the “legacy” interface, and the new interface (which we have codenamed “platform”). We will be shipping both interfaces side-by-side while we work on the development.
When the new interface is ready to be released, we will have a clean break, with the old interface removed entirely.
Our aim is to have the entire user interface rewritten by the end of the year. Ideally, with developer assistance we could have it done sooner!
You can track the progress of these tasks here - https://github.com/inventree/InvenTree/issues/5212
Distributing the Interface
- End users will not need to install node / npm / yarn / etc on their system
- UI files are compiled and minified, to reduce download size
Developers will need to install the required development packages to build the user interface on their machine. This is managed by our requirements files.
The new interface is currently shipping in the “master” branch of InvenTree, and can be accessed at the
/platform/ URL. This is very much a work in progress, but is useful for users or developers who wish to see the progress of the overhaul, or (even better) help us develop it.
You can see the latest version on the demo site, at https://demo.inventree.org/platform/
One major goal of the refactor is to attract more developers by using a well-established modern framework. If you would like to contribute to the new interface, please raise a PR over on our GitHub page.