Moderniser le client
React et TypeScript remplacent la couche de présentation existante pour construire les écrans et leurs interactions.
Tous les projets
Étude de cas / 04 — Projet de formation · EMF
NetViewer.
Moderniser l’interface d’un outil de configuration réseau.
Contribution
Refonte frontend et contribution backend
Contexte
Projet interne EMF · Janv. — mai 2024
Technologies
React · TypeScript · Java / JAX-RS · MariaDB
NETVIEWER / REFONTE
Java EEServlets / JSP
React + TypeScriptNouvelle interface
API JAX-RSBackend conservé
Schéma explicatif · projet interne EMF
01 / Le point de départ
Le point de départ
NetViewer permet aux enseignants de l’EMF de préparer et de déployer des configurations réseau dans les salles de classe. Ils peuvent notamment regrouper des élèves dans des VLANs ou gérer leur accès à Internet.
02 / Ma contribution
Ma contribution
J’ai participé à la refonte technologique et visuelle de ce projet interne. Mon travail principal a été de remplacer le client Java EE, basé sur des Servlets et JSP, par une interface React et TypeScript. J’ai également contribué à améliorer le backend existant.
03 / Les choix techniques
Conserver le backend
L’API reste sur JAX-RS. La refonte du frontend s’inscrit ainsi dans l’architecture de l’application existante.
Garder l’usage au centre
L’interface sert les opérations des enseignants : préparer des configurations et les appliquer aux postes des salles de classe.
NETVIEWER / USAGE
EnseignantPréparer
ConfigurationDéployer
Salle de classeVLANs
Schéma explicatif · projet interne EMF
04 / Une difficulté concrète
Une difficulté concrète
Faire évoluer les technologies et le design tout en conservant les fonctions d’un outil interne existant. Le nouveau client devait continuer à dialoguer avec l’API et représenter correctement les configurations réseau.
05 / Le résultat
Le résultat
Une refonte du frontend en React et TypeScript, accompagnée de contributions au backend JAX-RS. Le projet étant interne à l’EMF, cette fiche en présente le contexte et l’architecture sans démo publique.
Projet interne à l’EMF