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.

A significant milestone came with the introduction of the REST API (we use the Django Rest Framework). Now, the user interface could be separated from the data, which allowed some great improvements to the user experience. Now, content could be loaded dynamically via the API, and rendered on the client side using javascript.

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
• Inscrutable: With a mix of server-side html and client-side javascript, it is very difficult to work out how a certain function works, and how to implement changes.

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.

Design Goals

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

Update API

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.

Reimplement UI

Every single page / view needs to be rewritten in React. While this is a lot of work, it will be significantly less work than it took to originally write it all in javascript. We can leverage the reusable components and design patterns provided by React to significantly reduce code duplication. Additionally, there are already a lot of “common” interface patterns (such as data tabulation) used in InvenTree which should cut down the required work.

Test Everything

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.

Advantages

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

Release Timeline

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

The intent for distributing the UI is to bundle a set of compiled javascript files with the installer. This means that the install / upgrade process is seamless for users:

• 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.

Interface Preview

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/

Development Assistance

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.