… ou l’exposé simplifié de quelques éléments liés à la mise en ligne de www.lausanne2020.com , un véritable concentré de modernité.

Lausanne 2020

Le World Wide Web a bientôt 30 ans et n’a pas cessé d’évoluer. A l’instar des jeux pour nos athlètes, il propose quelques défis à nos développeurs.

Tout comme il y a eu Singapore 2010, Innsbruck 2012, Nanjing 2014, Lillehammer 2016 et Buenos Aires 2018, le web a également eu à franchir quelques étapes… et pour mieux comprendre où nous en sommes, un rapide retour en arrière s’impose.

Web statique 1990

Basée sur Internet, une nouvelle façon de publier de l’information sort des laboratoires du CERN. Quelques pionniers se mettent très vite à « façonner » des pages (HTML) et à les déposer sur des serveurs (HTTP). Il faut un logiciel spécialisé pour les consulter, un logiciel « client » que l’on baptisera « navigateur ». Les pages sont dites « statiques » car elles sont rédigées une fois pour toute, à l’image d’une page de presse, mais en version électronique.

Web dynamique 1995

Alors que le nombre de serveurs ne cesse d’augmenter à travers le monde, il est question de « personnaliser » les pages en fonction de paramètres, plus ou moins ajustables par le lecteur. Chaque page est alors produite « à la volée », par un serveur désormais équipé d’une « base de données », dans laquelle il va puiser les informations susceptibles de répondre aux demandes toujours plus nombreuses des utilisateurs de navigateurs.

Web participatif 2000

Quelques années plus tard, ce sont les navigateurs qui s’enrichissent de nouvelles fonctionnalités. Ils sont désormais capables de dialoguer avec les serveurs, sans intervention humaine explicite. Nom de code : Web 2.0 ! Un exemple ? Un formulaire sur une page… grâce auquel l’utilisateur peut enregistrer son adresse… il saisit les trois premières lettres de la localité, et hop… le nom tout entier lui est proposé dans une liste. Et ce n’est pas fini, en cliquant dessus, c’est le numéro postal qui se remplit tout seul ! En jargon, il s’agit de « requêtes asynchrones » ; le navigateur interroge le serveur, en anticipant les besoins de l’internaute.

Le confort d’utilisation s’est amélioré de façon spectaculaire ! Si bien que chacun pouvait désormais contribuer à alimenter ce nouveau média en participant à un forum, en animant un blog, ou même en publiant un site.

Web social 2005

Cette année-là, theFacebook perd sa particule, pour devenir le Facebook que tout le monde connaît. Une nouvelle étape est franchie, celle du média « social », qui transcende les possibilités de dialogue entre humains… tout est prétexte à l’apparition d’une nouvelle « communauté », musique, design, religion, politique, amour, santé, travail ou chatons rigolos, tout y passe ! Le stock d’informations potentiellement utiles se trouve désormais noyé dans un tumulte continu de propos insignifiants. Une logique de flux s’installe, et son cortège de nouvelles disciplines – économie de l’attention, industrie de la recommandation – pour réapprendre à être vu.

Web mobile 2010

Brusquement, l’écran des internautes s’est considérablement rapetissé. Face au bon vieux câble, l’accès n’est pas très rapide mais les forfaits abondent et les coûts des abonnements sont soigneusement ajustés par les opérateurs pour ne pas freiner l’adhésion du grand public. L’ordinateur qui téléphone, ordiphone ou plus communément smartphone, est très vite « super équipé » ; boussole, récepteur GPS, accéléromètres, flash ou lampe de poche, il propose même un… navigateur ! Pourtant cette nouvelle génération de téléphones ne fait pas une entrée fracassante dans l’écosystème du web, et les utilisateurs se servent d’abord dans les « stores » des fabricants (AppStore, PlayStore) en attendant que le web des documents (XHTML) cède progressivement la place au web des applications (HTML5).

Web responsif 2015

Cette fois ça y est, un nouveau pas est franchi dans la course à la nouveauté. Longue vie au Cloud qui livre toutes sortes de « services » et pas seulement des « pages ». Service de paiement, service de localisation, service de stockage, tout est possible, le besoin de programmer « nativement » pour Apple, Android, Windows ou Blackberry se fait de plus en plus rare, en principe les langages du web suffisent ! Des technologies devenues très accessibles permettent de développer des « sites » – ou webapps – qui s’adaptent à la taille de l’écran qui le consulte. D’ailleurs, ceux qui ne jouent pas le jeu sont dans le collimateur du puissant Google, qui perd des millions de revenus publicitaires, lorsque les annonces sont tellement petites que personne ne pense à cliquer dessus !

Quid du Web 2020 ?

Difficile à dire, mais ce qui est certain, c’est que, dans sa version actuelle, le site JOJ 2020 est « performant », à plusieurs titres…

La gestion de contenu « sans tête » (ou Headless CMS)

Ces dernières années, les périphériques connectés se sont considérablement diversifiés ; ordinateurs, tablettes, consoles de jeu, téléphones, montres, lunettes, casques, etc. Ils représentent autant d’incitations à produire du contenu adapté aux spécificités du dispositif qui le consomme.

Quand bien même il resterait à la tête de la communication numérique, désormais le site web se doit d’être plus « accompagné » : application mobile, chaîne Youtube, fil Twitter, mur Facebook, flux Instagram, etc.

En conséquence, les éditeurs disposent d’un nouveau mode d’organisation, en passant de la « gestion de contenu » à l’exploitation d’un « service de contenu ». Les textes, les images ou les sons sont désormais « découplés » du système qui les exploite. Ils sont stockés dans le « nuage », en toute indépendance, prêts à être consommés par à peu près n’importe quel type de dispositif !

