JavaScript, ce game changer du Web

Javascript blog

  • 88
  • 0
  • 21 Fév 2022

J'ai commencé à créer des sites et des applications Web en 1999, l'année de sortie de Matrix. Le sujet n’était pas de faire couler des caractères alphanumériques verts fluos sur un écran noir mais bien au contraire de fournir un accès à l’information ou de pouvoir réaliser des tâches de la manière la plus intelligible et la plus performante possible.

 

20 ans plus tard (un peu plus), les fondamentaux d’une application Web ont-ils changé ?

 

Non, les technologies de base côté client aka client-side (navigateur Web) restent les mêmes : HTML 5, CSS 3 et JavaScript. Nous parlons ici des technologies qui composent la page Web et assurent donc l’interface entre un utilisateur et un serveur.

 

Telles les cordes d’une guitare, on pourrait compléter les trois premières par les technologies de base côté serveur aka server-side qui permettent de programmer les traitements à réaliser côté serveur en interaction avec une base de données le plus souvent : programmation des traitements s’appuyant également sur JavaScript qui a su trouver une place grandissante côté serveur grâce à Node.js aux côtés de Python, Php, Java ou encore C#. Ces traitements sont en lien avec les bases de données MySql, PostgreSql ou encore MongoDB. Pour compléter la famille à 6 cordes, nous pourrions retenir les API en guise de technologie intermédiaire entre client et serveur. On parle plus généralement de middleware. La famille Web est alors au complet.

 

Bien sûr, ces technologies côté client ont évolué. Pourvu qu’elles soient convenablement exploitées, elles sont non seulement mieux prises en charge par l'ensemble des navigateurs Web du marché mais elles répondent également à de nombreux enjeux métier et IT actuels des entreprises.

 

Les fondamentaux du Web, HTML-CSS-JavaScript, sont d’autant plus sur le devant de la scène que les architectures digitales modernes tendent à séparer fortement ce qui se passe en vitrine, couramment appelé front-end des processus, traitements des demandes, qui se passent en arrière-boutique, respectivement dit back-end. Au bénéfice de l’expérience des utilisateurs finaux dans l’accès et l’utilisation des contenus et des fonctionnalités.

 

 

En mettant un accent particulier sur les frameworks JavaScript modernes, je traite ici aussi bien de l'évolution de ces technologies que de leurs implémentations au regard des enjeux des entreprises : expérience utilisateur, performance, qualité, sécurité.

 

 

Rappelons qu’une dissociation du front-end et du back-end telle qu’évoquée précédemment :

 

  • permet de s’adapter efficacement à l’ensemble des canaux d’interaction et appareils associés, autant d’interfaces front-end que sont le téléphone, la tablette, l’ordinateur de bureau, la télévision, le casque de réalité virtuelle, les wearables, les bornes interactives…
  • Cette adaptation du contenu permet de garantir une expérience optimisée tant en termes de performances (chargement de contenus essentiels uniquement, optimisation de la bande passante) qu'en termes d'usages, d'interfaces et d'expériences adaptées, c'est-à-dire géocontextualisés (contexte d'utilisation : mobile ou sédentaire, adaptation des contenus à la situation). Mais il est essentiel ne pas perdre la personnalisation des contenus et des actions possibles pour un utilisateur sur la base de son historique d’une part et de ses données analytiques. Retenons d’ailleurs que la stratégie de conception mobile first globalement adoptée aujourd’hui
  • permet de distinguer et tenir le temps du digital d’une part, associé à un time to market de quelques semaines ou mois, et le temps du système d’information d’autre part dont la modernisation est affaire de semestres.
  • permet de s’abstraire des limitations des solutions d’éditeurs et de créer une expérience différenciante
  • permet de créer des équipes spécialisées, plus pointues, plus expertes qu’il s’agisse de technologies front-end ou technologies back-end. Mais la démultiplication des technologies à laquelle s’ajoute le rythme de leurs évolutions augmente la difficulté à mobiliser les compétences en nombre avant même d’aborder leurs qualités.

 

 

Par conséquent l’expérience utilisateur plus que jamais optimisée :

 

  • Se veut sur mesure pourvu qu’elle ne réduise pas l’autonomie des équipes métier à réaliser des changements simplement et rapidement et qu’elle rejette certaines extravagances car il reste essentiel de répondre à l’impérieux enjeu d’industrialisation autrement dit de maîtrise des coûts de maintenance (MCO) sur le long terme
  • Aboutit à des sites interactifs, dynamiques par JavaScript, mais qui veillent à rester compatibles avec les conditions d’un référencement naturel à l’état de l’art
  • Intègre les objectifs RSE ou ESG des entreprises. A titre d’exemple une version statique d’une application permet d’éteindre les serveurs assurant les traitements la nuit.
  • Sait traiter des volumes considérables d’événements et de données alimentés par les objets connectés.

 

 

