L’un des aspects primordiaux lors du développement de votre application est l’affichage. Celui-ci définira le rendu visuel affiché à l’écran de l’utilisateur. L’importance d’une interface utilisateur claire et intuitive à la navigation se pose dès les premières maquettes visuelles. Cette fondation permet alors d’intégrer le développement de la partie DOM (ce qui s’affiche dans le navigateur web du client) reposant d’une part sur le classique duo HTML/CSS (qui lui structurera la page et le style) et d’autre part sur le Script (qui influencera la navigation et les interactions utilisateurs). Les technologies récentes offrent un large panel quant à la librairie de script à adopter. L’équipe de Synktory aborde la question dans cet article et détaille quelle technologie a été retenue pour son moteur d’affichage.

 

Prendre en compte les outils de développement

Il faut savoir jongler entre les différents facteurs à prendre en compte, tout en gardant l’objectif en tête : la réussite du projet. Les considérations techniques de maintenabilité, de sécurité ou de facilité d’intégration dans le SI sont relativement importantes, mais également les besoins stratégiques du projet.

Ainsi, les contraintes techniques du cahier des charges doivent être compatibles avec les objectifs du projet, quitte à quelques compromis techniques. On peut par exemple très bien envisager une technologie peu utilisée et moins documentée si celle-ci est plus en accord avec le SI de l’entreprise. On choisira une technologie pérenne dans la mesure où son exploitation est garantie et que les interfaces utiles sont prévues.

 

Un choix déterminant

Jusqu’à présent, notre moteur d’affichage repose sur la librairie Jquery. Cette bibliothèque JavaScript permet le parcours et la modification du DOM (l’interface du contenu de la page affichée), mais propose également les fonctionnalités de base telles que les événements, la manipulation du CSS (cascading style sheets) et certains effets visuels de navigation (menu déroulant, affichage selon clic, etc.).

En tenant compte des besoins énoncés lors du cahier des charges et des langages en vogue en matière de moteur d’affichage, nous nous sommes restreints à trois technologies récentes : VueJS, AngularJS (développé par Google) et ReactJS (développé par Facebook).

Après avoir confronté le benchmark de ces trois dernières à notre cahier des charges, nous avons pris la décision d’utiliser ReactJS comme base de notre nouveau moteur d’affichage. Cette décision stratégique se justifie sur plusieurs axes :

  1. Contenu référençable : c’est ce qui le différencie des autres frameworks, le code va pouvoir être généré côté client ET côté serveur.
  2. Performances : ReactJS fonctionne par composants, c’est-à-dire qu’il regarde quel changement doit être apporté à l’interface et modifie uniquement la partie qui a besoin d’être mise à jour. Ce fonctionnement évite les calculs couteux et est donc plus réactif.
  3. Communauté : populaire, ReactJS est un pilier pour les développeurs JS. Ce qui facilite à la fois la reprise du code mais également l’aspect recrutement.
  4. React Native : il permet de publier des applications natives iPhone et Android en écrivant du JavaScript. Par la suite, il nous permettra de faciliter l’intégration de l’application sur mobile.
  5. Flexibilité du code : le ReactJS offre une lecture aisée du code de par sa logique d’écriture. C’est un point essentiel pour la maintenance et le développement d’une application dans la durée (ainsi que pour sa documentation).

React simplifie l’événement mono page (manipulation dans un seul et même DOM) ce qui facilite grandement la navigation et donc l’ergonomie. Il repose sur le modèle MVC (Modèle Vue Contrôleur) qui est motif d’architecture de page, particulièrement efficace dans les interfaces d’applications web, et en ce qui nous concerne, parfait pour notre ERP. Il encourage aussi la création de composants réutilisables, avec en entrée des données, pouvant changer au cours du temps, ce qui correspond à nos futures briques logicielles.

Conclusion

Le choix du moteur d’affichage est bien entendu déterminant en fonction du rendu désiré et des contraintes technologiques que celui-ci implique. C’est sur cette base que sera développé l’affichage de l’application. Une fois le moteur défini, arrive la partie intégration CSS qui s’appuie sur les maquettes visuelles réalisées au préalable. Support pour développer le moteur graphique, ces maquettes sont un facteur de choix dans les features et animations souhaitées et peut donc orienter le choix dans la technologie à adopter.

Nous vous conseillons d’étudier au préalable les différentes technologies existantes, en tenant compte des critères qui vous semblent plus ou moins importants, afin de choisir celle qui correspond le mieux au rendu que souhaitez obtenir.