Refonte du frontend d’OCS Inventory : un composant au cœur de l’expérience utilisateur

La refonte d’OCS Inventory vers la version 3.0 commence par le composant frontend.

Dans le cadre de la refonte globale de notre application, nous nous intéressons aujourd’hui à un composant essentiel : le frontend. Ce dernier représente la première interaction entre l’utilisateur et l’application. En le repensant, notre objectif est de proposer une interface plus fluide, intuitive et évolutive. Cette première étape est capitale pour offrir une base solide au reste du projet. Explorons ensemble les enjeux, les choix effectués et les bénéfices attendus de cette transformation.

Pour faire suite à la première interview, nous allons développer un composant spécifique du rework, le frontend. Peux-tu nous expliquer à quoi il sert ce composant ?

Le frontend est le composant permettant de gérer l’affichage des données de l’application. Il s’agit de l’interface visuelle présentée dans le navigateur web de l’utilisateur.

Cette interface étant le « point d’entrée » de l’application, il nous a semblé pertinent de la présenter en premier. Il s’agit de l’interface web, utilisée au quotidien par les techniciens et les superviseurs pour les actions courantes. En quelque sorte, c’est la vitrine de l’application.

Quel sont les enjeux de la refonte d’un frontend ?

Certains enjeux ont été abordés lors du précédent article et sont global à la refonte de l’application (tout composant confondu).Il faut bien dissocier les enjeux globaux de la refonte (cf : premier article) et ceux spécifiques à l’interface web.

Je vais en rappeler quelques-uns :

• Le choix de la technologie est un point important permettant de facilement prévoir l’avenir du produit sans avoir à se soucier de la technologie ne soit pas adaptée ou qu’elle ne soit pas assez modulaire pour permettre les modifications à venir

• La structuration du code ainsi que la qualité du code développé (par la mise en place de standard de code par exemple) est primordiale afin d’assurer un développement qualitatif sur la durée.

• La prise en compte des problèmes et point d’amélioration actuel de la solution afin de ne pas reproduire les même erreurs et s’enfermer dans les mêmes schémas.

Cela dit, au-delà de ces aspects globaux, il y a aussi des enjeux très concrets liés spécifiquement au composant frontend :

• La facilité de navigation dans l’interface, permettre de proposer une interface légère facilement navigable par l’utilisateur et ce qu’elle ce soit son niveau de compétence technique. On peut résumer cela dans le terme UX « User Expérience ».

• La modularité de l’interface et la facilité d’intégration de nouvelles fonctionnalités. Le frontend sera le plus souvent utilisé pour créer des rapports et générer des groupes et listes d’actifs. Il est important que l’intégration proposée permettent de facilement agréger et représenter des données ensemble.

Capture de la version 3.0 d'OCS Inventory affichant un listing d'actifs

Quels sont les problèmes rencontrés actuellement ?

Les problématiques rencontrées sont aujourd’hui liés à l’aspect monolithique de la solution et notre impossibilité de rendre l’expérience utilisateur plus accessible sur la branche legacy.

Il est important pour nous de proposer une base solide, modulaire et permettant d’avancer sur de nouvelles fonctionnalités.

Aujourd’hui, de manière globale, trois problématiques principales sont également à prendre en compte pour le frontend :

• La vétusté et les limitations techniques du module permettant le traitement des inventaires. Cela nous empêche de proposer des fonctionnalités ou des intégrations fortes, avec de l’IoT par exemple.

• Les standards de code actuel ont pour effet de rendre le développement fastidieux et la contribution par la communauté plus difficile.

• De manière plus ciblée, l’accessibilité de l’interface web, surtout sur la fonctionnalité avancée est assez confuse pour les utilisateurs.

Quel sont les technologies choisies pour développer ce frontend

Le frontend est développé en Vue.js. Il s’agit d’un framework javascript développé spécifiquement afin de permettre de construire des interface web.

Le choix de cette technologie s’est articulé autour de trois points :

• La communauté et l’usage important dans le monde open source (et du développement web) au sens large.

• La facilité d’accès du code et de modification de celui-ci. Il sera plus aisé de guider les contributeurs.

• La logique de composants permettant de créer des fonctionnalités et des éléments réutilisables en quelques lignes partout au sein de l’application.

Quel sont les éléments qui seront améliorés

L’interface web sera améliorée dans son intégralités mais certains points seront plus ciblés tel que :

• La facilité d’administration du produit sera améliorée, les paramètres et la présentant de ceux-ci seront plus limpide pour l’utilisateur.

• La navigation globale dans l’interface sera également améliorée afin de permettre une prise en main plus simple.

• L’intégration des addons est prévue pour être plus simple. Celle-ci permettra de réutiliser facilement les composant que l’équipe OCS Inventory aura déjà développé.

Quelles fonctionnalités sont à prévoir sur le moyen et long terme sur ce frontend ?

Sur le moyen et long terme, nous allons nous concentrer majoritairement sur le reporting. Nous allons permettre de créer des rapports avec des exports et des alertes de manière graphique en ayant le moins possible le besoin d’interagir avec du code.

Nous souhaitons proposer de la génération de rapports depuis l’application en mode web, sans la nécessité de développer un module ou un rapport par l’écriture de code, en passant donc par du « No code ».

Pour la communauté Open source, cela va-t-il changer quelques choses dans leur contribution ?

Nous allons veiller à rendre la contribution la plus simple possible et surtout de mettre à disposition une documentation orientée développeur afin de faciliter la contribution. Sinon, tout sera comme avant, les contributeurs sont les bienvenues sur l’application et nous !

Parle nous de la prochaine étape qui arriveras d’ici combien de temps ?

Pour la prochaine étape, nous évoquerons l’impact du rework sur le backend de la solution. Il nous permettra d’explorer plus en détail l’architecture technique choisie pour notre API, qui permet au frontend et aux agents de fonctionner.

Nous aborderons aussi le modèle de données et notre philosophie dans la conception de cette partie essentielle de la refonte du produit. Une autre partie sera dédiée à la politique d’intégration d’outils tiers, car améliorer ces interconnexions fait partie des objectifs majeurs de la refonte du backend.

As-tu quelques captures d’écran à nous fournir ?

GitHub OCS Inventory 👉 https://github.com/OCSInventory-NG