Ametys LTE migre de ExtJS 3 vers ExtJS 4 - Tribune de Raphaël Franchet, expert IHM

L'objectif de la migration d'Ametys LTE vers la bibliothèque JavaScript ExtJS 4 est l'amélioration du back-office afin de proposer des interfaces plus ergonomiques et orientées utilisateurs. Découvrez les détails.

Ametys LTE est la nouvelle génération du logiciel Ametys sur laquelle travaille l’éditeur Anyware Services ainsi que ses partenaires privilégiés. L’équipe de développeurs Ametys travaille constamment à l’amélioration de ses interfaces de contribution. La migration vers la bibliothèque JavaScript ExtJS 4, qui permet de développer rapidement des applications web interactives, est un chantier de taille, entamé depuis 2012 et visant à améliorer le back-office de manière à proposer des interfaces plus ergonomiques et orientées utilisateurs.

ExtJS : une bibliothèque JavaScript riche et complète

Intégrant de nombreux composants de qualité tels que des formulaires, des tableaux avancés et dynamiques, des menus et barres d'outils, la gestion d'onglets ou encore des panels et boîtes de dialogues riches, la bibliothèque ExtJS propose des interfaces user-friendly complètes et ergonomiques.

Sortie en juin 2009, la version 3 d’ExtJS a été un choix logique pour Ametys, grâce à sa bibliothèque de composants et à toutes les facilités de codage qu’elle apportait.
Le système de classe performant a, par exemple, permis d’écrire la couche "client" d’Ametys de façon modulaire et extensible, permettant au CMS d’être à la fois riche fonctionnellement et simple d’utilisation.

Ametys LTE intègre ExtJS 4 pour des interfaces utilisateurs plus intuitives et ergonomiques

La version 4 d'ExtJS, lancée en avril 2011, a apporté de nouvelles fonctionnalités et améliorations, comme par exemple un nouveau système de classes, un nouveau package "data" pour la gestion des données, des refontes de composants graphiques (fusion des grilles et des arbres) ou encore un système de thèmes avancés et un modèle MVC.

Les premiers travaux de conversion d'Ametys, qui concernaient l'espace administrateur, ont débuté dès mai 2012. Au programme des nouveautés :

• Des améliorations de performances : l’interface d’Ametys permet par exemple à un utilisateur d’ouvrir de nombreux onglets en parallèle. ExtJS 4 s’appuie sur les nouvelles possibilités des navigateurs (HTML5 et CSS3) au lieu de les émuler comme c’était le cas en ExtJS 3,
• Une nouvelle architecture : la remise à plat du package "data" permet de simplifier le code et donc l’ajout de nouvelles fonctions.

Après l'abandon officiel du support de ExtJS 3, l'équipe de développeurs Ametys s'est attaquée dès juin 2013 à la conversion du CMS dans son intégralité, le but étant de rester le moins longtemps possible sur une version non maintenue et de pouvoir se reposer sur une bibliothèque à jour.
Plutôt que d'employer la méthode rapide (qui consiste à utiliser le kit de migration fourni par Sencha), nous avons décidé de réécrire le code fichier par fichier pour la migration d'Ametys.

Pourquoi une écriture du code fichier par fichier ?

• Pour ne pas avoir un code qui soit à cheval entre 2 versions d’ExtJS,
• Pour re-tester l’ensemble des fonctionnalités une par une afin de voir les problèmes remontés par la migration,
• Pour ré-écrire notre utilisation de ExtJS : une équipe avec 4 ans d’expérience sur une bibliothèque fait forcément de meilleurs choix techniques (légèreté, rapidité, compatibilité),
• Pour repenser l’API coté "client" du back-office d’Ametys pour une meilleure ergonomie de contribution,
• Pour documenter complètement le code "client" d’Ametys, et publier cette documentation
• Pour étendre les composants fournis par ExtJS afin d'ajouter de nouvelles fonctionnalités ou comportements, comme par exemple nos propres composants tels que le "ruban" Office 2007.

Au final, la migration vers ExtJS 4 a été le déclencheur pour Ametys d'une refonte plus profonde côté client : API, documentation, design technique...

De nombreux problèmes ont été rencontrés, notamment le code HTML généré, qui change, ou encore la disparition de certaines fonctionnalités.

Par exemple, la gestion des panneaux à onglets "TabPanel" ne supporte plus en ExtJS 4 les onglets redimensionnables : ce sont des onglets à taille donnée mais qui vont se réduire de manière coordonnée s’ils sont trop nombreux.

Pour Ametys, nous avons fait le choix de recoder cette fonctionnalité. Pour la gestion des données, Ametys utilise du XML et du JSON. En ExtJS 3, seul le JSON était supporté nativement et le XML l’était par extension. En ExtJS 4, les deux formats sont supportés, mais le XML dispose de limitations qui n’existaient pas avant.

Ametys LTE nouvelle génération est en cours de développement. La prochaine version 3.6 du CMS open source, prévue pour le 1er trimestre 2014, mettra l’accent sur de nouvelles fonctionnalités, notamment le lancement d’un atelier de déclinaison de charte graphique très utile dans un contexte d’usines à sites.

Pour compléter la lecture de cet article, vous pouvez consulter la présentation SlideShare sur l’IHM et l'ergonomie d'Ametys LTE.

Rendez-vous sur le site Ametys pour télécharger le CMS, vous pouvez aussi essayer la solution directement en ligne via le site de démonstration.

Raphaël Franchet

Expert IHM et Accessibilité Web, Raphael Franchet a plus de 10 ans d'expérience en matière d'amélioration d'architectures applicatives et d'interfaces graphiques. Directeur de la production au sein d'Anyware Services, éditeur du CMS Ametys, il pilote aujourd'hui l'ensemble des évolutions ergonomiques du CMS open source afin d'offrir une prise en main toujours plus intuitive du logiciel.