A travers l’interview croisée d’experts et de CTO, vous découvrirez ici ces retours d'expérience qui éclaireront vos futurs choix et succès Web.

 

 

Maxime Robert, Tony Cabaye et Nicolas Nunge ont tous trois démarré leur carrière sur le Web en 2009 ✌.

 

Stagiaires à leur arrivée chez Smile, Maxime et Tony sont aujourd’hui Experts Techniques chez Smile 💪 et spécialistes des technologies front-end. Nicolas a rejoint Neopixl (groupe Smile) en 2016 ayant auparavant travaillé en tant que freelance. Nicolas est aujourd’hui CTO de Neopixl 👍.

 

Maxime 💬 “En tant que stagiaire au début de mon expérience professionnelle, j’ai rejoint un projet important développé en Java pour l’INRA. Il y avait peu de compétences front dans l’équipe et j’aimais rendre un site dynamique. Il était question de formulaires de saisie sur mesure avec des listes de choix interdépendantes par exemple. Je me suis spécialisé dans le développement de composants riches, autrement dit de fonctionnalités dynamiques au sein d’une page Web” 

 

Tony 💬 “J'ai un goût prononcé pour le dessin originellement et donc je me suis naturellement intéressé à la qualité et à l’interactivité des interfaces Web. De plus, à l’époque, nous rencontrions parfois des problèmes JavaScript sur certains projets et malheureusement personne pour nous aider à corriger, car peu de connaissance JavaScript dans les équipes. J’ai donc fait le choix de devenir expert en la matière en m’auto-formant. Aujourd’hui les applications sont de plus en plus riches. On veut des apps qui non seulement font plus et utilisent les nouvelles possibilités des navigateurs mais aussi qui doivent parfois fonctionner en temps réel comme Google Docs ou une messagerie instantanée.” 

 

Nicolas 💬 “Essentiellement entrepreneur freelance au début de ma carrière, j’ai démarré par HTML et PHP. Les composants riches et les sites dynamiques m’intéressaient dans leur dimension visuelle à la fois sexy et utile. Par exemple, à la saisie d’un mot de passe, j’interceptais l’événement de saisie et vérifiais en JavaScript le niveau de solidité du mot de passe proposé. La technologie Ajax a permis d’aller beaucoup plus loin. Aujourd’hui les technologies JavaScript adressent aussi bien les applications Web que les applications mobiles dont Neopixl est un spécialiste européen.”

 

Comment vois-tu l’évolution et l’intérêt de JavaScript (JS) pour un site ou une application Web ?

 

Maxime 💬 Je distingue deux cas différents :

 

  • Le “JS à l’ancienne” pour ajouter un comportement dynamique à un élément HTML au sein d’une page Web. Par exemple, ajouter une interaction telle que le drag and drop (glisser-déposer). Historiquement, la bibliothèque JavaScript jQuery permettait d'implémenter ce type de comportement. Aujourd'hui, nous utilisons plutôt React ou Vue. Dans certains cas, la page Web peut continuer de fonctionner même si le JavaScript est désactivé si le JavaScript n'est pas indispensable et ne fait qu'améliorer l'expérience utilisateur.
  • Le “JS moderne” qui s’inscrit dans les architectures Web actuelles privilégiant l’usage des API pour accéder aux données. Ici JavaScript génère l’intégralité de la page Web. On parle le plus souvent de Single Page Application. Dans ce cas, la page Web ne fonctionne pas si JS est désactivé. Le code JavaScript est envoyé au navigateur, est exécuté et se charge, en fonction de l’URL, de faire les appels idoines pour chercher les données par la technologie Ajax. Le rendu de la page est donc assuré par JavaScript.

 

Il faut rappeler que Bootstrap a révolutionné le game avant les frameworks JavaScript actuels pour faire des interfaces dynamiques non seulement qui fonctionnent mais aussi en assurant une gestion du responsive web design, c’est-à-dire de pages Web réactives s'affichant convivialement sur une variété d'appareils et de tailles de fenêtre ou d'écran.

 

L’évolution de CSS a aussi apporté son lot d’améliorations comme les arrondis pour les boutons d’action, la transparence, les ombres...etc.

 

Quant aux problèmes de compatibilité entre navigateurs, cette préoccupation a quasiment disparu aujourd’hui. On n’y passe plus la moitié de son temps. 

 

