Front End Roadmap

[SchrodingersGat]

The InvenTree project, from rather humble beginnings, has accrued a very large feature set and frankly the front-end experience is suffering. I'm not by any means a web developer, and the UX design has been leveraged and hacked together from various components, without much thought for consistency or "best practice"

I would like to gauge interest and suggestions from users, and especially those with experience in front-end web design. Following are some key points I would like to see changed / improved in future revisions of InvenTree

UX Consistency

Refactor many pages for a common "feel" or UX approach across the entire site. Currently each page has its own quirks.

Modernize

I don't mean "bloat" ;) Current front end stack is pretty much just jquery and bootstrap, with some small libraries thrown in. If we don't need to use a more modern js framework, that's great! But some conversations about the CSS and "look and feel" need to take place

Too Many Clicks

Many operations currently require too many "clicks" from the user.

• Click on a button
• Open a dialog box
• Click on a text entry
• Enter data
• Click "Accept"
• Refresh page

I would like many actions to move to "inline" (i.e. data can be directly edited where it is displayed on the page).

To achieve this, we would need to make further use of the REST API

REST API

The REST API is currently used somewhat throughout the web interface. Primarily for rendering the various live data tables. I'd like to see this used more:

• Remove duplicate code paths (forms rendered in django and also serialized in DRF)
• Move all validation code to the REST API for simplification
• More use of seamless data validation (with ajax requests)
• Less reliance on pop-up forms
• Less need to refresh an entire page - just reload the particular page parts

SPA Design

The current "tabbed" pages provide a lot of data for a given view (e.g. "Part" page) but doing a page refresh every time you change tabs is annoying.

I would like to see the entire page loaded once, and swapping between tabs simply swaps out the content in the main page panel.

==================

Obviously a lot of work here! This is not going to happen right away, there's a lot of dev work to finish off first. But I'm keen for comments and input. I'll try not to take any criticism of my naive design choices too personally ;)

@matmair @eeintech I know you guys will want to have some input on this!

==================

References

• Redesign of Part main page #1673
• Change (some) select2 instances to use AJAX queries #1234
• Investigate DRF Forms #1213

[matmair]

Full disclosure: I am an engineer. I do not have any training in UX-design. And I really like Bootstrap with pure JS if possible - because it is predictable.

I generally like InvenTree’s UX. It is fairly simple to learn and easy to understand (compared to all solutions I used previously).
The modals sometimes feel a bit old, but they are a simple paradigm that everybody understands and they work.

Unrealistic ideas

A general Frontend-Stack redesign would be great – maybe with a small developer-doc with a components list and examples how stuff should and shouldn’t be used.
For SPA maybe a switch to a JS based Framework could work. I have seen examples of a Django + DRF + React + Bootstrap Stack. That would be quite a technology switch-up tough.
I experimented with that for a simple InvenTree-lookup UI myself a few weeks ago and that could work. I could provide you (private – it is really nothing I would show off publicly) access to my tests.

Time / cost considerations

But I have a feeling that might take a lot of time and restructure quite a lot of code. As this is an OS-project the question arises if you want to commit the huge amount of effort required for this in UX or invest it in other functionality.

Maybe a middle-way could be a github project with issues for everything you would like to see change so volunteers can help you pick at it. For that I would recommend working on PR and issue templates and a clear UI/UX doc-site with roadmap, mockups, etc. before starting.

If there is a clear set of goals and guidelines I would be happy to help refactor the UI-code. Although I would prefer to find a way to maybe make the key-points of #1656 happen. I would love to provide my local lab with something more robust in this area when the next uni-semester starts in late august.
But as always you are the maintainer. If you do not want that to happen I will stop pursuing this. Tell me if I get annoying.

[SchrodingersGat]

Nothing wrong with being an engineer! This is my background too and (if nothing else) InvenTree has been a great project to learn a new broad set of programming tools and skills.

I agree that this all seems like a lot of work, and I'm certainly not going to dive in right away.

My preference is also to get #1656 integrated before doing any sort of major UI overhaul.

I would also want to see it broken down into manageable chunks! At this point I'm simply looking to see if anyone has any strong preferences on the interface and general comments on where it should go from here.

[eeintech]

Thanks @SchrodingersGat for sharing your thoughts on a UI overhaul, it's good for everybody to be aware and share their experience 👍

My knowledge of front-end web design is certainly limited. I have been wanting to try JS frameworks like Vue.js as building dynamic pages seems so easy, it is just spare time that I'm lacking to dig an effort in 😄

Having deployed our InvenTree instances at my company, the main struggle for new users is connecting pieces together (Part vs Manufacturer/Supplier vs BOM vs Stock) and the navigation between all those information. A "user-friendly" SPA (single page application?) entry point would be huge. For instance, assuming #1673 is implemented, if all the "summary" tables of the Part detail view (parameters, attachments, supplier/manufacturer parts, stock) could be expanded to take over the full view in just one click and without leaving the page, that would be mind blowing!

I personally don't care about the finish and polishing of the UI, I actually think the current UI looks modern compare to other applications. I would prefer the focus to be on improving practicality (so I guess UX) over anything else.
The less I have to "teach" InvenTree, the closer I would feel this software is getting to be a "great" software.
InvenTree has a huge amount of features but without this streamlined experience, it can be overwhelming.

In conclusion, I love the direction of your proposal. I can help with the restructuring the REST API if that'd help (not that I have a huge amount of experience with that either), however I'll be more of a weight for front-end stuff at this time 😅

[SchrodingersGat]

@eeintech I 100% agree that we should focus on improving usability over "UI polish".

Reducing user input burden and providing a cleaner more logical layout of data would be great.