mirror of
https://github.com/inventree/inventree-website.git
synced 2025-04-28 05:26:44 +00:00
223 lines
14 KiB
HTML
223 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang=" en-US ">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<link rel="stylesheet" href="/assets/splide/css/splide.min.css">
|
|
<link rel="stylesheet" href="/assets/index.css">
|
|
<link rel="shortcut icon" type="image/png" href="/assets/icon/favicon.ico">
|
|
|
|
<script src="/assets/splide/js/splide.min.js"></script>
|
|
|
|
<!-- Fontawesome integration -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
|
|
|
|
<title>InvenTree - UI Roadmap - going 1.0</title>
|
|
<meta itemprop="description" name="description"
|
|
content="InvenTree is an open-source inventory management system which provides intuitive parts management and stock control. It is at the center of an ecosystem of a..." />
|
|
|
|
<!-- Begin Jekyll SEO tag v2.8.0 -->
|
|
<title>UI Roadmap - going 1.0 | InvenTree</title>
|
|
<meta name="generator" content="Jekyll v4.3.3" />
|
|
<meta property="og:title" content="UI Roadmap - going 1.0" />
|
|
<meta name="author" content="matmair" />
|
|
<meta property="og:locale" content="en_US" />
|
|
<meta name="description" content="In August 2023 we announced in a blog post that we are working on a new user interface for InvenTree. This post is a follow-up to that announcement and provides an overview of the progress we have made so far and what we are planning to do next. The most important information for you: the next release (0.17.0) will be the last with the old interface (CUI) as the default. The new interface (PUI) will be the default starting with the 0.18.0 release. The plan is to release 1.0 once PUI has all features ported, that will probably be the release after 0.18.0. 1.0 will not include CUI or the needed front- and backend code to support it." />
|
|
<meta property="og:description" content="In August 2023 we announced in a blog post that we are working on a new user interface for InvenTree. This post is a follow-up to that announcement and provides an overview of the progress we have made so far and what we are planning to do next. The most important information for you: the next release (0.17.0) will be the last with the old interface (CUI) as the default. The new interface (PUI) will be the default starting with the 0.18.0 release. The plan is to release 1.0 once PUI has all features ported, that will probably be the release after 0.18.0. 1.0 will not include CUI or the needed front- and backend code to support it." />
|
|
<link rel="canonical" href="/blog/2024/09/23/ui-roadmap" />
|
|
<meta property="og:url" content="/blog/2024/09/23/ui-roadmap" />
|
|
<meta property="og:site_name" content="InvenTree" />
|
|
<meta property="og:type" content="article" />
|
|
<meta property="article:published_time" content="2024-09-23T00:00:00+00:00" />
|
|
<meta name="twitter:card" content="summary" />
|
|
<meta property="twitter:title" content="UI Roadmap - going 1.0" />
|
|
<script type="application/ld+json">
|
|
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"matmair"},"dateModified":"2024-09-23T00:00:00+00:00","datePublished":"2024-09-23T00:00:00+00:00","description":"In August 2023 we announced in a blog post that we are working on a new user interface for InvenTree. This post is a follow-up to that announcement and provides an overview of the progress we have made so far and what we are planning to do next. The most important information for you: the next release (0.17.0) will be the last with the old interface (CUI) as the default. The new interface (PUI) will be the default starting with the 0.18.0 release. The plan is to release 1.0 once PUI has all features ported, that will probably be the release after 0.18.0. 1.0 will not include CUI or the needed front- and backend code to support it.","headline":"UI Roadmap - going 1.0","mainEntityOfPage":{"@type":"WebPage","@id":"/blog/2024/09/23/ui-roadmap"},"url":"/blog/2024/09/23/ui-roadmap"}</script>
|
|
<!-- End Jekyll SEO tag -->
|
|
|
|
</head>
|
|
|
|
<body class="flex flex-col antialiased cm-gray-1 min-h-screen">
|
|
<div class="flex-none">
|
|
<header class="cm-gray-2 body-font sticky top-0 z-50 bg-gradient-to-r from-white to-secondary">
|
|
<div class="container mx-auto flex flex-wrap p-5 flex-row items-center">
|
|
<a class="flex title-font font-medium items-center cm-gray-1 mb-0 mr-2" href="/">
|
|
<img src="/assets/logo.png" alt="logo" height="32" width="32" class="h-8">
|
|
<span class="ml-3 text-xl">InvenTree</span>
|
|
</a>
|
|
|
|
<div class="flex-grow xs:flex-none"></div>
|
|
|
|
<nav class="md:mr-auto md:py-1 xs:ml-4 xs:pl-4 xs:border-l xs:border-gray-400 flex flex-wrap items-center text-base justify-center">
|
|
<a class="mr-5 hover:cm-gray-1" href="/deploy.html">Deploy</a>
|
|
<a class="mr-5 hover:cm-gray-1" href="https://docs.inventree.org/en/stable/">Docs</a>
|
|
<a class="mr-5 hover:cm-gray-1" href="/blog">Blog</a>
|
|
</nav>
|
|
|
|
|
|
</div>
|
|
</header> <header>
|
|
|
|
<a href="/blog" class="flex items-center m-5 text-xl hover:underline">
|
|
<img class="w-6 h-6" alt="go back" src="/assets/back.svg">
|
|
<span>Back</span>
|
|
</a>
|
|
|
|
</header>
|
|
|
|
<article>
|
|
<h1>UI Roadmap - going 1.0</h1>
|
|
<p>
|
|
23 Sep 2024
|
|
|
|
|
|
<a href="/matmair">Matthias Mair</a>
|
|
</p>
|
|
<p>In August 2023 we announced <a href="/blog/2023/08/28/react">in a blog post</a> that we are working on a new user interface for InvenTree. This post is a follow-up to that announcement and provides an overview of the progress we have made so far and what we are planning to do next.
|
|
The most important information for you: the next release (0.17.0) will be the last with the old interface (CUI) as the default. The new interface (PUI) will be the default starting with the 0.18.0 release.<br>
|
|
The plan is to release 1.0 once PUI has all features ported, that will probably be the release after 0.18.0. 1.0 will not include CUI or the needed front- and backend code to support it.</p>
|
|
|
|
<p>Most of this article is probably only interesting for (plugin) developers, but we hope it gives you a good overview of what is happening.</p>
|
|
|
|
<h2 id="pui--cui---a-short-overview">PUI / CUI - A short overview</h2>
|
|
|
|
<p>The new interface is called PUI (Platform User Interface) and the old one CUI (Classic User Interface). PUI is built with React and is a single-page application. CUI is built with Django templates and uses a mixture of jQuery, templated JS and some libraries.
|
|
PUI is designed to be more consistent, use the API everywhere and support better testing (end-to-end, typing). The original blog post has more information on the <a href="/blog/2023/08/28/react#design-goals">design goals</a>.</p>
|
|
|
|
<h2 id="why-remove-cui">Why remove CUI?</h2>
|
|
|
|
<p>CUI has proven to be hard to understand for new contributors and hard to maintain in a consistent quality. Some common issues like cache invalidation, inconsistent rendering and hard-to-enforce permissions are easier to solve in PUI.
|
|
Therefore 1.0 will be PUI only. The compiled javascript, CSS and html files will be removed from the repository. CUI-only endpoints/tags will also be removed. Some HTML rendering will be kept as the report/label generation uses that.</p>
|
|
|
|
<p>This will probably remove around 2k files from the repo, around 370k lines. As of writing, we have 4.4k files and 2.4M lines in the repo.</p>
|
|
|
|
<h2 id="effect-on-plugins">Effect on plugins</h2>
|
|
|
|
<p>Plugins that render into the UI will need to be updated to work with PUI. This could affect you if your plugins use the mixins <code class="language-plaintext highlighter-rouge">PanelMixin</code>, <code class="language-plaintext highlighter-rouge">SettingsContentMixin</code>, <code class="language-plaintext highlighter-rouge">NavigationMixin</code> or <code class="language-plaintext highlighter-rouge">UrlsMixin</code>. Rendering into PUI is best done with <code class="language-plaintext highlighter-rouge">UserInterfaceMixin</code> (available in 0.17.0) - which is actively expanded to support rendering more tightly integrated than <code class="language-plaintext highlighter-rouge">PanelMixin</code> and CUI. For example <a href="https://github.com/inventree/InvenTree/pull/8137">#8137</a> supports rendering custom template editors in PUI.</p>
|
|
|
|
<p>We will issue guidance regarding the transition of plugins into the new mechanisms before 1.0 goes to production.</p>
|
|
|
|
<h2 id="how-can-you-help">How can you help?</h2>
|
|
|
|
<ul>
|
|
<li>Use the new UI - if you are on the 0.16.x release train your instance should already be serving it</li>
|
|
<li>Report bugs - if you find something that is not working as expected please report it</li>
|
|
<li>Report missing features - if you are missing something from CUI please report it (we have an EPIC<a href="https://github.com/inventree/InvenTree/issues/5212"> that tracks them</a>)</li>
|
|
<li>Start looking into developing PUI and contributing - we use React and Mantine, widely used technologies</li>
|
|
<li>Support the development - we have been developing PUI for over a year with more or less 3 people. Donations could help us spend more time or awarding bounties for features/design improvements.</li>
|
|
</ul>
|
|
|
|
<h2 id="the-big-10">The big 1.0</h2>
|
|
|
|
<p>1.0 will be a big milestone for InvenTree. InvenTree has been running in the heart of many companies for years. The switch to PUI enables much safer work on the UI. The release number 1.0 signals that the last part of the system is now modernised and ready for the future. We are looking forward to it and hope you are too.</p>
|
|
|
|
<p>Switching to 1.0 will also mean that we will follow SemVer fully. Big breaking changes will only be in major releases, feature releases (1.0, 1.1, 1.2) will follow the SemVer rules. This will make it easier for some of our enterprise users who face backlash or difficulty because of the below 1.0 version number.</p>
|
|
|
|
<p>We are discussing a few more breaking changes in 1.0 - feel free to chime in on the dedicated issue <a href="https://github.com/inventree/InvenTree/issues/6417">#6417</a>.</p>
|
|
|
|
|
|
</article>
|
|
</div>
|
|
|
|
<div class="flex-grow"></div>
|
|
<div class="flex-none">
|
|
<footer class="cm-gray-2 body-font">
|
|
<div class="container px-5 pt-8 mx-auto flex md:flex-row md:flex-nowrap flex-wrap flex-col">
|
|
<div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
|
|
<div class="flex title-font font-medium items-center md:justify-start justify-center cm-gray-1">
|
|
<img src="/assets/logo.png" alt="logo" height="32" width="32" class="h-8">
|
|
<span class="ml-3 text-xl">InvenTree</span>
|
|
</div>
|
|
<p class="mt-2 text-sm cm-gray-3">Intuitive Inventory Management</p>
|
|
</div>
|
|
|
|
<div class="flex-grow flex flex-wrap md:pl-10 mb-1 md:mt-0 mt-10 md:text-left text-center md:justify-left justify-center">
|
|
|
|
|
|
<div class="md:w-1/4 px-4">
|
|
<h2 class="footer-categorie title-font">
|
|
Quick
|
|
</h2>
|
|
<nav class="list-none mb-10"><ul>
|
|
|
|
<li><a href="/demo.html" class="footer-link">Demo</a></li>
|
|
|
|
<li><a href="/deploy.html" class="footer-link">Deploy</a></li>
|
|
|
|
<li><a href="https://docs.inventree.org/en/stable/" class="footer-link">Docs</a></li>
|
|
|
|
<li><a href="/news" class="footer-link">News</a></li>
|
|
|
|
<li><a href="/plugins" class="footer-link">Plugin List</a></li>
|
|
|
|
</ul></nav>
|
|
</div>
|
|
|
|
<div class="md:w-1/4 px-4">
|
|
<h2 class="footer-categorie title-font">
|
|
<a href="/extend/">Ecosystem</a>
|
|
</h2>
|
|
<nav class="list-none mb-10"><ul>
|
|
|
|
<li><a href="/extend/api.html" class="footer-link">API</a></li>
|
|
|
|
<li><a href="/extend/app.html" class="footer-link">App</a></li>
|
|
|
|
<li><a href="/extend/plugin/" class="footer-link">Plugins</a></li>
|
|
|
|
<li><a href="/extend/integrate/" class="footer-link">Integrations</a></li>
|
|
|
|
</ul></nav>
|
|
</div>
|
|
|
|
<div class="md:w-1/4 px-4">
|
|
<h2 class="footer-categorie title-font">
|
|
Sitemap
|
|
</h2>
|
|
<nav class="list-none mb-10"><ul>
|
|
|
|
<li><a href="/about/" class="footer-link">About</a></li>
|
|
|
|
<li><a href="/alternatives/" class="footer-link">Alternatives</a></li>
|
|
|
|
<li><a href="/blog" class="footer-link">Blog</a></li>
|
|
|
|
<li><a href="/contribute.html" class="footer-link">Contribute</a></li>
|
|
|
|
<li><a href="/support.html" class="footer-link">Support</a></li>
|
|
|
|
</ul></nav>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-100">
|
|
<div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
|
|
<p class="cm-gray-2 text-sm text-center sm:text-left">© 2021-now InvenTree by<a href="https://github.com/inventree" rel="noopener" class="cm-gray-2 ml-1" target="_blank">@inventree</a>— website made with ♥ by<a href="https://github.com/matmair" rel="noopener" class="cm-gray-2 ml-1" target="_blank">@matmair</a></p>
|
|
<span class="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
|
|
<a href="https://github.com/inventree/inventree" alt="github repo" class="ml-3 cm-gray-3">
|
|
<img class="h-5 w-5" alt="GitHub logo" src="/assets/github.svg">
|
|
</a>
|
|
<a href="https://reddit.com/r/inventree" alt="Reddit" class="ml-3 cm-gray-3">
|
|
<img class="h-5 w-5" alt="Reddit logo" src="/assets/reddit.svg">
|
|
</a>
|
|
<a href="https://twitter.com/inventreedb" alt="Twitter" class="ml-3 cm-gray-3">
|
|
<img class="h-5 w-5" alt="Twitter logo" src="/assets/twitter.svg">
|
|
</a>
|
|
<a href="https://chaos.social/@InvenTree" rel="me" alt="Mastodon" class="ml-3 cm-gray-3">
|
|
<img class="h-5 w-5" alt="Mastodon logo" src="/assets/mastodon.svg">
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|