Car des standards ont pris la place.

 

Le W3C a largement œuvré à la standardisation du Web en fournissant ses recommandations. Le rapport entre le W3C et les moteurs de rendu Web incorporés dans nos navigateurs est presque inversé d’ailleurs. Le W3C récupère les avancées technologiques issues des ingénieurs développant Chrome par exemple et les standardise. 

 

Venons-en aux frameworks JavaScript !

 

Maxime 💬 Les plus populaires sont désormais largement connus et ont tous la particularité d’être open source, largement utilisés et soutenus par une large communauté de développeurs à travers le monde.

 

  • Angular, livré en open source par Google, est un framework de développement JavaScript tout à fait adapté aux grandes applications Web professionnelles. Il convient moins aux applications plus légères où il n’est question que d’interactions dynamiques courantes.
  • React, livré en open source par Facebook, est une bibliothèque moderne de fonctions JavaScript ayant mondialement supplanté jQuery
  • Vue, framework inspiré d’Angular mais se voulant plus léger

 

React et Vue sont davantage tout-terrain, on peut créer des composants dynamiques simplement dans une page de même que créer de larges applications Web.

 

Nicolas 💬 React est léger. Il faut y ajouter des dépendances assez rapidement.

 

Tandis qu’Angular a plus de fonctionnalités packagées en tant que framework. Angular est à JavaScript ce que Symfony est à PHP.

 

Tony 💬 L’observatoire State of JS publie annuellement une enquête s’agissant de la pénétration des technologies JavaScript et de la préférence des développeurs. Il manifeste que les technologies évoluent. De nouvelles technologies apparaissent telles que le framework Svelte. En tout cas, React tient le haut du pavé en termes d’appréciation depuis quelques années.

 

Quelles raisons amènent les entreprises à réaliser des applications Web sur la base de ces frameworks ?

 

Maxime 💬 Il faut bien sûr évoquer l’amélioration de l’expérience utilisateur (UX).

 

Les interfaces sont plus riches et les interactions sont plus rapides, quasiment instantanées. Il n’y a pas à recharger complètement la page. Le serveur n’a pas à générer l’intégralité de la page. Le gain en réactivité et en fonctionnalités (features) contribue significativement à l’amélioration de l’UX. On peut comparer la réactivité et la richesse d’une application Web à celles d’une application installée sur son PC.

 

Cela convient parfaitement à la plate-forme Euroquity de Bpifrance, réseau social d’entreprises, constitué de nombreux formulaires complexes, projet auquel j’ai fortement contribué.

 

La recherche de meilleures performances est lui aussi un gain attendu et naturel puisqu’on déporte la charge de travail du serveur (l’infrastructure le plus souvent dans le cloud aujourd’hui) vers le client (le navigateur Web de l’utilisateur). La montée en charge d’une application est en partie distribuée sur les clients et déleste ainsi le serveur. Néanmoins, il faut indiquer que le temps de construction de la page Web par le navigateur reste un point d’attention et une contrepartie potentielle tout particulièrement sur les appareils mobiles dont la puissance et la connexion réseau sont inférieures.

 

De facto, la consommation de ressources Cloud est optimisée.

 

Pour une application dont l’audience est forte, une Single Page Application fait donc sens.

 

Ce n’est pas toujours le cas. Certains clients suivent un effet de mode qui n’est pourtant pas toujours justifié.

 

La création d’une application Web front d’une part dissociée de la partie back permet une vie indépendante de ces deux applications : On peut procéder à une refonte graphique du front sans affecter le back. Réciproquement, on peut réviser la composition du Système d’Information (SI) sans impacter le front.

 

Nicolas 💬 C’est une grosse avancée. Car la puissance de calcul des clients est exploitée.

 

Les navigateurs sont capables de faire des choses puissantes.

 

En revanche, oui, le transfert du fichier JavaScript principal est affaire de quelques mégaoctets et pourrait présenter une limite dans certains cas d’utilisation à très faible débit de connexion Internet.

 

Un gros avantage à exploiter un framework JavaScript est enfin la capitalisation possible entre les composants riches du portail Web construit avec Angular et une application mobile construite avec Ionic, technologie historiquement basée sur Angular. C’est ce que nous avons pu réaliser pour notre client Cooper Vision à l’international.

 

Tony 💬 Pour compléter, je peux donner quelques illustrations de composants riches.

 

