Standards HTML et CSS
Le standard HTML est devenu incontournable : associé à CSS, il constitue la clé de voûte de toute application Web. En revanche, il est de plus en plus rare de manipuler directement ce standard en passant par les API du DOM (Document Object Model). Les frameworks front-end ont assis leur notoriété sur leur capacité à masquer la complexité du DOM. Ils fournissent des services tels que le routage et la navigation, le databinding (l'interaction entre le modèle objet et les formulaires des pages), l'événementiel, les styles (en passant par des compilateurs Sass ou Less) ou l'appel d'API via AJAX.
DNG apporte son expertise sur ReactJS, la technologie que nous privilégions sur nos projets Web.
Technologie ReactJS
ReactJS est devenu un framework très en vogue, notamment lorsqu'il est associé à une pile mobile telle que React Native. Dans le cas d'une application multi-périphériques (mobile et desktop), ReactJS permet de réutiliser le maximum de code source entre l'application mobile et l'application desktop. Il existe même des outils tels que React Native Web qui proposent de réutiliser 100 % du code source d'une application React Native. La particularité de React par rapport à d'autres frameworks du même type est sa simplicité. En effet, React n'est qu'un simple moteur de rendu de composants : il laisse à l'utilisateur le choix de ses services techniques (routage et navigation, événementiel, styles, Ajax…).
Certains projets s'en accommodent très bien de par leur spécificité, d'autres nécessiteront de lui accoler des services tiers. De par sa nature, React permet d'utiliser la meilleure pile technique disponible à un instant T, une philosophie qui va à l'encontre des frameworks « tout intégré ». ReactJS s'appuie sur le standard JavaScript (ES6 et suivants) et fonctionne également très bien en mode typé avec TypeScript.
Progressive Web Apps et applications offline
Une Progressive Web App est une application s'exécutant dans un navigateur Web et possédant les caractéristiques suivantes :
- Progressive : fonctionne pour n'importe quel utilisateur et n'importe quel navigateur, car l'amélioration progressive fait partie intégrante de l'application.
- Responsive : s'adapte automatiquement à n'importe quel affichage (tablette, smartphone ou desktop).
- Connectivity independent : le concept de service worker permet une utilisation déconnectée ou sur une faible bande passante.
- App-like : se comporte comme une application native, avec une identité visuelle très proche.
- Fresh : constamment à jour grâce au processus de mise à jour automatique fourni par les service workers.
- Safe : basée sur le protocole HTTPS pour sécuriser les échanges.
- Discoverable : identifiée comme une application grâce aux métadonnées transmises dans un fichier manifest.
- Re-engageable : permet l'utilisation des notifications push pour exposer du contenu.
- Installable : installable sur le bureau en mode plein écran avec une simple URL.
- Linkable : peut être partagée et installée à partir d'un lien.
Les PWA sont le meilleur compromis entre une application 100 % native et une application 100 % Web. Outre toutes les caractéristiques citées précédemment, une PWA offre un ROI (retour sur investissement) intéressant lorsqu'on souhaite cibler tous les types de périphériques à moindre coût, car on utilise une seule et unique technologie pour le développement.
Il faut en revanche garder à l'esprit que les PWA ne sont pas encore totalement supportées par les principaux stores du marché, qui leur préfèrent les applications mobiles natives. Il est possible de passer par un composant WebView, mais celui-ci s'exécutera dans un environnement sécurisé (sandbox) assez contraignant. Cela dit, Google (via les TWA) ou Apple entrouvrent de plus en plus la porte.
Toolkits graphiques et responsive design
Le responsive design est un passage obligé pour toute application nécessitant un affichage sur plusieurs supports (mobile, tablette, desktop). En HTML et surtout en CSS, il existe plusieurs routines de base permettant d'assurer une adaptation fluide en fonction des tailles d'écran. Les media queries constituent une première réponse lorsque l'interface graphique est peu complexe. En revanche, lorsqu'il s'agit de généraliser un comportement bien particulier dans des contextes spécifiques, le recours à une bibliothèque tierce s'avère indispensable. Qui plus est lorsque le « look and feel » de l'application doit s'appuyer sur des standards du marché tels que Material Design (avec MUI) ou Bootstrap (avec React Bootstrap).
Nous utilisons chez DNG d'autres bibliothèques moins connues mais tout aussi performantes, telles que PrimeReact.