Développement Web

Le développement Web est devenu de plus en plus complexe avec un amoncellement de technologies nécessitant une mise à niveau régulière des compétences et des outils. Depuis l'essor du Web dans les années 2000 avec l'avènement du standard HTML et CSS, DNG apporte son expertise régulièrement sur des projets complexes avec le souci particulier du Design UX.

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 Framework 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'appels d'API via AJAX. DNG apporte son expertise sur des technologies telles que Angular ou ReactJS en fonction des besoins clients et du projet ciblé.

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 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 sans utiliser HTML et le DOM. La particularité de React par rapport à d'autres Framework 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 part leur spécificité, d'autres nécessiteront de lui accoler des services tiers. De part sa nature, React permet d'utiliser la meilleure pile technique disponible à un instant T, une philosophie qui va à l'encontre du "tout intégré" privilégié par Angular par exemple. ReactJS s'appuie sur le standard JavaScript (ES5,6 ou 7) et fonctionne également très bien en mode typé avec TypeScript ou Flow.

Technologie Angular

Contrairement à React, Angular propose une approche "Tout en un".  Plus qu'un Framework, Angular est une boite à outils et un compilateur. Il s'appuie sur le langage typé TypeScript et expose un nombre considérable de services techniques : routage et navigation, databinding multi-directionnels et gestion de formulaire, programmation réactive avec RXJS, Pipes et Transformations, Entrées/Sorties, Directives, AJAX (HttpClient). Angular se suffit à lui même la plupart du temps, même lorsqu'il s'agit de réaliser des applications progressives PWA (Progressive Web Apps). Angular propose des services workers et toute une panoplie d'outils liés au mode déconnecté.

Progressive Web App et applications Offline

Une progressive Web App est une application s'exécutant dans un navigateur Web possédant les caractéristiques suivantes :

• Progressive — Fonctionne pour n'importe quel utilisateur et n'importe quel navigateur car celui-ci 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é ou sur une faible bande passante.
• App-like — Se comporte comme une application native avec une identité visuelle très proche.
• Fresh — Constamment à jours grâce au processus de mise à jour automatique fournit par les Service Worker.
• Safe — Basé sur le protocole HTTPS pour sécuriser les échanges.
• Discoverable — Identifié comme une application grâce aux méta-donné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 — Pouvant être partagé et installé à partir d'un lien.

Les PWA sont le meilleurs 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 et une seule technologie pour le développement. Il faut en revanche garder à l'esprit que les PWA ne sont encore pas totalement supportés 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 qui s'exécutera dans un environnement sécurisé (sandbox) assez contraignant. Cela dit, Google (via les TWA) ou Apple commencent de plus en plus à entrouvrir une porte.

Toolkits graphiques et Responsive Design

Le Responsive Design est un passage obligé à toute application nécessitant un affichage sur plusieurs supports (mobile, tablette, desktop). En HTML et surtout 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 UI (material-ui pour React et Material Angular pour Angular) ou Bootstrap (ReactBootstrap pour React et Ng-Bootstrap pour Angular). Nous utilisons chez DNG d'autres bibliothèques moins connues mais tout aussi performantes telles que Prime Faces (PrimeNG pour Angular et PrimeReact pour React).