Je pense à :

 

  • La mise en œuvre d’un Store Locator, carte Google dynamique et réactive aux filtres de recherche des boutiques (12 000). Affichage instantanée des informations de la boutique sans rechargement de page. 
  • Les formulaires dynamiques sont un sujet intéressant. S’il s’agit de créer un article très simple par exemple, il n’y pas forcément beaucoup de gain à passer par JavaScript. Mais si on souhaite des champs de saisie (cases à cocher, liste d’options, champ de saisie etc…) qui s’affichent sous conditions puis aboutissent à une liste de résultats filtrés, JavaScript présente un fort intérêt. L’affichage des messages de validation en JavaScript est aussi un bon exemple d’amélioration de l’UX.
  • Les graphiques pour les besoins de Data Visualization sont également un beau terrain de jeu pour JavaScript : afficher différents types de graphes dynamiquement, filtrer certains éléments, voir plus d'éléments au passage de la souris. De manière générale, on peut créer une interaction sur chaque événement : au clic, au changement d’une option de formulaire, au passage de la souris (rollover), en appuyant sur une touche du clavier… Encore une fois, sans rechargement de page.

 

Comment garantir le bon référencement naturel (SEO) des applications Web publiques (Internet) par opposition à des applications Web privées (Intranet & Extranet) lorsque JavaScript est à l’origine de la page Web ?

 

Maxime 💬 C’est évidemment un enjeu important.

 

Il est clair que nous avons essentiellement abordé jusqu’à présent le Client-Side Rendering qui laisse le navigateur ouvrir une page HTML sans aucun contenu sachant que JavaScript se charge de composer la page Web après avoir été appelé, chargé et exécuté par le navigateur.

 

En l’occurrence, la page initialement vide de contenu n’est pas forcément indexable par GoogleBot ni par les systèmes de partage des réseaux sociaux qui extraient habituellement le titre, la description et une miniature du lien partagé.

 

Cela permet de faire la transition qui me permet de parler de Server-Side Rendering.

 

Dans ce cadre, le serveur construit dynamiquement, autrement dit pré-génère, la page HTML et en transmet le contenu au navigateur Web. Le premier chargement de la Single Page Application est non seulement grandement accéléré mais aussi le contenu HTML est désormais immédiatement accessible et donc indexable par GoogleBot et pour les partages via réseaux sociaux. CQFD. Une partie de la charge de travail est en contrepartie reprise par le serveur.

 

Nicolas 💬 Le crawler GoogleBot progresse. Il est capable de parcourir Angular et React.

 

Pas encore de façon optimale mais il est probable que d'ici qq temps, une application pourra se passer de server-side rendering

 

Comment la qualité et la sécurité d’une application Web dont l’architecture est découplée sont-elles traitées ?

 

Maxime 💬 Le framework Angular apporte des tas d'outils intégrés encadrant la qualité.

 

A la création d'un composant, un test associé est initialisé. Un outil d'analyse de code s’assure du respect des conventions d’écriture. C'est apporté par défaut par Angular, mais les autres frameworks intègrent également ces outils de qualité essentiels au projet.

 

Tony 💬 Les risques de non qualité sur les projets front-end résulte de la méconnaissance des technos le plus souvent. Je réalise de nombreuses formations pour accompagner des équipes.

 

Les développeurs ont des habitudes issues du développement PHP ou Java. Mais les technologies JavaScript sont différentes. Les compétences ne sont pas facilement interchangeables. Un développeur back ne devient pas un développeur front en claquant des doigts, de même qu’un développeur React ne devient pas forcément un développeur Angular. Et réciproquement.

 

Nicolas 💬 En matière de sécurité, on distingue les actions à mener pour JavaScript côté front de celles côté back. Côté front, les actions de contrôle classique d’injection sont assurées mais demeurent un premier rempart faible.

 

L’essentiel des mesures fortes de sécurité se joue côté back.

 

Le framework notamment NestJs s’inscrit en surcouche de Node côté serveur pour exécuter JavaScript et apporte une série d'outils qui par exemple :

 

  • vérifient le format des entrants, la présence du bon type de données comme une chaîne de caractères, la taille, 
  • nettoient les caractères issues d'une injection
  • met en oeuvre CORS pour vérifier la validité d’une adresse URL d’origine dans l’appel d’une API
  • permettent de gérer l’authentification en implémentant le standard oAuth qui vérifie le jeton d'accès à une API. Non seulement le navigateur Web mais aussi l’identité de la personne derrière son clavier.

 

Les mesures de sécurité au niveau API puis au niveau infrastructure viendront compléter le dispositif.

 

Enjoy JavaSript !
 

Commentaires sur "JavaScript, ce game changer du Web"

Formations open source

Durée : 2 jours
Lieu : Paris