La génération dynamique de sites statiques

Après 20 ans d’un abandon progressif, le web statique fait son grand retour. En effet, comme expliqué plus haut, en mode dynamique, lorsqu’un navigateur demande une information à un serveur web, ce dernier est mis à contribution pour effectuer quelques menus travaux.

Il doit appeler une base de données, récupérer les informations utiles, produire la page, puis la livrer ensuite. Si d’aventure la page en question devait afficher des informations issues d’autres sources, il faut encore que le serveur s’adresse à ces sources avant de pouvoir livrer quoi que ce soit. Tout cela prend du temps, le temps de chargement !

Quelques dixièmes ou même centièmes de secondes suffisent à faire la différence. L’internaute n’aime pas attendre, c’est bien connu. Ce qui l’est moins c’est que le tout puissant Google non plus. Tant et si bien que dans ses résultats de recherche, le célèbre moteur pénalise les sites qu’il considère comme lents et récompense les plus performants.

Le temps de réponse est donc une composante essentielle du développement web moderne. Dans notre cas, la génération dynamique de pages statiques se passe côté serveur. Elle consiste à automatiser la production de nouvelles versions complètes d’un site, à chaque fois qu’un contenu ou qu’un style est modifié. La page n’est donc plus préparée à la demande du navigateur ; le travail s’effectue en amont !

Le réseau de diffusion de contenu (Ou CDN pour Content Delivery Network)

Au commencement du web, choisir un hébergeur allait de pair avec la sélection d’une localisation physique. En effet, l’hébergeur standard disposait d’un local dans lequel il entreposait ses serveurs. En d’autres termes, un data center.

Avec le temps, ceux-ci ont pris un essor considérable. Lorsque le local arrivait à saturation, il fallait en installer un second, puis d’autres. Du point de vue sécuritaire, la disponibilité d’un second local n’est pas un luxe ; ne serait-ce que pour répliquer ses serveurs au cas où une catastrophe venait à toucher l’une ou l’autre partie de l’infrastructure.

Puis la machine s’est emballée ; climatisations, systèmes de refroidissement, filtres à air, systèmes de surveillance, alimentations de secours… les data centers sont devenus de véritables joyaux technologiques, et surtout ils se sont multipliés à travers la planète, consommant au passage d’astronomiques quantités d’électricité.

Le réseau de diffusion proposé par Google comprend plus de 80 sites physiques. Celui d’Akamai, l’un des pionniers du domaine, est réparti sur 120 pays !

Même si l’information circule à la vitesse de la lumière, dans cette course à la performance, il est désormais devenu essentiel de disposer le contenu au plus proche de l’utilisateur. C’est là que réside la force du réseau de diffusion ; que l’internaute soit à Lausanne, Buenos Aires ou Singapour, il vivra la même expérience en termes de temps de chargement, et avec une disponibilité sans faille !

Le déploiement continu

En réalité les trois points ci-dessus sont intimement liés. Dans notre cas, pas de site statique sans service de contenu, et sans site statique, il reste difficile de trouver un réseau de diffusion qui supporte le socle technologique requis (base de données, langages côté serveur).

D’ailleurs le service d’hébergement va bien plus loin qu’un simple système de stockage distribué. Il accepte d’être notifié par le service de contenu, à chaque modification, aussi minime soit-elle. Le cas échéant, il relance la procédure de fabrication des pages aussi souvent que nécessaire et peut, au besoin, déployer en permanence une nouvelle version complète du site, sur les différents points du réseau de diffusion. Il offre également des techniques très simple pour revenir vers l’une ou l’autre des versions antérieures.

A partir de là il n’y a plus lieu de mettre son site “en maintenance”; tant que la nouvelle version n’est pas déployée, c’est l’ancienne qui répond.

Et après ?

Et bien les jeux sont loin d’être terminés, car le web nous réserve d’ores et déjà de nombreux challenges à relever pour le futur !

D’abord, dans la série technico-classique, toute une série de bonnes pratiques d’optimisation doivent être mises en œuvre ; proposer une méthode de compression d’images aux éditeurs, réduire le nombre et la taille des feuilles de style et des scripts, reporter le chargement des composants qui ralentissent l’affichage, etc.

Ensuite, il y a la voie du « web pervasif » ; un web ubiquiste, omniprésent, diffus ou ambiant. Celui qui est partout, tout le temps, et qui maximise, avec « conscience », l’expérience vécue par les utilisateurs qu’il « accompagne ». En effet, dès lors que tout le monde a bien admis que le contenu devait s’adapter à la taille de l’écran, il faut désormais songer à l’adapter à l’utilisateur et à son contexte d’utilisation (…).

Enfin, sur le plan des grandes tendances, les pistes à suivre ne manquent pas – intelligences artificielles, agents conversationnels, réalités virtuelles ou augmentées, web des données ou internet des objets, etc. – même s’il est un peu tôt pour les adopter. En attendant la course continue, à un rythme effréné !

Adrien Bigler, Loïc Fürhoff, Daniel Rappo

Media Engineering Institute, HEIG-VD
Yverdon-les-Bains, le 20 avril 2017

Avec les contributions de:

Adrien Bigler, Loïc Fürhoff, Simon Oulevay, Sandrine Divorne, Mélanie Da Cunha, Ananda Roubian (HEIG-VD).
Cayan Frey, Mathieu Croset, Quentin de Lattre (Creatives SA).

Jekyll (génération des pages), Contentful (CMS Headless), Netlify (CDN) et Github (déploiement continu).